FLA flash to HTML5

Haxe
#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

1 Like
#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.

2 Likes
#5

I’ve suggested this before in another topic but if you have complicated/many animations you may want to consider using other approaches to animations instead of playing SWF in HTML5: spritesheets (animations on tilemap), dragonbones (skeletal animations) or maybe using Actuate to animate specific properties. I’m super satisfied with the performance of all three of those while wasn’t sure about SWF performance.