Okay. I have a flash object on a website that plays a transparent video (like one of those virtual spokespersons that walk out and talk to you). I know that these things are not really popular with people, but this is for a company I work for and was requested by upper management. I have no control over this.
Everything works perfectly. I have an .swf that plays a really short video, and it has two buttons for controlling playback.
The flash project consists of only a .png sequence (Person with greenscreen footage that was edited out), and a couple of buttons.
The only AS3 scripting is what controls what the buttons do to the PNG sequence and the audio.
I have started to do a little research on how to convert this to HTML5-friendly content (just in case, although many of our customers will probably not be looking at our site on mobile, but it would be nice to have it working).
I came across OpenFL and Haxe, and thought maybe it would be easier than I thought.
I have installed all the packages, OpenFL and Haxe through terminal, and also have Sublime Text installed as well for the IDE.
I’m not really sure where to go from here to start converting my content, would anyone be able to point me in the direction of a good step-by-step of what to do?
Thank you so much in advance!
Hi!
If the code is simple, you might consider writing it by hand, otherwise, take a look at running AS3HX:
haxelib install as3hx
haxelib run as3hx path/to/source path/to/output
OpenFL does support video on HTML5. Also, you can use the SWF library to use the Flash assets directly, or if they’re simple (like a few PNGs) you may be happier copying them to the assets directory and just referencing BitmapData manually with openfl.Assets.getBitmapData ("assets/name-of.png");
So there’s a few choices (automated AS3 -> Haxe conversion or manual, use of SWF directly or custom approach)
Knowing what seems for the project helps for giving any further pointers 
1 Like
This does point me in the right direction.
My test swf has about 600 frames, each with a PNG.
I would think that the scripting is pretty simple. Just buttons that Play/Pause, and stop.
Not sure if theres a way to reference the whole sequence of PNG’s or if each individual png would have to be referenced?
You could certainly do it in loop, otherwise, you could do it similar to the NyanCat sample:
openfl create NyanCat
cd NyanCat
openfl test flash
Right now, SWFLite (which powers the HTML5 SWF support) does not run MovieClip animation by default, but adding .play () to the NyanCat sample should work. One concern, though, with using SWF (or synchronizing with video in general) is that you might have a problem with timing.
Custom code gives you the ability to handle the “delta time” between the last and current ENTER_FRAME, and skip frames (or stay on the same frame twice) if you need to.
Traditional MovieClip animation would strictly update once per frame, which not be ideal, particularly since HTML5 uses “requestAnimationFrame” by default for best performance, which may be 60 FPS or on my system 120 FPS, so that could toy with timing for sure 
Here some logic that’s designed to calculate which frame of an animation to show, based on time:
https://github.com/jgranick/spritesheet/blob/master/spritesheet/AnimatedSprite.hx#L123
I guess I should also specify that it’s not using a MovieClip, it’s just framed PNG’s. (I’m not sure if this is relevant, I’m somewhat new to flash scripting). Fairly small, only 146x386.
Well, I figure in Flash Player, it probably had a sequence of PNG frames on the timeline? Or perhaps it was a bunch of separate PNGs, and ActionScript to tie it all together?
No just on the timeline. Basically when set up, I just imported the PNG sequence into the stage so it’s the one layer, but each frame along the way is each png in the sequence.
Gotcha, yep, so the Timeline is a MovieClip. If your SWF is called “library” and your animation is on the timeline (instead of an “Export for ActionScript” MovieClip symbol) then you could do Assets.getMovieClip ("library:") to get an instance of the SWF timeline, just need to hit .play () on the returned clip
