Playing Videos with Flash

If you’ve got an existing video you would like to convert to be importable and playable within a Flash movie it’s easier than you might think.

First you’ll just need a video that ffmpeg can understand, as long as it’s not too esoteric that should be just about anything.

Conversion with ffmpeg

Simple enough:

ffmpeg -i somevideo.avi -b:v 800k somevideo.flv

You may want to play with the bitrate a bit in order to get the file size and quality you want, in my case I was converting a short 480p video, so the relatively high 800k worked in that case. For longer or lower res videos you may want to drop this to 200-300k to get an acceptable file size.

After conversion you should end up with a file with an flv1 video stream and an mp3 audio stream.

Importing into Flash MX

I believe Flash MX is a requirement here, and should work even with the earliest version as I think that’s when video support was added (Does MX stand for Multimedia Extensions? Who knows, but it sounds good).

First, create a new Flash Movie.

Set the Movie properties to match the video file you would like to import.

TODO PIC WHEN I ADD IMAGE UPLOAD

In my case, I’ve got a 640x480 video that runs at 15fps. So I’ve set the Document properties to match. A black background is often the most suitable choice for simple Flash Movies containing video only.

Now go to File -> Import and select the flv video you converted earlier.

Press CTRL+Enter to test, and it should just work.

When you are happy with how it’s working, you can export by going to File -> Export Movie, you may wish to modify some of the audio quality settings in this window, the rest can be left as is.

Cross Era Embedding

The trouble with using Flash in the current day is that it isn’t natively supported any more (for good reason, it has a lot of security issues). But there is a safe way to play Flash on modern browsers, while still being compatible with older machines.

First the embed tags:

<object>
  <embed src="/path/to/your/flashfile.swf" width="640" height="480" />
</object>

Matching the width and height of the embed tag to the source Flash Movie gives the best experience.

In an older browser with a new enough Flash plugin, this will just work. Modern browsers will need to include Ruffle, a Flash emulator which allows playback of Flash Movies and gives partial ActionScript support. Ruffle is improving constantly and already has great compatibility.

Include the following script tags anywhere below your embed:

<script>
  window.RufflePlayer = window.RufflePlayer || {};
  window.RufflePlayer.config = {
    "autoplay": "auto",
    "preferredRenderer": "canvas",
  };
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

See this page for additional configuration options.

The canvas renderer has had the best compatibility for me, with slightly lower performance (fine on any modern machine), and the autoplay option set to auto will mean movies play automatically if the user has allowed it, otherwise they will wait until the user clicks play.

If IE or whatever other older browser doesn’t like the Ruffle script and you want to prevent script errors, what you can do is conditionally render the Ruffle script tags based on user agent.

In Ruby that looks like:

def is_ie?
  user_agent = request.env['HTTP_USER_AGENT'].downcase
  user_agent.index('msie') && !user_agent.index('opera')
end

Advanced

You’ll notice that using this most basic setup, the video will autoplay on older browsers, and also loop indefinitely once it starts playing.

If you prefer the user to initiate playback, and the video to only play once, we can make a few small modifications to achieve that.

First add a new Layer to the Flash Movie Timeline, make sure the new Layer is above the existing Layer that contains the imported video (should be the default).

Right click on the Frame 1 position in the newly created layer and select “Insert Keyframe”.

Down the bottom in the “Actions - Frame” window, add stop from the Movie Control actions by double clicking it.

Draw or copy a “play” button into the same layer, once you are done, group the shapes you drew if needed (CTRL+G), then right click on it and choose “Convert to symbol” make it a “Button” type.

With the newly created symbol selected, double click play from Movie Controls in the Actions window. It should add a script which starts playback after the button is released.

TODO PIC

Try it out by hitting CTRL+Enter, now the movie should begin in a stopped state, and allow you to initiate playback by clicking the button you created.

When you are happy, just export the movie again as you did earlier.

You may also want to change your Ruffle configuration at this point, since it now requires user interaction to start playback, we can set autoplay to on instead:

<script>
  window.RufflePlayer = window.RufflePlayer || {};
  window.RufflePlayer.config = {
    "autoplay": "on",
    "preferredRenderer": "canvas",
  };
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

Troubleshooting

I had some audio sync issues when my audio was at 48,000 Hz, dropping it down to 44,100 Hz solved that problem.