CoffeeCup - HTML Editor, Flash & Web Design Software

Table of Contents

Before You Begin
Getting Started
Adding Sound
Adding Text
Adding Motion Effects
Previewing the Movie
Action Effects
Working With the Timeline
Using the Grid
Blank Spaces
Going With the Flow
Adding Shapes
Using Opacity
Creating Your Own Effects
Adding Images
Adding Interaction
Adding a Movie Link
All Done!

Before You Begin

The basic goal of this tutorial is to show you how to create a Flash introduction for your Website, but more importantly, it will help you get acquainted with the tools available in Flash Firestarter. Once you are comfortable with the program, you will be able to create much more then just introductions.

As you follow along, remember to save your project often to prevent loss in case something happens to your computer.

Getting Started

Open Flash Firestarter. The Quick Start window will automatically appear.

Choose Standard Movie, and then change the movie width to 600, the movie height to 400, the background color to black, and the text color to white. When you are done making these adjustments, click OK.

You will now see an empty black workspace. On the right-hand side of the program is the Object Properties pane, which allows you to modify the properties of your movie.

One such property is the frame rate, which controls how quickly the movie plays. Change it to 30, and then make sure the Loop Movie checkbox is unchecked.

Adding Sound

Let's add some background music for our introduction. To do this, either navigate to Movie > Add Sound or click the Add New Sound button in the Toolbar. This opens the Add Sound window, which allows you to choose a sound clip or soundtrack for your movie.

A sound clip is a short sound that can be looped, whereas a soundtrack is longer and can only be played once. For this tutorial, we will use a sound clip, so click the Sound Clip button. This opens a window containing a list of available sound clips. In this tutorial, we have chosen a clip called democlip.wav, but you may choose any .wav file you wish. When you are done, click Open.

Now take a look at the Cutting Room at the bottom of the program. There, you will see a new entry for the sound you just added.

To view the properties of your sound clip, click the yellow portion of the timeline, and then look over at the Object Properties pane. Since we are using a sound clip, let's loop it a few times to make it last the duration of the movie. In this tutorial, we are going to change the loop count to 2, but you may wish to loop your sound clip longer, depending on how long it is.

Adding Text

Let's add some text to our introduction. To do this, you can either navigate to Movie > Add Text or click the Add New Text button on the Toolbar. New text is automatically inserted on your page and reads "Your Text" by default.

To change this, go to the Object Properties pane and click inside the Text field. Next, type "Welcome to my Website!". This automatically changes the text in the workspace.

Next, using the tools in the Object Properties pane, change the size to 28, the font to Tahoma, and then put a checkmark next to B to bold your text.

Let's move the text from its current location to the center of the workspace. To do this, just click and drag it with your mouse.

Adding Motion Effects

Let's add a motion effect to our text. To do this, first click the text, and then navigate to Movie > Add Effect. You can also access this option by clicking the Magic Wand button in the Toolbar. This opens the Add Effect window, which allows you to choose whether you would like to apply a motion or action effect to the selected element. Click the Motion Effect button. This opens the Motion Effects tab.

Under the Slide In heading, click the arrow pointing to the right. Next, select the Fade In checkbox.

What we're doing is setting the text to fade in as it slides toward the center of the workspace from the left-hand side of the screen. When you're done making these adjustments, click OK.

Previewing the Movie

Let's check out how this motion effect looks! To do this, navigate to Movie > Play Flash or click the Preview button in the Toolbar. The program will prompt you to save your project as an .swf file before you can preview it. Once you have saved your movie, the preview window will appear.

When the animation ends, click the X in the upper right-hand corner to exit the window.

Now take a look at the Cutting Room. There, you'll see a pink bar in the Timeline for your text object.

This bar represents the motion effect. The longer or shorter it is, the faster or slower the text moves. Let's shorten this bar so it starts on Frame 0 and ends on Frame 40. Click the right-hand side of the bar with your mouse and drag it to Frame 40. If you preview the movie again, you'll notice that the animation is quicker.

Action Effects

Let's add another effect to our text once it reaches the middle of the screen. Again, navigate to Movie > Add Effect or click the Magic Wand button in the Toolbar. This time, click the Action Effect button. In the window that appears, select Blow Right from the drop-down list, and then click OK.

In the text timeline, you should see a light purple bar. This represents the action effect. At this point, you can preview your movie again to see how it's coming along.

Working With the Timeline

You may notice that you are getting toward the end of the timeline. Not to worry — you can change the length of the movie under the Object Properties pane. To view this option, click anywhere in the background of the movie (i.e. not the text). Near the bottom of the tab, you'll see the label Movie Length next to four arrow icons.

The left-facing arrows remove frames from the movie, and the right-facing arrows add frames to the movie. To add or remove 1 frame, click the corresponding single arrow; to add or remove 25 frames, click the corresponding double arrow. Let's add 25 frames to our movie by clicking the right-facing double arrow.

If you didn't see your timeline get any longer after adding those frames, you may want to zoom out a bit. To do this, look over at the far right side of the Cutting Room. There, you'll see two magnifying glass icons. Click the one with the - symbol to zoom out, and the one with the + symbol to zoom in.

Now, let's get back to our movie. During your last preview, you may have noticed that as soon as the text gets to the middle of the screen, it immediately blows away. This could make it hard for your viewers to actually read what it says. Let's adjust the effects so the text stays in the middle of the screen for a minute before blowing away. To do this, just click the explosion effect (the purple bar on the timeline) and drag it so it starts at Frame 130.

As you can see, there is now an empty space between the motion and action effects, which means the text will stay where it is until Frame 130. Go ahead and use the Preview tool to check out how the movie looks now.

You may notice that the text disappears from the movie after it blows off the screen, but it still appears in the workspace. This feature allows you to continue to work with your elements even if they seem to have disappeared. However, if you're done working with them, if you wish to work with them later, of if you're working with other text or images, their presence can be distracting or even annoying. Fortunately, there's an easy way to hide visual elements in the workspace. Go to the Cutting Room and look at the label for the text. There, you'll see the eye icon.

Click it, and the text will no longer appear in the workspace. (It will still appear in the movie, though.) To bring the text back, just click the eye icon again.

Using the Grid

Let's add some more text to our movie. Click the Add New Text button in the Toolbar, and then change the text to "This introduction was created with..." The font will automatically retain the formatting you set with the last chunk of text.

Now, let's place our text at the top left-hand side of the movie. In order to align it more precisely, we'll use use the grid. To enable the grid, right-click the workspace and select Show Grid. This places a dotted grid against the movie background. Using the grid as a guide, align the text to the top left-hand side of the movie.

Now, let's apply an effect to our newly added text. Select the text, and then click the Magic Wand button in the Toolbar. Click Action Effect, and then select Fall In. When you're done, click OK.

Using your mouse, click and drag the newly added action effect to Frame 200 on the timeline, and then compress it so it ends at Frame 240.

If you were to preview the movie at this point, you would notice that the text stays onscreen the entire time. This doesn't look so hot, which is where blank spaces come into play.

Blank Spaces

Blank spaces are placed in the timeline for a given object. When there is a blank space in the timeline, the object will not display. To add a blank space, select the object you want to add a blank space to and then click the Add a Blank Space button in the Toolbar. This adds a light gray box to the object's timeline.

Let's add a blank space to our new text object. Select it, and then click the Add a Blank Space button. A light gray box will show up on its timeline. Use your mouse to click and drag it to the beginning of the timeline. Next, right click it and select Grow Right. This expands the blank space to fill the timeline until it reaches the next object — in this case, the action effect.

Let's preview the movie again. The second text object will now fall in at the appropriate time.

Let's add one more line of text. This time, it's going to say "... CoffeeCup Flash Firestarter!" As with the last text object you added, it will inherit the same font styles. Next, let's add an action effect to it. Making sure the text is selected, click the Magic Wand Icon, choose Action Effect, and then select Unfold Letters Two from the drop-down list.

Now, let's have this effect start on Frame 260 and end on Frame 290. Then add another blank space so the text doesn't show up before we want it to. Click the Add a Blank Space button, drag it to the beginning of the text's timeline, and then right-click it and select Grow Right. Your Cutting Room will now look something like this:

Going With the Flow

Let's add another effect to two of our text objects, "This introduction was created with..." and "... CoffeeCup Flash Firestarter!". First, select "This introduction was created with...", and then add the Blow Right action effect. Then move it on the timeline so it starts at Frame 300 and ends at Frame 330.

Next, select "...CoffeeCup Flash Firestarter!" and add the Explode - Standard action effect. Then move it on the timeline so it starts at Frame 300 and ends at Frame 330. Your cutting room will now look a little something like this:

Now let's preview our movie. (In case you haven't noticed by now, you should preview your movie several times as you create it just to make sure it's coming along the way you want it to!) You'll notice that the "This introduction was created with..." and "...CoffeeCup Flash Firestarter!" text objects explode off the screen at the same time. Pretty cool, huh?

Let's add a couple of extras to really make our introduction shine.

Adding Shapes

First, let's add a shape. To do this, go to Movie > Add Shape or click the Add New Shape button in the Toolbar. Initially, the shape will start out as a rectangle:

To change it, make sure it's selected and then look under the Object Properties pane. There, you'll see a drop-down menu containing eight different shapes. For now, let's leave the shape as a rectangle, but use the other available tools to change the fill style to solid and the color to white.

Using Opacity

Let's also change the opacity of our rectangle using the Opacity slider under the Object Properties pane. When an object is at 100% opacity, it is completely opaque; when it is at 0% opacity, it is completely transparent. Let's change the opacity to about 10%.

Let's also change the size of our rectangle, so it fills up the entire movie. Use your mouse to click and drag the corner of the rectangle until it covers the entire movie area, like so:

Once you've done this, click the rectangle's eye icon in the Cutting Room so we can continue to work with other page elements. When you preview the movie, it will appear to be covered by a translucent gray screen.

Creating Your Own Effects

What we're going to do now is make this rectangle blink rapidly on the screen instead of just sitting there. Add a blank space to the shape's timeline, and then drag it until it's 20 frames long. Next, click the Copy icon located at the bottom of the cutting room. This places a copy of the blank space on your Windows clipboard. To paste a copy in the timeline, click the Paste icon.

Paste the blank space 14 times, and then space them so each blank space is one frame apart. Expand the last blank space so it ends on Frame 420, which will be the last frame of our movie.

Let's add some more shapes. Click the Add a New Shape button, leave it as a rectangle, and change the color to white and the opacity to 20%.

Next, resize the rectangle so it is skinny but runs the height of the movie. Drag it to the left-hand side of the movie so it looks like it's the left side of a frame, with the rest of the movie as the picture.

Now we'll add a motion effect to this shape — specifically, the Slide Out to the Right effect paired with Fade In. This will cause the rectangle to appear on the left and fade in as it slides to the right out of the screen.

Move to this rectangle's timeline and make it start at Frame 30 and end on Frame 50. Then add a blank space between Frame 0 and Frame 30.

Let's add another, similar shape, only this time it will look like the top of a frame. Stretch the rectangle so it spans the width of the movie, and then apply the Slide Out and Fade In motion effects. Have this effect begin at Frame 80 and end at Frame 100. Don't forget to add a blank space stretching from Frame 0 to Frame 80!

You can probably guess what we're getting at — create two more shapes, one on the right and one on the bottom, to finish out the frame effect. Have these shapes fade in and slide out in the opposite directions. By now, your timeline is going to look something like this:

Throughout your movie, these shapes will float across the screen while fading in — quite a cool effect, if we do say so ourselves! Remember, if you don't want to see them while you are working in the workspace, you can make them invisible with the eye icon.

Adding Images

Now that we're comfortable working with text, shapes, and sound, let's add an image. First, download this image by right-clicking it and selecting Save Image As...:

Then, in Firestarter, go to Movie > Add Image or click the Add New Image button in the Toolbar. Choose this image from wherever you saved it and click Open. Move the image to the middle of the page, so it's between "This introduction was created with..." and "...CoffeeCup Flash Firestarter!"

Now let's add an action effect to the image — specifically, Snake In. Next, drag the action effect so it starts on Frame 320 and ends on Frame 340. Finally, add a blank space from Frame 0 to Frame 320.

Adding Interaction

Let's face facts: We worked hard on this introduction, but some people, for whatever reason, may want to skip it and go straight to your site. Let's add a Skip Intro button for these users.

Add some text, and change it so it says "Skip Intro." Using the tools under the Object Properties pane, change the size to 14 and the opacity to about 40%. Next, drag it to the lower left-hand corner of the movie. This ensures that it will be visible throughout the movie, but not intrusive. However, you should make this link disappear at the end of the movie, since there won't be anything to skip at that point. Add a blank space to the text's timeline starting at Frame 350 and ending at Frame 420.

Next, making sure your text is selected, go to the Object Properties pane and click the Globe icon next to the text Make a Link. You'll notice that the options under the Object Properties pane change. Leave the Hot Spot Shape as its default shape, a rectangle, since it fits the text. (If you were making an image into a link, you might want to use a different shape that better fits the image in question.) Next, type in the URL of your homepage (e.g. http://www.coffeecup.com) in the URL field. Leave the Frame drop-down list empty. If you use frames or want the link to open in a new window, you can use this option, but for this tutorial, we won't.

Adding a Movie Link

If anyone clicks the Skip Intro link, they'll be taken straight to your Website. But what about the people who watch the movie all the way through? We need to set the movie to take them to your Website after the introduction is over. To do this, use the Movie Link option. Click anywhere within the movie that isn't an image, shape, or text object to change the tools under the Object Properties pane back to the movie properties. Next, click the Globe icon next to the words Movie Link.

As with the Skip Intro link, enter the URL of your homepage in the URL field and leave the Frames drop-down list blank. Now when the movie ends, your users will automatically be taken to your Website.

All Done!

A few notes: If any of the timing in your movie seems off, use the Zoom In option to take a closer look at the timeline and fine-tune your movie. You should also make sure nothing extends past Frame 420, since this could also cause some funky timing.

If you want to incorporate this movie into your Website, you'll need to upload the .swf, .gif, and .wav files to your server. You'll also need to add the HTML generated by the program to your Webpage. To access this HTML, save your project. This opens the Files window, which lists the files you need to upload as well as the HTML code.

Inserting HTML into an HTML editor is easy, but the process that may vary depending on which program you're using to design your pages. If you are using CoffeeCup Visual Site Designer, read this article.