Category Archives: Flash

Internet Explorer, Flash, Alignment Gotcha

I ran into a rather annoying issue the other day related to content alignment in Flash; as usual, this problem exists exclusively in Internet Explorer. To be more specific, it is an issue with how the Flash Player ActiveX control is written.

If you are aligning content in Flash that uses the Stage width or height as a variable (e.g., you want to center a MovieClip) and you do it on initialization (i.e., in code and on the first frame), you may run in to this issue. Here is an image demonstrating what you might see:

Note that in the “before” screen, the content is centered horizontally, while in the “after” screen, the content is only half-visible and appears to be “centered” on the left margin.

If you run a test – output the Stage width to a text field, you’ll see that the width will be returned as 0.

As far as I know, there are two solutions to this problem. If you’re embedding your Flash using swfObject, then make sure that you omit the “scale” attribute. For example, modify the following:

var params = {
    bgcolor: "#000000",
    menu: "false",
    scale: "noScale",
    allowFullScreen: true
};

To something that looks like this:

var params = {
    bgcolor: "#000000",
    menu: "false",
    allowFullScreen: true
};

Alternatively, if you absolutely need that attribute. You can create an “EnterFrame” event listener that detects when the Stage width is greater than 0 and then remove the listener. Here’s an example in ActionScript 2:

this.onEnterFrame = function() {
    if (Stage.width > 0) {
        init(); // Pass to initialization function
        this.onEnterFrame = null; // Clear enterFrame listener
    }
}

Zend Framework & Flash

Here’s a quick little “gotcha” when using the Zend PHP Framework:

If you plan on using Flash at all (i.e., SWF or FLV files) be sure to append the necessary extensions the .htaccess file in the “public” folder to the rewrite rule:

RewriteEngine On
RewriteRule !\.(js|ico|gif|jpg|png|css|swf|flv)$ index.php

Note the added “swf” and “flv” extensions. Otherwise access to these files will return an error. Firebug (if you use it) will say that the files are being loaded (200 OK), but if you look at the response, it’s the error page not the actually requested file that is being returned.

Granted, this isn’t exclusive to the Zend Framework – it’s a result of the .htaccess configuration (regardless of which framework/engine you use); but it’s just something to keep in mind.

Update:

Here’s a better declaration (via: http://framework.zend.com/manual/en/zend.application.quick-start.html):

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

ActionScript 2.0 NetStream Annoyance

Here’s a “heads up” to anyone who may be pulling his/her hair out wondering why NetStream won’t load an FLV. For whatever reason (I’m guessing it’s a bug), if you have a strongly-typed NetStream within a function, it will not work.

For example, the following code will work on “_root”:

var my_video:Video; // my_video is a Video object on the Stage
var my_nc:NetConnection = new NetConnection();
my_nc.connect(null);
var my_ns:NetStream = new NetStream(my_nc);
my_video.attachVideo(my_ns);
my_ns.play("video1.flv");

Try dropping this into a function or class and you will see that it does not work at all. To make it work, you must completely remove the data typing and variable declaration for the NetStream and NetConnection:

var my_video:Video; // my_video is a Video object on the Stage
my_nc = new NetConnection();
my_nc.connect(null);
my_ns = new NetStream(my_nc);
my_video.attachVideo(my_ns);
my_ns.play("video1.flv");

See Adobe’s LiveDocs on this topic for more information.

I wasted far too many hours trying to figure this out thinking that the problem was with my code. I hope I can save someone else from the same frustration.

Why I Love ActionScript 3.0

When ActionScript 2.0 was released – and later Flash 8 – it was exciting to see the new capabilities of the Flash player. But, the improvements of ActionScript 3.0 over ActionScript 2.0 are incredible. When I jumped in and started playing around with ActionScript 3.0 I discovered many significant changes, all for the better. The following is a list of improvements that, for me, were exciting to see:

  • Improved Object Oriented support (internal, public, private, and protected class types).
  • Improved event model; all events require listeners.
  • MouseEvent.MOUSE_LEAVE (detect mouse exit from stage) – enough said.
  • Performance – See PaperVision3D.
  • Improved compile-time and run-time error reporting.
  • DisplayList and MovieClip re-parenting and auto-depth management.
  • int and uint Classes for non-floated numbers.
  • XML is a built-in datatype
  • Intervals replaced with Timers
  • Built in “drawCircle” (or “drawOval”) method added for run-time elliptical shape-generation.

There’s a lot more as well, but these are just a few improvements that I was very pleased to see.

“Press SPACEBAR or ENTER to activate and use this control”

Three days ago (April 11) Microsoft released an Internet Explorer update in response to the patent battle between Microsoft and Eolas. After installing the update, Internet Explorer (not other browsers, fortunately) users will be required to “activate” embedded objects and plug-ins before they can interact with them. Here’s what sucks, most users will receive this update automatically via Windows Update. Embedded objects and controls affected are:

  • Adobe Reader
  • Apple QuickTime Player
  • Macromedia Flash
  • Microsoft Windows Media Player
  • Real Networks RealPlayer
  • Sun Java Virtual Machine

In order to activate these objects, users are required to press the space bar, enter key, or use the mouse to click on the item. Anyone that’s tested the Internet Explorer 7 beta will have noticed similar behavior within that browser. According to w3schools browser statistics, over 60% of web users browse using Internet Explorer, meaning within the next few days approximately 60% of visitors to Flash websites, or sites using embedded media will be required to activate the media before being able to use it; because of this, some users may assume that the website is broken.

Here’s the good news: Microsoft has posted a solution for web developers that would like to avoid their content being blocked. Essentially, in order to avoid this problem all that a web developer needs to do is embed the object via external script files. Those who have opted for Unobtrusive Flash Object placement within their websites will not be affected, because their content is already embedded in this manner.

What’s ironic about this entire situation is that it actually forces developers to use a more standards compliant approach, go figure.

Extending the Movieclip Class in Flash (ActionScript 2.0)

In Optimizing Flash Buttons (Part 1) and (Part 2) I talked about improving the efficiency of creating movieclip buttons; although the methods/approaches discussed therein are valuable (but that’s for you to decide), sometimes a more powerful or abstract solution is required. In the text that follows I’ll dissect a class that I’ve created that takes my previous functions one step further, and eliminates the need for copying and pasting code repeatedly. Now, let’s jump right in…

First, download the class contained in the .zip file – http://www.eingko.net/files/com_rtimoshenko_mcUI.zip – and save the .as file in the following directory (you may need to create some folders):

  • (Windows 2000 or Windows XP) \Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash MX 2004\language\Configuration\Classes\com\rtimoshenko\
  • (Macintosh OS X) Hard Drive/Users/Library/Application Support/Macromedia/Flash MX 2004/language/Configuration/Classes/com/rtimoshenko/

Note: The Flash MX 2004 authoring environment (or above) is required for this class to work. Also, if your authoring environment is Flash 8, then – obviously – your class path will be slightly different than those above.

Next, start a new Document in Flash and create a shape on the Stage. Then convert your shape to a symbol (press F8, while the shape is selected) by opening the “Convert to Symbol” dialog box (keep it open). Press the “Advanced” button and modify the field values within the “Linkage” fieldset to the following (see image below):

Convert to Symbol - Linkage

  • Identifier: _opt02_mc (This can really be anything you want)
  • AS 2.0 Class: com.rtimoshenko.mcUI
  • Check “Export for actionscript”
  • Check “Export in first frame”

Once the values are set, press “Okay” to continue. Select the instance on the stage and double-click it to edit it. Create a new layer and call it “_actions” (or whatever you want), select the first frame in your new layer and open up the Actions panel (press F9). Insert the following code:

stop();

Now, create another layer and call it “_labels”. Click on frame 2 of the the “_labels” layer and in your properties panel type in the word “over” (see image below).

Movieclip Timeline - ui_mc

Now do the same for frame 11, except type in the word “out”. Click on frame 10 of the “_actions” layer and open up the Actions panel (press F9) and insert the following code:

stop();

Finally, create a simple shape tween so that you have a basic rollover animation. Your timeline should now look something like the image below.

All that’s left is to define a path for the movieclip when it’s clicked. Go back to the _root timeline (Scene_1) and click on the shape-cum-movieclip that we created earlier and open up your Actions panel (press F9). Insert this code:

onClipEvent(load){
this._path = "http://www.yourwebsite.com/";
}

Test your work and see the magic happen. The nice thing about this method is that it completely eliminates copy/pasting all together. All that’s required is to declare any particular library instance as an object of the mcUI class and it automatically inherits code that tells it to play “over” on rollover and “out” on rollout. Pretty cool, eh? Well, that’s it.

Optimizing Flash Buttons (Part 2)

Last week I shared the method I use to optimize (movieclip) buttons within Flash. Now, I’m going to take it one step further, by putting the following on the first frame of the topmost layer:

_global.path = "/index.php";
_global.pg_1 = _global.path + "?id=1";

function eventListener(my_mc, mcInstance){
my_mc.onRollOver = function(){
this.gotoAndPlay("over");
}
my_mc.onRollOut = function(){
this.gotoAndPlay("out");
}
my_mc.onRelease = function(){
getPage(mcInstance);
}
}

function getPage(mcInstance){
var newPage = _global["pg_" + mcInstance];
getURL(newPage);
}

Then, on each movieclip I would place:

onClipEvent(load){
var instance = 1; // this number is different for every instance
_root.eventListener(this, _parent["_opt0" + instance + "_mc"], instance);
}

By creating a function and using it instead of having repetetive onRollover, onRollout movieclip method calls we’ve reduced the likelihood of errors from repetition and made future updates quicker and more efficient.