CoffeeCup - HTML Editor, Flash & Web Design Software

Table of Contents:

1. Before you Begin
2. Getting Started
3. Adding Sound
4. Adding Text
5. Motion Effects
6. Testing the Movie
7. Action Effects
8. Working with the Timeline
9. Using the Grid
10. Blank Spaces
11. Going with the Flow
12. Adding Shapes
13. Using Opacity
14. Creating your own Effects
15. Adding Images
16. Advanced Effects
17. Adding Interaction
18. Adding a Movie Link
19. Finished

Before you Begin

The basic goal of this tutorial is to show you how to create an Introduction for your Web site, but more importantly it will show you how to do many different things in Firestarter and get you comfortable with using it. Once you are comfortable with using Firestarter you will be able to create much more then just Introductions.

While following this tutorial you will be creating your own project in Firestarter. Remember to save it often.

Before you begin, you must download this file that includes the required files to create this Intro:

All Required Files (Right-click and Save As)

It is recommended that you create a folder called "Intro" on your Windows Desktop. Copy all of the contents of the ZIP file into that folder.

Feel free to customize the Introduction to your own liking if you wish. We use basic examples in this, but you can put in your own text,sound,images, if you like.

If at anytime you get lost, or are uncertain on something in the Tutorial, you can examine the .fire file that was included in the ZIP. This is the completed version of the Tutorial.

Getting Started

We will start by opening Firestarter. The Quick Start window should Pop-up. Choose Standard Movie. Change the Movie Width to 600, and the Movie Height to 400. The Background Color should be Black, with Text Color White. Click Ok.

You should see an empty black canvas. On the right side you should see the Movie's Object Properties. Let's change the Frame Rate to 30. This is how fast the Movie plays. Let's also take Off, Loop Movie.

Adding Sound

Let's add the background music for our Introduction by clicking on the .

Since the sound we are using for this demo is a Loop, we want to choose the Sound Clip icon so we can loop it. Sound Tracks can only play once. Select the demoloop.wav that you downloaded with this Tutorial.

After you open it you will notice at the bottom of the screen in the Cutting Room, there is a new entry for the sound. By default this sound will play only one time. By clicking on the sound entry you will see it's Object Properties on the right side in Firestarter. You must click on the actual Sound area (Yellow) in order to see it's properties. Clicking on the Layer itself won't show you the Sound properties. Here we can choose from a few different options.

Loop Count is how many times the sound will loop within our movie. Let's change that to 2.

Adding Text

Now let's add some Text. Click on Movie > Add Text. You can also add Text by clicking on the . It will default to say Your Text.

On the right you should see the Object Properties of this Text. Let's change it. Click on where it says Text: For this Tutorial I will be using "Welcome to my Website!".

Change the size to 28, the Font to Tahoma, and click B for Bold Text.

You may notice it is off-centered. The location of the Text where it is now, is where it will end up. For example, if we use a Motion Effect to Slide In, this is where the end of the slide will be. For now, let's drag it to the center of the Movie.

Motion Effects

Now, let's add some Motion to the Text. Remember that the Object you last click on is the item that you are working with when you change anything. So just to make sure, click on the Text, then click Movie > Add Effect.

You can also add Effects by clicking on the: .

Click on Motion Effect.

Click on Slide In > Arrow pointing to the Right. Click Fade In. What we are telling this Text to do is come in from the left, to the right side of the screen while fading in to full color. Click Ok.

Testing the Movie

You will see that you don't notice any difference in the Movie. This is because you have to actually play the Movie to see the Motion. Click on Movie > Test Flash. It will prompt you to save the SWF before you watch it. Save this SWF file in the same folder as the sound/images you downloaded with this tutorial.

You can also preview the Movie by clicking on the .

At this point you should see a preview of the Movie, and your Text should be coming in from the right side, while fading in. It should end up in the middle of the screen. You should also hear the music in the background.

If you look at the Cutting Room you will see a new entry for the Text. You will also see a Pink Rectangle for the Motion Effect called Slide In Fade In. This is the movement of the Text.

The longer or shorter this is, the faster or slower the Text does the movement. So if you think the Text is taking too long to get to the middle of the screen, let's shorten the Slide In Fade In area. Click on the right side of it and drag to the left. It should start on 0, and let's make it end on 40. Now if you watch the Movie you will notice it moves quicker to the middle.

Action Effects

Let's do something with the Text once it reaches the middle of the screen. Click on the Text, then click on the Magician's Hat. Click Action Effect. Select the Blow Right option. Click Ok.

Now on the on bottom you should see a Light Purple Rectangle. This is for the Action Effect. The same principle is applied for the Motion as is for Action. The length of the area affects the speed of the Action. Let's preview the Movie before we change it though. Click on the Play button.

Working with the Timeline

You may notice that you are getting towards the end of the Timeline by now. That's okay, you can change the Movie's length by clicking on the Movie's Object Properties. To view the Movie's Object Properties, click anywhere in the Movie area that is blank, then on the right side you should see it. At the bottom of the Object Properties you will see Movie Length. You can shorten or lengthen the Movie from here. In this case, let's lengthen it by 25 frames.

You may also want to Zoom In/Out of the Movie at times. To do this, in the Cutting Room, on the far right side you will see 2 Magnifying Glasses. Click the one with the - symbol to Zoom Out, and the one with the + to Zoom In.

You may notice that as soon as the Text get's to the middle of the screen it immediately explodes. This can make it hard for someone to actually understand what it even said. So let's make it stay in the middle of a moment.

Click and drag the Action Effect to start on 130 on the Timeline. By default the Action is 50 frames long, which we will leave as is.

There should be an empty space between the Motion and Action Effects now. This will cause the Text to stay still until the Movie reaches 130 while playing. Test it by playing the Movie again. You may notice that the exploding Text now coincides with the music.

Now for the rest of the Movie, the first Text we used will not be visible because it was exploded off the screen, but you will still notice you see it on your screen constantly. This can get annoying when you are trying to work with other Text or Images. In the Cutting Room, you will see the Eye icon. On the first Text Layer, click the Eye icon. This will make it invisible while editing. It doesn't affect the finished movie at all.

Let's add the next Text. Click on the . Change the Text to "This Introduction was created with.." It should keep the same format as the original Text automatically. (Tahoma, 28, B)

Using the Grid

Let's place it towards the top left of the screen. If you want to align it to a grid click the Grid icon, located next to the View HTML button right above your Movie. Click Show Grid. Now you should see dots across the screen.

You should see the new Layer for this Text in the Cutting Room. Click on the Text. Click the Magician's Hat. Click Action Effect. Choose Fall In. Click Ok.

Click and drag the Action Effect to 200 on the Timeline. Shrink it so it starts at 200, and ends at 240. Play the Movie. You will notice that it stays there the entire time! This is where Blank Spaces come into play.

Blank Spaces

Blank Spaces are used so that the Text/Images/etc you are working with only show up when you want them to. They are actually always there, but you just choose when you want them to be visible. Let's add our first Blank Space. In the Cutting Room, on the left, on the recent Text Layer we just added, click the Film Icon. You will notice that a Light-Grey box will show up right after the Fall In we just added on the Timeline. Click and drag it to the beginning of the Timeline, before the Fall In. Once it's at the beginning, right click the Light-Grey box and choose Grow Right. This will cause the Blank Space to expand until it hits something, which in this case is the Fall In Action.

Let's watch the Movie now. You should not see the second area of Text until it falls in.

Once your Movie is long enough to add another line of Text, and you have your Zoom In/Out level to your desired view, let's continue.

Let's add another line of Text. This time let's make it ..CoffeeCup Firestarter!. Same format as previous Text. Let's place it near the bottom right of the Movie. Let's then add an Action Effect to it, Unfold Letters Two. Remember we are using Action Effects that are for bringing in the Text, not removing it.

Let's move this Text to starting at 260 on the Timeline, and ending on 290. Now if you watch the Movie you will remember, you must add a Blank Space so that you don't see it until you want to. Add a Blank Space, drag it to the beginning of the Timeline for this Layer. Right-click it and choose Grow Right.

Going with the Flow

Let's now add an Effect to both Text fields, that do the same thing, at the same time. Click on the first Text field (This Introduction was created by..) click the Magician's Hat, and add the Action Effect, Blow Right. Once you add it you will need to drag it on the Timeline to start at 300, and end at 330.

For the second Text field (..CoffeeCup Firestarter!) add an Action Effect of Explode - Standard. Make it start at 300 and end on 330 on the Timeline.

Notice, in this picture I have Zoomed in using the Magnifying Glass so I can make sure they both start and stop at the same time.

Preview the Movie (The Play Button). Both Text fields should explode off the screen at the same time, and sync with the background music.

Now the Introduction looks pretty cool. You've got your music, your text and effects, but now let's add some extras.

Adding Shapes

Let's add an Shape. Click Movie > Add Shape. You can also click on the .

It will start out as a Rectangle.

You can change it in the Object Properties screen on the right. For this situation, let's leave it as a Rectangle, but let's change it to the Solid Fill Color of White.

Using Opacity

Let's also change the Opacity of the shape. Remember this is what makes something more or less visible. Change the Opacity to about 10%. When you change the Opacity to 10% it won't appear as though you have done anything. You can't actually see the Opacity until you Play the Movie.

Also change the Size of the Rectangle. Let's make it fill up the entire Movie. Click and drag it so that the Rectangle is covering up the entire Movie area.

Once you do this, click on the Eye icon in it's Timeline so we don't have to see it. That way we can see the other stuff in the Movie.

If you watch the Movie now, it should appear to be covered by a grayish film.

Creating your own Effects

What we want to do with this is have it blink quickly on the screen instead of just staying there. On the Shape Layer, add a Blank Space. Drag it to be 20 frames long.

Click on the Blank Space, on the bottom left click the Copy icon and then click the Paste icon.

This will paste the Blank Space into the same Layer. Paste it a total of 14 times, so there should be 15 Blank Spaces on this Layer. You want them all to be 1 space apart. On the last Blank Space, expand it to frame 420. (If your Movie isn't that long yet, make it 420 now, as it will be the last frame of the Movie)

When you preview the Movie, the screen should blink every second, along with the music beat.

Let's add some more Shapes. Click the New Shape icon. Leave it as a Rectangle, change the color to White. Change the Opacity to about 20%.

Re-size the Rectangle so that is very skinny, but is as long as the Movie, i.e. the shape of a ruler. Drag it to the far left of the Movie. It should appear as though it was the left-side of a frame, and the Movie is the picture.

On the new Layer created by this Shape, add a Motion Effect for this Shape. Choose the Slide Out to the Right option. Also check the Fade In option. Doing this will cause the Shape to start on the left (Where you placed it) and Fade In as it goes out of the screen to the right.

On this Shapes Layer, make it start at line 30 and end on 50. If you watch the Movie now, you will see the Shape waiting on the left side, until the Motion Effect is used. We don't want this, we want it to appear to come out of the left side of the screen, not just wait there. We will use a Blank Space to hide it until we need it. Add a Blank Space to this Layer, drag it to the far left of the Timeline, or you can click Snap to Left, then right-click and choose Grow Right. It should expand until it hits the Slide Out Action we just added.

Let's add another Shape, but have it resemble the top of a frame. Start at the top of the movie, stretched out the width of the Movie. Have it do the Slide Out Motion towards the bottom of the Movie. Remember to select the Fade In option.

Have it start on frame 80, and end on frame 100.

Create another Shape on the right, and bottom, that do the same things. They Fade In, and Slide Out the opposite direction.

Now you should have 4 layers, that each have one of these Shapes on them. Through-out the Movie these Shapes should float across the screen, while fading in.

If you don't want to see these Shapes while you are creating the rest of the Intro, remember you can make them invisible with the Eye Icon.

Adding Images

Now let's add an Image. Click on Movie > Add Image. You can also click on the .

Make the "Welcome to my Website!" Text invisible, but leave the "This Intro.." and the "CoffeeCup Firestarter" Text there, so that you can put the Image directly in the middle of them.

Choose the firestarterbox.jpg that you downloaded with this tutorial. Center it to the middle of the Movie area.

Add an Action Effect to it. Choose Snake In. On this Image's Timeline Layer, drag the Action Effect to start on frame 320, and end on 340. Now add a Blank Space from frame 0 to 319.

Advanced Effects

Let's add an Advanced Effect now to the Image. Click the Image, Click the Magician's Hat, choose Advanced. Here we can alter the Size and Motion of the Image. Under Motion, change the To: field to Absolute, and leave it at X:0 Y:0. These are the X/Y coordinates of the Image, at the end of the Advanced Effect. It is the Motion the Image will take, to end up at X:0 Y:0 in the Movie Area.

Next, under Size, change the To: to Absolute, and also leave it at H%:0 V%:0. This is the final size of the Image once the Advanced Effect is done. Click Preview Effect. You should see the Image slowly shrink off to the left of the screen. Click Ok.

Now remember, if your running out of space in your Timeline, add some length by using the Arrows in the Movie's Object Properties.

If you watch the Movie now, you will see the Image assemble, then immediately start to shrink. We don't want this. We want it to stay still for a moment, so that people can see it. Let's make the Advanced Effect we created start on frame 380 and end on 420. You will notice there is some unused space between the Action Effect and the Advanced Effect now. This is the time the Image will just stay there, doing nothing.

If the Movie seems to be getting cluttered when trying to move things around, remember you can hide things from being seen by clicking on the Eye Icon in the Cutting Room for each Layer. This will simply make the item invisible to you while editing it. It doesn't affect the final Movie at all.

Adding Interaction

Our Introduction is done, but for those people who want to skip the Introduction and go straight to your site, let's add a Skip Intro button.

Add Text, make it say Skip Intro. Make it size 14, and place it on the bottom left of the Movie. Also, change the Opacity of the Text to about 40%. This Skip Introduction Text will be visible through-out the Movie, since we want people to be able to skip it at anytime. Although at the end of the Movie, it should disappear since there is nothing skip at that point. Add a Blank Space on the Skip Introduction Layer starting at frame 300, and ending on 420.

Now we've got to be able to have the Skip Introduction Text, actually do something. Click on the Skip Introduction Text, then in it's Object Properties on the right, click Make a Link.

The Hot Spot Action is where someone can click to use this Text, leave it at it's default of Rectangle, since it fits for Text. If you were using an Image then you could use a different shape that fit more towards the Image.

Leave the Hot Spot Action as URL Link, and in the URL: area put in http://www.coffeecup.com. Leave the Frame empty. If you were using Frames in your HTML, or if you wanted the URL Link to open in a new browser window you could use that option.

Adding a Movie Link

What will happen now, is that if anyone clicks on Skip Introduction during the Movie, they will just go straight to the Website. Now what about those people who watch the entire movie through, what happens at the end of the movie for them? We need to have it take them there automatically after the Movie has played.

You can do this with the Movie Link option. Click anywhere in the Movie Area to see the Movie's Object Properties. Click on Movie Link.

Put in http://www.coffeecup.com. Change the Frame to _blank. This will cause the Website to be opened in a new browser window, if you don't want it to, leave the Frame area empty. Now at the end of the Movie it will automatically load the CoffeeCup Website.

Since our final frame should be 420, where the Advanced Effect ends, let's resize the Movie Timeline to end on 420.

Finished

A couple notes. If you have any weird timing on the Movie, don't be afraid to Zoom In and fine tune the Timeline. Also, make sure that none of the Effects, or Blank Spaces are going past the 420 mark, doing this could cause the Movie to last too long, or be off-sync. The Sound will keep going non-stop, so don't worry about trying to make that end at the 420 frame.

The Introduction is complete. If you want to upload this Movie, you will need to upload the SWF, JPG and the WAV to your Web space. You will also need to click the View HTML button and copy and paste that code into your actual HTML page.