# Creating a Standard Web Banner with Changing Animation and Attention Grabbing Frame Transitions

In this example, you will learn how to:

- Use strokes and fills
- Add and rearrange layers
- Add bevel and emboss effects to text
- Animate through translation and visibility
- Create abrupt color changes between 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 New 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 Create a new layer. | Detailed Instructions In order to create the effect of the response text dropping in from above, you will need an additional layer. To create a new layer, press the Options button in the Layers panel and choose New. Your new layer, Layer 2, by default sits on top of the existing layer, Layer 1. Since you will be working in Layer 2 for the next couple of steps, make sure that Layer 2 is selected (highlighted) in the Layers panel.
Step 4 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 5 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 6 Animate your text to drop onto the canvas. | Detailed Instructions For a functional overview of the Animation panel, see the Animation Panel entry in the Glossary. 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.
Step 7 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 and layer in the animation since every object and layer 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 8 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, select the layer containing the background, Layer 1, in the Layers panel and 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 9 Add and reorder layers. | Detailed Instructions In order to complete the banner with the response text, you will need one additional layer. To create a new layer, press the Options button in the Layers panel and choose New. Your new layer, Layer 3 will be created on top of the currently selected layer. The layer order can be rearranged by dragging a layer up or down using the mouse. Be sure that Layer 3 is the active layer before adding the response text.
Step 10 Add the answer text to the third layer. | 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 frame that is selected when you first create an object is the frame in which that object will first appear. Press play in the animation panel to view your banner.
Step 11 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.