Multimedia Web Development with Flash: How to Create a Simple Flash Web Page
Creating a Multimedia Web Page
This tutorial will show Macromedia Flash users how to create a simple one page web site. The site will have three sections and a preloader, and we’ll use basic ActionScript. Below is a sample of what we will be aiming for. Of course, you can add your own designs, once you understand the steps. This simple multimedia web development tutorial gives you an introduction to Flash tools and Action script.
The Stage
Open Flash, and go to New Flash Movie. Go to the Properties Inspector to specify the dimensions of your movie to 600 x 400 pixels. The background color should be set to orange and the frame rate to 12 frames per second (fps). Create three additional layers (to make four layers in total) and name them Content, Actions, Buttons, and Background.
Creating a Preloader
We will create a simple preloader that will show the word Loading…Please Wait, while the movie loads. To do this, click once on the name of the Content layer, right click the second frame on that layer, and then select Insert Frame. Click on the text tool to write Please wait..loading. Once you have the words Please wait…loading written on the stage somewhere, you can change the font and the size through the Properties Inspector. Now place the text in the center of the scene.
Once you have completed the step for the preloader from above, now you will need to finish the code for the preloader. Right click the second frame in the layer labeled Actions and go to Insert Key frame. Now right click the second frame again and select Actions. When the Action panel opens up, paste the following code to finish the preloader.
if (_root.getBytesLoaded() != _root.getBytesTotal()){gotoAndPlay(1);}
Now let’s label the second layer, and call it Learn Flash. Right click the fourth frame, on the Content Layer, and then select the Insert Blank Keyframe. Click the text tool to write text that is distinctly different text to distinguish it from the preloader text. Write “Learn Flash Now.”
Now we want to add some premade buttons. This is a time management strategy, instead of creating our own. Go to the Windows > Components. You will find the button in the User Interface category. Proceed to drag three instances of the button to your stage. Do the same step for the other two buttons. Label the second button Learn Flash and assign the instance name learn_btn to it. Label the third one My Blog and assign the instance blog_btn to it.
Using Action Script
It’s time to tell the buttons what to do when the user clicks on them. Right click the third frame in the layer labeled Actions and select the Insert Blank Keyframe. Right click this new keyframe, and then select the Action command to launch the Actions panel. We will have our movie stop at on frame number three, and then tell the buttons to go and stop, each at its prospective frame which holds its specific content. For example, the tutorials button will go to the tutorials content on the timeline, when the button is clicked. Paste the following code to execute this action.
stop();
home_btn.onRelease = function () {
gotoAndStop(3);
}
learn_btn.onRelease = function (){
gotoAndStop(4);
}
blog_btn.onRelease = function (){
gotoAndStop(5);
}
The next step is simply publishing your web page in Flash. Go to File > Publish to create your final SWF file. Congratulations on creating your first flash web page! The above tutorial is very effective, in combination with HTML, so that you will be able to have the web page easily found by search engines.
