This means that, on the surface, the only way to prevent time line variables from being constantly created is an init function of sorts. (ActionScript 2.0 has a pseudo global object which is the main time line of a movie level, and a totally global object named _global.) This also means that private variables are restricted to the creation of object classes. I personally get annoyed at times with classes in ActionScript. One of the things that has always bugged me with ActionScript 2.0 and the introduction of classes is that they are hard to make portable. (I work on no less than 3 computers in a single week, and 4-5 when on business trips, so portability is paramount to my work.) Rather than being able to simply include the classes in the same folder as the flash working file (*.fla), you must specify where on the computer the includes are. This is just annoying if you work on the file on several different computers. There are a couple of ways to avoid naming the class include folder on each computer, but they are as much of a pain as the default method. Fortunately, there is a solution.

To reiterate, while this works in JavaScript and ActionScript 3.0, it will not in ActionScript 2.0:

(function(){
	//statements
})();
 
var myFunc = (function(){
	var hiddenVar = "hidden";
	return function()
	{
		return hiddenVar;
	}
})();
hiddenVar		//undefined
myFunc.hiddenVar; 	//undefined
myFunc(); 		//returns "hidden"

The good news about ActionScript 2.0 is that it retains the ability to pass anonymous functions as variables to another function. Like so:

var myArray = [5,1,6,23,15];
var sortedArray = myArray.sort(function(a, b){
	return a - b;
});
trace(sortedArray); //returns [1, 5, 6, 15, 23]

Knowing this, we can emulate anonymous function closures in ActionScipt 2.0. First we will create a global function that returns the function passed to it.

_global.closure = function(f)
{
	return f;
}

To use it, you treat it the same as you would the parenteses in the javascript idiom:

closure(function(){
	//statements
})();

Changing the name to something shorter will make this more practical and the code a little cleaner.

_global.$ = function(f)
{
	return f;
}
 
$(function(){
	//statements
})();

Given this new ability, we can now apply anonymous closures to our script without littering the time line object with useless variables.

Lets use a hypothetical situation to illustrate how we might use the anonymous closure. In this script, we want to make 5 buttons that each need to trace their respective number when you click them. We could code each button individually, but that is messy and doesn't promote good code reuse. Instead, lets make a loop that makes all the buttons work, in addition to making it easier to add more buttons.

for (var i = 1; i <= 5; i++)
{
	//for each button
	this["click" + i + "_btn"].onPress = $(function(n){
		//return a function that has access to n via
		// a closure
		return function()
		{
			//trace the number passed to the parent closure
			trace(n);
		}
	})(i); //pass in current loop iteration for caching
}

Now when you press click3_btn, it will trace '3' and click5_btn, '5'. In this way, we avoid creating useless variables inside each button, and we didn't have to create a singular use function.

Earlier I mentioned my slight distaste for how classes were implemented in ActionScript 2.0. Let me first caveat this statement by saying they are extremely useful and are wonderful for individuals or teams that have good version networks and servers. Just for myself and the smaller applications I write, I prefer portable objects. Lets see how we would write a singleton object with private variables and functions:

var bob = $(function ()
{
	//---------------------------
	//private variables
	var secret = "you found me";
	//---------------------------
	//private functions
	function compare(a, b)
	{
		return a > b;
	}
	//---------------------------
	//constructor
	var Bob = {
		//---------------------------
		//public members/variables
		works		:true,
		getSecret	:function()
		{
			return secret;
		},
		getCompare	:function(a, b)
		{
			return compare(a, b);
		}
	};
	//---------------------------
	//return object
	return Bob;
})();
//test
trace(typeof bob) 		//returns object
trace(bob.works);		//returns true
trace(bob.getSecret());		//returns the string: you found me
trace(bob.secret);		//returns undefined
trace(bob.getCompare(1, 2));	//returns false
trace(bob.compare(1, 2));	//returns undefined function

As you can see with the tests, we have a singleton object with private functions and variables as well as public methods and members. With a little work, using the prototypal inheritance method, we can make this a reusable pseudo class:

var Bob = $(function ()
{
	//---------------------------
	//private variables
	var secret = "you found me";
	//---------------------------
	//private functions
	function compare(a, b)
	{
		return a > b;
	}
	//---------------------------
	//constructor
	var Bob = function ()
	{
		//---------------------------
		//public members/variables
		this.works = true;
	};
	//---------------------------
	//public methods
	Bob.prototype.getSecret = function()
	{
		return secret;
	};
	Bob.prototype.getCompare = function(a, b)
	{
		return compare(a, b);
	};
	//---------------------------
	//return constructor
	return Bob;
})();
//invoke
var mybob = new Bob();
//test
trace(typeof Bob);		//returns function
trace(typeof mybob);		//returns object	
trace(mybob.works);		//returns true
trace(mybob.getSecret());	//returns the string: you found me
trace(mybob.secret);		//returns undefined
trace(mybob.getCompare(1, 2));	//returns false
trace(mybob.compare(1, 2));	//returns undefined

So, with a single global function, we can bring the magic of anonymous function closures to ActionScript 2.0. Enjoy!

The problem that comes with this method is the advent of ActionScript 3 with Flash CS3/Flex 2 and the rising use in namespaces by JavaScript developers (myself included). Both encour a heavy usage of object methods instead of one-off functions. Dynamically calling singleton functions is easy, you can just use subscript notation, e.g. object[’member/method’]. What you can’t do with this method is pass it any dot syntax and expect it to work e.g. object[’subobject.method’]. The subscript notation is only meant to work one level. So the previous example won’t work. In order to fix this issue and to make sending object methods/members in a single string a little easier, I wrote a function that takes a string and a base object (the default is the window object if no object reference is passed) and returns the method/member. (I know at this point that some will simply direct me to ECMAScript’s built in eval() function, but I personally avoid using it at all costs as it can have unintended, and unsecure results. I’ll let Stephen Chapmen tell you because this article is about something else.)

The function is executed somewhat simply by splitting the string at the dots and adding them as subscripts to one another in order. However, there are some other pieces to it that make it a little more friendly to mistakes and general usage.

function parseNameSpace(s , o)
{
	//default to window if no object sent
	var w = o || window, a;
	
	//reutrn if parsing not necessary or not a method
	if ( s.indexOf('.') == -1 )
	{
		return (typeof w[s] === "undefined") ? false : w[s] ;
	}
	
	//make array for looping through
	a = s.split('.');
	
	//run though members / methods
	for (var i = 0,l = a.length; i < l; i++)
	{
		w = w[a[i]];
	}
	
	//return object if it is valid, or return false
	return (typeof w === "undefined") ? false : w ;
}

The function takes two variables, first the string that you want to parse to an object member, and the second optional base object. The first variable w looks for the object “o” and if not found, defaults to “window” which is the default parent object of browser based JavaScript. (You could change it to “this” and it would work in ActionScript as well). Second, we check to see if the passed string has any dots in it. If not, we check to see if it is a regular function. This way you could use this function as a catch all even if you aren’t always passing nested functions. If it isnt a member of the window object, false is returned. If it does have dots, we split them into an array, and loop through it, making each a member of the previous using the subscript notation. Finally we check to see if the result is valid, and we return false if it isn’t, or a reference to the object itself.

Let’s take a look at a simple way to use it. Lets say we have an object literal with a subobject, and a method inside that.

var obj = {
	innerObj: {
		func: function(){
			return "worked";
		}
	}
}

Then we retrieve it via string with the function.

var objFunc = parseNameSpace("obj.innerObj.func");
alert(objFunc()); //shows "worked"

This should work most places as long as you are mindful of function scope. Enjoy!

I work on a Windows machine at work and Mac at home, so I am also excited to see cross platform development. One thing that is a little wonky about AIR is the way that you test your applications. Since AIR is built with an SDK instead of a builder application, such as Flash, you have you use the terminal to launch the SDK. So I came up with methods for OS X and Windows XP to use right-click contextual menus to test AIR applications. I will first note that you can use Aptana, Flex 3, Flash CS3, and Dreamweaver CS3 to test your AIR apps, but i thought i would make something for the hardcore coders. Though, I personally use all the aforementioned for AIR.

I will assume you have already installed the SDK on either system.

Windows XP: [skip to mac version]

In Windows XP, you can customize your right-click menus for any filetype with the 'folder options' panel. First, navigate to control panel, then folder options. Navigate to XML (It will be close to the bottom.).

If the button says 'Restore' where you expect it to say 'Advanced', it is because you have changed the Windows default opening program for the xml file type. Click 'Restore' first then you can click 'Advanced'. (When you are finished, you can change the opening program back when you are finished, the menu will still stick.)

Next, click the 'edit' button and we will create a new contextual command. You will need the full path of the location of your AIR SDK. For this example, I will use mine:

This will application field in quotes, followed by "%1". This will notate that you are opening the file right-clicked with this program. (This works on most other windows programs as well.) Then give it a name you can remember. This is how it will show up in the contextual menu. Just replace my AIR bin location with yours.

Now click OK and you should see your command in the window:

Now you can right-click your AIR application.xml and test them right from the Windows file explorer:

The CMD prompt will open, then your air file should open. The CMD prompt will be your error output window.

OS X:

The Mac version will be somewhat similar, but we will use Automator to do the function. This means you will need at least OS X 10.4 for this tutorial.

Open Automator, and go to 'Finder' in the Library menu, under Applications. Drag 'Get Selected Finder Items' to the work space.

Next, go to 'Automator' in the Library menu, and drag 'Run AppleScript' to the work space under 'Get Selected Finder Items'.

For the Applescript, I had a little help from Mac OS X Hints. You will need the directory for your Adobe AIR SDK. Mine is:

For this one, I will give the code to you. Paste this into the Applescript window and replace my AIR Adl location with yours:

 
on run {input, parameters}
	tell application "Terminal"
		activate
		if (the (count of the window) = 0) or ¬
			(the busy of window 1 = true) then
			tell application "System Events"
				keystroke "n" using command down
			end tell
		end if
		do script "'/Applications/Adobe AIR SDK/bin/adl' \"" & (POSIX path of ¬
			(input as string)) & "\"" in window 1
	end tell
	return input
end run
 

Next, we will save this as a Plug-in. Under the File menu, select 'Save As Plug-in..'. Then select finder as the application and give it a name you can remember:

Now you can just right-click your AIR application.xml, hover over Automater, and choose your new workflow to preview AIR projects!

Enjoy!

Without further adieu here are my entries.

View Larger

View Larger

View Larger

View Larger

As I began writing and testing Prototype class extensions and global functions, I noticed something I had not run into before with flash. If Import classes on one ActionScript layer, and call it on another Actions layer, or even the next frame, it produces an ActionScript error.

Normally, I put all actions and functions on one layer and have no keyframes unless they are inside other MovieClips, or I need to animate something to audio cues. With this current project, there was going to be so much ActionScript, I decided to do more than one Actions layer so I could keep everything straight. Never having a reason to do this until now, I was not prepared for some of the problems I ran into. First and foremost being that: If import a class on one Actions layer, and I create a new class object from that group on another layer, I get a syntax error.

Here is a quick example. I have a MovieClip named “box1” and I am going to tween it with the Tween class. normally I would just put it all on the same layer like this:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var boxTween:Tween = new Tween(box1, "_x", Regular.easeOut, box1._x, box1._x+300, 1, true);

This works perfectly and makes the box move across the screen on load. When I ran into the error was when I decided that I wanted all imports on one actions layer and the object on another. Like so:

I expected it to work just the same, as I have My publish settings set to ActionScript 2.0, top down, and Flash 8. Instead, I was presented with a nice error.

The problem is replicated also by putting the new Tween object in the following frame. Effectively, any frame that ISN’T the one I imported the class into. This strikes me as totally odd, as functions endure over frames and from layer to layer. I also tested this with other import classes besides the Tween class. I had the same issues with the Alert class and BitmapData class.

For now, the simple solution I came up with was making a function in the same frame/layer as the import classes that I would simply call elsewhere when I needed the tween to happen. This of course makes no sense to me at all, but it works perfectly.

import mx.transitions.Tween;
import mx.transitions.easing.*;
function tweenIt() {
	var boxTween:Tween = new Tween(box1, "_x", Regular.easeOut, box1._x, box1._x+300, 1, true);
}

Calling this function in other frames and layers has worked so far, and has more than solved my problem. If you are using multiple tweens, or classes, you could use passthrough variables to be able to make the function usable in other situations.

import mx.transitions.Tween;
import mx.transitions.easing.*;
function tweenIt(mc:MovieClip):Void {
	mc.boxTween = new Tween(mc, "_x", Regular.easeOut, mc._x, mc._x+300, 1, true);
}
tweenIt(box1)

If I found out any more info as to why this is a problem, I will post it here. If anyone else has some insight, please leave me a comment.

I work on a corporate network, so i can only install approved programs on my work computer. This keeps me from using my preferred win32 text editor. However, since I work with Flash a lot, I also have DreamWeaver, which is an acceptable text editor in a pinch (as long as you never EVER use the WYSIWYG window).

After using DreamWeaver a while, I've found that it does have a few very useful features. For instance, DreamWeaver has a lot of functions built into the api that can access the file system. These can be utilized within extensions; which brings me to today's goodie. The DreamWeaver Mass Find Replace extension.

I built this because of all the time I was wasting every time I needed to make changes to a file that was used multiple times. The nice part about DreamWeaver's access to the file system, is that it isn't restricted to just DreamWeaver file associations, so you can use this to replace any type of writable file. I use it for Swfs all the time.

Here is an example of how it works:

1. Open the extension and choose a master file (meaning, the file you want to replace all similarly named files with)
2. Choose the folder (and all sub folders) where you want to Find all files with the same name as the file you chose, and Replace them all with the chosen file.
3. Click OK.

That's it. You're done! This is a very simple, but powerful tool, so be careful using it. It overwrites all files with the same name as the replace file without warning.

It is this point in my learning that see how wrong I was to rely on _root for every outside-the-MovieClip function.

First lets look at how _root is wrongly commonly used:

button1_btn.onPress = function(){
	_root.variableValue = 55
	_root["myDynamicVariable"+1]._visible = false
}

Let's assume that this button code is on the main timeline. First of all, if 'variableValue' is on the maine timeline, and so is this button function, then you do not need to reference _root. When you call a function or variable inside of a function, Flash assumes already that you are referring to the timeline the parent function is in.

However, the dynamic variable on the second line poses a different problem. Most of the time, if you were going to do a dynamic variable without using _root, you would simply use 'this'. Like so:

this["myDynamicVariable"+1]._visible = false

Using 'this' should be treated with as much caution as _root. Whenever you say 'this' you mean the entity you are currently in. So, if you are writing a regular function, 'this' refers to the main timeline, because the function is in the main timeline. This principle is implicit.

To illustrate, lets use the previous button example coded on the timeline and replace _root with 'this':

button1_btn.onPress = function(){
	this.variableValue = 55
	this["myDynamicVariable"+1]._visible = false
}

First things first, this doesn't work (and this is what turns people to using _root). What confuses many people is why this works on the main timeline, inside regular functions, but not in this instance. When you write a button function like this, you are making a references to an event, onPress , given by the object button1_btn. So 'this' refers to button1_btn and not the main timeline. To clarify, using 'this' inside of a timeline written button function refers to the button, calling a variable or function works as it would inside a normal function.

In many places where you might use _root, you can also use _parent, which is one MovieClip out of where you are (_parent is stackable to go out as many times as you need). For the button code, by itself, it still wont work.

button1_btn.onPress = function(){
	_parent["myDynamicVariable"+1]._visible = false
}

This function would refer to the parent of the timeline the function is in. Because as we just learned, if 'this' isn't referred, the button function is treated as a normal timeline function. So to get the function to work without using _root, we need to combine the two.

button1_btn.onPress = function(){
	this._parent["myDynamicVariable"+1]._visible = false
}

This works because 'this' refers to button1_btn, therefore _parent refers to button1_btn's parent, the timeline this function is in.

Now for the advanced solution.

Using this._parent could get a little redundant after a while, and would cease to work if you moved the function to a different MovieClip. The best solution i have found is to make a variable that is data-typed as a MovieClip and refer it to the timeline you are wanting to reference.

var home:MovieClip = this

What this says is that anytime you call home you will be referring to the timeline. (You can also refer to other timelines by replacing 'this' with _parent, MovieClip or MovieClip.ChildClip).

Let's see how it would work:

 
var home:MovieClip = this
button1_btn.onPress = function(){
	home["myDynamicVariable"+1]._visible = false
}

So now you have no excuse what-so-ever to use _root unless you really REALLY mean it!

For those not in the know, here is how you include an external ActionScript file:

#include "filepath/actionscript.as"

The downside of using external AS and changing it is that you have to publish every file that includes that script file. This gets to be a little tedious when doing it file by file, so I made a flash extension that will publish all files in a folder.

To use the extension, install the mxp, then restart flash. Under the commands menu, there will be a command called “BatchPublish”. Run it, then select the folder that contains your flash files that need to be published. This version does not publish files in sub-folders, but I am working on that for the next version, which will also include a GUI.

Update 5-16-07: I made version 2 finally. Now it has a GUI and some better options for output. You can publish all FLAs in a directory (and all subdirectories within) to the folder of choice. Force Swf only, and save and compact on close.

The most common places you will see FLV video for the masses is of course YouTube and Google Video, but many more sites are catching on. Flash has 98% browser penetration, and works on Mac, PC, and Linux, so it is a no brainer.

So what do you do with all those downloaded FLVs? You could open Flash and make a quick SWF file to play it, but that would be annoying and wouldn't work at all for people without Flash Professional installed. The direct problem with FLVs is that they dont play in Windows Media Player or Linux's Totem player. If you are on a Mac, you can install Perian and Quicktime will play the FLVs You could convert them to normal video files with some free video conversion programs such as Media Coder for Windows or FFMpegX for Mac. You could also use a free online converter such as Media Convert.

However, all that could add up to time wasted. The solution I found to be the most pleasing and easy was to download the free VLC Media Player for Windows/Mac/Linux/Unix. VLC plays FLV files natively and vry clearly. The controlls are quite plain but intuitive, and it supports playlists for viewing multiple FLVs. Best of all, it also plays pretty much any other file format thrown at it. I have used it as my primary video player on Mac and PC for 2 years and have been very satisfied. I don't even open Windows Media Player anymore. VLC plays all Windows Media files out of the box. Plus, if you are on a heavily regulated network at work, or do not have install privelages, there is a no-install thumbdrive version of VLC with all the same capabilities as the full install version!

The first solution was to hard code disabling of MovieClips/buttons like so:

button1_btn.onPress = function(){
     popUp_mc._visible = true;
     button1._btn.enabled = false;
     button2._btn.enabled = false;
}
 
popUpClose_btn.onPress = function(){
     popUp_mc._visible = false;
     button1._btn.enabled = true;
     button2._btn.enabled = true;
}

As you can see, this is VERY messy and impractical, as every time you add another button, you have to edit the code for the pop-up buttons to enable/disable it when shown.

One thing we did know up front is that if you put two buttons on top of one another, the one with the highest depth will over take the one below it. Therefore only the top one get's clicked. (The same is not true for rollovers, both items recieve a rollover event, but not click.)

So, we tried using a giant button below the background of the fake pop-up movieclip. It worked in the fact that we could not click buttons below the MovieClip. What was not cool was the hand cursor that showed up over the entire MovieClip because we had a button in the background. Fortunatly, we discovered a built in ActionScript function that disables the hand cursor:

hiddenButton_btn.useHandCursor = false;

It solved our problem completely! Now we could have pop-ups and not be able to click buttons underneath them while they were open.

Here is an example file.

ExpressionEngine has a built in word limiter function that can be used on template tags that produce words. My immediate problem with using the word limiter is that it would cut off paragraphs without closing the paragraph tag. I also show a lot of code within pre tags and those not being closed screwed up the entire page layout.

In my search for a solution that would always work, I came across the_butcher's Tag Limit Plug-in for ExpressionEngine. It is a rather brilliant plug-in that lets you wrap a content output with tags that will limit the amount of a certain tag that will be renderd. Like so:

{exp:tag_limit tag="p" class="foo" num="2" offset="2"}

This instance will only show 2 tags with the class "foo" and will start with the third one as the offset is set to two. My only grip so far is that you cannot use autoformatting in your post menu when you make posts. You have to enter all html tags yourself, otherwise the extention renders nothing. My guess is that the extention is run before the tags are automatically placed, but I don't know for sure. The simple solution was for me to just enter the paragraph and break tags myself when posting, which isn't a big deal, just a pain in the butt.

All in all, I love the plug-in, and what I was able to accomplish with it on the site. I could have used the summary tag to do what this does, and only showed summaries on the front page and full articles at the link, but I like this idea better. It lets me post a little faster not having to come up with a summary as well as the content

I included the full instructions from the flash help file as well as some on how to use the tester. This way, i can simply see how a tween/transition is going to look without even opening flash. It has been a real time saver already.

I will say up front that it is by no means flawless, so I stuck it as an Alpha release. Let me know what you think.

The setup was simple:
Using Flash 8, I made a main movie that loads the interface, and when another section is clicked it loads within the main swf. I was also using the same script that I usually do for sound, which always seems to work (and is subsequently the one Adobe/Macromedia recommends).

Like so:

function buttonSound() {
	blip = new Sound();
	blip.attachSound("blipHover");
	blip.setVolume(100);
	blip.start();
}

My script was right, and my linkage was right:

It was a total mystery to me, so as usuall, I chose not to google the problem, and I experimented. Oddly on the first try I discovered that if you are calling an exported sound in a swf loaded withen a swf, the sound needs to be exported in the main swf and not the loaded swf.

Weird stuff.

Mainly it was adding the background gradient to the top and some new JavaScript. The background CSS was a very simple effect using the html tag AND the body tag for displaying background images.

html {
	background-image: url("images/back.gif");
	background-repeat: repeat;
	background-color: #666;
}
body {
	margin:0;
	padding:0;
	background-image: url("images/back_gradient.png");
	background-repeat:repeat-x;
	text-align:center;
}

I of course assumed it would go very quickly and I just change, upload, and go. I should have known better.

When I was editing the html page, I noticed that I didn't have a doctype. Being forced to use IE6 all day by the army, I had forgotten what good browsers do when a proper doctype is added. It broke my always-in-the-middle table hack.

There was a simple JavaScript fix I had planed on using anyway, so I decided to implement it. In order for it to work correctly I had to make the div container for the content absolutely positioned. When I did so, the top gradient for the body disappeared. I thought at first that it was a server side issue until I tried it locally with the same results.

I spent more than two hours looking with a friend for the problem. It didn't come to me until after I implemented his suggestion of running a vanilla page with just the CSS.

When an object is absolutely positioned, it doesn't push is parent container. As it was the only thing on the page, and the body counts as a container, there was nothing pushing the body open so that the background could be seen.

The simple solution is adding a height value to the body tag that is as high or higher than the background image.

body {
	height:400px;
	margin:0;
	padding:0;
	background-image: url("images/back_gradient.png");
	background-repeat:repeat-x;
	text-align:center;
}

The good thing is that it also validates! Enjoy.

Within the Director mx 2004 lesson, there were a TON of Quicktime movies that played within the lesson. We batch changed all these into FLVs when we ran into a problem. We needed the flash time-line to advance when the video was finished.

With Flash MX2004 and Flash 8, you can script play() and stop() functions with just the instance name of the FLV container, however, since an FLV is streaming video, and not a swf file, a method like:

if (myVideo._currentframe == myVideo._totalframes){
//function()
}

will not work.

With Flash 8, cue points were introduced, allowing you to set points within the FLV that you can set listeners for and do functions on the event of those cue points. This is mostly what we needed, except that would require reimporting 80 videos and adding a cue point at the end of each video. We really didn’t have time to do that.

With a little help from the built in flash help, we discovered that if you import the mx.video class, there is already an event built in called “complete”.

So with this, we were able to come up with a generic listener that would run a function upon the completion of a video loaded into the component FLV player.

import mx.video.*;
function the_end(eventObject:Object):Void {
	//end of video functions
}
myVideo.addEventListener("complete", the_end);

Enjoy!