Starting up Serif DrawPlus X2, choose New>Keyframe Animation and select WebPlus 10 Flash Banner from the menu. One of the first things to do is set up our Keyframe Animation page settings. Choose Page Setup and from the pop-up window select 30 fps for smooth transitions and Flash Version 8, leave the Flash Bitmap Quality at 85%, Background Colour choice is optional. We want to make this look professional, professionals use the latest versions of software and Flash 8 has so many advancements over Flash 6. You can experiment with both the Flash Version number and Bitmap Quality settings once the project is completed to get an idea of the differences.
The last part of basic setup is to change our workspace (this could have been done via the wizard but this is another way). Select View>Studio Tabs>Select Workspace and choose Keyframe Default (it’s worth experimenting with the workspaces here as you may find one that suits you better); this one provides us with all the necessary tabs.
Now we turn our attention to the Layers Tab. Rename Layer 1 to Camera and click on the padlock icon to lock this layer – we won’t need to touch it again and this provides a safe way of continuing without accidently altering it. Just as a point of interest, I never put anything on the camera layer, finding it less confusing this way. Create two new layers naming them Track1 and Track2 and drag the Camera layer above the new layers. I’ve given them these names to provide consistency for anyone familiar with video editing, it makes creating a linear flash animation easier to visualise.
Preparing images to a set size before starting can help here. My images are all 300x200 pixels. It may also be helpful at this point to create a folder with your images in for easy access; you could even rename then with a number prefix for the order of play if it helps. Oh yes, remember to save often during the project!
Now for the fun part!
1) Place the first image you want to see in the Layer called Track1, rename the image from the default ‘object1’ to the more meaningful image1; the next image insert in the Layer called Track2, rename to image2. This naming convention helps if you add more items, like text.
Position images precisely using the transform tab. As this image has been sized to 300x200 it is easy to set the anchor point to the top right corner and set exact pixel positioning. The link between width and height has been clicked to constrain proportions, there’s nothing worse (read more amateurish) than squashed or stretched images.
2) On the Storyboard tab, running along the bottom of your workspace, click on the ‘Insert’ button to add a new keyframe using the pop-up window, make this 4 seconds.
3) Select the image on Track 1 of the new keyframe, clicking on the Transparency tab* set the Opacity to 100% (first swatch in the top left corner).
* Users of DrawPlus X3 please click here to see further information below
4) Insert a new keyframe - 3 seconds
5) Select the image on Track 1 of the new keyframe, setting the Opacity to 0% transparent (last swatch in the bottom right corner).
6) Insert a new keyframe - 4 seconds
7) Delete the image on Track 1 of the new keyframe and replace it with your third image, name it image3 (or higher if this is repeating from below), setting its position using the Transform tab and setting it's opacity to 0% (transparent).
8) Insert a new keyframe - 3 seconds. The time on the Storyboard tab now reads 14.0s
9) Select the image on Track 1 of the new keyframe, setting the Opacity to 100%.
10) Insert a new keyframe - 4 seconds. The time on the Storyboard tab now reads 18.0s
11) Delete the image on TRACK 2 this time, replacing it with your fourth image. Rename and adjust its positioning as before.
Repeat from 4 as necessary remembering to rename and position the images used.
If you want your banner to automatically repeat from the beginning ensure the last image placed is the same as the first one used and end the animation on point 5 if it is placed on track2 or 9 if placed on track1.
If you want your dissolving images to loop endlessly, use your first image as the one being faded into at the end of the animation. If you wish to give the viewer the option of replaying the animation from the beginning you will need to add this to the animation in the form of an Action Script – a lot easier than it sounds! You can combine a line of simple text with a quick shape button for this button, as above example.
12) On your last frame create a new Layer, called Replay, allowing some space in the bottom right corner add a quick shape first followed by the text (create the text away from the shape otherwise the shape will become a text box). The shape gives the mouse more to lock on to than just plain text. You can make the fill and line transparent if you wish, this will then act as a ‘hot-spot’, or as I did, to 50% opacity - semi transparent and no line. With both created, select both and align them, finally group them and give them the name ‘button’.
Tip: One thing to watch out for is the size of your shape and button, make sure the quick shape is larger than the text and a whole number of pixels e.g. 70x25, not 70.3x26.35 as Flash works better in whole numbers. If you find your animation jumping, look at pixel sizes first.
13) Select the button group and click on the Actions tab. Choose ‘Mouse Press’ and then the cog icon at the bottom of this tab to edit the action. The Mouse Press Action Window pops up with a list of ‘Action Script Available Actions’ down the left pane and a blank ‘Applied Actions’ pane to the right. Click the plus sign next to ‘Timeline Actions’ then select ‘Play Movie’ (1) from the drop down list, now click on the little arrow button (2) to move the Play Movie across to the empty ‘Applied Actions’ pane. Click OK(3). We’ve just created the Action Script that will change a mouse pointer to a hand when it hovers over the button and and play the animation or ‘movie’ from the beginning when clicked; this part is complete.
14) Click on the triangle above the last frame, a pop-up window called Marker greets you. Type the word Replay in the Space and check the ‘Stops Playhead’ option. Click on the little cog icon in the last frame, a Frame Action pop-up window greets you, it’s identical to the ‘Mouse Press’ window above. Click the plus sign next to ‘Timeline Actions’ as before, but this time select ‘Stop Movie’ from the drop down list, now click on the little arrow button to move the Stop Movie across to the empty ‘Frame Actions’ pane. Click OK. We have now told the animation to stop at the end, our ‘replay button’, when pressed, will now work and do it’s job when the animation reaches here.
Let’s save then test drive our animated Banner - Fun-tastic!
To see our animation running, select Preview in Flash Player from the drop down list next to the green play button (it is the default unless you’ve changed it in your options).
To add dynamism to your static images you could try moving and zooming them. Interested? Take a peek at the next project – Dynamic Flash Image Banners!
There we have it, export as a Flash swf and it’s all ready to place on your web page. Simple! Remember to have FUN!
Ken (Major Confusion)
To loop or not to loop?
This banner’s page settings are: 700 x 200 pixels; Frame Rate30 fps; Flash Version 8; 50% quality; file size 1.15mb. There is no discernable difference in file size if it is reduced to 15 fps but the dissolves are less smooth.
This animation ended on number 9, the second time around
15) Now this part is complete, we could add a ‘flashier’ touch by fading our button in at the end. Insert 1 more keyframe for 2 seconds this time. Select the button while still in this keyframe, not the new one, and make it transparent. Selecting the marker of this keyframe, add the ‘At next keyframe’ option. Click on the cog icon of the last keyframe and repeat the ‘Stop Movie’ action from step 14. we can now select and remove the ‘Stop Movie’ action from the previous frame, the cog icon will go off - job done!
DrawPlus X3 users
With the launch of DrawPlus X3, Serif removed the Transparencies tab in favour of the more flexible transparency slider found in the Colour tab. The transparencies still work using the slider instead of the preset swatches, setting the slider to 0% for transparent and 100% for opaque.