You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Peter Ent <pe...@adobe.com> on 2016/05/05 15:07:12 UTC
Re: [FlexJS] Using CreateJS with FlexJS
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" <pe...@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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
><omuppi1@gmail.com on behalf of bigosmallm@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 <ah...@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" <pe...@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" <pe...@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
>>> >>
>>> >
>>>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Harbs <ha...@gmail.com>.
You could conceivably have more than one Create.js canvas in an application. (Very likely in fact.)
For example, I have an (Angular) app which uses Easel.js for positioning and cropping of images. This is within a popup window. Easel.js could easily be used elsewhere in the app for other purposes.
I think we need a CreateJSCanvas (or something similar) which could be included in an app.
There also needs to be the ability to size it, position it relative to other elements, etc.
On May 12, 2016, at 5:48 PM, Peter Ent <pe...@adobe.com> wrote:
> I have thought about that and we might have a <cjs:CreateJS> element that
> was a Canvas and then its children could be the same things you would be
> into a <cjs:View>. I think it is a possibility.
>
> And now that I've written that statement, a thought occurs me: What if
> cjs:Application did not create a Canvas and CreateJS Stage, but instead
> extended core.Application for the only purpose of injecting the HTML
> needed to load in CreateJS and TweenJS JavaScript? THEN, eliminate
> cjs:View altogether and just had cjs:CreateJS so you could put the
> CreateJS anywhere you wanted in your HTML document. Makes me think, "HmmmŠ"
>
> <cjs:Application Š> <!‹ just to get the CreateJS.js and TweenJS.js code
> injected into index.html ‹>
> <js:initialView>
> <js:ViewBase>
> <!‹- put FlexJS Basic components here ‹>
> <cjs:CreateJS>
> <!‹ put CreateJS stuff here ‹>
> </cjs:CreateJS>
> </js:ViewBase>
> </js:initialView>
> </cjs:Application>
>
> Further thoughts? Not 100% sure it is possible, but seems likely.
>
> Peter Ent
> Adobe Systems/Apache Flex Project
>
> On 5/12/16, 9:46 AM, "OK" <OK...@edscha.com> wrote:
>
>> From the wiki page:
>>
>> "...The FlexJS CreateJS Application tag creates the HTML5 Canvas
>> automatically...
>> Components from the FlexJS Basic framework cannot be used with components
>> from the
>> FlexJS CreateJS framework...."
>>
>> I understand that there's no way to place FlexJS HTML components on the
>> Canvas but I wonder how we could embed a "FlexJS CreateJS Canvas" inside a
>> FlexJS app.
>>
>> Thanks,
>> Olaf
>>
>>
>>
>>
>>
>> --
>> View this message in context:
>> http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS
>> -with-FlexJS-tp52630p53000.html
>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 5/12/16, 8:05 AM, "Harbs" <ha...@gmail.com> wrote:
>True. But making it useful in real-life projects will make people want to
>use it.
>
>I’m not saying Peter needs to be the one to do it, but I think it needs
>to be done for CreateJS to be useful in production.
Definitely we should have such a thing. I guess I wasn't clear. I was
trying to point out that the View that Peter did for these demos is likely
to be much simpler than a component that creates the Canvas in a "mixed
world" app.
-Alex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Harbs <ha...@gmail.com>.
True. But making it useful in real-life projects will make people want to use it.
I’m not saying Peter needs to be the one to do it, but I think it needs to be done for CreateJS to be useful in production.
On May 12, 2016, at 5:58 PM, Alex Harui <ah...@adobe.com> wrote:
> IMO, the point of what we did was to directly mimic their "Getting
> Started" examples with as little code as possible.
>
> Mixing worlds is likely to be quite a bit of work, but volunteers are
> welcome to tackle it. There can be issues around focus management, hit
> detection, etc.
>
> -Alex
>
> On 5/12/16, 7:48 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
>> I have thought about that and we might have a <cjs:CreateJS> element that
>> was a Canvas and then its children could be the same things you would be
>> into a <cjs:View>. I think it is a possibility.
>>
>> And now that I've written that statement, a thought occurs me: What if
>> cjs:Application did not create a Canvas and CreateJS Stage, but instead
>> extended core.Application for the only purpose of injecting the HTML
>> needed to load in CreateJS and TweenJS JavaScript? THEN, eliminate
>> cjs:View altogether and just had cjs:CreateJS so you could put the
>> CreateJS anywhere you wanted in your HTML document. Makes me think,
>> "HmmmŠ"
>>
>> <cjs:Application Š> <!‹ just to get the CreateJS.js and TweenJS.js code
>> injected into index.html ‹>
>> <js:initialView>
>> <js:ViewBase>
>> <!‹- put FlexJS Basic components here ‹>
>> <cjs:CreateJS>
>> <!‹ put CreateJS stuff here ‹>
>> </cjs:CreateJS>
>> </js:ViewBase>
>> </js:initialView>
>> </cjs:Application>
>>
>> Further thoughts? Not 100% sure it is possible, but seems likely.
>>
>> Peter Ent
>> Adobe Systems/Apache Flex Project
>>
>> On 5/12/16, 9:46 AM, "OK" <OK...@edscha.com> wrote:
>>
>>> From the wiki page:
>>>
>>> "...The FlexJS CreateJS Application tag creates the HTML5 Canvas
>>> automatically...
>>> Components from the FlexJS Basic framework cannot be used with components
>>> from the
>>> FlexJS CreateJS framework...."
>>>
>>> I understand that there's no way to place FlexJS HTML components on the
>>> Canvas but I wonder how we could embed a "FlexJS CreateJS Canvas" inside
>>> a
>>> FlexJS app.
>>>
>>> Thanks,
>>> Olaf
>>>
>>>
>>>
>>>
>>>
>>> --
>>> View this message in context:
>>> http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJ
>>> S
>>> -with-FlexJS-tp52630p53000.html
>>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
IMO, the point of what we did was to directly mimic their "Getting
Started" examples with as little code as possible.
Mixing worlds is likely to be quite a bit of work, but volunteers are
welcome to tackle it. There can be issues around focus management, hit
detection, etc.
-Alex
On 5/12/16, 7:48 AM, "Peter Ent" <pe...@adobe.com> wrote:
>I have thought about that and we might have a <cjs:CreateJS> element that
>was a Canvas and then its children could be the same things you would be
>into a <cjs:View>. I think it is a possibility.
>
>And now that I've written that statement, a thought occurs me: What if
>cjs:Application did not create a Canvas and CreateJS Stage, but instead
>extended core.Application for the only purpose of injecting the HTML
>needed to load in CreateJS and TweenJS JavaScript? THEN, eliminate
>cjs:View altogether and just had cjs:CreateJS so you could put the
>CreateJS anywhere you wanted in your HTML document. Makes me think,
>"HmmmŠ"
>
><cjs:Application Š> <!‹ just to get the CreateJS.js and TweenJS.js code
>injected into index.html ‹>
> <js:initialView>
> <js:ViewBase>
> <!‹- put FlexJS Basic components here ‹>
> <cjs:CreateJS>
> <!‹ put CreateJS stuff here ‹>
> </cjs:CreateJS>
> </js:ViewBase>
> </js:initialView>
></cjs:Application>
>
>Further thoughts? Not 100% sure it is possible, but seems likely.
>
>Peter Ent
>Adobe Systems/Apache Flex Project
>
>On 5/12/16, 9:46 AM, "OK" <OK...@edscha.com> wrote:
>
>>From the wiki page:
>>
>>"...The FlexJS CreateJS Application tag creates the HTML5 Canvas
>>automatically...
>>Components from the FlexJS Basic framework cannot be used with components
>>from the
>>FlexJS CreateJS framework...."
>>
>>I understand that there's no way to place FlexJS HTML components on the
>>Canvas but I wonder how we could embed a "FlexJS CreateJS Canvas" inside
>>a
>>FlexJS app.
>>
>>Thanks,
>>Olaf
>>
>>
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJ
>>S
>>-with-FlexJS-tp52630p53000.html
>>Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Peter Ent <pe...@adobe.com>.
I have thought about that and we might have a <cjs:CreateJS> element that
was a Canvas and then its children could be the same things you would be
into a <cjs:View>. I think it is a possibility.
And now that I've written that statement, a thought occurs me: What if
cjs:Application did not create a Canvas and CreateJS Stage, but instead
extended core.Application for the only purpose of injecting the HTML
needed to load in CreateJS and TweenJS JavaScript? THEN, eliminate
cjs:View altogether and just had cjs:CreateJS so you could put the
CreateJS anywhere you wanted in your HTML document. Makes me think, "HmmmŠ"
<cjs:Application Š> <!‹ just to get the CreateJS.js and TweenJS.js code
injected into index.html ‹>
<js:initialView>
<js:ViewBase>
<!‹- put FlexJS Basic components here ‹>
<cjs:CreateJS>
<!‹ put CreateJS stuff here ‹>
</cjs:CreateJS>
</js:ViewBase>
</js:initialView>
</cjs:Application>
Further thoughts? Not 100% sure it is possible, but seems likely.
Peter Ent
Adobe Systems/Apache Flex Project
On 5/12/16, 9:46 AM, "OK" <OK...@edscha.com> wrote:
>From the wiki page:
>
>"...The FlexJS CreateJS Application tag creates the HTML5 Canvas
>automatically...
>Components from the FlexJS Basic framework cannot be used with components
>from the
>FlexJS CreateJS framework...."
>
>I understand that there's no way to place FlexJS HTML components on the
>Canvas but I wonder how we could embed a "FlexJS CreateJS Canvas" inside a
>FlexJS app.
>
>Thanks,
>Olaf
>
>
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS
>-with-FlexJS-tp52630p53000.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] Using CreateJS with FlexJS
Posted by OK <OK...@edscha.com>.
From the wiki page:
"...The FlexJS CreateJS Application tag creates the HTML5 Canvas
automatically...
Components from the FlexJS Basic framework cannot be used with components
from the
FlexJS CreateJS framework...."
I understand that there's no way to place FlexJS HTML components on the
Canvas but I wonder how we could embed a "FlexJS CreateJS Canvas" inside a
FlexJS app.
Thanks,
Olaf
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS-with-FlexJS-tp52630p53000.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Peter Ent <pe...@adobe.com>.
Hi,
I've tuned the Wiki page on FlexJS CreateJS and refined the example even
further so you really get a sense of how you can build CreateJS
application using MXML. In the Wiki page, I've emphasized the benefits of
using ActionScript and MXML over JavaScript, so hopefully that will give
CreateJS developers a reason to check out FlexJS.
Regards,
Peter
On 5/5/16, 12:50 PM, "Alex Harui" <ah...@adobe.com> wrote:
>
>
>On 5/5/16, 8:51 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
><omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
>>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!
>
>Yes, this is a great illustration of how FlexJS may make using any JS
>framework easier and more productive. I want to ask the folks on these
>mailing lists to review the wiki article about this example [1] and help
>us fine tune the article so it most clearly communicates that the CreateJS
>community should get involved in getting FlexJS to work for all of
>CreateJS because it will make their customers more productive.
>
>And once we've polished this article, are there any volunteers with ties
>to the CreateJS community that wants to introduce FlexJS to them? Also,
>are there volunteers who are avid users of other JS frameworks that want
>to help us do the same for those JS frameworks? I think Peter is going to
>try to do the same thing he just did for the Cordova getting started
>articles.
>
>Thanks,
>-Alex
>
>[1]
>https://cwiki.apache.org/confluence/display/FLEX/Using+CreateJS+with+Flex
>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Peter Ent <pe...@adobe.com>.
Hi,
I've tuned the Wiki page on FlexJS CreateJS and refined the example even
further so you really get a sense of how you can build CreateJS
application using MXML. In the Wiki page, I've emphasized the benefits of
using ActionScript and MXML over JavaScript, so hopefully that will give
CreateJS developers a reason to check out FlexJS.
Regards,
Peter
On 5/5/16, 12:50 PM, "Alex Harui" <ah...@adobe.com> wrote:
>
>
>On 5/5/16, 8:51 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
><omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
>>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!
>
>Yes, this is a great illustration of how FlexJS may make using any JS
>framework easier and more productive. I want to ask the folks on these
>mailing lists to review the wiki article about this example [1] and help
>us fine tune the article so it most clearly communicates that the CreateJS
>community should get involved in getting FlexJS to work for all of
>CreateJS because it will make their customers more productive.
>
>And once we've polished this article, are there any volunteers with ties
>to the CreateJS community that wants to introduce FlexJS to them? Also,
>are there volunteers who are avid users of other JS frameworks that want
>to help us do the same for those JS frameworks? I think Peter is going to
>try to do the same thing he just did for the Cordova getting started
>articles.
>
>Thanks,
>-Alex
>
>[1]
>https://cwiki.apache.org/confluence/display/FLEX/Using+CreateJS+with+Flex
>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 5/5/16, 8:51 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>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!
Yes, this is a great illustration of how FlexJS may make using any JS
framework easier and more productive. I want to ask the folks on these
mailing lists to review the wiki article about this example [1] and help
us fine tune the article so it most clearly communicates that the CreateJS
community should get involved in getting FlexJS to work for all of
CreateJS because it will make their customers more productive.
And once we've polished this article, are there any volunteers with ties
to the CreateJS community that wants to introduce FlexJS to them? Also,
are there volunteers who are avid users of other JS frameworks that want
to help us do the same for those JS frameworks? I think Peter is going to
try to do the same thing he just did for the Cordova getting started
articles.
Thanks,
-Alex
[1]
https://cwiki.apache.org/confluence/display/FLEX/Using+CreateJS+with+Flex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 5/5/16, 8:51 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>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!
Yes, this is a great illustration of how FlexJS may make using any JS
framework easier and more productive. I want to ask the folks on these
mailing lists to review the wiki article about this example [1] and help
us fine tune the article so it most clearly communicates that the CreateJS
community should get involved in getting FlexJS to work for all of
CreateJS because it will make their customers more productive.
And once we've polished this article, are there any volunteers with ties
to the CreateJS community that wants to introduce FlexJS to them? Also,
are there volunteers who are avid users of other JS frameworks that want
to help us do the same for those JS frameworks? I think Peter is going to
try to do the same thing he just did for the Cordova getting started
articles.
Thanks,
-Alex
[1]
https://cwiki.apache.org/confluence/display/FLEX/Using+CreateJS+with+Flex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by OmPrakash Muppirala <bi...@gmail.com>.
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 <pe...@adobe.com> 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" <pe...@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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> ><omuppi1@gmail.com on behalf of bigosmallm@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 <ah...@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" <pe...@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" <pe...@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
> >>> >>
> >>> >
> >>>
> >
>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by OmPrakash Muppirala <bi...@gmail.com>.
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 <pe...@adobe.com> 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" <pe...@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, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> ><omuppi1@gmail.com on behalf of bigosmallm@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 <ah...@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" <pe...@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" <pe...@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
> >>> >>
> >>> >
> >>>
> >
>
>