How to Build a Website in Flash Tutorial

Websites designed and displayed exclusively in Flash are commonplace today. The technology used to create them is extraordinary, but your knowledge of Flash can be fairly basic while still allowing you to design and implement a full Flash site. The more complex your programming ability in ActionScript, the more complex your website can be and the smoother and more effective the entire process and end result. The primary difference in a Flash site and a regular website is the lack of actual page navigation.

Difficulty:

Challenging

Instructions

Things You'll Need

• Adobe Flash
• Pen and paper

Design the Site

1. As with any website design process, the entire event will generally start with "pen and paper" for you to put down your ideas of how you want your site to flow. Instead of designing "pages" as you would with normal HTML, however, you will be designing "scenes." Each scene should be designed like its own individual page. Decide how many scenes you will need and the basic navigation between them.

2. Develop the transitions. In regular HTML, if you click a link it takes you to another page with no frills and no fuss. A Flash page has more flexibility beyond that. Your website can transition from page to page with special effects. If you plan to use a transition, it should be quick and soundless. One suggestion could be to have all the text and images fade out and the new scene fade in a moment later.

3. Develop your first "scene." Flash websites should be developed using scenes rather than just frames to allow for flexibility. The primary navigation buttons like "Home" or "About" or "Contact" will take the viewer to the appropriate scene. Design where your elements will be on the stage and how they will interact with the viewer (if at all). Come up with names suitable for use in ActionScript for all the interactive elements.

4. Develop each of the rest of your scenes with pen and paper.

Transfer Your Design to Flash

1. Start with the background element for your site. If it is going to be a solid color, you can simply change the stage color. If it is going to be an image or a specific look, then you can use a square, properly modified to the right size of your stage (website) and set on its own "background" layer.

2. Add the navigation elements next. Do not worry about making them actually function just yet.

3. Add the other basic images and text on your site. One way to control the transitions and text easily in your site using ActionScript is not to bother typing it all directly into text boxes in Flash. Instead, use dynamic text boxes that are empty and named. You can then call to them in ActionScript and fill the text in that way using code like:

   myTitle1.text = "This is My Website";
   myText1.text = "Welcome to my website! I hope you enjoy your visit";

4. Add functionality to your navigation buttons so you can test drive the site. Simple code for navigating in ActionScript 2.0 could look something like this:

   buttonHome.onRelease = homeRelease();

   function homeRelease(){
   myTransition.gotoAndPlay(1);
   gotoAndStop("scene1");
   }

5. Once your buttons are working, test your site to see if you can basically move from page to page or scene to scene without problems and see the different elements of your site.

Clean It All Up

1. After you can navigate successfully through your site, it is time to add the fun stuff like your transitions, if any. Your transition should be a movie clip unto itself and situated on the top layer of each of your scenes. It should be invisible ("alpha 0") under normal circumstances and when activated, become visible, play through its frames and then become transparent again.

2. Add additional buttons and images at this point and arrange each scene the way you like it.

3. Attach the entire movie once you are done to a web page and center it on the page. Make sure the HTML page background looks identical, if possible, to your Flash movie background.

Tips & Warnings

• Generally, the most successful Flash websites are simple and not too flashy.

• Make sure you visit plenty of other Flash portfolios and websites to get ideas on what you can do and imagine how to duplicate their techniques using ActionScript.

References

• Adobe Flash
• Flash Support Forums