Migrating from Flash pipeline to HTML5 one

#1

Hi,
in the past days I was investigating which alternative could replace our “dying” Flash games to target HTML5 while keeping the knowhow gained in the past years, and I found a very good solution in OpenFl. I will soon have to take a decision and explain it to my superiors, and it will be pretty easy: it is AS3 friendly, we can continue using FlashDevelop, it can target other platforms and it is free.
What will not be so easy for me and my colleagues are the changes in the development pipeline: we can’t continue using the same resources type we are using now (please correct me if I am wrong):

  • FLV for opaque and transparent clips
  • SWC libraries containing WAV automatically compressed in MP3 format
  • Flash animations (movieclips and sprites) containing tweens and code
  • 3D models exported by Prefab3D for AS3
  • AS3 libraries like GSAP

Well, it looks like I can’t use anything at all :cold_sweat:

I think that the best idea is to continue using AS3 for Flash games (avoiding conversion to Haxe at all) and to start Haxe projects from scratch for HTML5 games, slowly abandoning SWF (-sigh-) in favour of HTML5, because:

  • converting AS3 code to Haxe would be a waste of time, as AS3 works ok and I think we won’t need to target both Flash and HTML5 with the same games
  • converting current games would obligue us to convert all the resources

Now I need your help to understand how game creation will change:

  • which codec can I use for opaque and transparent clips?
  • I can use OGG for audio, ok, it will be just less comfortable than SWC library (I can’t use MP3s, right?)
  • how can I create Flash-like vector-raster animations (code-interactive too) and import them in my project? There are tools like Animatron and Adobe Edge, but I don’t know how I can use the created animations, do they export SWC-like libraries? Do I have to access them from web? Resources like audio, images and clips can be stored as files in a folder, but this kind of animations? I have absolutely no idea as I am totally new to HTML5, don’t know the existing tools and how projects/resources are exported.
  • in AS3 you could create a SWF and import one into the other like components, but in HTML5?
  • how do I interact with online services using JSON? Ok, this is easy, I just need to study how.
  • how can I use 3D resources? Has Away3D been ported completely? Are there other frameworks out there? I have tested the Away3D examples in this page, and Flash versions run about 10 times -faster- than HTML5 ones, this is scary.
  • am I obligued to use spritesheets for raster animations? Well, this is easy, FlashProCS6+ and other tools can create spritesheets.
  • how can I use libraries like GSAP (there is the JS version, it can be integrated, I just need to test it, I already asked how to access JS from Haxe and it should be pretty feasable)
  • SWC can be used as a container for static images only, right? Maybe Wav files too, but it would be a bad idea.

I am nervous and excited at the same time, as I am going to take a big decision for all the staff here :grimacing:

1 Like
#2

Hi!

When you’re in HTML5, you’re at the mercy of the HTML5 video tag, there’s no one format that works on all browsers, though (last I tested) the OpenFL Video class did work properly, assuming you had a good source file

If you’re interested, there’s a lot we can do to improve the Flash CC workflow, as you (probably) know, there’s a SWF library that either copies the SWF and parses it at runtime (only suitable for native) or decomposes the SWF into distinct image files + meta data, and runs that for all targets, including HTML5. It could be possible to find WAV assets in the SWF and output those to either WAV or even (possibly) doing OGG transcoding automatically – for HTML5, you really need multiple audio formats as well to target all browsers, so that’s a complexity.

I use the SWF library in order to handle layout graphics, it works quite well, though we could push harder on the custom platform SDK path for having an OpenFL plugin that never goes to SWF and instead goes directly to a new format (like SWFLite or the create JS format output) and use that. The more we go this way, the more we can use things like frame script (written in Haxe, not AS3, but gotoAndPlay is the same in either language) the “SWF Lite” format is not set up to output multiple frames per MovieClip, just as performance and accuracy have been focused on during development, but this could be ported from the type “swf” code in the SWF library quite easily if someone wanted to. This is another opportunity to potentially look at using the CreateJS-style output from the OpenFL custom platform plugin, instead, in order to use their animation code and just write parsing to adapt that to OpenFL, might be an even better path for that.

Modularity is supported in Haxe/OpenFL using libraries at compile-time, runtime linking could be done using macros and such (or just by-hand externs) but isn’t a workflow I’ve fleshed out myself. I want Lime to support this eventually using the “module” system

You can use a URLRequest to access ordinary services

Away3D has been ported, not sure how mature it all is, but there’s also manual OpenGLView type code if you’re into that

The SWF library outputs vector drawing instructions, or you can select objects and force them to bitmaps, so either could work… I think that a texture atlas is maybe best, though, for real character animation, and best outputted that way from a custom Flash CC plugin

You should be able to use externs for GSAP, or you could use Actuate or another Haxe cross-platform library

#3

What SWF library are you talking about? It parse/converts FLVs to images sequence? Or you are talking about flash animations? Sounds heavy, same for WAV files. Ok I can give up with FLVs for now, but for audio I will have to use… OGG? WAV is too heavy. How can I insert OGG (or whatever format) files in a Flash project? Does a theorical plugin allow to add file formats I can insert/convert to? If not, I could embed OGGs in FlashDevelop project directly, it wouldn’t be a problem.

Well, I don’t know CreateJS features, but I think they are pretty complete (even if the HTML5 project should remove some tools and effects from FlashPro interface because of CJS limitations, right?). An OpenFl specific plugin would be very appreciated :wink: but it would require more work indeed, maybe adopting GSAP (I don’t know if gSkinner libs are better than Greensock ones).

A few more questions about OpenFl: how does it handle atlases? Does it handle events the same way as AS3? And XML parsing/handling? Application/security domains work the same? Is it possible to load additional components (like small games to run inside the main application) when the main app has already loaded and started? Is it done with the module/macros methods you said?

#4

You can see the “SimpleSWFLayout” sample, for example, which uses the SWF library.

Events have been heavily tested, though the “capture” phase isn’t fully implemented (though it’s rare someone uses it). I use haxe.xml.Fast for XML parsing, works fine in the tools. No, there is only one namespace, so application/security domains are simulated.

Loading additional code modules at runtime is not something that’s been done, but it would not be impossible to support, especially in dynamic environments like JavaScript where you can pretty easily load and execute external code without OpenFL officially doing anything about it

You probably need multiple encodings of the same audio files, no one format works on all internet browsers, even WAV doesn’t work everywhere