<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>I will do a video tut on this topic soon.</div><div><br class="webkit-block-placeholder"></div><div>My hope with Go was that the tween layer would typically stay OO in nature, then people could build custom parsers to do Fuse syntax, XML syntax or anything custom. Well, I gave it a shot and it worked just fine! Having labored so long over Fuse myself, it was a little shocking how easy this was.</div><div><div><br class="webkit-block-placeholder"></div><div>First, I made a general multiple-property tween class that I called BlockTweenMG. It has a method setProperty(name:String, value:Number) and the constructor simply accepts two arrays like zigoengine used to: (target:Object=null, props:Array=null, endVals:Array=null...). It's versatile enough to start with, although it doesn't support filters or other fanciness.</div><div><br class="webkit-block-placeholder"></div><div>Next I created a parser class that I called BlockParserMG with a static method called go() and one called sequence(), pluse one private static method parseAction() that parses a generic fuse object and returns a new BlockTweenMG. </div><div><br class="webkit-block-placeholder"></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span style="color: #7f0055">public</span> <span style="color: #7f0055">static</span> <span style="color: #7f0055">function</span> go(action:<span style="color: #373737">Object</span>): BlockTweenMG {</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span style=""> </span><span style="color: #7f0055">var</span> tween:BlockTweenMG = parseAction(action);</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> tween.start();</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span style=""> </span><span style="color: #7f0055">return</span> tween;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; ">}</div><div><font class="Apple-style-span" face="Monaco" size="3"><span class="Apple-style-span" style="font-size: 11px;"><br class="webkit-block-placeholder"></span></font></div>
</div><div>While go() just parses & starts one tween, sequence() will parse any number of actions using an open input (...actions). It was easy to make it support arrays of objects for parallel tweens like in Fuse. It builds & returns a SequenceCA instance. </div><div><br class="webkit-block-placeholder"></div><div>parseAction() is amazingly lightweight. It makes the tween and loops through the properties of the object. It goes, if (tween.hasOwnProperty(prop)) then set the prop on the tween... this takes care of all the basic tween props: delay, duration, easing, etc. Otherwise assume it's a tween prop and use the addProperty() method on the tween instance. This was all simply too easy, so I threw in one bit of fanciness. Go's SequenceCA class supports Custom-Advance options for sequencing so I added a conditional to look for the property 'advance' and set it to the current SequenceStepCA.</div><div><br class="webkit-block-placeholder"></div><div>I ran this sequence and voila, it worked without a hitch!</div><div><br class="webkit-block-placeholder"></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span style="color: #7f0055">var</span> targ:Sprite = addSquareSprite();</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; ">BlockParserMG.sequence({ target: targ,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> x:200,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> scaleX:5,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> duration:2,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> // custom-advance before the action completes:</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> advance: <span style="color: #7f0055">new</span> OnDurationComplete(.5)</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> },</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><br class="webkit-block-placeholder"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> // a parallel-action array<br class="webkit-block-placeholder"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> [{ target: targ,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> y:200,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> scaleY:5,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> duration:1.5,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> easing:Back.easeOut</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> },</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> { target: targ,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> rotation:180,</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> easing:Back.easeInOut</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>}]);</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><br class="webkit-block-placeholder"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "><div>I'll have a tutorial up soon on this, but don't wait... Try this at home! </div><div><br class="webkit-block-placeholder"></div><div>If you're not into Fuse syntax, try inventing your own XML syntax for condensing animation code, or surprise us with something totally new.</div><div><br class="webkit-block-placeholder"></div><div>:)</div><div><br class="webkit-block-placeholder"></div><div>- m</div><div><br class="webkit-block-placeholder"></div><div><br class="webkit-block-placeholder"></div></span></div></div></div></body></html>