Document setup

Button instances

Movie clip setup

Load movie action

Publish settings

External swf movies

Preloaders

Importing video

Control buttons

Remaining swf files

Document setup

OK this tutorial will contain everything you need to complete this first task.

This tutorial assumes that you have some flash knowledge already, such as how to make new layers, convert something to a symbol etc

This is what you will be making (although yours should look a lot better!)



Let's get into it.

Load Flash MX. A blank document should already be open and the new Property Inspector should be displaying your movie properties. The Property Inspector is new to Flash MX and displays the parameters of whatever we currently have selected. In this case, we have nothing selected so it is showing us our movie properties. OK click on the size button



to get into the document properties window. Change the document to 600 X 400 and whatever background colour you want. Leave it at 12 fps and click OK.

Make 4 new layers and name the 5 layers "Actions, "button text", "buttons", "content" and "background".

Button instances

Click on frame 1 of the buttons layer and draw a rectangle that will become your button. Select it and hit F8 to convert it to a symbol. Make sure that the symbol "behavior" type is button and name it "mainButton".



An important thing to note here is that while Flash 5 always selected movieclip as default when making a new symbol, Flash MX actually remembers the type of symbol that you made last and will be set to that.

Another thing to note is that you can now give your buttons "instance names" which opens up a world of possibilities. We won't being going into all of these possibilities here, but what we will be doing is putting all of our code for our buttons on to frame 1 of the main timeline and targeting our buttons via their instance names. We'll get to that in a sec.

Select your button and in the Property inspector panel give it an instance name of "lowResBut". Option drag out 2 copies of your button and change the instance names of these to "midResBut" and "highResBut". Align your buttons neatly over the left hand side of the stage. Give your buttons "over" and "down" states if you wish.

Save your movie as "main.fla" into a folder called "Task1".

OK in the button text layer put some "static text" over each button that tells the user what the button does (eg load low res clip). Lock the button text layer and the buttons layer when you're done.

Movie clip setup

OK click on frame 1 of the background layer draw a big square (350X350) using a stoke colour that stands out from the background and a fill colour that is the same as the background. The square should be centered vertically and just in a bit from the right hand side of the stage. Lock the background layer when you're done.

Save your file.

Click on frame 1 of the content layer and draw another square - make this one 300X300. The colours don't matter for this one. Select the square you just drew and covert it to a movieclip - name it "conentMC". Also, and this is very important, make sure that the registration point for the MC you are creating is set to the top-left corner.



OK move the new MC so that it is right in the middle of the background square that you drew. Give the MC an instance name of "content". Double click on the content mc to go inside it. The square graphic should be automatically selected so hit F8 again to convert this to another MC - name it "square" and click OK. Now set the Alpha of this square MC to 0 (you do this by selecting it and then clicking on the color drop down menu in the Property Inspector).

Click on the Back button



to get back to the main timeline.

Load movie action

OK now for a bit of actionscripting. Click on frame 1 of the actions layer and insert these actions. Tip - put the actions panel into expert mode and you can copy and paste the actions directly from this webpage.

lowResBut.onRelease = function() {
// load in the low res swf
loadMovie("lowRes.swf", "_root.content");
};
midResBut.onRelease = function() {
// load in the mid res swf
loadMovie("midRes.swf", "_root.content");
};
highResBut.onRelease = function() {
// load in the high res swf
loadMovie("highRes.swf", "_root.content");
};
// stop the main timeline
stop();

This is the new MX way of scripting. To add actions to a button before, you would have selected the button and given it an action such as

on(release){
//do whatever;
}

You can still use this way of scripting if you wish, but you will be missing out on the benfits of the new way (such as having ALL our scripts in one location) and you will not be able to use many of the new actions that can only be implemented using this new style of scripting. I'm not going to go on about it too much - just do as I say! : )

If you have never used the loadMovie action before then you should have a read of this.

Publish settings

OK you can test your movie if you want but it won't work yet - we still have to make the external swf movies that out buttons are loading in.

Go into the publish settings for your main.fla (File/Publish settings). Make sure that swf and html are both selected. Click on the Publish button and then click OK. Save your movie and then close it.

External swf movies

Now, make a new movie. Open up the document settings and make your movie 300 X 300 (remember - this is the size of the contentMC in the main.fla) with the same background colour as the main.fla. Leave the frame rate at 12.

Make 3 new layers and name your layers "actions", "preloader graphics", "video", and "buttons".

Preloaders

OK first of all we'll make our preloader. Paste this action on to frame 1 of our actions layer. I've commented the script so if you have never made a preloader then have a read of the comments and hopefully it should be clear what is going on. If it isn't clear then you would probably benefit from doing the basic Flash tutes found here.

this.onEnterFrame = function(){
//this checks to see if the movie is still loading
if (this.getBytesLoaded() < this.getBytesTotal()) {
//this assigns a variable to the total size of the movie (in Kb)
Total = this.getBytesTotal() / 1000;
//this assigns a variable to the amount that has been loaded (in Kb)
Received = this.getBytesLoaded() / 1000;
//this uses simple maths to calculate the percentage that has been loaded
Percentage = (Received / Total) * 100;
//this displays the percentage in a dynamic text box
PercentText = int(Percentage) add "%";
//this changes the x scale of our progress bar to match the percentage that has been loaded
ProgressBar._xscale=Percentage;
//this tells the movie what to do when it has been fully loaded
} else {
gotoAndStop(2);
this.onEnterFrame=null
}
}
stop();

Now select frame one of the preloader graphics layer. Make a new "dynamic" text box and give it a variable name of PercentText. Type "Percentage display" into the text box and customise the font colour, size and placement to whatever you want. Now draw a thin horizonal rectangle with no stroke that is almost the width of stage. This will be our progress bar to indicate how much of our movie has loaded. Select the rectangle that you just drew and convert it to a movieclip. Name it "ProgressBarMC" and make sure the its registration point is set to the center-left.



Give your new mc an instance name of "ProgessBar". That's it for the preloader. Time to bring in the video.

Importing video

Click on frame 2 of the video layer and hit F7 to insert a blank keyframe. With frame 2 still selected, choose File/Import and locate your video file. For this project, the original source file should be a 720 X 576 mov with DV-PAL compression at 100% quality. Double click on your video file to import it. A dialogue box will open asking if you want to embed the video or link to it - choose embed and click OK. The second window that appears has lots of video compression options. You can find detailed info on all of these options here. For now though, let's make this our low res version so change the settings like so and click OK.



OK after Flash is done importing it will ask if it is ok to add some frames to your movie - click OK. You should now see your video on the stage. Position it so that it is centered horizontally and just a little down from the top.



Save your movie into the same folder as main.fla and name it "lowRes.fla".

Control buttons

Now lets add our control buttons. I'm feeling lazy so for this tute I'm just going to take some preset buttons that came with flash - you can make your own! :)

Click on frame 2 of the buttons layer and hit F7 to insert a blank keyframe. Draw yourself a play button, a stop button, a step forward button and a step back button . Convert each one to a button and name them appropriately. Give them these instance names -

playBut
stopBut
stepFBut
stepBBut

You might like to just make one button like we did in the main fla and use it for all 4 (just changing the graphics on top) but that's up to you.

You should have something like this (only better)



OK now go to frame 2 of the actions layer. Insert a keyframe (F6) and add these actions to the frame

playBut.onRelease=function(){
play();
}
stopBut.onRelease=function(){
stop();
}
stepFBut.onRelease=function(){
gotoAndStop(_currentframe+1);
}
stepBBut.onRelease=function(){
gotoAndStop(_currentframe-1);
}

It should be fairly obvious what all the buttons are doing.

Now in the buttons layer, extend the frames out to the length of the video by hitting F5. Click on this same frame in the actions layer and hit F6 to create a keyframe. Insert this action on that frame

gotoAndPlay(2);

Your timeline should now look something like this



Now go into the publish settings. Uncheck the html box so that just the swf box is checked. Click on publish and then click ok. Save your movie.

Go to the folder in which you saved your files and you should see a file name main.swf. Open it up and click on the "load low res clip" button. Your external swf should load in and the video controls should work. If they don't then....hmmmm...better start again :)

The preloader won't really work at the moment because it is running off the hard drive. get yourself some webspace if you don't already have some and upload the 2 swfs and the html file there to test out the preloader.

Did you notice anything buggy with the video control buttons? One thing I noticed was that if our timeline was paused at frame 2 and you click the step back button, then the preloader flashes up for a second. This looks pretty bad so lets fix. In frame 2 of the actions layer, underneath the code thats already there, add this

stepBBut.enabled=false;

Then make a keyframe in frame 3 of the actions layer and add this

stepBBut.enabled=true;

This is basically turning our button on and off - much easier than it was in Flash 5. Publish your movie again then run main.swf to test out the changes. You will notice now that if the timeline is on frame 2 then you no longer get the finger icon when the mouse is over the step back button.

OK save your lowRes.fla

Remaining swf files

Now we want to make another couple of swfs that contain our video at higher quality settings. We'll use lowRes.fla as a template and just make a few changes.

Save the lowRes.fla again but this time choose "Save File As" and save it as "midRes.fla" to the same folder as the other flas.

Look in the library of midRes.fla. You will see the video file that you imported earlier. Click on it and then click on the trash button down the bottom of your library. Flash will warn you that doing this is not undoable. Let's live on the edge and click delete anyway. You will notice that the frames on the timeline that used to contain our video are now blank. Click on frame 2 of the video layer and choose import. Locate the video file again and double click on it. Embed the video again but this time use these compression settings -



Align the video correctly on the stage again.

That's it. The preloader and control buttons will all still work so just publish your file and then save it.

Repeat these last few steps again for the highRes.fla. Use these compression settings for the video.



Save and Publish your highRes.fla and you're done! Run the main.swf to test it all out.

You can download the source files from this tute here.