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.

Javascript Favelet: Outline

Whenever I produce I website I am always thankful for the Firefox Web Developer Toolbar extension; it’s an incredible convenience. One particular feature that I use constantly is “Outline”. This feature is great for seeing the locations of various elements on any page. But I’ve always wished that there was an equivalent feature/extension for Internet Explorer. Well, to my knowledge, there isn’t, but I’ve thrown together a little script (Javascript, to be exact) that outlines (virtually) any given element in colors of my choice. Here’s the script:

function outline(){
var tagArray=['p','a','div'];
var colors=['red','green','blue'];
for (var i=0; i<tagArray.length; i++){
var tags = document.getElementsByTagName(tagArray[i]);
for (var j=0; j<tags.length; j++){
var tag = tags[j];
tag.style.border = ['1px solid '+colors[i]];
}
}
}

Obviously the code is not that complex, but it can be incredibly useful. One particularly nice thing about it is that one could place a fairly large amount of elements into the arrays.

Here’s a bookmark that I use anytime I want to call this script into action: Bookmark me. Using it this way is far more convenient, in my opinion. Well, I hope someone finds this useful; enjoy.