Creating Attention Grabbing Frame Transitions

In this example, you will learn how to:

Use strokes and fills
Add bevel and emboss effects to text
Animate through translation and visibility
Use the overscan area to hide all but the canvas
Create abrupt color changes between animation frames

Step 1 Create a new web banner (468x60) document with a transparent background.	Detailed Instructions Start e-Picture or choose File > New to bring up the New Document creation window. In this window, select Web Banner (468x60) from the Template popup menu and Transparent from the Background choices. Then press the Create button. This will create a blank web banner sized canvas for you using the standard web banner characteristics. Your blank canvas is indicated by a gray and white checkboard pattern (the checkerboard pattern indicates transparency). Increase the height of your new banner window so that there is at least an inch (2.5cm) above the canvas area. This "overscan" area will be used to create the effect of an object dropping into the canvas from above.

Step 2 Add an orange background to your banner.	Detailed Instructions Select the Rectangle tool () from the toolbox and change the stroke to transparent and the fill to orange. To change the stroke to transparent, select the Stroke tab in the tool inspector and click on the transparent button (). To change the fill to orange, select the Fill tab in the tool inspector, click on the solid color button (), and use the color mixer to produce orange. One way of doing this is to set the Red value to 255 and the Green value to around 170, with blue remaining at 0. Use the rectangle tool to draw an orange filled rectangle that covers the entire canvas.

Step 3 Add text to the banner.	Detailed Instructions Select the Text tool () and click towards the left hand side of your canvas to insert text. Type "Does Size Matter?" and press Enter. Now, in the Text Tool Inspector, change the font size to 40 point. Use the Pointer tool to drag the text so that it is centered just above the canvas ready to drop in.

Step 4 Modify the color of the text and add emboss and bevel effects.	Detailed Instructions To modify an object after it has been created, use the Objects panel. Double-click on the text object in the Objects panel to bring up the Text Tool Inspector in place of the current tool inspector. Use the Text Tool Inspector to change the stroke for the text to transparent and the fill to red using the color sliders under the Stroke and Fill tabs, respectively. Next, return to the Object panel and choose Options > Effects > Emboss and Bevel. In the Emboss and Bevel dialog box, double-click on the High Color color well to bring up the Color dialog box. Select a vibrant shade of yellow. Do the same for the Low Color color well, but select a brown shade (note: you can use the swatches located below the sliders for this). Finally, set the Intensity to a value around 500. The above operations are used to set the highlighting color, the shadow color and the intensity of the emboss and bevel effect, respectively. Press the Apply button and close the Color dialog box when you are finished with these changes.

Step 5 Animate your text to drop onto the canvas.	Detailed Instructions To produce the look of the text falling down into the banner and then oscillating until it reaches its final destination, you need to set the position of the text as you want it to appear at each oscillation point. Before you can do this though, the frames to hold the animation must be created. To create a 10 frame animation, change the Total frame count value in the Animation panel from 1 to 10 and press Enter. Now it is just a matter of setting those points in the animation where the text changes from moving upward to moving downward, and vice versa. To accomplish this, you will be iterating through the following steps using the information contained below: Select the specified frame in the Animation panel by clicking on the frame number Select the text in the View Using only the arrow keys on your keyboard, move the text to the indicated position Here are the frames and values to use while iterating through the above steps: In frame 5, center the text vertically in the banner, then move it down two additional pixels In frame 6, move the text up 4 pixels In frame 7, move the text down 3 pixels In frame 8, move the text up 1 pixel At this point, you can run your animation to see how everything looks so far. If you uncheck the Overscan box in the lower left hand corner of the document window, only those parts of your animation that fall on the canvas will be shown. You can toggle the visibility of the overscan area at any time by checking or unchecking the Overscan box.

Step 6 Create an abrupt transition.	Detailed Instructions In order to create the abrupt attention grabbing transition from the question to the answer, you need to stop displaying the the question text and background in one frame, and start displaying the response text and new background in the next. This process will be started during this step and completed over the next couple of steps. In order to stop displaying the text and orange background, e-Picture must have some indication that a change is about to take place. As with other animation transition points, this is done through key frames. In this case, you can simply set the keys () for every object in the animation since every object is impacted by the change. To do this, select frame 9, and in the View window, select Animation > Add Keys to Frame. Now any changes made to subsequent frames will start from frame 9. In order to stop displaying the question, simply turn off the visibility for that object. To do this, select frame 10 in the Animation panel and click on the eye icon () for the text in the Object panel.

Step 7 Change the color of an object.	Detailed Instructions Instead of erasing the orange background rectangle and replacing it with one of another color, it is easier just to change its color. To do this, first verify that frame 10 is still selected in the Animation panel. Next, double-click on the rectangle object in the Objects panel to bring up its inspector. In the Rectangle Tool Inspector, change the fill color to red. Because you inserted a key in frame 9, the change between frame 9 and 10 will be abrupt, as desired.

Step 8 Add the answer text.	Detailed Instructions The last step in creating this banner is to create the response text such that it appears in only in the 10th frame. To do this, first select frame 10. Now, to create the text, select the Text tool in the toolbox and set the font size in the Text tool inspector to 20 point and the text stroke to transparent and fill to black (see Step 4 for instructions on changing text attributes). Next, click on your canvas and type "Yes! When it comes to web images..." and press Enter. The Animation panel in e-Picture is tightly integrated with the other panels. If you create an object while any frame other than frame 1 is selected, the object you create will automatically be hidden in all preceeding frames. Press play in the animation panel to view your banner.

Step 9 Save and Export your animation and generate the accompanying HTML file.	Detailed Instructions Save your animation in e-Picture format to preserve all of the object, layer and animation information by selecting File > Save. Next, export your image as an animated GIF by choosing File > Export > GIF Animated. The resultant Animated GIF export dialog provides you with numerous options which allow you to export a file that meets your particular needs. Check the option for "Generate HTML" and press the Save As... button. You are prompted to enter a name and a directory for your GIF. By checking the Generate HTML check box, a .html file with the same name as your GIF file is also created in this location.