Create a Basic Flash Interactive Web Page

With this information, you too can build your own website. Many large companies have excellent flash websites, yet so many small businesses seem incapable of designing a smooth and clean website. In this tutorial, we will create a Tropics-themed website. NOTE: This tutorial assumes you know how to use Flash 8 or MX.

Edited by Alex Dickinson 6/3/2008

Steps

  1. Open your Macromedia Flash application, and select "New Flash Document".
  2. On the "Properties" bar at the bottom of the screen (if you cannot see this, go to Window -> Property -> click on Property , click the button that says "Size" next to it.
  3. A window called "Document Properties" should pop up, in the two blanks next to "Dimensions", fill in 625 for width and 750 for length.
  4. On the same "Properties" bar, change the background color to a soft green, #BAE29E (use the text box at the top of the color picker) is a good shade to use, and click ok.
  5. Create a symbol by pressing CTRL + F8.
  6. Name it "banner_mc", and set its type to "Movie Clip" then click ok.
  7. Create a rectangle, with no filling and a 2-pixel size border, using the rectangle tool on the left.
  8. Select the rectangle using the selection tool (default - 'V) and set its width to 750, and its Height to 172 using the property bar at the bottom of the screen.
  9. On the "Color Mixer" side-pane at the side of the screen (if you cannot see this go to Window -> Color Mixer, select the Radial option from the drop-down box.
  10. On the far left of the radial color bar, select a leaf color (by double clicking on the slider). #66CC00 should work nicely.
  11. 3/4's of the way along the bar, place a solid white by just clicking and double-clicking on it and selecting white.
  12. All the way to the right side end of the bar, place a tropical kiwi color. #99FF66 is a good choice here.
  13. Now, using the Paint Bucket tool (default - 'K'), fill in your banner with the radial. Where you click to fill will represent the center of your circle-type design. Placing the center of the circle at the top of the bar, about 3/4's of the way to the left end.
  14. Look up to your layers bar, and call this layer "Base".
  15. Create a layer by using the New Layer button (at the bottom of the bar) - call this "Text".
  16. Select the text tool (Default - 'T') on the left, and make sure the text is set to the "Static Text" option on the bottom of the property bar.
  17. Set the color of the text to black.
  18. Select a font to use. Some of the fonts listed are custom-made fonts, and the brackets next to them contain the website to download them from.
    • Scriptina (Abstract Fonts)
    • WirWenzlaw (Abstract Fonts)
    • Viner Hand ITC
    • Sylfaen
    • Monotype Corsiva
    • HandScript
    • Lucida Blackletter
    • Papyrus
  19. Type your name of your website into the textfield and find a proper size.
  20. Place the text to the left side. Leave enough room to paste an image.
  21. Go onto the internet, to Google Images, and type in "Palm tree".
  22. Select a photo of a palm tree.
  23. Save this photo, and import it into your flash document using File -> Import.
  24. Name it in the Library as "palm tree_bmp"
  25. Create a symbol (Ctrl + F8), name it palm tree_gr, and select the Graphic radio button.
  26. Resize it to your liking by using the Free Transform Tool (Default - Q) to the left of the screen and cut any part of it you don't like out.
  27. Go back to the banner, and make a new layer.
  28. Call it "Picture".
  29. Put your palm tree_gr, and scale it so it fits in the left hand corner.
  30. Now place your banner_mc on Scene 1.
  31. Create a new symbol (Ctrl + F8), call it navigation_mc, and make it a movie clip.
  32. Create a thin, long rectangle to house your links.
  33. Name the layer "Base"
  34. Make it have a 2-Pixel size boundary
  35. Fill the rectangle with #66CC00.
  36. Create a second (button) symbol (Ctrl + F8), call it "home_bt".
  37. Look back at the list of fonts I provided, and choose a DIFFERENT font than your banner, one that looks good with the other. Make sure all of your buttons are using the same font and size.
  38. Write "Home",
  39. Break it apart using CTRL + B.
  40. Copy Frame "Up", and paste it to the other frames.
  41. Name this layer "text".
  42. Create another layer, call it "Hidden".
  43. Make a rectangle roughly covering your text.
  44. Give the rectangle no border, and set its Alpha to 0%.
  45. Copy the rectangle frame and paste it onto the other frames of that layer.
  46. Go back to the navigation_mc and make a new layer.
  47. Call it "buttons".
  48. Put your button there.
  49. Repeat steps 43-54 for as many buttons you need.
  50. Put a 1-Pixel line between your buttons on navigation_mc, on the "base" layer.
  51. Go back to scene 1 and name the layer with your banner "Banner".
  52. Create a second layer, and call it Navigation.
  53. Place your navigation on this.
  54. Create as many frames as you have buttons on your menu.
  55. Make them all keyframes (by right clicking on the frame and selecting "Insert Key Frame", or press F6).
  56. Click onto your navigation_mc.
  57. Click your home button, and open the actionscript by clicking the action panel at the bottom of the screen or the shortcut i use most often F9.
  58. Using "expert Mode" type in the following:
    on (release) {
    gotoAndStop(1);
    } This will make it so whenever the mouse is clicked and released it will go to the frame '1' and stop.
  59. On your next button, do the same, except in the "gotoAndStop" bracket, write the next number (in sequence).
  60. Go back to scene 1.
  61. Open the actions for frame 1 (F9).
  62. Type in: stop();
  63. Make a new layer on Scene 1, and call it "Text".
  64. Convert all frames on that layer to keyframes, and make as many as you need to have a keyframes to match your other layers.
  65. Make a textfield by using the Text Tool (T), and write whatever you want on each page.
  66. Test the webpage, and let whoever you want test it.
  67. Go to File -> Publish Settings, make sure .html is selected and press publish. This will publish the flash website you created into a html file for you to wherever you have saved it to. If this did not work make sure you have saved then repeat this step.
  68. Double click on the file you published (.html) and you're done!

Tips

  • Give yourself one or two days to complete this in. Breaking the time up could cause you to forget where you were in the tutorial.
  • Don't Put The text on Scene 1, put it in navigation_mc, same with the frames, otherwise the buttons are useless.
  • Save your project often.

Warnings

  • Make sure that for every hour you spend on the computer, you get a half-hour session of exercise.

Things You'll Need

  • Hosting service
  • Flash Professional 8 or MX
  • At least 4 hours of time
  • Creativity
  • Basic Knowledge of Actionscript

Related Articles

Sources and Citations

Retrieved from "https://kipkis.com/index.php?title=Create_a_Basic_Flash_Interactive_Web_Page&oldid=309878"