FLA flash to HTML5


#1

Hi Everyone,

I convert my all source code AS3 to Haxe. But I don’t know how I manage my all FLA animations to HTML5 ? I use openFL or ?

What is the best way? How can I get build and FLA swf to html5 ?

Thanks


#2

For your source code you can use an AS3 to Haxe converter, just look for “as3hx” in HaxeLib. When it comes to animations I never worked with those as much but the company I work for we still use Adobe Animate CC with an Animate SVG Exporter plugin. However you can also look into “swf” in HaxeLib.


#3

OpenFL includes SWF support, see the “NyanCat” and “SimpleLayout” samples, and the Using SWF Assets tutorial


#4

I have converted several Flash projects to HTML5. I assume you want to use animations that are movie clip symbols created in a FLA file and then are stored in the created SWF file. If so read on, if not please be more specific about your “FLA animations”.

As far as I know, there isn’t a way to simply load and play a SWF file that’s only a movieclip. You can access any symbol in a SWF file if its Export for Actionscript is checked and if you have a statement that states where to find the SWF file. In the project.xml file I have this line:

<library path="Assets/MySWF.swf_" preload="true" generate="true" />

As far as I know, you can only access defined symbols in a swf. To access a movie clip symbol name MyClip:

var myClip: MyClip = new MyClip();
addChild(myClip);

You can use any movie clip function or property like myClip.gotoAndStop(1), numFrames=myClip.totalFrames, etc.

Unlike in Animate/Flash you cannot write a MyClip class that adds your own code so you can control your clip. The addChild(myClip); above will auto play the clip with continuous looping and any play command will also loop continuously.

What I do is make a Sprite subclass to load and display a movieclip.

package;
import flash.display.MovieClip;
import flash.display.Sprite;
class MovieClipContainer extends Sprite
{
 	var myClip:MyClip;
	public function new()
	{
		super();
		this.myClip=new MyClip();
 		addChild(this.myClip); 
		this.myClip.gotoAndStop(1);
	}

	public function play()
	{
		this.myClip.gotoAndPlay(1);
            this.myClip.addEventListener(Event.EXIT_FRAME, exitFrame);
       }

	private function exitFrame(event:Event)
	{
		if (this.myClip.currentFrame==this.myClip.totalFrames){
			this.myClip.removeEventListener(Event.EXIT_FRAME, exitFrame);
			this.myClip.stop();
			this.dispatchEvent(new Event(Event.COMPLETE));
		}
	}
}

For control just add the needed code. Hope this helps.