page1
On the left you will see a Flash MX Object Orientated Menu system collecting information about the other files in the directory it is contained in via PHP
The Pages indicated are instructions on how it was created.
To Follow through you will need:
1. Flash MX from Macromedia
2. An HTML Editor of your choice, I've used Dreamweaver MX
PART1 - Setting up the Flash Movie
PART2 - ActionScript - Define some variables and set up a Text Format Object
PART3 - ActionScript - Creating the Object
PART4 - ActionScript - The Red Bar
PART5 - ActionScript - More methods for our function
PART6 - ActionScript - Tying it all togeather
PART7 - PHP - The PHP Script
PART8 - ActionScript - The whole script
PART9 - Directory Structure - Making it work
ActioScript Methods Used in this Tutorial:
new Array(); new TextFormat(); function(); setTextFormat(); removeMovieClip(); createEmptyMovieClip(); lineStyle(); moveTo(); lineTo(); new String(); getURL(); prototype Object.registerClass(); new LoadVars(); attachMovie();
Flash MX includes a great reference section which allows you to look up the useage of ActionScript Methods.
If you would like the source files:
1. Just the Flash .fla file
2. Just the PHP .php file
3. Everything, the whole directory with the .fla, .swf and .html files
PART1 - Setting up the Flash Movie
Start with a new Movie, In this case I have used a 150 x 400px movie, set a Background Color.
Now you will need a MovieClip in the Library for creating the menu items, Iin this case called 'but', for button because that is how it will behave..
This clip should have two layers, one for the text and another for the script. The script Layer just has a stop(); command to make sure the clip stays still and the text layer has a dynamic text field with an instance name label_txt.
Set the font size and color but don't worry too much as we will be overwriting it with ActionScript anyway. Make sure the top left of the textfield is at 0,0 of the instance.
There should also be enough room in the text field for your menu names, set it to a bit less than the width of your movie, I just put some charachters in it to size correctly.
Now you will need to set the linkage for your MovieClip, this is very important otherwize the Flash engine will not include the movie in the final swf.
Right click the movie in the library and tick export for actionscript. We'll use 'but' for the identifier name, make sure export in first frame is also ticked, it usually is by default.

PART2 - ActionScript - Define some variables and set up a Text Format Object
On the Main timeline Create a layer for the Script and start coding on line one.
First we need to set up some variables we will use later.
The itemNum array allows for the number of menus items we can create, ten is about all that will fit in the 400px movie height.
[as]itemNum=new Array("one","two","three","four","five","six","seven","eight","nine","ten");
defX = 40;// starting _x for menu items
defY = 40;// distance _y btw each menu items[/as]
Now a basic Text Format Object. The TextFormat Constuctor lets a set of text properties bo grouped and applied, see the ActionScript Dictionary for further detail. myformat = new [as]TextFormat();
myformat.color = 0x999999;
myformat.font = "verdana";
myformat.bold=true;
myformat.align="left";
myformat.size=14;[/as]
The color, font and size are set here, which is why we weren't to concerned with this when setting up the 'but' MovieClip. Changes here are reflecteed in all the menu items, kind of like a style.
PART3 - ActionScript - Creating the Object
Now its time to do the big Object programming, don't be too concerned, the Text format was also an Object.
It all starts out like a custom function.
[as]myButton = function () { [/as]
Inside the myButton Function we will write a series of functions using the this keyword which will create mehtods of our object.
The first method uses the onLoad event to apply our carefully considered text format to the text feild we created in the 'but' movieClip. (the 'but' MovieClip will be the foundation of our object)
[as] this.onLoad = function() {
this.label_txt.setTextFormat(myformat);
}; [/as]
Next we trap a rollover event. Everytime the mouse rolls over one of the menu items this method changes the color of the text and makes the red bar roll out under the text.
[as]this.onRollOver = function() {
_root.highLight_mc.removeMovieClip();
this.label_txt.textColor = 0xFFFFFF;
// create highlight bar
this.doHighlight();
}; [/as]
NB: The first line of this method removes the highlight MovieClip from the root timeline if it has been created by another menu item.
PART4 - ActionScript - The Red Bar
The red bar is actually a movieClip created on the fly using Flash MX's new vector drawing ActionScript.
It is also a method of myButton and is being called onRollOver. It is defined within the myButton Object using the this keyword
[as]this.doHighLight = function() { [/as]
We will need a counter so initalize i to zero
[as]i=0;[/as]
Now Create an empty MovieClip on the root timeline named highlight_mc underneath the menu item.
[as]_root.createEmptyMovieClip("highLight_mc", 1);[/as]
Now that it exists set it's position, in relation to the Menu item that has been rolled over, to create the movie.
[as]with (_root.highLight_mc) {
_x = this._x-50;
_y =this._y;[/as]
Define an EnterFrame event for the highlight_mc. The enterFrame creates a loop drawing a thick red line 200 pixels wide using ActionScript Vector Drawing methods.
[as]_root.highLight_mc.onEnterFrame = function () {
if (_width<200) {
lineStyle(20, 0xFF0000, 80);
moveTo(_root.highlight_mc._x+i, 10);
lineTo(_root.highlight_mc._x, 10);
i += 10;[/as]
Once it is 200 pixels long clean up the enterFrame so we don't have a neverending loop to slow down the Flash player
[as]} else {
onEnterFrame = undefined;[/as]
Now finish up the Code Blocks
[as]}// end if-then-else
};// end enter frame
}// end with
}; // finish the function[/as]
PART5 - ActionScript - More methods for our function
We can also cover the RollOut event for each instance of our object, changing our menu [as]color back. this.onRollOut = function() {
this.label_txt.textColor = 0x999999;
};[/as]
Make it an active link based on it's instance name. (The use of a String object here allows the toLowerCase String method as menu items are in uppercase.)
[as]this.onRelease = function() {
myString=new String(this._name);
getURL(myString.toLowerCase()+".html");
};[/as]
To actually set the text of the menu item the txtSet method is defined for the object which takes one parameter, name and sets the dynamic textfield of the movieClip which we named label_txt.
[as]this.txtSet = function(what) {
this.label_txt.text = what;
};[/as]
Finally a positioning method so each objected created can be moved around on the stage.
[as]this.posMe = function(xVal, yVal) {
this._x = xVal;
this._y = yVal;
};
};// Don't forget to close myButton Definition[/as]
Once we have it all defined we tell Flash the myButton Object is actually based on the movieClip Object and assosiate it with the linkedClip from then library we made when we set up the movie.
[as]// register myButton as a movieclip
myButton.prototype = new MovieClip();
//assosiate the object with 'but' in library
Object.registerClass("but", myButton);
//**********************************************[/as]
PART6 - ActionScript - Tying it all togeather
This last part of the code Brings all the preparation togeather by calling a PHP Script which reads the files in the directory that can be linked to for our Flash movie then sends their names.
Start with a LoadVars Object which allows us to load Data into a Flash Movie from a number of sources.
[as]myLabels=new LoadVars();
myLabels.load("script/menus.php");[/as]
Now we use the onLoad event to make sure we don't try to set up our menus before we know how many we we need.
[as]myLabels.onLoad=function(){[/as]
The PHP Script outputs variables in name value pairs separated by ampersands which is how Flash likes it's variables
[as]&one=PART1&two=PART2& [/as]
Each of the numbers one and two is going to be a variable name in ActionScript associated with the value 'PART1' and 'PART2' respectively.
The PHP finishes this output with the variable 'num' which tells us how many items it found. So we can loop through and extract each of the file names into an array.
[as]for(i=0;i<Number(myLabels.num);i++){[/as]
The trick in this next line of code is that the array menuItems is being populated with the variables one,two, three etc from the myLabels object sent by the PHP Script.
The itemNum array, defined at the begining of the script, holds the names of the variables we expect to receive.
NB: The itemNum array is evaluated each time the line of code is executed, it will be myLabels.one on the first iteration of the loop.
[as]menuItems[i]=myLabels[itemNum[i]];
}// end for[/as]
Once all that is sorted out now it's time to actually put all the menus on the stage, populate their values and set their position. Do this with a loop based on how many values have been put into the menuItems Array.
[as]//Place menu items on stage
for (i=0; i<menuItems.length; i++) {[/as]
Attach each of the movies to the root timeline, making sure thy will be above our highlight_mc movieClip when it is created.
[as]_root.attachMovie("but", menuItems[i], 100+i);[/as]
The set each items position and text using the posMe method and txtSet method
[as]// position menus and set text
_root[menuItems[i]].posMe(defX, i*defY);
_root[menuItems[i]].txtSet(menuItems[i]);
}// end for[/as]
Don't forget to finish off the code
[as]}// end on load
stop();[/as]
PART7 - PHP - The PHP Script
The PHP Script which follows reads the directory above it and returns all the files ending in .html as uppercase without the file extention in the format Flash wants to read.
The comments (// just like ActionScript) explain what is happening. There are plenty of good sites about PHP, to look up some of the functions used here go to PHP.net http://www.php.net/docs.php
[as]<?php
$fileCount=0;// counter
// $myNum array is name in name=value pair
$myNum= array("one","two","three","four","five","six","seven","eight","nine","ten");
if ($dir = @opendir("../")) {// open directory
while (false !== ($file = readdir($dir))) { // loop through files
if ($file != "." && $file != "..") { // ignore . & ..directories
if(strstr($file,".html")){// only read files that end in .html
// build name=value pairs for flash from linkable files for menu
$valuesForFlash .="&".$myNum[$fileCount]."=".strtoupper(substr($file, 0, strpos($file, ".")));
$fileCount++;
}
}
}
closedir($dir);
}
// Output for Flash
$valuesForFlash.="&num=".$fileCount."&";
print $valuesForFlash;
?>[/as]