[Feedback] creating a flash/html5 app with FlashCC/OpenFL

Hello there,

I’ve just posted an article about my recent experience of creating a cross-platform app (flash, html5) using FlashCC and the OpenFL plugin. You can find it on my blog in french. It’s not really a tutorial, it’s more a general feedback but I post here the translation in english, hope somebody will find it useful.

openfl 3.3.2
swf 1.9.1

BlendMode and filters.

For now these options are not compatible with the plugin. If you import an AI file into your FLA project, you will have a warning and all these options will be deleted.

So if you want to use it, you can :

  • convert your object into a bitmap
  • create these effects in code (note that blendMode are not working in Dom/Canvas html5 yet).

What html5 to choose

First, webgl is not the best choice for tablet and mobile. Some mobile doesn’t display videos inside Canvas. So I’ve chosen Dom until I had some freeze. I’ve finally chosen Canvas by externalizing the video from the Canvas. See the video part to get more informations.

Vector Image

Some vector images are not displayed correctly in html5.
Here is what I’ve created :

Here is what I get in html5 target :

I’ve find 2 solutions :

  • convert the vector image to Bitmap if you don’t need vector graphic
  • check out this pull request

Fonts

I had some trouble with textfields created with FlashCC in the flash target. See full details on swf’s github issue. The only one I found is to remove the textfield and create dynamically in haxe an other one with same properties. Here is a snippet if you have the same problem :

MovieClip

In the html5 target, simple gotoAndStop may not work properly if your MC is made with the plugin. For example, let’s say you have 2 states in your MovieClip and you have a different Bitmap in each frame, the second frame will not display in your html5 app if you create your MovieClip like that :

But it will work if you keep a reference of the first Bitmap in your second frame :

Video

Here is a snippet to make a video in flash/html5 Dom.


Remember that I finally switch to Canvas due to performance issue. This is how I made my video working.
First, I’ve created the video element in javascript and then I get the VideoElement and manipulate it in haxe.

Note that getting basic properties of your video like duration, totalTime, etc is different in flash,html5 and in this last method.

Hope it will help somebody :slightly_smiling:

5 Likes