Revealing Text Using a Starburst Effect

In this example, you will learn how to:

Step 1
Create a new web banner (468x60) document with a black 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 Custom from the Background choices. Double-click on the Custom color well to bring up the color picker and choose a black background (RGB values of 0,0,0). Then press the New button. This will create a web banner sized canvas with a black background for you.

 

Step 2
Add white text to your banner.

Detailed Instructions
Select the Text tool () from the toolbox and change the stroke to transparent and the fill to white. To change the stroke to transparent, select the Stroke tab in the Text tool inspector and click on the transparent button (). To change the fill to white, click on the solid color button (), select the Fill tab in the inspector and set the RGB sliders to 255 with an Alpha value of 255 (complete opacity). Next, click in your banner and type "e-Picture" and press Enter. Your text will appear in white against the black canvas background as soon as you press Enter.

 

Step 3
Resize and center the text on the banner.

Detailed Instructions
Select the Pointer tool () and use it to resize the banner text by dragging any of the resize handles. Once you have adjusted the text size to cover most of the banner, center the text on the banner by dragging anywhere on the inside of the text object.

Step 4
Add a rectangle in the overscan area above the canvas.

Detailed Instructions
Select the Rectangle tool () and draw a box slightly larger than the canvas just above the canvas in the overscan area. The stroke and the fill for this box will be modified in the next step, so you do not need to modify the current colors now. This box will be used in conjunction with a starburst effect to provide the illusion that the starburst is exposing the text as it moves.

Step 5
Add a custom gradient fill to the rectangle.

Detailed Instructions

In order to create the first part of the starburst illusion, double-click on the rectangle object in the Objects panel to display the Rectangle Object Inspector. In the Rectangle Object Inspector, set the stroke to transparent and the fill to gradient (). This will give the rectangle a gradient fill that goes from black to white.

Next, expand the Gradient Composer. Using the Gradient Composer, you can change the colors and properties of any gradient to meet your particular needs. In this case, you need a gradient that starts out transparent but quickly turns to an opaque black. To first step towards achieving this look is to set the beginning and ending colors. To set the beginning color to transparent, double-click on the first color well just below the gradient bar to open the Color picker dialog. In the Color picker, set the Alpha value to 0 (don't change the RGB values). Next, set the ending color to black. To do this, double-click on the last color well in the Gradient Composer. Then, in the Color picker, set the RGB values to (0,0,0) and leave the Alpha value at 255. Thus far, you have created an all black gradient that evenly goes from transparent to opaque.

In order to finish the first part of the illusion, you need to split the gradient into two segments. In the first segment, the transparency will very quickly become opaque, and in the second segment, the gradient will be a constant opaque black. To do this, right-click on the gradient bar in the Rectangle Tool Inspector, and in the popup menu, choose Operation > Split Here. Next, double-click on the new color well and change its color to black and transparency to 255 in the Color picker. Finally, move the middle color well over so that there is slightly less than the width of one color well between the left and middle color wells.

If you look at your rectangle in the document view, you will see that the gradient moves very quickly from transparent to opaque and then remains that way for the rest of the rectangle.

 
 
 

Step 6
Add the starburst image to your banner.

Detailed Instructions
The second part of the starburst illusion is done using a separate file. In the starburst folder is a small TARGA file called star.tga. Drag and drop this file into your working document to import it into e-Picture. In order to achieve the desired effect of the star revealing the letters, the Composite method for the star must be changed to Screen. To do this, select the star object in the Objects panel and choose Options > Composite Method > Screen. The effect of this composite method is to allow the other objects in the banner to show through the star image.

Step 7
Set the initial positions of the starburst and the rectangle.

Detailed Instructions
The last step before beginning the animation process is to set the initial position and size of the starburst as well as the starting position of the gradient rectangle.

Using the Pointer tool, resize the starburst so that the visible portion is approximately the size of the dot on the letter "i" in the banner text. Then, set the position of the starburst just to the left of the text.

Next, drag the rectangle down over the banner text so that all of the text is obscured by the opaque portion of the gradient. Ideally, the rectangle is positioned so that the transition point from transparency to opacity cuts right through the center of the starburst. Note however that the starburst itself will not be obscured by the gradient rectangle.

 

Step 8
Animate the start through the first few frames.

Detailed Instructions
The first effect in this animation is to make the star appear out of nowhere and grow to its full size, all before moving it across the banner.

The first step towards achieving this is to create additional frames to hold the animation. In the Animation panel, change the Maximum value from 1 to 20 and press Enter. This creates an additional 19 frames to hold the animation.

Next, in the first frame, set the visibility of the star to off. To do this, click on the first frame in the Animation panel, then, in the Objects panel, click on the eye icon () for the star object to make it invisible.

In the second frame, set the visibility of the star to on. To do this, click on the second frame in the Animation panel, then, in the Objects panel, click in the first column for the star object to make the object visible again.

 

Step 9
Animate the main body of frames to reveal the text.

Detailed Instructions
The starburst and the rectangle are moved together to create the illusion that the starburst is revealing the text. This process is begun in frame 4 and completed in frame 17.

Select frame 4 in the Animation panel. Then, using the Pointer tool, move the rectangle to the right so that the very left hand edge of the first character in the text is revealed. Next, enlarge and reposition the starburst so that it is centered on the left hand edge of the first character in the text.

Select frame 17 in the Animation panel. Now, click on the rectangle with the Pointer tool and use your keyboard move the rectangle to the right until the very right hand edge of the last letter in the text is obscured by the opaque portion of the rectangle. Pressing the Shift key in combination with the arrow keys allows you to move an object over large increments. Next, click on the starburst with the Pointer tool and use your keyboard to move the starburst until the center of the starburst is over the right hand side of the last letter in the text. e-Picture will calculate all of the starburst and rectangle positions for frames 5 through 16 to create a smooth animation.

Lastly, in the next step the size of the starburst will be changing. In order to keep the size of the starburst the same through frame 17, you need to add a key () to this frame before proceeding. To do this, make sure that frame 17 is selected and choose Animation > Add Keys to Frame in the View window.

 

Step 10
Finish animating the banner.

Detailed Instructions
Once the text has been revealed, all that is left to do is create a smooth finish to the animation. This is accomplished shrinking the starburst down to nothing and moving the rectangle completely outside the banner.

Select frame 19 in the Animation panel. Using the Pointer tool, select the rectangle and move it far enough to the right so that the text is completely visible. Next, use the Pointer to reduce the size of the starburst to about the size of the dot on the "i" in the text and move it to the right past the text.

Select frame 20 in the Animation panel. In the Objects panel, select the starburst object and click on its eye icon to make it invisible.

Run your animation and see how it looks! Depending on your hardware, it may appear to run very quickly. This can be remedied at export time. Also, if you decide that the animation is not quite perfect, you can always make corrections later. With e-Picture objects are always editable.

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 set the "Override Document Speed" field to 15 hundredths of a second. 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.