Simultaneously developing an application in HTML5 and Flash?

classic Classic list List threaded Threaded
17 messages Options
Reply | Threaded
Open this post in threaded view
|

Simultaneously developing an application in HTML5 and Flash?

Erik Williams
Hello everyone,

I am interested in learning if it might be possible to simultaneously
develop an application so it compiles both to HTML5/Javascript and to
Flash/AS3, by wrapping respective and necessary portions of each API in
HaXe, to work as the framework of the application.

What I want to know is if it should be possible to wrap as much of the
flash API as needed and then also implement them in HTML5/HaXe so that
the greater portion of my code can be preserved? Namely, would it be
possible to implement a MovieClip object in HTML5/HaXe, probably making
use of the HTML5 canvas? (it does not need to be a complete
implementation) How could I get started on this, if it is possible? I
figure it'd be easy to wrap the Flash API but I am not sure if HaXe or
HTML5 for that matter are mature enough to implement these objects in
HTML5/Javascript.

Anyway, I'll describe a little bit about the project. This might be
mostly inconsequential so skip to the bottom if you feel like it!

We have been developing a flash application for a little while. It is an
illustrated learner's dictionary. In it, you can navigate to different
sections of the 'world', which are nested scenes; from the 'world' you
can navigate into 'nature', from 'nature' you can navigate into 'desert'
or 'farm', and you can see objects inside their environments, and open
up those objects to read their definitions or navigate into them if
there is another scene inside (such as, in 'farm', you can navigate into
'barn').

This is a kid-friendly educational environment. This was developed
entirely in Flash so far, but we think it would be a very good mobile
app, and have interest in developing it for the iPad as well. Of course,
I am sure everyone knows that Apple hates Flash. So we would like to
make an HTML5 version.

It is made almost entirely in FlashDevelop. Graphical assets are made in
CS4 and compiled into an .swc file; absolutely no AS3 is ued in the
graphical assets, aside from the basic MovieClip commands such as
stop();. These assets are then wrapped into their appropriate objects in
FlashDevelop. So the application is very cleanly divided between
graphical assets and the application itself. Also, it makes heavy use of
the flash event model to communicate between objects, using a heavily
reactive paradigm (user clicks on a button that changes the display, an
updateNow() call launches an event that bubbles down, it reaches the
base class, and an update() call bubbles back up any objects that need
to be updated).

I am not sure how useful that information is.

Anyway, that is it in a nutshell. I, for the record, am very new to HaXe
and I am not sure of its capabilities. I've been developing for Flash
for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I
have not yet had the opportunity to work with HTML5. I am mostly
researching to see of HaXe is capable of this sort of solution. I
understand that a -lot of people- are looking for ways to target both
the HTML5 and Flash platforms, and I am not sure if any satisfactory
solutions have been found yet, or how much HaXe has already been
considered for this role.

Thanks for your support,
Erik

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

jamesbjackson
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

jlm@justinfront.net
In reply to this post by Erik Williams
Erik

probably saying the same as James...

Your going to need to rethink your flash assets.  If you look at Jeash  
it may provide an easy path as it has MovieClips/Sprites, but you have  
to start rethinking structures and looking to go much lighter as a  
basic movieClip is quite a heavy object in jeash.

I think bubbling events in javascript would be a bit heavy, if you  
look at signals ( hsl / hxs or a cut down version ) and start  
compositing views then your control structures don't get tied to the  
display list and you won't need to bubble events up and down.  XAML  
uses event bubbling and it can be very heavy and overkill, I soon  
realised when doing this stuff in as2 it just made stuff complex and  
the problem is the eventdispatch inheritance you could easily get into  
structures that were too oop java like and inflexible to design  
changes, its about getting the granularity of oop correct for UI  
development.

In terms of assets you can use png's for images, if you want to  
animate them you have to create a sprite sheet and be aware it's going  
to be heavy.  Basic feffects tweening is fairly light and you can  
change the holder size so make use of that... nearest you get to a  
mask ( not sure if html5 has masks ).  I think that something like you  
are suggesting might be possible in pure haxe code as that is what I  
am experimenting with but probably not to your complexity, but the  
idea that you can create a structure and use it the same in javascript  
is not really going to happen... think doing it the other way round  
(like James said).

Javascript is like going back to flash4 (maybe the html5 bit helps...  
but I am not yet a convert ) but using haXe you atleast have a nice  
language to use with it, but don't expect miracles and you won't be  
disappointed.

Cheers

;j

On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to  
> simultaneously develop an application so it compiles both to HTML5/
> Javascript and to Flash/AS3, by wrapping respective and necessary  
> portions of each API in HaXe, to work as the framework of the  
> application.
>
> What I want to know is if it should be possible to wrap as much of  
> the flash API as needed and then also implement them in HTML5/HaXe  
> so that the greater portion of my code can be preserved? Namely,  
> would it be possible to implement a MovieClip object in HTML5/HaXe,  
> probably making use of the HTML5 canvas? (it does not need to be a  
> complete implementation) How could I get started on this, if it is  
> possible? I figure it'd be easy to wrap the Flash API but I am not  
> sure if HaXe or HTML5 for that matter are mature enough to implement  
> these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be  
> mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It  
> is an illustrated learner's dictionary. In it, you can navigate to  
> different sections of the 'world', which are nested scenes; from the  
> 'world' you can navigate into 'nature', from 'nature' you can  
> navigate into 'desert' or 'farm', and you can see objects inside  
> their environments, and open up those objects to read their  
> definitions or navigate into them if there is another scene inside  
> (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed  
> entirely in Flash so far, but we think it would be a very good  
> mobile app, and have interest in developing it for the iPad as well.  
> Of course, I am sure everyone knows that Apple hates Flash. So we  
> would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are  
> made in CS4 and compiled into an .swc file; absolutely no AS3 is ued  
> in the graphical assets, aside from the basic MovieClip commands  
> such as stop();. These assets are then wrapped into their  
> appropriate objects in FlashDevelop. So the application is very  
> cleanly divided between graphical assets and the application itself.  
> Also, it makes heavy use of the flash event model to communicate  
> between objects, using a heavily reactive paradigm (user clicks on a  
> button that changes the display, an updateNow() call launches an  
> event that bubbles down, it reaches the base class, and an update()  
> call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to  
> HaXe and I am not sure of its capabilities. I've been developing for  
> Flash for a long time and, to a much lesser extent, HTML/Javascript/
> PHP, but I have not yet had the opportunity to work with HTML5. I am  
> mostly researching to see of HaXe is capable of this sort of  
> solution. I understand that a -lot of people- are looking for ways  
> to target both the HTML5 and Flash platforms, and I am not sure if  
> any satisfactory solutions have been found yet, or how much HaXe has  
> already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

fintan boyle
In reply to this post by jamesbjackson
Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Erik Williams
In reply to this post by jlm@justinfront.net
Hey jlm,

I am really happy to see there already is a library for implementing the
flash API in HTML5/Javascript! That would save me a lot of time, thanks.
I understand I shouldn't expect miracles, so I won't. But it will at
least be something to get started.

I will keep in mind that there will probably be optimizations I need to
make. I optimized the code at least enough that it will not update
anything that doesn't absolutely need to be updated, and update events
usually only update just a few objects. The display tree is not really
terribly deep. There are probably other optimizations I need to make
such as how the tree background is drawn, but anyway, I'll keep the
suggestion in mind.

I probably do not need something as heavy as a movieclip, really; I
don't have any actual animations in any of my assets, only still
keyframes which I are entered when the display state changes.

Anyway this was a very helpful response, especially pointing me toward
the Jeash library, which seems like exactly the sort of thing I was
looking for. I'll look into that, and see what I can do :) I am sure to
ask more questions if I get stuck.

Thanks,
Erik

On 7/25/2011 10:34 AM, [hidden email] wrote:

> Erik
>
> probably saying the same as James...
>
> Your going to need to rethink your flash assets.  If you look at Jeash
> it may provide an easy path as it has MovieClips/Sprites, but you have
> to start rethinking structures and looking to go much lighter as a
> basic movieClip is quite a heavy object in jeash.
>
> I think bubbling events in javascript would be a bit heavy, if you
> look at signals ( hsl / hxs or a cut down version ) and start
> compositing views then your control structures don't get tied to the
> display list and you won't need to bubble events up and down.  XAML
> uses event bubbling and it can be very heavy and overkill, I soon
> realised when doing this stuff in as2 it just made stuff complex and
> the problem is the eventdispatch inheritance you could easily get into
> structures that were too oop java like and inflexible to design
> changes, its about getting the granularity of oop correct for UI
> development.
>
> In terms of assets you can use png's for images, if you want to
> animate them you have to create a sprite sheet and be aware it's going
> to be heavy.  Basic feffects tweening is fairly light and you can
> change the holder size so make use of that... nearest you get to a
> mask ( not sure if html5 has masks ).  I think that something like you
> are suggesting might be possible in pure haxe code as that is what I
> am experimenting with but probably not to your complexity, but the
> idea that you can create a structure and use it the same in javascript
> is not really going to happen... think doing it the other way round
> (like James said).
>
> Javascript is like going back to flash4 (maybe the html5 bit helps...
> but I am not yet a convert ) but using haXe you atleast have a nice
> language to use with it, but don't expect miracles and you won't be
> disappointed.
>
> Cheers
>
> ;j
>
> On 25 Jul 2011, at 15:08, Erik Williams wrote:
>
>> Hello everyone,
>>
>> I am interested in learning if it might be possible to simultaneously
>> develop an application so it compiles both to HTML5/Javascript and to
>> Flash/AS3, by wrapping respective and necessary portions of each API
>> in HaXe, to work as the framework of the application.
>>
>> What I want to know is if it should be possible to wrap as much of
>> the flash API as needed and then also implement them in HTML5/HaXe so
>> that the greater portion of my code can be preserved? Namely, would
>> it be possible to implement a MovieClip object in HTML5/HaXe,
>> probably making use of the HTML5 canvas? (it does not need to be a
>> complete implementation) How could I get started on this, if it is
>> possible? I figure it'd be easy to wrap the Flash API but I am not
>> sure if HaXe or HTML5 for that matter are mature enough to implement
>> these objects in HTML5/Javascript.
>>
>> Anyway, I'll describe a little bit about the project. This might be
>> mostly inconsequential so skip to the bottom if you feel like it!
>>
>> We have been developing a flash application for a little while. It is
>> an illustrated learner's dictionary. In it, you can navigate to
>> different sections of the 'world', which are nested scenes; from the
>> 'world' you can navigate into 'nature', from 'nature' you can
>> navigate into 'desert' or 'farm', and you can see objects inside
>> their environments, and open up those objects to read their
>> definitions or navigate into them if there is another scene inside
>> (such as, in 'farm', you can navigate into 'barn').
>>
>> This is a kid-friendly educational environment. This was developed
>> entirely in Flash so far, but we think it would be a very good mobile
>> app, and have interest in developing it for the iPad as well. Of
>> course, I am sure everyone knows that Apple hates Flash. So we would
>> like to make an HTML5 version.
>>
>> It is made almost entirely in FlashDevelop. Graphical assets are made
>> in CS4 and compiled into an .swc file; absolutely no AS3 is ued in
>> the graphical assets, aside from the basic MovieClip commands such as
>> stop();. These assets are then wrapped into their appropriate objects
>> in FlashDevelop. So the application is very cleanly divided between
>> graphical assets and the application itself. Also, it makes heavy use
>> of the flash event model to communicate between objects, using a
>> heavily reactive paradigm (user clicks on a button that changes the
>> display, an updateNow() call launches an event that bubbles down, it
>> reaches the base class, and an update() call bubbles back up any
>> objects that need to be updated).
>>
>> I am not sure how useful that information is.
>>
>> Anyway, that is it in a nutshell. I, for the record, am very new to
>> HaXe and I am not sure of its capabilities. I've been developing for
>> Flash for a long time and, to a much lesser extent,
>> HTML/Javascript/PHP, but I have not yet had the opportunity to work
>> with HTML5. I am mostly researching to see of HaXe is capable of this
>> sort of solution. I understand that a -lot of people- are looking for
>> ways to target both the HTML5 and Flash platforms, and I am not sure
>> if any satisfactory solutions have been found yet, or how much HaXe
>> has already been considered for this role.
>>
>> Thanks for your support,
>> Erik
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

jamesbjackson
In reply to this post by fintan boyle
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Erik Williams
In reply to this post by jamesbjackson
Hey James,

Thanks a lot for the advice. I have the flash already implemented and
while I have no doubt you are correct that ideally I should have started
developing for HTML5/Javascript first, I might have to go the opposite
direction now. I am going to keep your suggestions in mind; fortunately,
my assets are rather separated from the code, so I could easily change
how they are managed. Some things such as changing the bubbling event
model (as jlm had suggested) may be more difficult... we'll see how that
turns out :)

I have no bitmap artwork and would prefer to keep the graphics in svg
format but for performance reasons perhaps this is impractical.
Fortunately, I don't use the timeline in movieclips heavily; right now,
the application is using no tweens whatsoever, just a few keyframes for
switching between display states of objects. Since display assets are
quite decoupled from the code itself, it might not be difficult to
significantly change the way they are managed.

Thanks for the helpful reply, I'll try to keep you guys posted on
progress :)

Thanks,
Erik

On 7/25/2011 10:30 AM, James Jackson wrote:

> Hi Erik,
>
> if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..
>
> The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.
>
> If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...
>
> "Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.
>
> There are people on the list who have far more knowledge with these tools than i do..
>
> I hope this helps. :-)
>
> James
>
> PS: Glad your getting into HaXe.
>
>
>
> On 25 Jul 2011, at 15:08, Erik Williams wrote:
>
>> Hello everyone,
>>
>> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>>
>> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>>
>> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>>
>> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>>
>> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>>
>> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>>
>> I am not sure how useful that information is.
>>
>> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>>
>> Thanks for your support,
>> Erik
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>



--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Erik Williams
In reply to this post by fintan boyle
Hello Fintan,

I will look into all of those, thanks! I was planning on using new Adobe tools to transform my graphical assets to HTML5 assets but I have no idea how they work as I have not tried them yet. Probably, a third party tool might be more appropriate. I think that all of my assets should work fine as SVGs; I have no animation or tweens to speak of in the application, yet at least. And when I implement more complicated animations, I can do it keeping HTML5 in mind.

I am happy that the resounding answer is that this sort of thing is possible and is actively being done and worked on.

Thanks a lot,
Erik

On 7/25/2011 10:53 AM, fintan boyle wrote:
Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Dion Whitehead Amago
In reply to this post by jamesbjackson
I'm developing a flash + html5 game using (dogfooding) the hydrax game
engine (a port of PBE).

You can switch individual display layers to use canvas or css
rendering, and it supports SVGs in flash and html5.  The game engine
sits on top of lower level engines/adapters such as NME, but also
doesn't require them.  It's component based, so tends to lean more
towards power and flexibility over ease of use.

Dion

On Mon, Jul 25, 2011 at 10:08 AM, James Jackson <[hidden email]> wrote:

> Also on iOS you can use 3D Transform CSS to get hardware rendered
> performance.
> This one is a must for anyone who is doing HTML5 gaming or web applications
> (Best 30 minute video I ever watched about web development) :
> http://paulirish.com/2011/dom-html5-css3-performance/
> Check out the following links.
> http://www.html5rocks.com/en/tutorials/speed/html5/
> http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
> http://mir.aculo.us/2010/08/12/optimizing-images-for-hardware-acceleration-on-the-iphone-and-ipad/
> http://paulbakaus.com/2010/12/07/finally-sprite-animations-implemented-via-css3-animations/
> http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
>
> This guys does huge amount of HTML5 experiments http://hakim.se/experiments
> Hope this give you a idea of kind of resources and you got one thing to
> always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!
> James
>
>
> On 25 Jul 2011, at 15:53, fintan boyle wrote:
>
> Hi Erik,
>
> you should also consider your rendering options for html/javascript.  I'm
> not sure how well the canvas element works on iOS.  Grant Skinner remarked a
> while back that it generally doesn't perform as good compared to other
> mobile browsers running in other OSs - but maybe it is different now.  Then
> again it might work fine for you depending on what you are doing.  Jeash
> (i.e., a haxe-js library that is a mirror image of the Flash API) targets
> the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx
> library which is a based on d3.js allows you to create SVGs and Raphael also
> creates SVGs.
>
>
> Lots of decisions to make!
>
> Fintan
>
>
> On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]>
> wrote:
>>
>> Hi Erik,
>>
>> if you want Flash and HTML5 cross-platform aim for how you going to need
>> to build your app for the lowest target platform so in your case that would
>> be mobile and actually build it for iPad first and then test it on desktop
>> afterwards that is the approach I would take..
>>
>> The code is not just a problem it is the assets and how they are produced
>> as you and performance on Mobile as you need to really flip your how flash
>> development progress 180 degrees if you want the same UI and user experience
>> across mobile, HTML5 and Flash as if you wanting to build a application of
>> iPad, etc.. and build Flash last as it is the easiest target.  I have been
>> building HTML5 applications which work perfectly and been optimised for iPad
>> and then just need to do the odd tweak to have them running on desktop
>> clients. Tablets and smartphones are low powered devices with limited RAM
>> and processors speeds so you need to actually plan to build for these and
>> then build desktop clients version based on the mobile version as you find
>> it a lot easier. In terms of porting movie clips I would suggest you need to
>> forget about flash timelines and think of flash as authoring tool for
>> creating your bitmap artwork.
>>
>> If you got a lot of assets I would suggest going down the road of creating
>> sprite-sheets for all your assets this will allow you to create animations
>> and hold all your artwork, check out this tool which takes Flash timeline
>> animations and generates spritesheets you could write a parser to show the
>> animations and replicate basic movie-clips or look at EaselJS, etc...
>>
>> "Spriteloq is the quickest and most powerful Flash SWF Exporter for
>> Corona®SDK. A must-have for any Corona developer that wants to smoothly
>> integrate their valuable Flash art and animations into their mobile
>> applications." http://www.loqheart.com/spriteloq/ - You could look at
>> writing a parser for output for you HaXe application.  Check out the video:
>> http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you
>> a lot of time.
>>
>> There are people on the list who have far more knowledge with these tools
>> than i do..
>>
>> I hope this helps. :-)
>>
>> James
>>
>> PS: Glad your getting into HaXe.
>>
>>
>>
>> On 25 Jul 2011, at 15:08, Erik Williams wrote:
>>
>> > Hello everyone,
>> >
>> > I am interested in learning if it might be possible to simultaneously
>> > develop an application so it compiles both to HTML5/Javascript and to
>> > Flash/AS3, by wrapping respective and necessary portions of each API in
>> > HaXe, to work as the framework of the application.
>> >
>> > What I want to know is if it should be possible to wrap as much of the
>> > flash API as needed and then also implement them in HTML5/HaXe so that the
>> > greater portion of my code can be preserved? Namely, would it be possible to
>> > implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5
>> > canvas? (it does not need to be a complete implementation) How could I get
>> > started on this, if it is possible? I figure it'd be easy to wrap the Flash
>> > API but I am not sure if HaXe or HTML5 for that matter are mature enough to
>> > implement these objects in HTML5/Javascript.
>> >
>> > Anyway, I'll describe a little bit about the project. This might be
>> > mostly inconsequential so skip to the bottom if you feel like it!
>> >
>> > We have been developing a flash application for a little while. It is an
>> > illustrated learner's dictionary. In it, you can navigate to different
>> > sections of the 'world', which are nested scenes; from the 'world' you can
>> > navigate into 'nature', from 'nature' you can navigate into 'desert' or
>> > 'farm', and you can see objects inside their environments, and open up those
>> > objects to read their definitions or navigate into them if there is another
>> > scene inside (such as, in 'farm', you can navigate into 'barn').
>> >
>> > This is a kid-friendly educational environment. This was developed
>> > entirely in Flash so far, but we think it would be a very good mobile app,
>> > and have interest in developing it for the iPad as well. Of course, I am
>> > sure everyone knows that Apple hates Flash. So we would like to make an
>> > HTML5 version.
>> >
>> > It is made almost entirely in FlashDevelop. Graphical assets are made in
>> > CS4 and compiled into an .swc file; absolutely no AS3 is ued in the
>> > graphical assets, aside from the basic MovieClip commands such as stop();.
>> > These assets are then wrapped into their appropriate objects in
>> > FlashDevelop. So the application is very cleanly divided between graphical
>> > assets and the application itself. Also, it makes heavy use of the flash
>> > event model to communicate between objects, using a heavily reactive
>> > paradigm (user clicks on a button that changes the display, an updateNow()
>> > call launches an event that bubbles down, it reaches the base class, and an
>> > update() call bubbles back up any objects that need to be updated).
>> >
>> > I am not sure how useful that information is.
>> >
>> > Anyway, that is it in a nutshell. I, for the record, am very new to HaXe
>> > and I am not sure of its capabilities. I've been developing for Flash for a
>> > long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not
>> > yet had the opportunity to work with HTML5. I am mostly researching to see
>> > of HaXe is capable of this sort of solution. I understand that a -lot of
>> > people- are looking for ways to target both the HTML5 and Flash platforms,
>> > and I am not sure if any satisfactory solutions have been found yet, or how
>> > much HaXe has already been considered for this role.
>> >
>> > Thanks for your support,
>> > Erik
>> >
>> > --
>> > haXe - an open source web programming language
>> > http://haxe.org
>>
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
> --
> haXe - an open source web programming language
> http://haxe.org
>
> --
> haXe - an open source web programming language
> http://haxe.org
>

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Erik Williams
In reply to this post by jamesbjackson
James,

At a glance these resources look just what I need to get started. I really appreciate it! I am sure there will be bumps on the way, but I am quickly becoming more confident in targeting multiple platforms for this project, and I am quite happy to finally delve into HTML5 with it.

Thanks again,
Erik

On 7/25/2011 11:08 AM, James Jackson wrote:
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Tarwin Stroh-Spijer
I'd suggest staying away from Adobe's Bandicoot (or whatever it's called) and go for something like the EaselJS exporter.


Tarwin Stroh-Spijer
_______________________

Touch My Pixel
http://www.touchmypixel.com/
phone: +61 3 8060 5321
_______________________


On Tue, Jul 26, 2011 at 1:23 AM, Erik Williams <[hidden email]> wrote:
James,

At a glance these resources look just what I need to get started. I really appreciate it! I am sure there will be bumps on the way, but I am quickly becoming more confident in targeting multiple platforms for this project, and I am quite happy to finally delve into HTML5 with it.

Thanks again,
Erik


On 7/25/2011 11:08 AM, James Jackson wrote:
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

tom rhodes
@Dion

Hi, that sounds REALLY interesting, so you can target old school DOM, canvas and flash off the same code?


On 26 July 2011 06:44, Tarwin Stroh-Spijer <[hidden email]> wrote:
I'd suggest staying away from Adobe's Bandicoot (or whatever it's called) and go for something like the EaselJS exporter.


Tarwin Stroh-Spijer
_______________________

Touch My Pixel
http://www.touchmypixel.com/
phone: +61 3 8060 5321
_______________________



On Tue, Jul 26, 2011 at 1:23 AM, Erik Williams <[hidden email]> wrote:
James,

At a glance these resources look just what I need to get started. I really appreciate it! I am sure there will be bumps on the way, but I am quickly becoming more confident in targeting multiple platforms for this project, and I am quite happy to finally delve into HTML5 with it.

Thanks again,
Erik


On 7/25/2011 11:08 AM, James Jackson wrote:
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

jamesbjackson
@Eirk,

Interesting points rasied here....

I listed them before for quick reading...

1. Preloading: Every object must be separately preloaded before you begin to use it. For me, this means tracking every graphic and sound individually, before continuing execution.  Sure, a .js library could do this for you , but it’s still a roll-your-own situation. Flash makes this a no-brainer.

2. Mouse Events: You can track mouse events on the Canvas, but not for individual objects on the canvas since they are not part of the DOM. (Objects is really a a misnoner too, as they are complete “roll your own” as well). This means you need to do some screwy stuff to recognize button clicks on the canvas (i.e. have a 1 pixel bit map follow the mouse and track collision detection with it and any button click when a mousedown event occurs). It’s medieval.  Roll your own button events?  Yep.

3. Collision Detection: 100% roll-your-own. Sure, advanced developers already do this, but sometimes they also use Math libraries for rectangle and circle intersections. Those don’t exist either (that I could find). Furthermore, this makes it mostly inaccessible to designers who want to add interactivity but don’t want to learn complex math. Flash solved this problem in the last century.

4. Audio: This is huge. Audio support is terrible. You can play sounds, but only one instance of the same sound at a time. Fire two shots, the sound of the second shot interrupts the first. Also, audio can be loaded as an object into JavaScript in Safari, but Firefox and Chrome don’t seem to support it. Again, there may be ways around these things, but they are going to be custom solutions and probably not cross-browser compatible. Even with its’ own issues, the audio support in Flash is vastly superior in every way. In my estimation, the best and most universal way to play audio with Canvas is to load a 1×1 SWF and play sounds from it using JavaScript. Of course, this won’t work in places that won’t allow SWFs, so those places can just settle form crummy or no audio.

5. Animation: Again, 100% roll your own. I’m still struggling to make my simple 3 frame explosions look like the simple ones I made in Flash. Very frustrating.

6. Total development time: Running about 40 hours now (compared to the two hours for the Flash version). Most of that is debugging, since there are no real debugging tools, it’s all “comment, trace, comment trace”…except I had to “roll my own”  trace() function to do it. Sure, you can argue that since I’m not a JavaScript expert, it’s not a fair comparison for development time. However, I’m no C# expert either, but when I went through a similar exercise with Silverlight last year, I was pleasantly surprised by the ease at which I could work with it. Not so with the HTML 5 Canvas.

I could go on, but what’s the point? The Canvas will be important, and I’m working very hard to learn how to use it effectively. However, it is nothing compared to Flash. As it stands right now, I’d be much more efficient and creative using Flash 5 than I ever could be with the Canvas.

And remember, the HTML 5 spec is just now being implemented. To improve it in any significant way, it will take a new spec and another 5-10 years cycle. Ouch.

Now, for advanced game developers, “roll your own” can be a good thing.   We “roll our own” because we are not satisfied with the status-quo.  However, not everyone can be or wants to be an “advanced developer” many people need to work in multiple technologies and languages and need to use the built-in features to help get the job done.  There is nothing wrong with that.  The problem is, the HTML 5 Canvas doesn’t have enough built-in (yet)  to help those developers do much of anything.


Now @Eirk, I am a man who uses the right tool for the right job, and I love HaXe but not all the time is the best tool to build stuff in. I know I am about to get the mailing list on my back about suggesting this. But have you considered if your wanting to build a Mobile iOS and Android native OpenGL powered 2D applications & Games - http://www.anscamobile.com/corona/.  I own a copy and it use "Lua" which is insanely easy and powerful and actually really nice to use. There got a unlimited trial so I suggest having a look... Might be perfect for you.

The guys who created it used to be the core team of flash lite, they had enough of adobe / macromedia not putting mobile at the top of the priority list.  So they quit and started there own mobile company that is why it been a age until adobe even started building tools for mobile...

Just some another option for you :-)

James




On 26 Jul 2011, at 11:37, tom rhodes wrote:

@Dion

Hi, that sounds REALLY interesting, so you can target old school DOM, canvas and flash off the same code?


On 26 July 2011 06:44, Tarwin Stroh-Spijer <[hidden email]> wrote:
I'd suggest staying away from Adobe's Bandicoot (or whatever it's called) and go for something like the EaselJS exporter.


Tarwin Stroh-Spijer
_______________________

Touch My Pixel
http://www.touchmypixel.com/
phone: +61 3 8060 5321
_______________________



On Tue, Jul 26, 2011 at 1:23 AM, Erik Williams <[hidden email]> wrote:
James,

At a glance these resources look just what I need to get started. I really appreciate it! I am sure there will be bumps on the way, but I am quickly becoming more confident in targeting multiple platforms for this project, and I am quite happy to finally delve into HTML5 with it.

Thanks again,
Erik


On 7/25/2011 11:08 AM, James Jackson wrote:
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

jamesbjackson
Also you can see a comparision between ActionScript & Lua

James

On 26 Jul 2011, at 11:57, James Jackson wrote:

@Eirk,

Interesting points rasied here....

I listed them before for quick reading...

1. Preloading: Every object must be separately preloaded before you begin to use it. For me, this means tracking every graphic and sound individually, before continuing execution.  Sure, a .js library could do this for you , but it’s still a roll-your-own situation. Flash makes this a no-brainer.

2. Mouse Events: You can track mouse events on the Canvas, but not for individual objects on the canvas since they are not part of the DOM. (Objects is really a a misnoner too, as they are complete “roll your own” as well). This means you need to do some screwy stuff to recognize button clicks on the canvas (i.e. have a 1 pixel bit map follow the mouse and track collision detection with it and any button click when a mousedown event occurs). It’s medieval.  Roll your own button events?  Yep.

3. Collision Detection: 100% roll-your-own. Sure, advanced developers already do this, but sometimes they also use Math libraries for rectangle and circle intersections. Those don’t exist either (that I could find). Furthermore, this makes it mostly inaccessible to designers who want to add interactivity but don’t want to learn complex math. Flash solved this problem in the last century.

4. Audio: This is huge. Audio support is terrible. You can play sounds, but only one instance of the same sound at a time. Fire two shots, the sound of the second shot interrupts the first. Also, audio can be loaded as an object into JavaScript in Safari, but Firefox and Chrome don’t seem to support it. Again, there may be ways around these things, but they are going to be custom solutions and probably not cross-browser compatible. Even with its’ own issues, the audio support in Flash is vastly superior in every way. In my estimation, the best and most universal way to play audio with Canvas is to load a 1×1 SWF and play sounds from it using JavaScript. Of course, this won’t work in places that won’t allow SWFs, so those places can just settle form crummy or no audio.

5. Animation: Again, 100% roll your own. I’m still struggling to make my simple 3 frame explosions look like the simple ones I made in Flash. Very frustrating.

6. Total development time: Running about 40 hours now (compared to the two hours for the Flash version). Most of that is debugging, since there are no real debugging tools, it’s all “comment, trace, comment trace”…except I had to “roll my own”  trace() function to do it. Sure, you can argue that since I’m not a JavaScript expert, it’s not a fair comparison for development time. However, I’m no C# expert either, but when I went through a similar exercise with Silverlight last year, I was pleasantly surprised by the ease at which I could work with it. Not so with the HTML 5 Canvas.

I could go on, but what’s the point? The Canvas will be important, and I’m working very hard to learn how to use it effectively. However, it is nothing compared to Flash. As it stands right now, I’d be much more efficient and creative using Flash 5 than I ever could be with the Canvas.

And remember, the HTML 5 spec is just now being implemented. To improve it in any significant way, it will take a new spec and another 5-10 years cycle. Ouch.

Now, for advanced game developers, “roll your own” can be a good thing.   We “roll our own” because we are not satisfied with the status-quo.  However, not everyone can be or wants to be an “advanced developer” many people need to work in multiple technologies and languages and need to use the built-in features to help get the job done.  There is nothing wrong with that.  The problem is, the HTML 5 Canvas doesn’t have enough built-in (yet)  to help those developers do much of anything.


Now @Eirk, I am a man who uses the right tool for the right job, and I love HaXe but not all the time is the best tool to build stuff in. I know I am about to get the mailing list on my back about suggesting this. But have you considered if your wanting to build a Mobile iOS and Android native OpenGL powered 2D applications & Games - http://www.anscamobile.com/corona/.  I own a copy and it use "Lua" which is insanely easy and powerful and actually really nice to use. There got a unlimited trial so I suggest having a look... Might be perfect for you.

The guys who created it used to be the core team of flash lite, they had enough of adobe / macromedia not putting mobile at the top of the priority list.  So they quit and started there own mobile company that is why it been a age until adobe even started building tools for mobile...

Just some another option for you :-)

James




On 26 Jul 2011, at 11:37, tom rhodes wrote:

@Dion

Hi, that sounds REALLY interesting, so you can target old school DOM, canvas and flash off the same code?


On 26 July 2011 06:44, Tarwin Stroh-Spijer <[hidden email]> wrote:
I'd suggest staying away from Adobe's Bandicoot (or whatever it's called) and go for something like the EaselJS exporter.


Tarwin Stroh-Spijer
_______________________

Touch My Pixel
http://www.touchmypixel.com/
phone: +61 3 8060 5321
_______________________



On Tue, Jul 26, 2011 at 1:23 AM, Erik Williams <[hidden email]> wrote:
James,

At a glance these resources look just what I need to get started. I really appreciate it! I am sure there will be bumps on the way, but I am quickly becoming more confident in targeting multiple platforms for this project, and I am quite happy to finally delve into HTML5 with it.

Thanks again,
Erik


On 7/25/2011 11:08 AM, James Jackson wrote:
Also on iOS you can use 3D Transform CSS to get hardware rendered performance.

This one is a must for anyone who is doing HTML5 gaming or web applications (Best 30 minute video I ever watched about web development) :

Check out the following links.


This guys does huge amount of HTML5 experiments http://hakim.se/experiments

Hope this give you a idea of kind of resources and you got one thing to always put first about when doing HTML5 and iOS =and that is "PERFORMANCE"!

James



On 25 Jul 2011, at 15:53, fintan boyle wrote:

Hi Erik,

you should also consider your rendering options for html/javascript.  I'm not sure how well the canvas element works on iOS.  Grant Skinner remarked a while back that it generally doesn't perform as good compared to other mobile browsers running in other OSs - but maybe it is different now.  Then again it might work fine for you depending on what you are doing.  Jeash (i.e., a haxe-js library that is a mirror image of the Flash API) targets the canvas element for rendering AFAIK and so does EaselJs.  Franco's Thx library which is a based on d3.js allows you to create SVGs and Raphael also creates SVGs. 


Lots of decisions to make! 

Fintan


On Mon, Jul 25, 2011 at 3:30 PM, James Jackson <[hidden email]> wrote:
Hi Erik,

if you want Flash and HTML5 cross-platform aim for how you going to need to build your app for the lowest target platform so in your case that would be mobile and actually build it for iPad first and then test it on desktop afterwards that is the approach I would take..

The code is not just a problem it is the assets and how they are produced as you and performance on Mobile as you need to really flip your how flash development progress 180 degrees if you want the same UI and user experience across mobile, HTML5 and Flash as if you wanting to build a application of iPad, etc.. and build Flash last as it is the easiest target.  I have been building HTML5 applications which work perfectly and been optimised for iPad and then just need to do the odd tweak to have them running on desktop clients. Tablets and smartphones are low powered devices with limited RAM and processors speeds so you need to actually plan to build for these and then build desktop clients version based on the mobile version as you find it a lot easier. In terms of porting movie clips I would suggest you need to forget about flash timelines and think of flash as authoring tool for creating your bitmap artwork.

If you got a lot of assets I would suggest going down the road of creating sprite-sheets for all your assets this will allow you to create animations and hold all your artwork, check out this tool which takes Flash timeline animations and generates spritesheets you could write a parser to show the animations and replicate basic movie-clips or look at EaselJS, etc...

"Spriteloq is the quickest and most powerful Flash SWF Exporter for Corona®SDK. A must-have for any Corona developer that wants to smoothly integrate their valuable Flash art and animations into their mobile applications." http://www.loqheart.com/spriteloq/ - You could look at writing a parser for output for you HaXe application.  Check out the video: http://youtu.be/HilWeTE7AYc, Not a expensive application but could save you a lot of time.

There are people on the list who have far more knowledge with these tools than i do..

I hope this helps. :-)

James

PS: Glad your getting into HaXe.



On 25 Jul 2011, at 15:08, Erik Williams wrote:

> Hello everyone,
>
> I am interested in learning if it might be possible to simultaneously develop an application so it compiles both to HTML5/Javascript and to Flash/AS3, by wrapping respective and necessary portions of each API in HaXe, to work as the framework of the application.
>
> What I want to know is if it should be possible to wrap as much of the flash API as needed and then also implement them in HTML5/HaXe so that the greater portion of my code can be preserved? Namely, would it be possible to implement a MovieClip object in HTML5/HaXe, probably making use of the HTML5 canvas? (it does not need to be a complete implementation) How could I get started on this, if it is possible? I figure it'd be easy to wrap the Flash API but I am not sure if HaXe or HTML5 for that matter are mature enough to implement these objects in HTML5/Javascript.
>
> Anyway, I'll describe a little bit about the project. This might be mostly inconsequential so skip to the bottom if you feel like it!
>
> We have been developing a flash application for a little while. It is an illustrated learner's dictionary. In it, you can navigate to different sections of the 'world', which are nested scenes; from the 'world' you can navigate into 'nature', from 'nature' you can navigate into 'desert' or 'farm', and you can see objects inside their environments, and open up those objects to read their definitions or navigate into them if there is another scene inside (such as, in 'farm', you can navigate into 'barn').
>
> This is a kid-friendly educational environment. This was developed entirely in Flash so far, but we think it would be a very good mobile app, and have interest in developing it for the iPad as well. Of course, I am sure everyone knows that Apple hates Flash. So we would like to make an HTML5 version.
>
> It is made almost entirely in FlashDevelop. Graphical assets are made in CS4 and compiled into an .swc file; absolutely no AS3 is ued in the graphical assets, aside from the basic MovieClip commands such as stop();. These assets are then wrapped into their appropriate objects in FlashDevelop. So the application is very cleanly divided between graphical assets and the application itself. Also, it makes heavy use of the flash event model to communicate between objects, using a heavily reactive paradigm (user clicks on a button that changes the display, an updateNow() call launches an event that bubbles down, it reaches the base class, and an update() call bubbles back up any objects that need to be updated).
>
> I am not sure how useful that information is.
>
> Anyway, that is it in a nutshell. I, for the record, am very new to HaXe and I am not sure of its capabilities. I've been developing for Flash for a long time and, to a much lesser extent, HTML/Javascript/PHP, but I have not yet had the opportunity to work with HTML5. I am mostly researching to see of HaXe is capable of this sort of solution. I understand that a -lot of people- are looking for ways to target both the HTML5 and Flash platforms, and I am not sure if any satisfactory solutions have been found yet, or how much HaXe has already been considered for this role.
>
> Thanks for your support,
> Erik
>
> --
> haXe - an open source web programming language
> http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org





--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org

--
haXe - an open source web programming language
http://haxe.org



--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Dion Whitehead Amago
In reply to this post by tom rhodes
On Tue, Jul 26, 2011 at 5:37 AM, tom rhodes <[hidden email]> wrote:
> @Dion
> Hi, that sounds REALLY interesting, so you can target old school DOM, canvas
> and flash off the same code?
>

Yes.  And you can mix it up: you can use canvas based scene components
for e.g. sprite sheets but on a dom layer, so only the sprite is
updating it's small canvas element.  Although this feature is still
alpha at the moment.

http://dionamago.net/?p=410

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

tom rhodes
very cool, those demo's are done using hydrax then? same version as in haxelib?


On 26 July 2011 17:40, Dion Whitehead Amago <[hidden email]> wrote:
On Tue, Jul 26, 2011 at 5:37 AM, tom rhodes <[hidden email]> wrote:
> @Dion
> Hi, that sounds REALLY interesting, so you can target old school DOM, canvas
> and flash off the same code?
>

Yes.  And you can mix it up: you can use canvas based scene components
for e.g. sprite sheets but on a dom layer, so only the sprite is
updating it's small canvas element.  Although this feature is still
alpha at the moment.

http://dionamago.net/?p=410

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Simultaneously developing an application in HTML5 and Flash?

Dion Whitehead Amago
Those demos are all the "panningAndZooming" demo from the git repo,
the demos are not packaged with the haxelib version.

The version of hydrax in haxelib has been updated since I first posted
those demos.  The core of hydrax is solid, but some of the display
code is constantly being fixed and improved upon, since I'm in the
middle of developing a game using it.  When I make a release, I
endeavor to have all the demos included working correctly.

Currently all the demos work as of the latest version 1.1.2, updated today.

On Tue, Jul 26, 2011 at 10:52 AM, tom rhodes <[hidden email]> wrote:

> very cool, those demo's are done using hydrax then? same version as in
> haxelib?
>
>
> On 26 July 2011 17:40, Dion Whitehead Amago <[hidden email]> wrote:
>>
>> On Tue, Jul 26, 2011 at 5:37 AM, tom rhodes <[hidden email]> wrote:
>> > @Dion
>> > Hi, that sounds REALLY interesting, so you can target old school DOM,
>> > canvas
>> > and flash off the same code?
>> >
>>
>> Yes.  And you can mix it up: you can use canvas based scene components
>> for e.g. sprite sheets but on a dom layer, so only the sprite is
>> updating it's small canvas element.  Although this feature is still
>> alpha at the moment.
>>
>> http://dionamago.net/?p=410
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>

--
haXe - an open source web programming language
http://haxe.org