In this example, you will learn how to use:
Step 1
|
Detailed Instructions
Your blank canvas is indicated by a gray and white checkboard pattern (the checkerboard pattern indicates transparency). Increase the width of your new banner window so that there is at least an inch (2.5cm) on each side if the canvas area. This "overscan" area will be used to create the effect of an object sweeping onto the canvas from outside the canvas area. |
![]() ![]() |
|
Step 2
|
Detailed Instructions
|
![]() ![]() |
|
Step 3
|
Detailed Instructions
Now, hold down the shift key and draw a circle in the overscan area to the left of your banner with a diameter approximately equal to the canvas height. This circle will be animated later to create a spotlight effect against the black background. |
![]() ![]() |
|
Step 4
|
Detailed Instructions
|
![]() |
|
Step 5
|
Detailed Instructions
|
![]() |
|
Step 6
|
Detailed Instructions
Now that your text is revealed, use the Pointer tool ( Next, make the rectangle visible again by clicking in the first column of the Object panel next to the Rectangle object. Both the rectangle and text are now visible again. In order to create a cut-out effect that will allow the text to be illuminated from behind by the animated spotlight, you need to use the text as a mask. To do this, select the text object in the Objects panel and choose Options > Composite Method > Erase. The Erase mask allows you to use any object to erase all underlying objects in a particular layer. |
![]() ![]() |
|
Step 7
|
Detailed Instructions
Before animating your spotlight, you need to make it visible and active again. To do this, click on the eye icon in the Layers panel for Layer 1 to make the spotlight visible, then click on Layer 1 to make it the active layer. Now, you can animate your spotlight by using the Animation panel. By default, you start with only one frame (a static image), so first you need to change the Total frame count. Ten (10) is a reasonable starting point. When you press Enter, an additional 9 frames are created for you. Next, select the 10th frame in the Animation panel. The blue frame indicator will highlight frame 10 to indicate that is now the current frame. Now, using the Pointer tool, select your spotlight and drag it horizontally until it is just past the right hand edge of the canvas.
The Animation panel controls the time attribute for objects and layers. In effect, you have just programmed your spotlight to move from an initial position to the left of your canvas in frame one to a final position to the right of your canvas in frame 10. e-Picture will produce as smooth a movement possible in the interveneing frames. Press Play ( |
![]() ![]() |
|
Step 8
|
Detailed Instructions
In order to use your animation on the web, you need to export it as an animated GIF. To do this, choose 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 options for "Generate HTML" and "Loop" 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. |
![]() |
The banner you created is nice, but you could make it even better by applying many of the same steps as above to give it a more finished look. One idea for a more finished look is to have the text fade in after the spotlight has passed. Here are the steps to make this happen...the implementation is left to you!
The e-Picture version of spotlight is included in the spotlight example folder for your convenience.