Coding, Programming Tutorials - Creating a Web Layout Using Flash CS3

In this tutorial, we will look at how to create a website with navigation using flash. I'll be using Flash CS3 for these examples.

Open Flash and go to New> General> Flash File (ActionScript 3.0) and click ok.

I'm going to import a pre-made gradient background by clicking File> Import> Import to stage, and select your image. ( I uploaded the image here)

background

Now we're going to add the buttons.

Choose the rectange tool, select the color of your choice, and draw a rectange on the left side of the stage. Then copy the rectange and paste the new one right under( Flash aids you in positioning by showing dotted lines when you've locked into the correct position.

Now comes the interesting part. If you think you can get away without coding anything, you're wrong

Create 5 more layers, and rename them from layers 2-5 to "Home", "Downloads", "Forums", and "About". Name the sixth layer "actions", and the first layer "tweens". In this example, we will use 10 frames to seperate a page, but it really doesn't matter. It can be one frames or 100 frames, because we aren't going to be viewing the tween, we're just going to be linking to the frames. That's where actionscript becomes handy.

Since we will have 10 frames per page, we will need 40 frames. On frame 10, 20, 30, and 40 insert a keyframe by right clicking on the frame and selecting Insert keyframe. Everyone with me so far?

Next we will name each of our tweens. Again you have a choice of clicking on lots of places. To assaign a name for twean 0-10, click on any frames in between and look at the page properties at the bottom. Now type a name for this tween, ie home. Now do this for the next three tweens, using names "downloads", "forums", and "about." Now insert a keyframe on each layer for the respective button. For example, for the Home layer, insert a keyframe on frame 10, Downloads layer on frame 20, and so on.

It should look something like the screenshot.

frames

One last thing. You have to assign instances to your buttons for the actionscript to work. Select each button, and under properties, find the instance behavoir( it's right near the top left corner, near the picture of a hand and a rectange. Make sure the instance is set to Button and give each rectange an instance of + _btn. For example, the home button would have an instance name "home_btn".

Now add the following actionscript in the actions layer.

stop();

home_btn.onRelease =function() //available in script assist { gotoAndStop("home"); }

downloads_btn.onRelease =function() //available in script assist { gotoAndStop("downloads"); }

forums_btn.onRelease =function() //available in script assist { gotoAndStop("forums"); }

about_btn.onRelease =function() //available in script assist { gotoAndStop("about"); }