Tell a Friend About Our Cool Software
CoffeeCup Firestarter Help Center
Intermediate Tutorial - Creating an Interactive Menu/Webpage
- Before you Begin
- Begin your Movie
- Using Hot Spots
- Start adding Tex
- 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 to index1.html. (Right-click > Rename).
Open the 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 New Movie, White Background, 600 Width, Height 400.
Add a new shape, rectangle. Solid Fill, color (Red 194, Green 204, Blue 187) Add 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, 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 4 spaces between each word. Add:
Home Products Support Contact
Hot Spots are areas in the Movie that are interactive.
Add a Hot Spot for each word, drag it over each word. You can resize the Hot Spot for larger words, just drag and resize.
Change each Hot Spot 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 to 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) & Fade In. Size it to start on 5 and end on 35.
Click on the Eye to hide it so we can add other Text without it being in the way.
Preview the Movie. It will require you to save the movie before you do. So 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) & Fade In. Size it to start on 40 and end on 70.
Click on 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 on 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 on Contact Us, click Make a Link. Change Hot Spot action URL to mailto:whatever@youremailaddress.is
Click on the Eye to hide the Text and the Hot Spot.
Add a blank space on the Hot Spot 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 it's tracks. The only way the movie will restart is through user interaction. (i.e. Clicking on 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, Copy to 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 Project called main.fire and a SWF 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 New Movie, White Background, 600 Width, Height 100.
Add Text, saying: "jk" (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 in the font size box and manually type it.
Position the Text in the middle of the movie. You will only see it partially, this is okay.
Preview the movie, 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 an Action Effect > Power Wave.
Starting 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, 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 orignal "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 New Movie, White Background, 600 Width, Height 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" (Red 194, Green 204, Blue 187), size 180, font Wingdings.
Since 180 is not a default font size, click in 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, this is okay.
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 atleast 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.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
