Tutorial details:
Written by: Billy T .
Time: 30 minutes
Difficulty Level: Intermediate
Requirements: Flash MX
Topics Covered: Many ways of using dynamic content to spice up your site. While this tute may go a little overboard, it's very good to illustrate the usefulness of such features.
Assumed knowledge: Variables, Paths, Objects, Methods, Flash MX Event Model.
Download FLA

This tute will explain how to create a basic website with nothing on the stage or in the library. This will involve dynamically loading jpegs and creating movieclips etc via actionscript. Some of the stuff covered will be quite advanced but I will go through it step by step.

This is what you will be making (not very pretty I know...)


OK let's get started. Load Flash and set the stage size to 600 X 400. Set the frame rate to 21 and choose yourself a background colour. Save your file as main.fla into a folder named "task2". Now lets get into some cool new stuff in MX - creating movieclips and text boxes via actionscript. Name the one and only layer "actions" and paste this action on the first frame -

//create a blank text box and set its parameters
//create some formatting for our text box
myTextFormat = new TextFormat();
myTextFormat.font = "Arial";
myTextFormat.size = 12;
//format our text box

OK that's a lot of actions - lets go through them.


This creates a blank text box, gives it an instance name of "theTextBox", places it on a depth of 20 (depth is like layers in a way - just be aware that if you now place something else into a depth of 20 then our text box will be removed), puts the top left corner of our text box at 50 on the x axis and 50 on the y axis, and then gives it a width of 200 and a height of 300.

The next 6 lines just set some parameters that control the appearance of our text box - these should be fairly self-explanatory.

After that we give our text box a variable name of "myText".

myTextFormat = new TextFormat();

This creates a text format object. We can then set a whole bunch of parameters in our text format object (you can see 3 of those parameters in the next 3 lines) and then dynamically format a text box by formating it with our text format object (which occurs in the last line).

Remember, you can get actionscript help at any time within flash by clicking on a line of code and then clicking on the "reference" button (in the actions panel).

Flash MX also gives you tips as you type in your actions. Try typing (not pasting) _root.createTextField( into a new line in the actions panel. As soon as you hit the ( flash will tell you all the parameters you need to provide for the createTextField action.

OK save your Fla and then choose Test Movie. You will see your text box created just where you want it on the stage. Problem is that there is no text. Let's put some in.

Open a simple text edit program (simpletext for example), make a new document and paste in this text -

myText=Welcome to my dynamically created webpage. I am an actionscripting god. Please enjoy your stay.

You will notice that myText is also the variable name that we gave our text box.

Save the file as "welcome.txt" into he task2 folder and then close it.

Back in flash, add this action underneath all the others -

// load our text
loadVariables("welcome.txt", "_root");

This loads our text file into the main time. Because our text box is located on the main timeline (_root) and has a variable name of myText, it automatically displays whatever our text file tells it myText is equal to.

Make sense?

OK test your movie again and you will see the new text displayed - doesn't look very pretty but it will do for now.

OK so we've created a text box with scripting - now let's do the same for some movieclips (which we will actually be using as buttons!).

Paste this set of actions underneath the others -

//create our buttons
        _root.createEmptyMovieClip("button"+i, 100+i);
        _root["button"+i].lineStyle(2, 0x000000, 100);
        _root["button"+i].beginFill(0xFF0000, 100);
        _root["button"+i].moveTo(-25, -10);
        _root["button"+i].lineTo(25, -10);
        _root["button"+i].lineTo(25, 10);
        _root["button"+i].lineTo(-25, 10);
        _root["button"+i].endFill(-25, -10);

Again, lets go through it bit by by bit.


This is a "for loop" and makes Flash repeat all the code underneath 4 times - with our variable "i" increasing by 1 each time.

Let's break that line down a bit more.

At the start of the for loop we set the starting value of our variable "i" - i=1. It doesn't have to be "i" but it does have to be consistent throughout the section of code (see how many times "i" is used?). Anyway "i" does the job just fine.

OK great, so i=1 - now what? Now we tell Flash that we want it to continue the for loop until a certain condition is met - i<5.

We then tell Flash what to do each time the code within the for loop is completed - i++. This is the same as saying "get the current value of i and increase i by 1.

So, Flash gets to the for loop and says "now then let me see, it appears that i=1 which we all know is less than 5 so I might just go ahead and run all this funky code contained in this here for loop". So it runs through all the code within the for loop and when it gets to the end it increases i by 1 and says "hmmm it appears that i is still less than 5....I'm gonna run through all this code again". Flash continues talking to itself and running the code in our for loop until eventually i=5 and it says "hey! i isn't less than 5 anymore...I'm done with this for loop!".

As (I hope) you can see - for loops are very powerful and a real time saver.

Right, lets look at the rest of that code.

_root.createEmptyMovieClip("button"+i, 100+i);

This creates a blank movieclip on our main timeline. Depending on which run through the for loop flash is up to, the new movieclip will have an instance name of button1 or button2 etc and will be placed on a depth of 101 or 102 etc.

Continued over the page...