Also, forget about using Google Analytics on your iPad: it utilizes Flash, as do hundreds of thousands of sites across the web.

Apple appears to think it can dictate to consumers and developers alike which technologies they will and will not use. Although we at Orland Media would be happy to refocus if required, it is in fact highly doubtful that Flash – 13 years evolving – is going anywhere soon, except straight onto Apple’s competitors’ mobile devices.

iPad users will experience half of what the web has to offer – they’d better get used to this image.

Objective

We’ve been spending a lot of time recently examining the different video codecs available for Flash and conducting various tests. Our objective has been to choose the best quality video format which also enables pseudostreaming – without using custom servers such as Lighttpd.

What is pseudostreaming?

Pseudostreaming means imitating the behaviour of a RTMP streaming server such as Red5 or Flash Media Server by simply using a PHP script such as xmoov.php. Using such a solution does not enable the broadcast live webcam streams, for example, but it does allow jumping ahead to parts of a video which have not yet downloaded. This is probably the benefit most people seek from a streaming server solution and it is much easier to set up than a streaming server. It is the choice of YouTube and Google Video.

What’s required for pseudostreaming?

Pseudostreaming requires a video format which supports it and a video player which supports it too. Two leading open source video players, JW Player and Flowplayer both support it, because they send a request indicating how much of the video file should be sent back.

Flowplayer requires a plugin SWF. This player is configured using JSON. JSON is not especially complicated but we found this config method fairly verbose. It also uses its own flash embed routine. You have to get the config exactly right for pseudostreaming via xmoov to work with Flowplayer. There are scarce resources on the web. The main one points to this page, which is now outdated, but it can be done, and if you need to know how, ask us.

We find JW Player easier to configure for pseudostreaming with xmoov. The info page is here and after we pointed out a fault with the player, here, the latest release works properly with pseudostreaming.

Comparing video formats

Okay, so perhaps we will use JW Player as our player, but we’re still no closer to deciding which video format to use.

H.264 & F4V

It seems safe to say that the best quality format for the web at the moment is the H.264 standard. We are seeking to encode video using Adobe Media Encoder, which is included with Creative Suite 4. This program uses the MainConcept H.264 Video codec and using this codec it can encode into either MP4 format or F4V format. At least Flash Player 9.0.115.0 is required to play back this standard.

F4V was created by Adobe in order to address shortcomings in the FLV format. It determines additional file meta data and enables the embedding of H.264 video in this custom format.

At the time of writing, according to our research, you can forget about using H.264 for pseudostreaming unless you have shell access to your Linux server and wish to try compiling a PHP module like this or you are using lighttpd as your web server.

Neither Flowplayer nor JW Player support pseudostreaming of either F4V or MP4 videos using the H.264 standard along with xmoov.php.

Eric Lorenzo Benjamin Jr of xMoovStream also offers his own video player, which looks good, and a separate streaming server solution. This can stream MP4 (H.264) files to Apple’s iPhone and Quicktime, but not to Flash Player. We’re still limited to FLVs with this player.

F4V problems

A little more about F4Vs while we are on the topic: the format currently appears to be faulty – at least when encoded by Adobe Media Encoder CS4:

• It does not add keyframes at navigation cue point times
• It does not trigger cue point event listeners in the expected manner
• It does not respect custom keyframe intervals

Some more reasons not to use this format yet, perhaps, despite Adobe having urged everybody to switch to it. If you wish to have high quality video without xmoov pseudostreaming, use MP4 instead for now. (Under our tests, MP4s embed seekpoints correctly whereas F4Vs do not.)

We’re left only with trusty old FLV as the format we can pseudostream.

Setting up FLVs for pseudostreaming

Choosing a codec

You have a choice of two different codecs when exporting FLVs using Adobe Media Encoder: Sorenson Spark or On2 VP6. The latter is the later, recommended, codec.

Choosing a keyframe interval

Notice the option to “Set Keyframe Distance” in the Export Settings under Video → Advanced Settings. When using pseudostreaming the player can only jump to the closest keyframe. The more keyframes, the more precise your pseudostreaming will be, but the larger your file will be.

The default is a keyframe interval of 30. If you take this down to 10 you will see a lot more precision and about a 17% rise in file size. If you take it down to 1, though, you will see a 1000% rise in file size along with your optimal precision. You will also find that the video player takes a long time reading the meta data of the FLV before it plays it. We are happy with the compromise of a keyframe interval of 10.

So you export the video using whatever quality you like, and this keyframe interval. You stream it into your player using referring to the config links above. You try seeking to a part of the video which has not yet downloaded. The playhead simply jumps back to the beginning of the video. What’s going on?

Inserting meta data

Well, it’s not enough to have the keyframes in the video. What Adobe Media Encoder unfortunately does not do is insert meta data in the FLV indicating where those frames are. This is vital for php pseudostreaming to work. (Adobe: please provide the option for this in the next release of AME.)

Luckily, there is quite a dated freeware tool from Buraks, of the ActionScript Viewer, which still does the job well: FLVMDI. There is even a GUI available so you don’t need to start working on the command line, and another tool enabling you to view the meta data without tracing it out using Flash.

Once you have exported your FLV file with the ideal keyframe interval, you’ll need to run it through FLVMDI to insert the meta data. Be sure to tick the “Include ‘keyframes’ object” option. It performs this task quickly, then, when you use the file with JWPlayer and xmoov, you should find you can move the playhead to any location and the file will “stream” from there.

Conclusion

The conclusions to be drawn at this point, we believe, are as follows:

• F4V is a no-go area as there are problems with the format.
• MP4 (H.264) is the optimal format if you do not require pseudostreaming via xmoov.
• FLV remains the best format to use if you do wish to pseudostream using these players.

Since pseudostreaming is highly desirable, then, and xmoov is a quick and easy solution, we find FLV to be still the best format.

Here’s a table presenting most of our findings:

CAPABILITIES / FORMAT	FLV	F4V	MP4
Can use H.264 standard codec
Works with xmoov.php
Embeds cuepoints (correctly)
Can have embedded keyframe meta data
Requires separate injection of the meta data
Respects custom keyframe interval
Supports alpha channel

We hope this article helps get you up and running with Flash video including pseudostreaming. If you spot any problems with it do let us know, and if the article proves popular we may expand on it and insert relevant images.

Problem:

Here is how we construct a MouseEvent handler in ActionScript 3.0:

myButton.addEventListener(MouseEvent.CLICK, openURL, false, 0, true);

private function openURL(e:MouseEvent):void
{
   navigateToURL(new URLRequest("http://www.mysite.com"), "_blank");
}

Note that we set the fourth parameter, useWeakReference, to true. This ensures that if this listener is the the only reference to the myButton remaining, myButton can still be garbage collected if required.

The trouble with this is that every time myButton is clicked, the same URL will open. We can’t easily pass a parameter to the function which is acting as a listener. How can the same function be used by many buttons to open a different URL for each button? How can we pass a parameter?

Solution 1: Custom events (won’t work):

It would be nice if we could dispatch a custom event on mouse click. Custom events extend the event class enabling us to dispatch an event with additional properties (like a URL). This event is received by the handler then the property is accessed. The trouble is this approach won’t work here because the Flash Player automatically dispatches MouseEvents, we don’t dispatch them ourselves. (If anyone sees a way this may be done, please comment below.)

Solution 2: Embed the function call (not advised):

An interesting strategy is used here, whereby a call to a function is used as the event handler, and this returns the function to use, including the desired parameter. The trouble with this approach is that it is not really good form, in that there is no way we can reference the handler if we did want to remove it using removeEventListener().

We’re beginning to see that there is actually no way to “pass” a parameter, really. We have to rather detect the button-specific value by “association”. The following solutions all achieve this by using the MouseEvent’s target property:

Solution 3: Use a switch statement on the event’s target property

When the button is clicked, providing there is no further mouse-enabled object inside it, that button is the event’s target. We can say it dispatched the event. We can access the target object that dispatched the event using a property of the event itself:

myButton.addEventListener(MouseEvent.CLICK, openURL, false, 0, true);

private function openURL(e:MouseEvent):void
{
   trace(e.target + "dispatched this event!");
   navigateToURL(new URLRequest("http://www.mysite.com"), "_blank");
 }

If we can access the target we can decide what to do in the handler depending on the target:

myButton.addEventListener(MouseEvent.CLICK, openURL, false, 0, true);

private function openURL(e:MouseEvent):void
{
   var u:URLRequest = new URLRequest;

   switch(e.target)
   {
      case myButton:
         u.url = "http://www.mysite.com";
         break;

      case myOtherButton:
         u.url = "http://www.myothersite.com";
         break;

      default:
         throw new Error("No URL set for " + e.target);
         return;
   }

   navigateToURL(u, "_blank");
}

This works well.

Solution 4: Use a public custom property inside the dispatching object

We could avoid a switch statement and instead have a property inside the dispatching class which can then be detected. So if our button extends Sprite, let’s say, we could have an instance property in there called url and we could detect that, as follows:

myButton.addEventListener(MouseEvent.CLICK, openURL, false, 0, true);

private function openURL(e:Event):void
{
   var u:URLRequest = new URLRequest;
   navigateToURL(new URLRequest(e.target.url), "_blank");
 }

This is fine too, but we might need to throw an error if the object dispatching the event doesn’t have a url property.

Solution 5: Use a dictionary object to track variables

Dictionary objects in ActionScript are similar to associative arrays but they can accept complex objects, as opposed to strings, as their keys. After creating our button we could push a reference to it into a dictionary and specify a value to associate with it, like this:

var dict:Dictionary = new Dictionary(true);  // use weak references to the objects
var myButton:Sprite = new Sprite;
dict[myButton] = "http://www.mysite.com";
addChild(myButton);

myButton.addEventListener(MouseEvent.CLICK, openURL, false, 0, true);

private function openURL(e:MouseEvent):void
{
   navigateToURL(new URLRequest(dict[e.target]), "_blank");
}

This is perfectly workable too.

Solutions 3, 4 and 5 all seem equally good solutions to this problem. There is just one final option, which is to avoid the problem altogether by using separate listeners for each button. But that, of course, is what we were trying to solve in the first place.

As a start to the new year, we’re applying a 25% discount for all trainees – and an additional 25% for those who are self funded!

If you would like to attend the course please get in touch.

In their instructions, Google say you should install the SWC files to the following location:

C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components

What if you’re using Flash CS4? Well, in this version of Flash the ActionScript 3.0 Settings dialogue has changed (both the publish settings version and the global preferences version). You can specify a “library path” – this may be any folder on your computer. This is supposed to be a repository for your SWC files; you can set this and drop an SWC in here.

This will allow you to access the classes compiled into the SWC, however the SWC does not show up in the Components panel in Flash. If you are working visually in the Flash IDE and would like it to do so, you will need to forget about the library path option and instead drop SWCs into this folder:

C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components

Restart Flash and the component should be there.

If you’d like to attend the course please get in touch.

You want to be able to see trace statements etc. whether your application is in Test Movie mode, running locally over HTTP or running remotely over HTTP in the browser plug-in. You don’t want to use the the Flash Debugger and you don’t want to have to install Flash Debug players. You just want to see trace() statements – in a more aesthetically pleasing window if possible..

Solution

You’re having trouble installing the Flash Player Active X control on Windows. Every time you run the installer it quits, recommending an Adobe Technote. The trouble is this doesn’t solve the problem either. You’ve uninstalled the previous player, quit all apps, still no joy.

Solution

In this situation the cause is probably incorrect registry permissions. You can correct this by using Microsoft’s SubInACL tool. It is available here bundled with a script which will whip through your registry granting full permissions to administrators for the appropriate keys. You should then have no problem running the Flash Player installer.

• Constructor functions run slower than “regular” methods. (See here for details.)
• You might want to re-run initialisation code without recreating the instance.
• You might want to run delayed initialisation code, for example once an object has been added to the Display List. (See our post here regarding this issue.)