Wow this is awesome. This is the power of Flex(JS)! I'm going to have to find time to play more with this.
Thanks for working on this, Peter! Regards, Om On Thu, May 5, 2016 at 8:07 AM, Peter Ent <[email protected]> wrote: > Hi, > > I have updated the FlexJS CreateJS framework so that things like the > Tweens can be declared in MXML using the fx:Declarations tag. For example, > what was once in the Script block is now in MXML: > > <fx:Declarations> > <cjs:Sequence id="seq" target="circle" loop="true"> > <cjs:Tween id="tween1" target="circle" xTo="400" duration="1000" > easing="{Ease.getPowInOut(4)}" /> > <cjs:Tween id="tween2" target="circle" alphaTo="0" yTo="175" > duration="500" easing="{Ease.getPowInOut(2)}" /> > <cjs:Tween id="tween3" target="circle" alphaTo="0" yTo="225" > duration="100" /> > <cjs:Tween id="tween4" target="circle" alphaTo="1" yTo="200" > duration="500" easing="{Ease.getPowInOut(2)}" /> > <cjs:Tween id="tween5" target="circle" xTo="100" duration="800" > easing="{Ease.getPowInOut(2)}" /> > </cjs:Sequence> > </fx:Declarations> > > > It even uses data binding to specify easing functions. Now all the Script > does is trigger the sequence to play. > > Enjoy! > > Peter Ent > Adobe Systems/Apache Flex Project > > On 4/27/16, 3:50 PM, "Peter Ent" <[email protected]> wrote: > > >I'm working on that - in order to create the Tween I need access to the > >actual CreateJS element stored within the FlexJS component. In other > >words, "circle.element". In an HTML-based FlexJS app, you can do something > >like document[target] to look it up. Within the Tween code, for example, > >there is no access to the CreateJS Stage where you would find the element > >by its name. So I have to pass in something that can be used to get to the > >stage. So I just left it as ActionScript only for the moment. > > > >I also thought the write-up on the Wiki was a good comparison, but I am > >guessing you want to approach it from a different perspective; I'll see > >what I can do. > > > >—peter > > > >On 4/27/16, 3:22 PM, "[email protected] on behalf of OmPrakash Muppirala" > ><[email protected] on behalf of [email protected]> wrote: > > > >>Thanks for the great writeup, Peter! > >> > >>I was wondering if we can write: > >> > >><createjs:Tween id="move1" target="circle" xTo="400" duration="1000" /> > >> > >>instead of: > >> > >> var move1:Tween = new Tween(circle); > >> move1.xTo = 400; > >> move1.duration = 1000; > >> > >>That would make it much more concise and easy to follow. > >> > >>Thanks, > >>Om > >> > >>On Wed, Apr 27, 2016 at 12:17 PM, Alex Harui <[email protected]> wrote: > >>> > >>> Thanks for writing this up. > >>> > >>> I'm wondering if you could also, on a separate page, write about how to > >>> use CreateJS with FlexJS in a format that more closely mirrors the > >>>Getting > >>> Started article. I think it might better illustrate that with FlexJS, > >>>you > >>> can get started with fewer steps. In theory it would have fewer code > >>> blocks since MXML encapsulates that code. > >>> > >>> Thanks, > >>> -Alex > >>> > >>> On 4/27/16, 11:47 AM, "Peter Ent" <[email protected]> wrote: > >>> > >>> >Here is the link to the Wiki page about it. I included the original > >>> >CreateJS demo code[2] from their "Getting Started" section and the > >>>code > >>> >from the FlexJS CreateJS framework example with a bit of an > >>>explanation. > >>> > > >>> >‹peter > >>> > > >>> >[1] > >>> > > >> > https://cwiki.apache.org/confluence/display/FLEX/Using+CreateJS+with+Flex > >>J > >>> >S > >>> ># > >>> >[2] http://www.createjs.com/getting-started/easeljs > >>> > > >>> >On 4/27/16, 12:31 PM, "Peter Ent" <[email protected]> wrote: > >>> > > >>> >>Hi, > >>> >> > >>> >>Today I finished the project of incorporating CreateJS (EaselJS and > >>> >>TweenJS) into FlexJS. The FlexJS framework, CreateJS, contains a > >>>handful > >>> >>of ActionScript classes that can be cross-compiled into JavaScript > >>>and > >>> >>product CreateJS objects. Along with this there is an example in the > >>> >>FlexJS download to illustrate how to use CreateJS. I took two of the > >>> >>basic CreateJS examples - one which draws a circle using EaselJS and > >>> >>another that animates the circle using TweenJS - and combined them > >>>into > >>a > >>> >>single short example. > >>> >> > >>> >>Watch for a page about it in the FlexJS Wiki. > >>> >> > >>> >>Peter Ent > >>> >>Adobe Systems/Apache Flex Project > >>> >> > >>> > > >>> > > > >
