Introduction
This tutorial shows you how to create a basic website with nothing on the stage. This will involve dynamically loading jpegs and creating movieclips via actionscript. Some of the material covered will be advanced but I will go through it step by step.
Contents
Download the source files from this tutorial here (mp3 not included).
Step one
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
_root.createTextField(“theTextBox”,20,50,50,200,300);
theTextBox.background=true;
theTextBox.border=true;
theTextBox.backgroundColor=0xFFFFFF;//white
theTextBox.borderColor=0x000000;//black
theTextBox.multiline=true;
theTextBox.wordWrap=true;
theTextBox.variable=”myText”;
//create some formatting for our text box
myTextFormat = new TextFormat();
myTextFormat.font = “Arial”;
myTextFormat.size = 12;
myTextFormat.color=0x000000;//black
//format our text box
theTextBox.setNewTextFormat(myTextFormat);
Step two
That’s a lot of actions. Let’s go through them.
_root.createTextField(“theTextBox”,20,50,50,200,300);
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.
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 timeline. 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?
Test your movie again and you will see the new text displayed – doesn’t look very pretty but it will do for now.
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
for(i=1;i<5;i++)
Step three
Again, lets go through it bit by by bit.
for(i=1;i<5;i++){
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.
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.
OK so we have a blank movieclip but we want to draw something in it – a box for example. The next 7 lines of code do just that. We (I) don’t really have time to go into detail right now about the new MX drawing API. Just be aware that the code there draws 4 lines with a width of 2 and a colour of black ( lineStyle(2, 0x000000 ) and then fills it with red ( beginFill(0xFF0000 ).
Then the last 2 lines simply position our new movieclips on the stage.
_root[“button”+i]._x=i*60;
_root[“button”+i]._y=25;
So the first time Flash goes through the for loop, it will create a new movieclip with an instance name of button1 and will place it on the stage at an x position of 60 and a y position of 25. The second time it goes through the for loop, it will create a new movieclip with an instance name of button2 and will place it on the stage at an x position of 120 and a y position of 25.
That’s some pretty serious scripting. Don’t stress if it doesn’t make sense straight away.
Test your movie. You should see 4 boxes up the top left. They should be red with a black stroke.
So we now have 4 movieclips on the stage with instance names of button1, button2, button3 and ….oh yeah…button4. Something new in Flash MX is that we can now give movieclips button actions such as onRelease – we’ll get to that in a sec. First, lets make a couple of new text files for 2 of our buttons to load in. Back in your text editor, make a new file and paste in this text:
myText=this is the text that will be loaded in when the user clicks on button1.
Save the file as text1.txt into the task2 folder and then close it.
Make a new text file and paste in this text –
myText=I’m some more text. I don’t really want to be here but I have to be because the user clicked on button2 – can I go home now?
Save the file as text2.txt into the same folder and then close it.
Now, back into Flash, add this action underneath all the others:
button1.onRelease=function(){
loadVariables(“text1.txt”, “_root”);
}
button2.onRelease=function()
As you can see, we have given 2 of our movieclips button actions. Flash kindly responds by changing the mouse to the finger when the user rolls over the boxes and allows the user to click on them. Test your movie and click on the 2 buttons to the left. You should see the 2 text files load in and display themselves in our text box (because, once again, we have used the variable name of myText in our external text files – the same as the variable name of our text box).
Well that’s just great but I want some images. Get 4 photos, if you don’t have any of your own then look in the samples folder inside the photoshop folder (I’m sure this won’t be necessary though!). Crop and resize all your images so they are 100 pixels wide by 150 pixels high. Choose “save for the web” from photoshop and save them all as jpegs at max quality – make sure the “progressive” box is not checked. Save all four images to the task2 folder and name them image1.jpg, image2.jpg etc
Cool. Something else that’s new to MX is you can load in jpgs and other stuff at run time. Let’s do that now.
Paste these actions underneath the others:
_root.createEmptyMovieClip(“imageHolder1”, 200);
_root.createEmptyMovieClip(“imageHolder2”, 201);
imageHolder1._x=450;
imageHolder1._y=50;
imageHolder2._x=450;
imageHolder2._y=225;
loadMovie(“image1.jpg”,”imageHolder1″);
loadMovie(“image2.jpg”,”imageHolder2″);
Let’s look at those actions. The first 2 lines create 2 new movieclips (same as before) and gives them instance names of “imageHolder1” and “imageHolder2”. The next 4 lines just position our new movieclips on the stage. In the last 2 lines you will see the loadMovie action that you have all see before. Flash MX allows us to load in jpgs in the same way that you could already load in swf files. In this case, we are loading each image into a target mc (as opposed to a level) and Flash aligns the top left corner of our images with the registration point of the “imageHolder” movieclips that we just created.
Save your movie and then test it.
Step four
Great! Now let’s add actions to our final 2 buttons that will allow the user to change the images displayed. Add this under all the other actions.
image1Loaded=true;
image2Loaded=true;
button3.onRelease=function()else
}
button4.onRelease=function()else
}
Let’s break that down. The first 2 lines
image1Loaded=true;
image2Loaded=true;
simply sets a couple of variables. If you don’t know what a variable is then please read this.
Next we tell Flash what to do if button3 is clicked. This is a little more complicated though. We want Flash to first check if a condition is true or not and then do 1 of 2 things accordingly. In this example, we check to see if image1 is loaded (via our image1Loaded variable). If it is, then Flash will load image3 into our imageHolder1 and set our image1Loaded variable to false. If it isn’t, then Flash will load image1 into imageHolder1 and set the image1Loaded variable to true. What this means is that you can keep clicking the button over and over and Flash will load in alternating images. The code for button4 does the same thing.
Test your movie and click on all the buttons.
Almost done 🙂
Let’s just bring in some audio. Flash MX allows us to dynamically load mp3s so that’s just what we will do. Copy your favourite mp3 to the task2 folder.
Change the name of your mp3 file to “track1.mp3”.
Add these actions under all the others.
mySound=new Sound();
mySound.loadSound(“track1.mp3”,true);
mySound.start();
Line 1 creates a new sound object. Line 2 loads our external mp3 file into that sound object and sets streaming to true. Line 3 starts our sound. Test your movie. If the sound doesn’t work then try a different mp3 file.
OK I think that’s more than enough for now 🙂
I hope you can see some advantages to utilising the “dynamic” capabilities of Flash MX (not least of which is the ease in which you can change audio, images and text without even having to open up your fla).
I am quite aware that I am throwing you in the deep end with this so don’t stress if it doesn’t immediately make sense. I just want to show you what is possible.
So, the task for this week is simply to follow this tutorial and ask me if you have any questions. You should also have completed the tutorials I listed up the top by next week.
This tutorial was written by Bill Trikojus of Tableau Design. Tableau Design is a Melbourne (Australia) based multimedia studio specialising in Flash actionscripting and web page design. They also have years of experience working with digital audio, digital video, 3D animation, CD-Rom and DVD creation.
