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.
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','600','height','400','title','Simple Flash Website Demo','src','index','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','index' ); //end AC code
This tutorial uses ActionScript 1/2. If you would like to learn how to create a similar project using ActionScript 3.0 then check out our other Basic Flash Website tutorial.
Setting Up the Stage
Start off with a new Flash movie, access the Properties Inspector to set the dimensions of the movie to 600x400px, the background color to white, and the frame rate to 12 fps.
On the timeline, create four layers and name them Background, Content, Buttons, and Actions. Place them in the order illustrated in the image below.
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. We'll use a very basic preloader that shows the word Loading while the movie loads. To do this, click once on the name of the layer labeled Content, 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. Once you have the word Loading written on the stage somewhere, you can change the font and the size of it through the Properties Inspector, choose whatever suits your taste. Make sure that the word is placed in the center of the scene. (Hint: Use the Align Panel Ctrl+K)
That should do the visual part of the preloader, back to our timeline, 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. Paste the following code to complete your preloader:
if (_root.getBytesLoaded() != _root.getBytesTotal()){gotoAndPlay(1);}
You can learn more about Preloaders from this tutorial.
Adding the Content
Our website is going to have three sections (i.e. pages), we are going to put these different sections in three separate frames, those will be the third, fourth, and fifth frame on the timeline.
The first thing that we'll add to our scene is the background, we'll make this extend through all the three frames we're going to use for content. Click once on the name of that layer first, and then Right-click the third frame on the Background layer and select the Insert Keyframe command, 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.
We'll now insert our background image, save this JPEG and your desktop, simply go through File>Import>Import to Stage and then select your image to import it onto the stage. You will have to place it in the middle of the stage.
Moving on to the actual content, click on the name of the layer labeled Content and then right-click the third frame on that layer and select the Insert Blank Keyframe command. This frame should contain the content of our first section. We are going to have an introduction text in here, select the Text Tool from the toolbar and write whatever text you want to have in the page. You can just write Welcome in a huge size.
We will now add the content for our second section, this was titled 'Tutorials' in the example above. Right-click the fourth frame on the same layer you've just edited, the Content layer, and then select the Insert Blank Keyframe command. Use the text tool to write different text in this page. I simply wrote, 'tutorial links coming soon!'.
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. Use the text tool to write 'Click here to visit our Forum'. 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.
Creating the Buttons
Our buttons will remain on the stage all through out the different sections the user views, for this reason we will place them on a frame that spans across the three frames that have our content. 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. This keyframe shall span all the way through the fifth frame, so right-click the fifth frame and select the Insert Frame command.
It is now time to add the actual buttons, we will use the button component instead of creating our own. 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.
Select the button at the top and then access the Properties Inspector and click on the Parameters tag. You will have to change the label of the button to something descriptive, I used Home. You will then also have to assign an instance name to the button so that we can control this button via ActionScript. I assigned the name home_btn to it. (Notice: Instance names are case-sensitive)
Repeat the last step for the other two buttons, label the second one Tutorials and assign the instance name tutorials_btn to it. Label the third one Forum and assign the instance name forum_btn to it.
ActionScript
All the visual elements of our little website are now present, we need to write the command codes to tell those buttons to go to the specified section when clicked. Right-click the third frame in the layer labeled Actions and select the Insert Blank Keyframe command. Once you have a new keyframe in their, right-click that frame and then select the Action command to open up the Actions panel. 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, each at the specified frame for its content. You can do this by simply pasting the following code in the Actions panel:
stop();home_btn.onRelease = function () {gotoAndStop(3);}tutorials_btn.onRelease = function (){gotoAndStop(4);}forum_btn.onRelease = function (){gotoAndStop(5);}
I think that the code is self-explanatory, you have done it, test the movie to see our simply website functioning!
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','600','height','400','title','Simple Flash Website Demo','src','index','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','index' ); //end AC code
This concludes our tutorial, I hope that you learnt something helpful, please feel free to post at the Oman3D Forum if you have any questions regarding this tutorial. 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.
- End of Tutorial
Saturday, May 9, 2009
Saturday, April 18, 2009
Free SEO Tools : Free Tools For Search Engine Optimization
Free SEO Tools by SEO Chat
The SEO Tools found in this section were designed to assist you in configuring your website(s) for search engine optimization within the different search engines. Please select one of the SEO Tools from below to begin optimizing your website(s) for top placement within the search engines. Our SEO tools do not support any secured server sites due to authentication issues.
The SEO Tools found in this section were designed to assist you in configuring your website(s) for search engine optimization within the different search engines. Please select one of the SEO Tools from below to begin optimizing your website(s) for top placement within the search engines. Our SEO tools do not support any secured server sites due to authentication issues.
Adsense Calculator | Keyword Position Check for Multiple Datacenter |
Subscribe to:
Posts (Atom)