Javascript + Flex

A tutorial without any of the steps you'll need

I want to make a Flex video player that is controllable by Javascript functions that, in turn, are built by Rails.

The purpose is to explore the communication between Flash player and the wrapper HTML, so let’s start off with a working Flex component – not something that I’ve hacked together in ignorance and haste.

The remainder of this article are my Hansel and Gretel crumbs, converted to second person since I’m writing this to my future self who has already forgotten the few steps in this procedure. Sigh. Brain like a stainless steel sieve.

Part 1

Get a video component working. Hint: use a local .flv file; place it in the /src directory alongside your .mxml file(s). For this exercise, which is focused on communication with the wrapper, don’t complicate things by using one of your own poorly-written .flv players, eh?

Part 2

Exercise the two Flex Examples until you’re sure things are working as expected.

Set the {source} of your video player by hard-coding the file name in the JavaScript wrapper and passing that into Flex.

Once that’s working, add a second .flv file to the /src directory. Convert the JavaScript string into an array of (two) file names; send that array into Flex where you can make a “play next video” button.

Part 3

Add the ExternalInterface.callback (contrary to the Flex Help docs, I had to put it inside the creationComplete method to make it work) linking up some random JavaScript method name to your Flex “play next video” method.

Put a hyperlink in the HTML wrapper, its onclick function should be AppName (your mxml file name, minus the .mxml) .randomJavaScriptMethod from the previous paragraph.

Part 3b

Try adding a playThis(file_name) function in Flex/AS, aliasing it to JavaScript via External Interface callback. Then in your hyperlinks, have the onClick function send the file name to Flex/AS. This can work alongside the send-an-array-of-file-names if you build an initialization routine that checks and fills the array as needed.

Part 4 Getting Rails to produce the list of video file names

Now you have to move everything into Rails – the .swf file into /public to be embedded in some template. The wrapper for the .swf needs to be modified to include yer JavaScript examples, too. Good luck with all that.

Change the Flex compiler settings so that the output folder is %%rails_root%%/public and put in the appropriate Output folder URL – in my example today it’s localhost:3372/ but yours will be different. Probably.

Try it. It should still work when run from the Flex Builder. From here on out, testing will be initiated from elsewhere. Indeed, further modification to the Flex code should be minimal or nil anyway since the play-this-video function is all that’s needed.

Now copy the JavaScript code from index.template.html and, if you still need it, the external.js file from the beginning example. This stuff needs to be put into Rails somewhere, but before doing that, a slight digression.

swf_fu

It’s a Rails plugin

script/plugin install git://github.com/marcandre/swf_fu.git

… and it makes adding a .swf file quite easy indeed. Here’s the tag I used for embedding the video player

<%= swf_tag “FXVideo_Example” %>

… can’t get much simpler than that. (Gotta have the swfobject.js included somewhere.)

Finishing up the example

Okay. The examples are now working inside a Rails app. Good for you. The only thing remaining is to create a list of videos to sit in the sidebar next to the video player. The videos have already been uploaded (see Paperclip and friends). I used the link_to_function inside a <li> tag and put the paperclip helper url in for the file name

<%= link_to_function  vid.title, onClick="FXVideo_Example.plug('#{vid.pics[0].pic.url}')" %>

The pics[0] business is because I’m re-purposing a generic container that provides for multiple photos to be associated with an article. Most of the links in the menu up topside are models that subclass Article. Right now I’m allowing only one video per video – makes sense, no?

End of the breadcrumbs, the project is working!