First steps in Flash

Adding effects
Now, we want to make the image fade in, so click on a position on the timeline ­ - around frame 24 will give us a two-second fade. Click the Insert menu, choose Timeline, then Keyframe. You’ll now see the extra frames added and you can move the pointer to see what’s at each point on the timeline.

There will be two sections ­ - one from frames 1 to 24 and another at frame 25. Click again at around frame 50-60 and add another keyframe. Now, we’re going to add the fade-in. Double-click in the first section to select it, then from the Insert menu choose Timeline Effects, Transition.

In the dialogue box that appears, enter 24 for the effect duration and set the other options to Fade, In, then click OK. When you’re returned to the main screen, press Enter and you’ll see a preview.

Next up, how about some text? Let’s name the background layer first ­ click on the name next to the timeline and type in a new name. Choose Timeline, then Layer from the Insert menu.

Click to select layer 2, choose the text tool from the left-hand column, click on the image and type a caption. This will appear over the whole of the timeline, but we don’t want it to pop up until the image has faded in.

So, double-click to select the frames on the layer with this text, then hold down the mouse while clicking on the small rectangle at the right-hand end of the sequence, and drag to the right until the highlighted area starts at frame 25. Blank frames will be added automatically at the start of the timeline.

Now Ctrl-click on the end of the set of frames and drag to the left; both layers end at the same point.

Press Enter again for a preview. Now, let’s add more text. Using the same technique, adjust it to appear on the timeline some time after the first text. Now use the same transition effect, but this time use a wipe, with the direction set to go left to right, and around 12 frames.

Position the effect on the timeline and press Enter to check it. The text may look a bit rough, but it will look fine in the finished article.

In fact, you can see that more easily ­ as well as making sure you’re only seeing the actual canvas, if your background image is too large ­ by pressing Ctrl & Enter for a pop-up preview window.

But what if you’ve made a mistake with that text, and need to change it? You’ll quickly see that you can’t just double-click and edit it now that you’ve turned it into a transition. In the Library panel on the right, you’ll see that there’s an Effects Folder. Double-click to open that and you’ll see various symbols that make up the effects used in the movie. One of them will be the original text, so you can double-click to open the symbol, then alter the text. You can also highlight some of the text and turn it into a hyperlink.

When you’ve changed the text, click the left-pointing arrow on the bar between the movie and the timeline. If you’ve altered the text enough to change the size of the box that contains it, you’ll need to make a note of the size and adjust the blank box that matches, which is also contained in the effects folder. Otherwise not all the extra text will appear.

Ready to go
OK, so this isn’t the most imaginative piece of Flash, but hopefully it has given you confidence to experiment.

There’s also a little more to do. First, you need to get the Flash file onto a web page. From the File menu in Flash, choose Publish Settings, and on the Formats tab of the next dialogue, choose HTML and Flash (swf). On the Flash tab, you can choose the version of Flash Player that will be required and alter the security settings.

HTML options include choosing whether or not the movie will loop, or if it’ll be paused to start with. For a page like this, we want it to start automatically and not loop ­ when the movie’s finished, users can click the links in the text to go to other parts of the site. When you’ve chosen all your options, click Publish.

You’ll end up with .html and .swf files named after your Flash project. Check the HTML to see if there are any Javascript files required ­ if you’ve followed this example, you’ll also need AC_RunActiveContent.js too. Just copy all these pages to your web server and the job is done. You can tweak the HTML to add other elements to your page, or simply include the SWF file in Dreamweaver or another web design application.

Our screenshot shows the Flash-generated HTML file open in Safari on the Mac, to check that all’s behaving as it should.