Create a Basic Flash Interactive Web Page
Revision as of 13:22, 8 September 2022 by Kipkis (Kipkis | contribs) (Text replacement - "[[Category: C" to "[[Category:C")
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
- Open your Macromedia Flash application, and select "New Flash Document".
- 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.
- A window called "Document Properties" should pop up, in the two blanks next to "Dimensions", fill in 625 for width and 750 for length.
- 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.
- Create a symbol by pressing CTRL + F8.
- Name it "banner_mc", and set its type to "Movie Clip" then click ok.
- Create a rectangle, with no filling and a 2-pixel size border, using the rectangle tool on the left.
- 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.
- 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.
- On the far left of the radial color bar, select a leaf color (by double clicking on the slider). #66CC00 should work nicely.
- 3/4's of the way along the bar, place a solid white by just clicking and double-clicking on it and selecting white.
- All the way to the right side end of the bar, place a tropical kiwi color. #99FF66 is a good choice here.
- 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.
- Look up to your layers bar, and call this layer "Base".
- Create a layer by using the New Layer button (at the bottom of the bar) - call this "Text".
- 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.
- Set the color of the text to black.
- 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
- Type your name of your website into the textfield and find a proper size.
- Place the text to the left side. Leave enough room to paste an image.
- Go onto the internet, to Google Images, and type in "Palm tree".
- Select a photo of a palm tree.
- Save this photo, and import it into your flash document using File -> Import.
- Name it in the Library as "palm tree_bmp"
- Create a symbol (Ctrl + F8), name it palm tree_gr, and select the Graphic radio button.
- 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.
- Go back to the banner, and make a new layer.
- Call it "Picture".
- Put your palm tree_gr, and scale it so it fits in the left hand corner.
- Now place your banner_mc on Scene 1.
- Create a new symbol (Ctrl + F8), call it navigation_mc, and make it a movie clip.
- Create a thin, long rectangle to house your links.
- Name the layer "Base"
- Make it have a 2-Pixel size boundary
- Fill the rectangle with #66CC00.
- Create a second (button) symbol (Ctrl + F8), call it "home_bt".
- 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.
- Write "Home",
- Break it apart using CTRL + B.
- Copy Frame "Up", and paste it to the other frames.
- Name this layer "text".
- Create another layer, call it "Hidden".
- Make a rectangle roughly covering your text.
- Give the rectangle no border, and set its Alpha to 0%.
- Copy the rectangle frame and paste it onto the other frames of that layer.
- Go back to the navigation_mc and make a new layer.
- Call it "buttons".
- Put your button there.
- Repeat steps 43-54 for as many buttons you need.
- Put a 1-Pixel line between your buttons on navigation_mc, on the "base" layer.
- Go back to scene 1 and name the layer with your banner "Banner".
- Create a second layer, and call it Navigation.
- Place your navigation on this.
- Create as many frames as you have buttons on your menu.
- Make them all keyframes (by right clicking on the frame and selecting "Insert Key Frame", or press F6).
- Click onto your navigation_mc.
- 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.
- 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. - On your next button, do the same, except in the "gotoAndStop" bracket, write the next number (in sequence).
- Go back to scene 1.
- Open the actions for frame 1 (F9).
- Type in: stop();
- Make a new layer on Scene 1, and call it "Text".
- Convert all frames on that layer to keyframes, and make as many as you need to have a keyframes to match your other layers.
- Make a textfield by using the Text Tool (T), and write whatever you want on each page.
- Test the webpage, and let whoever you want test it.
- 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.
- 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
- Design Web Pages
- Set up a Bar for a Wedding
- Make Papyrus
- Build a Flash Website
- Create a Flash Animation
- Create a Simple Web Page With HTML
- Create a Shortcut for a Website
- Make Text Blink in HTML
Sources and Citations
- http://www.flashkit.com - an excellent tutorial site.
- http://www.tutorialized.com - an excellent tutorial site.