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" <p...@adobe.com> 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, "omup...@gmail.com on behalf of OmPrakash Muppirala"
><omup...@gmail.com on behalf of bigosma...@gmail.com> 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 <aha...@adobe.com> 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" <p...@adobe.com> 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" <p...@adobe.com> 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
>>> >>
>>> >
>>>
>
