Dynamic buttons and attachMovie()
Well, I've been seriously neglecting this area of the forum so I thought I'd answer one of the questions with a bit of a tutorial.
You can download the .fla here (.zip file)
This is an example of how to dynamically create buttons on the stage, and have them respond by loading a video from the library to the stage using attachMovie. This may not be a good method for large videos, but it can be very helpful when you want to load everything up front - and call small clips to the stage upon request.
Here's the idea - let's say you have 12 short video clips in your library, or you import a .swf containing more than one .flv in the library - either way, you want to load them all at the same time, and give the view a choice of clips to view with buttons.
It's pretty amazing what you can do with just a few lines of code, a button, and some well organized data.This is the great thing about Flash, reading data and performing repetive tasks can be easily automated. You simply create an array, import an .xml file, or pull the information from a database.
So, let's keep it simple and just build an array with the imformation we know we'll need to display the video the user selects, and position it on the stage where we want it.
Here we go:
First, create a new .fla and name the default layer Actions. We're only going to have one frame for this movie, so click on the single frame, open the AS editor and type or paste the first lines of code.
Code:
// it never hurts to say "this"
this.stop();
// set _root as a _global.MAIN, easier to transfer this code - good practice, easier targeting.
_global.MAIN = this;
// set button depth
MAIN.depth = 0;
// set video depth
MAIN.vidDepth = 100;
It's not a bad practice to use _global variables to make it easier to target main elements of your movie. I use MAIN for the _root, VIEW for my all my media elements, and NAV for navigation. Don't go overboard, I seldom use more than 6 _globals - but they're very handy when it comes to targeting from clips attached dynamically. For now, we'll just use MAIN to reference the _root.
So now we'll need some buttons, start by creating a standard button with rollovers - or a movie clip type button if that's your style. Once you have your button, create a new movie clip in the library named vidButton and insert the following information:
http://www.5gdm.com/flashkit/mc.jpg
This tells Flash to export the clip on the first frame, and sets a name to use with the attachMovie() command.
Now, create two layers in the new movie clip, and drag an instance of your button to layer 2 and make sure to set the _x and _y to 0. Then, create a dynamic textfield and name it buttonText in the properties window, and you're done with that.
Now, import a couple of videos to the library then create two new movieclips named vid1_mc, and vid2_mc and set the export settings the same as you did for the vidButton.
Drag your videos to each respective movieclip and check "yes" when Flash asks if you'd like to add more frames. Set the _x and _y to 0;
You're library should now look like this:
http://www.5gdm.com/flashkit/lib.jpg
So now we'll need to create a data array containing all the information we need to display our buttons and the videos associated with them. We'll need to know the following parameters for each instance we want to show:
1. The button text we want to display
2. The _x position where we want the video to be located
3. The _y position where we want the video to be located
4. The _x position of the button
5. The _y position of the button
6. The Export ID of the video movieclip
So an array of this information looks like this:
Code:
// [button text, vid._x, vid._y, button._x, button._y, video instance in library
MAIN.vidParams = ["Video 1", 200, 100, 22, 68, "vid1_mc"];
If we want to add another set of data for another clip, we simply create a compound array (containing more than one array - or arrays inside of arrays)
Code:
MAIN.vidParams = [["Video 1", 200, 100, 22, 68, "vid1_mc"], ["Video 2", 200, 100, 22, 116, "vid2_mc"]];
You can include as much or as little information as you want - but keep in mind, it does take Flash some time to loop through longer arrays - if you are using large amounts of data - there are better methods for creating arrays or objects to store the data in an easier to process object.parameter format.
So most of the dirty work is done, now it's just a couple of lines of code to tell Flash what to do with all this information. So we'll define our one an only method, MAIN.makeButtons(), like this:
PHP Code:
MAIN.makeButtons = function(a) {
for (i=0; i<a.length; i++) {
var b = MAIN.attachMovie("vidButton", "vidButton"+i, MAIN.depth+i, {vidx:a[i][1], vidy:a[i][2], _x:a[i][3], _y:a[i][4], vid:a[i][5]});
b.buttonText.text = a[i][0];
b.onRelease = function() {
MAIN.attachMovie(this.vid, "currentVid", MAIN.vidDepth, {_x:this.vidx, _y:this.vidy});
};
}
};
NOTE - use of php tags is only to beat the VBcode on the forum - looks kind of pretty too.
OK, that's a bit deep - I know. But here's what's going on. The "a" in the brackets is a parameter we pass to the function - and that parameter is our array. So we would call our function like:
Code:
MAIN.makeButtons(MAIN.vidParams);
Then we use a for statement to loop through the array - if this were a simple array the first item in the array would be vidParams[0], which is the button text, but since we are using a complex array - vidParams[0] is the first array (0 is the first postion in an array) so if we want to look at the first location of the first array we want to look at vidParams[0][0] So we're just looping through the array, and while attaching the button - we're using the attachMovie init object feature to assign the parameters we've set in the array to be properties of the buttons.
So here's the whole thing in one shot - the last line get's everything going.
PHP Code:
this.stop();
// set _root as a _global.MAIN, easier to transfer this code - good practice, easier targeting.
_global.MAIN = this;
// set button depth
MAIN.depth = 0;
// set video depth
MAIN.vidDepth = 100;
// Video and button parameters
// [button text, vid._x, vid._y, button._x, button._y, video instance in library]
MAIN.vidParams = [["Video 1", 200, 100, 22, 68, "vid1_mc"], ["Video 2", 200, 100, 22, 116, "vid2_mc"]];
// methods
MAIN.makeButtons = function(a) {
for (i=0; i<a.length; i++) {
var b = MAIN.attachMovie("vidButton", "vidButton"+i, MAIN.depth+i, {vidx:a[i][1], vidy:a[i][2], _x:a[i][3], _y:a[i][4], vid:a[i][5]});
b.buttonText.text = a[i][0];
b.onRelease = function() {
MAIN.attachMovie(this.vid, "currentVid", MAIN.vidDepth, {_x:this.vidx, _y:this.vidy});
};
}
};
// get things rolling
MAIN.makeButtons(MAIN.vidParams);
Your AS editor should look like this:
http://www.5gdm.com/flashkit/as.jpg
If you take a look at the .fla you'll notice that I've added a couple of extra layers to one of the video movieClips - as simple as this is to do, it's often overlooked. You can add anything to a movie clip's timeline, but most importantly - it's a good place to put code. Back to the reasoning behind using MAIN as a _global, the last frame could tell the main timeline to do some nice things - like this:
Code:
this.stop();
this._visible = false;
MAIN.loadNext();
Then you create another method for MAIN:
Code:
MAIN.next = 0;
MAIN.loadNext = function(){
this.currentVid.removeMovieClip();
this.vidButton[++MAIN.next].onRelease();
};
But that might be another tutorial...
