Creating a Simple Flash Website

By Blue_Chi | Flash 8 | Beginner | September 28th, 2006

This tutorial will teach you how to create a simple flash website that has three sections. We are not going to use any advanced ActionScript and will rely only on the GotoAndPlay method to control our movie clip. You can view an example of what we're going to create in the Flash movie below.

.

Once you have the word Loading written on the stage somewhere. Content. and the frame rate to 12 fps. (Hint: Use the Align Panel Ctrl+K) . access the Properties Inspector to set the dimensions of the movie to 600x400px. We'll use a very basic preloader that shows the word Loading while the movie loads.This tutorial uses ActionScript 1/2. Creating a Preloader We are not going to discuss how this works as the topic was covered in a previous tutorial which you can check to learn more about preloaders. To do this. the background color to white.0 then check out our other Basic Flash Website tutorial. Buttons. and then right-click the second frame on that layer and select Insert Frame. Now use the Text Tool to write the word Loading on the scene. Make sure that the word is placed in the center of the scene. choose whatever suits your taste. click once on the name of the layer labeled Content. On the timeline. and Actions. Place them in the order illustrated in the image below. If you would like to learn how to create a similar project using ActionScript 3. Setting Up the Stage Start off with a new Flash movie. you can change the font and the size of it through the Properties Inspector. create four layers and name them Background.

That should do the visual part of the preloader. we'll expand this keyframe all the way to the fifth frame by right-clicking the fifth frame and then selecting the Insert Frame command. right-click the second frame in the layer labeled Actions and select this time Insert Keyframe. Now right-click the same frame once again and select Actions to open the Actions Panel. and fifth frame on the timeline. fourth. } You can learn more about Preloaders from this tutorial.getBytesLoaded() != _root.e. Click once on the name of that layer first. we'll make this extend through all the three frames we're going to use for content. those will be the third. we are going to put these different sections in three separate frames. Paste the following code to complete your preloader: if (_root. and then Right-click the third frame on the Background layer and select the Insert Keyframe command. Adding the Content Our website is going to have three sections (i. .getBytesTotal()){ gotoAndPlay(1). back to our timeline. The first thing that we'll add to our scene is the background. pages).

You will have to place it in the middle of the stage. save this JPEG and your desktop. .We'll now insert our background image. simply go through File>Import>Import to Stage and then select your image to import it onto the stage.

You can just write Welcome in a huge size. Use the text tool to write different text in this page. We are going to have an introduction text in here. this was titled 'Tutorials' in the example above. We will now add the content for our second section. and then select the Insert Blank Keyframe command.Moving on to the actual content. Right-click the fourth frame on the same layer you've just edited. click on the name of the layer labeled Content and then rightclick the third frame on that layer and select the Insert Blank Keyframe command. the Content layer. 'tutorial links coming soon!'. . select the Text Tool from the toolbar and write whatever text you want to have in the page. I simply wrote. This frame should contain the content of our first section.

Use the text tool to write 'Click here to visit our Forum'. Creating the Buttons . You can any part of this text a link by simply selecting the desired word and then accessing the Properties Inspector and then assigning a URL in the URL field.We will repeat the last step for the fifth frame on the Content layer to add the content of our third section. Right-click the fifth frame on that layer and then select the Insert Blank Keyframe command.

so right-click the fifth frame and select the Insert Frame command. we will use the button component instead of creating our own. It is now time to add the actual buttons. . Access the Components Panel by going through Window>Components. You will find the button component under the User Interface category. simply drag and drop three copies of it onto the stage. Click once on the name of the layer labeled Buttons and then Right-click the third frame on it to select the Insert Keyframe command. for this reason we will place them on a frame that spans across the three frames that have our content. This keyframe shall span all the way through the fifth frame.Our buttons will remain on the stage all through out the different sections the user views.

Right-click the third frame in the layer labeled Actions and select the Insert Blank Keyframe command. I assigned the name home_btn to it. home_btn. we need to write the command codes to tell those buttons to go to the specified section when clicked. Once you have a new keyframe in their. ActionScript All the visual elements of our little website are now present. each at the specified frame for its content. } I think that the code is self-explanatory.onRelease = function (){ gotoAndStop(5).Select the button at the top and then access the Properties Inspector and click on the Parameters tag. test the movie to see our simply website functioning! . } tutorials_btn. } forum_btn. you have done it. You will have to change the label of the button to something descriptive. Label the third one Forum and assign the instance name forum_btn to it.onRelease = function () { gotoAndStop(3). We are going to tell our movie to stop at the home frame (frame number 3) and then tell the buttons to go to and stop. (Notice: Instance names are case-sensitive) Repeat the last step for the other two buttons. I used Home. label the second one Tutorials and assign the instance name tutorials_btn to it.onRelease = function (){ gotoAndStop(4). You will then also have to assign an instance name to the button so that we can control this button via ActionScript. You can do this by simply pasting the following code in the Actions panel: stop(). right-click that frame and then select the Action command to open up the Actions panel.

.

How does it work? The idea behind a preloader is pretty simple. while the upper layer has different contents in the first and the second frame. You can read the Tutorial for Creating a Portfolio Scene in Flashor the Tutorial For Creating a Dynamic Portfolio in Flash for anybody wishing to learn other relatively advanced techniques for flash navigation. name the upper one Actions and the one below Contents.This concludes our tutorial. 550x400 px for the dimensions. 12 fps as the framerate and white the background. You are not required to have any special ActionScript knowledge to be able to follow this tutorial. Starting off Start off by creating a new flash movie. please feel free to post at the Oman3D Forum if you have any questions regarding this tutorial. we are using ActionScript to retrieve the number of bytes that has been loaded and then use this value to create a percentage that is assigned as the width of the loading bar.End of Tutorial Creating a Numeric Bar Preloader in Flash By Blue_Chi | Flash MX / Flash 8 | Beginner Having a preloader is necessary in all Flash movies displayed on the web as they stop the movie from being played before loading all the data and it also informs the user how much data has already loaded. . . Right-click the second frame on the upper layer (Actions) and select Insert Keyframe. and then Right-click the second frame in the lower layer (Contents) and select Insert Frame. Setting up the Timeline Create two layers on the timeline. I hope that you learnt something helpful. This makes the contents of the lower layer span across the first and the second frame. This tutorial will teach you how to create a very simple numeric bar preloader that could be used in almost any movie. you can use the default settings. This tutorial will teach you how to do this in Flash.

. We will now have to transform our bar into a movieclip that we can later manipulate using ActionScript.Creating the Bar We are going to put our bar in the Contents layer. We are going to separate it from its outline so that the outline remains unaltered. Use the Selection Tool to select ONLY THE OUTLINE of our bar. you'll have to check before you make your bar that there is a fill color and an outline colour selected in the lower part of the toolbar. so click once on the name of the layer labeled Contents and then use the Rectangle Tool to draw in the center of the stage a bar similar to the one illustrated in the image below.

Simply hit F8 on your keyboard to show the Convert to Symbol window. name the symbol Bar and then hit OK. select the colored bar body now using the Selection Tool and hit F8 to open the Convert to Symbol window. Simply use the Selection Tool to select the bar symbol and then hit Ctrl and the Down Arrow to make the bar go below the outline. We are going to change the Registration Point. i.We will now transform our outline into a movie clip. Select Movie clip.e. That should do the outline part. the place from which our bar is going to grow bigger. because of the order in which we created the objects. A small point that we need to do now is make sure the outline appears above the bar. the outline would be lower because it was created earlier. select Movie clip and name your symbol Outline. . select the point on the left side of the square.

I have set the font to _sans. the font size to 12px and the color to black. use the Text Tool to create a text field below the bar and then access the Properties Inspector to change the Text Type to Dynamic and assign the instance name loader_txt to it. Use the instance name bar_mc. Creating the Text Field for our Numeric Preloader This one is easier. . This makes it possible for us to manipulate this object using ActionScript. access the Properties Inspector and assign an instance name to it.This is our final step for the bar. while the colored bar body is still selected.

if (_root.getBytesTotal())*100. } bar_mc.getBytesTotal() != _root. you can insert a keyframe on the forth frame of our content layer and then import a large image to the stage by going though File>Import>Import to Stage. Note: You can learn more about the 'if' conditional by reading this tutorial.getBytesLoaded()){ gotoAndPlay(1). loader_txt. and then used the rounded value as the text value of our text field.Adding the ActionScript Right-click the second frame on the upper layer labeled Actions and select Actions.text=Math._xscale=(_root. . The first part of our code tells the movie to go back to the first frame if the amount of data loaded does not equal the total amount of the data the file contains.getBytesLoaded()/_root.getBytesTotal())*100)+"%". You can then test your movie Control>Test Movies and then simulate download by going through View>Simulate Download.round((_root. We later set the horizontal scale of our bar to the percentage of data loaded.getBytesLoaded()/_root. Copy and paste the code below to make our preloader functional. Our preloader is now ready to use.

Please feel free to post your comments. I hope that you learnt how to create a preloader that you could use for all of your flash movies.End of Tutorial. .This concludes our tutorial. . questions or suggestions at the Oman3D Forum. you can download a sample FLA of the end result through this link.

Sign up to vote on this title
UsefulNot useful