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/04/27 18:31:59 UTC
[FlexJS] Using CreateJS with FlexJS
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 Alex Harui <ah...@adobe.com>.
On 4/27/16, 2:00 PM, "Harbs" <ha...@gmail.com> wrote:
>How common is it to have an application which is only a Canvas? Would a
>more realistic demo be to have an application where CreateJS is one piece
>of it?
Volunteers are welcome to work on that. IMO, the goal of what Peter did
was to provide an easy-to-see comparison, so the goal was to produce the
same demo, which is all-CreateJS.
-Alex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Harbs <ha...@gmail.com>.
How common is it to have an application which is only a Canvas? Would a more realistic demo be to have an application where CreateJS is one piece of it?
On Apr 27, 2016, at 11:57 PM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 4/27/16, 12: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.
>
> The original CreateJS example looks like it passes in a reference to the
> circle. So I would think the org.apache.flex.createjs.Tween wrapper code
> would take the org.apache.flex.createjs.Circle and pass its element on to
> the wrapped Tween instance. I'm not sure how CreateJS Tween code finds the
> stage, but the org.apache.flex.createjs.Application should make the stage
> available somehow.
>
> HTH,
> -Alex
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 4/27/16, 12: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.
The original CreateJS example looks like it passes in a reference to the
circle. So I would think the org.apache.flex.createjs.Tween wrapper code
would take the org.apache.flex.createjs.Circle and pass its element on to
the wrapped Tween instance. I'm not sure how CreateJS Tween code finds the
stage, but the org.apache.flex.createjs.Application should make the stage
available somehow.
HTH,
-Alex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 4/27/16, 12: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.
The original CreateJS example looks like it passes in a reference to the
circle. So I would think the org.apache.flex.createjs.Tween wrapper code
would take the org.apache.flex.createjs.Circle and pass its element on to
the wrapped Tween instance. I'm not sure how CreateJS Tween code finds the
stage, but the org.apache.flex.createjs.Application should make the stage
available somehow.
HTH,
-Alex
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
> >>> >>
> >>> >
> >>>
> >
>
>
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Peter Ent <pe...@adobe.com>.
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 Alex Harui <ah...@adobe.com>.
Moving back to dev@...
On 4/27/16, 1:56 PM, "Harbs" <ha...@gmail.com> wrote:
>I will probably make a post about this on Facebook in the beginning of
>next week. (Unless someone else gets to it first.) I posted yesterday
>about Node.js support, and that post already has almost double the reach
>of any previous post (and counting).[1]
>
>It will be interesting to see how popular a post about CreateJS will be.
>
>I think that lots of posts about integrating existing popular frameworks
>will help hype FlexJS.
I'd like Peter to tweak the article a bit more before we make noise about
it, but yes, I think there is potential where we show our tool chain can
make learning and using any MXML-enabled JS framework more productive. It
would be awesome if some other major UI framework vendors enabled their
components to use MXML and our tool chain. Does anybody have good
connections with the CreateJS or other communities? Does anybody want to
take on doing a similar thing for other frameworks? If you go look at
the "Getting Started" posts for things like Cordova, React, JqueryUI, and
think about how they would look in MXML, it seems really appealing. It
would be great of others on this mailing list could volunteer to try to
write code similar to what Peter did for these other frameworks and create
the wiki article that shows how much simpler we can make things. We
already have a lot of stuff written for Cordova already, and some
beginnings for Jquery UI.
That said, there is still considerable interest in the migration of
existing Flex code bases, so I am going to continue to focus on that
(after we get Maven up and running, which is sort of related to attracting
owners of existing Flex code bases.
Thanks,
-Alex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Harbs <ha...@gmail.com>.
I will probably make a post about this on Facebook in the beginning of next week. (Unless someone else gets to it first.) I posted yesterday about Node.js support, and that post already has almost double the reach of any previous post (and counting).[1]
It will be interesting to see how popular a post about CreateJS will be.
I think that lots of posts about integrating existing popular frameworks will help hype FlexJS.
[1]https://www.facebook.com/ApacheFlexSDK/posts/784731684961110
On Apr 27, 2016, at 11:48 PM, Alex Harui <ah...@adobe.com> wrote:
> Thanks. I think that better illustrates that there are fewer steps to
> getting started, which I hope will be attractive to 3rd party framework
> communities.
Re: [FlexJS] Using CreateJS with FlexJS
Posted by Alex Harui <ah...@adobe.com>.
On 4/27/16, 1:30 PM, "Peter Ent" <pe...@adobe.com> wrote:
>I added a new beginning to the Wiki article that walks through creating
>the same demos followed by the comparison.
Thanks. I think that better illustrates that there are fewer steps to
getting started, which I hope will be attractive to 3rd party framework
communities.
If you have time, it might be better to write up the FlexJS steps from a
command-line perspective. I don't think folks will get an IDE to first
get started. I'm not quite sure how to illustrate it in words, but I
think it might be something like:
1. Create a new file called Demo.mxml.
2. Paste the following CreateJS Application template (and I would include
the View tag in the template).
3. Insert Circle tag inside the View tag
4. Compile and open bin/js-debug/index.html in a browser.
We could even collapse 1 & 2 by posting the template on our site for
downloading.
Thanks,
-Alex
>
>—peter
>
>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+Fle
>>>x
>>>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 Peter Ent <pe...@adobe.com>.
I added a new beginning to the Wiki article that walks through creating
the same demos followed by the comparison.
—peter
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 Peter Ent <pe...@adobe.com>.
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 Peter Ent <pe...@adobe.com>.
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+FlexJ
>> >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 Peter Ent <pe...@adobe.com>.
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+FlexJ
>> >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>.
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+FlexJ
> >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>.
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+FlexJ
> >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 Alex Harui <ah...@adobe.com>.
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+FlexJ
>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 Alex Harui <ah...@adobe.com>.
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+FlexJ
>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 Peter Ent <pe...@adobe.com>.
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+FlexJS
#
[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 Andrew Wetmore <co...@gmail.com>.
Cool!
On Apr 27, 2016 12:32 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 Peter Ent <pe...@adobe.com>.
Thanks. Just fixed it.
‹peter
On 5/12/16, 3:47 PM, "OK" <OK...@edscha.com> wrote:
>I just found an error in the "FlexJS, TweenJS Demo" code:
>
><cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:local="*"
> xmlns:js="library://ns.apache.org/flexjs/basic"
> xmlns:cjs="library://ns.apache.org/flexjs/createjs"
> applicationComplete="runEffect()"
> >
>
>Seems that "runEffect()" should be replaced by "seq.play()".
>
>Thanks,
>Olaf.
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS
>-with-FlexJS-tp52630p53015.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>.
I just found an error in the "FlexJS, TweenJS Demo" code:
<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:cjs="library://ns.apache.org/flexjs/createjs"
applicationComplete="runEffect()"
>
Seems that "runEffect()" should be replaced by "seq.play()".
Thanks,
Olaf.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS-with-FlexJS-tp52630p53015.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>.
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+FlexJS
#
[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 Alex Harui <ah...@adobe.com>.
Cool!
On 4/27/16, 9:31 AM, "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 Alex Harui <ah...@adobe.com>.
On 4/28/16, 1:28 AM, "OK" <OK...@edscha.com> wrote:
>Could this kind of implementation considered as a common way to integrate
>JS
>Frameworks within FlexJS?
IMO, yes, one of two common workflows. At the San Francisco FlexJS World
Tour event, I talked about the "SWF-first" vs "No-SWF" workflows. Both
are valid and will be supported by FlexJS. Peter's example is about a
CreateJS SWC designed for the "SWF-first" workflow. It is also possible
to build a CreateJS SWC just for "No-SWF" workflows. The externs
"createjs.swc" is essentially, that, but it isn't MXML-enabled. We are
looking for a volunteer to MXML-enable a JS framework for "No-SWF"
workflows.
I still believe that while the "SWF-first" SWCs are more work to make,
they will become the ones used by folks doing large projects as it allows
you to use the Flash runtime verifier to help test your code.
Thanks,
-Alex
Re: [FlexJS] Using CreateJS with FlexJS
Posted by OK <OK...@edscha.com>.
>Today I finished the project of incorporating CreateJS (EaselJS and TweenJS)
into FlexJS.
This sounds great! I've just read your article and looking forward to check
it out by myself.
Quote from your wiki article:
>If you look at the flex-asjs repository, specifically the
frameworks/projects/CreateJS directory, you'll see
>how the FlexJS wrapper classes are composed.
Could this kind of implementation considered as a common way to integrate JS
Frameworks within FlexJS?
Thanks,
Olaf
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Using-CreateJS-with-FlexJS-tp52630p52644.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>.
Cool!
On 4/27/16, 9:31 AM, "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
>