Intermediate Tutorial - Creating an Interactive Menu/Webpage
- Before you Begin
- Begin your Movie
- Using Hotspots
- Start adding Text
- Using mailto:
- The Stop Action
- Jump to Frame
- Create the Footer
- Finished
This tutorial is going off the basis that you have already completed and understand the first tutorial for Firestarter. This tutorial moves at a quicker pace and assumes you know your way around Firestarter fairly well.
The purpose of this tutorial is to show you how to create an interactive menu and a front page for a Website. We use generic examples when creating this, such as "My Website." Feel free to put in what you want in those areas.
You can view the finished product here.
Create a folder on your desktop called "Website". Everything you save should go in this folder.
Create an empty text document on your Windows Desktop. (Right-click > New > Text Document) Rename it "index1.html". (Right-click > Rename).
Open a Text document with Notepad or your favorite Text editor. (Right-click index1.html > Open With > Notepad)
Inside the document, type the following:
<html><head><title></title></head><body><table width=601 border=1 align=center><tr><td>
</tr></td></table></body></html>
Save the document.
Open Firestarter.
Create a new movie with a white Background, a width of 600, and a height of 400.
Add a rectangle with a solid fill and the color Red 194, Green 204, Blue 187. Add this to Custom Colors so you can reuse it.
Drag the rectangle across the top of the screen to the far right.
You will notice it won't go quite all the way across, so move the rectangle to the left (off the screen), then resize it by dragging the right side. Then drag it back to the right, and it should cover all the way from left to right.
Right-click the rectangle you created and choose Copy. Right-click anywhere in the movie and choose Paste. Drag the pasted rectangle to the bottom of the movie. Remember when you paste it may paste directly on top of the original, so just drag it off.
Add a text box. Size 24, font Arial, color Black. Put four spaces between each word. Add:
Home Products Support Contact
Hotspots are areas in the movie that are interactive.
Add a hotspot for each word and drag it over each word. You can resize the hotspot for larger words by dragging and resizing it.
Change each Hotspot Action to Goto Frame. For Home, choose Goto Frame 5. For Products, choose 40. For Support, choose 75. For Contact, choose 110.
Add new text: "This is the home page." Center it in the middle of the screen.
On the new text timeline you just created, add a blank space starting on 0 and ending on 5.
Give the text the motion effect Slide In From Left and Fade In. Size it to start on 5 and end on 35.
Click the eye to hide it so we can add other text without it being in the way.
Preview the movie. The program will require you to save the movie before you do. Save it as main.swf.
Add new text: This is the product page. Center it to the middle of the screen.
On the new text timeline you just created, add a blank space, starting on 0 and ending on 40.
Give the text the motion effect > Slide In From Right and Fade In. Size it to start on 40 and end on 70.
Click the eye to hide it.
Add new text: This is the support page. Center it to the middle of the screen.
On the new text timeline you just created, add a blank space, starting on 0 and ending on 75.
Give the text the action effect > Type Writer. Size it to start on 75 and end on 105.
Click the eye to hide it.
Add new text: Contact Us? Center it to the middle of the screen.
On the new text timeline you just created, add a blank space starting on 0 and ending on 110.
Give the text the action effect > Roller. Size it to start on 110 and end on 140.
Click Contact Us and then click Make a Link. Change Hot Spot action URL to mailto:whatever@youremailaddress.is
Click the eye to hide the text and the hotspot.
Add a blank space on the hotspot action for Contact Us starting at frame 0 and ending on 110.
If you preview the movie now, you will see after you press Home, the movie will keep playing. We need to add a stop action after each effect.
Let's set the size of the entire movie to 150 frames.
Stop actions are used to stop the movie in its tracks. The only way the movie will restart is through user interaction (i.e. clicking a link that starts the movie again or jumps to another frame in the movie).
Click Movie > Add Action > Add Stop Movie Action. Leave it starting on 0 on the timeline.
Also put a stop action on frame 35, 70, 105 and 140.
We need to add blank spaces after each effect now. Create a blank space on each timeline that starts 1 frame right after the effect, and goes to the end of the movie.
Click View HTML and copy it to the clipboard.
Go back to the text document you created and paste in between the <body> and </body> tags.
Save the text document.
Save your Firestarter as a Project called main.fire and a SWF called main.swf.
The text document index1.html you created and the main.swf you saved should both be in the Website folder on your desktop. You can keep your .FIRE file anywhere, in case you need to make more changes.
Creating another part of the Movie
What we have just created has been what is going to be the main part of the Webpage. We are now going to create the top part, or the "logo" area.
Create a new movie with a white background, a width of 600, and a height of 100.
Add the text "jk" with the color Red 194, Green 204, Blue 187, size 180, font Wingdings.
Make the movie timeline end on frame 150.
Since 180 is not a default font size, click inside the font size box and manually type it.
Position the text in the middle of the movie. You will only see it partially.
Preview the movie and save it as top.swf.
Add new text, size 60, color black. Make it say "My Website".
Set the opacity of the "jk" text to 50%.
For the text "My Website," add the action effect Power Wave.
Have the effect start at 10 on the timeline and ending on 60.
Click Movie > Add Action > Add Jump to Frame Action > 1. Position this action to start on frame 145.
This will cause the movie to loop. The reason we don't just use the built-in loop feature is because it would cause the movie to loop immediately after the Power Wave we created. This happens because there is no other activity in the movie, so it considers that the end.
Save the .FIRE and SWF. Copy the HTML to your clipboard.
Open the index1.html document back up, and paste right below the <center> tag. This code we are pasting now should actually be above the original "middle.swf" code, since this is the top of the page.
Make sure you save the SWF in the "My Website" folder on your Desktop.
Create a new movie with a white background, a width of 600, and a height of 50.
Add text, size 12, font Arial, color black. Make it say "Copyright �". To make the � character, hold down ALT on your keyboard, and press 0 2 2 2 on your numpad.
Add text, size 12, font Arial, color black. Make it say:
"Copyright mumbo jumbo Copyright mumbo jumbo Copyright mumbo jumbo"
Add text saying "jk" with the color Red 194, Green 204, Blue 187, size 180, font Wingdings.
Since 180 is not a default font size, click inside the font size box and manually type it. Change the opacity to about 50%.
Position the text in the middle of the movie. You will only see it partially.
Make the movie timeline end on frame 10.
If you preview the movie, you will notice that the "jk" text looks like it is above the Copyright text. This is because the "jk" layer is above it. Use the arrow icons in the cutting room to move the "jk" layer to the bottom.
Save the .FIRE and SWF.
Save the SWF to the My Website folder on your Desktop. Copy the HTML code to the index1.html document, above the </center></body></html> tags, and below the middle.swf pasted code.
When looking in your Website folder, you should at least see top.swf, main.swf, bottom.swf and index1.html. These are the files you must upload to your Website in order to see your Webpage. They must all be in the same exact folder.
If you view the index1.html you created and it doesn't appear correct, compare it to the index1.html available for download at the beginning of this tutorial.
When you preview the SWF in Firestarter, it creates an HTML document with the same name of the SWF. Don't get this confused with the index1.html file you are working with. You can delete the temporary file that Firestarter creates. We don't use it in the tutorial.
Rate This Article
You must be logged in to rate articles.
