Create A Dynamic Web Site In Flash MX

[Tami]

How To Create A Dynamic Web Site In Flash MX
By Bill Trikojus

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.

Download the source files from this tutorial [url=\"http://img1.ientry.net/flashnewz/dloads/task2.zip\"]here[/url] (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 -


Get a $25 credit with Overture Search Advertising
//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.

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:)

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 <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

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.

[url=\"http://www.flashnewz.com/flashnewz-5-20 ... ashMX.html\"]Source[/url]

--------------------------------------------------------------------------------

About the Author:
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.