SCSI Hard Drives
Search
Advanced Search

Categories


Recently Viewed
Pages



My Links
Web Directory Index
A human edited, comprehensive web directory list.
Link Exchange
DesignFirms Link Exchange


Creating a Web Layout Using Flash CS3

By : yankees26an
Rating : Average Rating : 4.00 From 12 Voter(s)


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
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
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"); }














Comments / Feedback

Nicole Thompsen Email
December 23, 2009, 4:35 am

There are different grades of Pandora bracelet watches to differentiate the good from the mediocre from the downright ugly. You have to make your expectations level low wherever you buy a bracelet pandora charms. Why Do People Purchase a Pandora bracelet? An average person can�t even buy the minimum costing original pandora jewelry watch which is worth around $3500 , still they don�t have to get their hopes down because Pandora bracelet watches have everything that there should be in an authentic Pandora watch but at a much lesser price tag. The new pandora silver Watches-Online. Tips to differentiate between Genuine and Pandora bracelet watches. The final conclusion is that one can get a high quality Pandora bracelet watch that is affordable and gives the feeling of luxury and cl***. Pandora cases are tested for its waterproofing ability and are used only when the same has been certified to be perfect. The new pandora charms was founded in the year 1905 and since then it has churned out model after model that are a cl*** in itself. The Pandora GMT watch also includes a one hour jump feature so that the second hour hand may quickly be set for any time zone, providing a pilot instant access to accurate time no matter where they are in the world.
RSS 2.0: Syndicate this article

Add Comment
* Name


* Email Address


Site



*Image Validation (?)


*Comments / Feedback





Print Article Print Article Send to a friend Send to a friend Bookmark Article Bookmark Article Save as PDF Save as PDF Social Bookmarking
Add to: Mr. Wong Add to: Webnews Add to: Icio Add to: Oneview Add to: Folkd Add to: Yigg Add to: Linkarena Add to: Digg Add to: Del.icio.us Add to: Reddit Add to: Simpy Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Spurl Add to: Google Add to: Blinklist Add to: Blogmarks Add to: Diigo Add to: Technorati Add to: Newsvine Add to: Blinkbits Add to: Ma.Gnolia Add to: Smarking Add to: Netvouz Information
Rate this Article :

1

2

3

4

5

6

7

8

9

10
Poor Excellent