How To Create an Adobe Flash Web Site

  • August 19, 2009
  • 11,844 Views
Please install Flash

Spice up your online presence by creating your own Flash site. Here’s how.

You Will Need

  • A computer with internet access
  • Adobe Flash CS4
How To Create an Adobe Flash Web Site: Create new Flash document

Step 1: Create new Flash document

In the Adobe Flash program, select “Flash File (Actionscript 3.0)” from the “Create New” menu. Switch the workspace layout by clicking on the dropdown menu in the upper left of the top menu bar, and selecting “Designer.” You can adjust the size and color of the document by adjusting the settings in the “Properties” panel.

How To Create an Adobe Flash Web Site: Create new layers

Step 2: Create new layers

Divide your Flash document into four layers: Actions, Background, Menu, and Pages. To do this, go to the Flash timeline, and click three times on the “New Layer” icon so you have four layers total. Rename each one by double-clicking on the name, or holding the mouse down on a Mac.

How To Create an Adobe Flash Web Site: Adding a background

Step 3: Adding a background

To add a background image, select the Background layer from the timeline. Then, go to File, Import, and Import to Stage, and select the image you want to use. You can change the size of the background in the Properties panel once the image is imported.

To prevent accidental changes, lock a layer by clicking on the second dot directly to the right of the layer name. The dot should change to a padlock icon.

How To Create an Adobe Flash Web Site: Create the navigational menu

Step 4: Create the navigational menu

Select the Menu layer from the timeline. From the top menu, select Windows, Components. In the window that appears, double-click the Button component under the User Interface section, which adds a button to the document. Position the button where you want the menu to be. Repeat this process to add as many menu buttons as you need.

How To Create an Adobe Flash Web Site: Enhancing the buttons

Step 5: Enhancing the buttons

Select the first menu button you added. In Properties, change the instance name to “button1.” Change the name displayed on the button by selecting Windows, Component Inspector from the top menu. In the resulting window, change the label value. Continue this process for the remaining buttons.

Make sure the instance name is a relevant label with no spaces, capital letters, or special characters.

How To Create an Adobe Flash Web Site: Add a title

Step 6: Add a title

To add a title to your web site, select the text tool from the Tools panel. In Properties, change text attributes, like the number of lines, font, color, and size. Then, click on your document to add text.

How To Create an Adobe Flash Web Site: Create the content container

Step 7: Create the content container

Create pages to add content to your site. Select the Pages layer from the timeline, and then click on the rectangle tool in the Tools panel. Adjust color and transparency from the Color panel. Then, draw a rectangle on the document to match the size you want your content to be.

How To Create an Adobe Flash Web Site: Hold Shift

Step 8: Hold Shift

Add pages in the Pages layer. Hold down the Shift key, and select the Background layer. This will select every layer except for Actions.

How To Create an Adobe Flash Web Site: Copy and paste to add pages

Step 9: Copy and paste to add pages

Right-click (or command-click for Mac) the first frame of the Pages layer and select Copy Frames. Right-click the second frame in the Pages layer, and select Paste Frames. This is where the second page will be. Continue this process for as many pages as you need.

How To Create an Adobe Flash Web Site: Adding content

Step 10: Adding content

Add content. Select the first frame of the Pages layer. In Properties, change the label name to “page1.” Then, use the text tool from the tools panel to create the text for the first page. When you are satisfied, go back to the Pages layer, select the second frame, and repeat the process. Continue until you have content for each page.

How To Create an Adobe Flash Web Site: Create the Actionscript

Step 11: Create the Actionscript

Select the first frame of the Actions layer and hit F9. In the Actions window, type a stop script to stop the pages from cycling. Hit Enter to go to the next line, and create a function for each button that tells it which page frame to jump to. Hit Enter and write a script that attaches the functions to their corresponding buttons, using the button instance name.

To preview the document in action, go to Control > Test Movie from the top menu.

How To Create an Adobe Flash Web Site: Publish and upload

Step 12: Publish and upload

Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes. Rename both files, and select a location to save it to. Then click publish, and upload all of the published files to your web server. To access the Flash page, just navigate to the HTML file on your web server. You’re done!

The first web site ever created was a phone directory for a nuclear research facility.

Something wrong?

Report This How-To

Cancel

Comments (10)

HeatherM

These screen captures are really well done!

over 2 years ago by HeatherM

Reply
codehasbeenbroken

nice video with good explination its good to know how to create website

over 2 years ago by codehasbeenbroken

Reply
Vito_Maltese

Thanks for the video, hey does anybody know how to make one of the buttons go to an external site...Thanks in advance.

over 2 years ago by Vito_Maltese

Reply
lunatisia

thanks allot good tutorial. one problem when im done and look at the swf file i cant watch allthe menu buttons just 1. so when i klick at home and then another i only see the home button. i followed the entire process 4 times and still the same: the menu doesnt woprk properly greetz katarina

about 1 year ago by lunatisia

Reply
shiny412

thanks for sharing. i have learned a lot. this website is also a way to know more about website building. http://www.bluelikethat.com

about 1 year ago by shiny412

Reply
lololive

How do i can set it to feet to screen?

about 1 year ago by lololive

Reply
spartacus1

really cool explanation there i hope u come up wid more vedios like this keep up the gud wrk

10 months ago by spartacus1

Reply
spartacus1

really cool explanation there i hope u come up wid more videos like this keep up the gud wrk

10 months ago by spartacus1

Reply
spartacus1

really cool explanation there i hope u come up wid more videos like this keep up the gud wrk

10 months ago by spartacus1

Reply
newbiegirl

I think this tutorial is great. When I got to the action script I must have entered it wrong. Can you please cut and paste your exact action script here please.I am new at this and I am going nuts trying to keep the buttons from flashing on and off. Thank You.

8 months ago by newbiegirl

Reply

or to post a comment. Or, sign in using your Facebook to comment
and share your activity with your friends