Prepare to Add Shapes
Start by adding some vector graphics to this page layout. Click on the Shape 1 layer in the Layers palette so your next layer will be located above it. Click on the Shape tool slot in your toolbox A and choose the Custom Shape tool from the flyout menu B.
Set Custom Shape Tool Options
Do all of the following in the Custom Shape tool's Options bar:
Make sure the Shape Layers icon A is selected (so you'll draw a shape rather than a path or a selection). Click on the Link icon to set properties for a new shape layer B. Click in the Color field C to open the Color Picker and choose red (R:204, G:0, B:0). Click the arrow on the Shape field to open the Shape Picker D. Select a Custom Shape
If your Shape Picker is not showing all the default shapes, like the illustration, click the arrow on the side of the Shape Picker A and choose All from the side menu. Locate the dark phone shape (Phone 2) B, and click on it. That shape will appear in the Shape field on the Options bar.
Draw a Phone Shape
Click and drag a small phone shape to the right of the phone number in the image A.
There's now a new shape layer for the phone shape in the Layers palette. It has two thumbnails, one for the red color fill and another for the vector outline that defines this shape.
Draw More Shapes
Repeat Steps 3-5 to draw a green envelope to the right of the email address A and a blue wireframe globe to the right of the Web address B.
Then finish off the logo by drawing a large red snail shape above the red logo text C. (A shape can be drawn to any size because it's vector based.)
You'll find custom shapes for all these shapes in the Shape Picker D.
Add the Address
Type is another vector-based element in Photoshop and ImageReady. In this step you'll add an address to this page. Select the Horizontal Type tool in the toolbox. In the Options bar choose Arial, Regular, 14 pt, black A. Click in the image and type three lines of text, pressing Enter/Return between each line: 20 Snail Way, Sleepy Hollow, Slowville, TX 56457. Then click the big check mark on the Options bar to commit the type. Use the Move tool to drag the type into place to the right of the gray bar.
Add Decorative Text
Click in the image with the Horizontal Type tool and in the Options bar choose Impact, 67 pt, and gray (R:236, G: 236, B: 236) A. Type CONTACT INFO in uppercase letters. Then choose Edit>Transform>Rotate 90° CCW. Use the Move tool to position the text along the left edge of the page.
Jump to ImageReady
Now you'll move to ImageReady to create the animation. Click the Edit in ImageReady button at the bottom of Photoshop's toolbox to open this file in ImageReady.
Begin the Animation
First you'll make a block of text fly in from off screen when the page opens in a Web browser. Click the bottom right of the document window and drag to expand the window so you can see the gray area outside the document window. Open the Animation palette (Window>Animation), which displays Frame 1 automatically.
Change Timing and Looping
Now you'll change the timing on Frame 1. All subsequent frames will inherit this time delay. Click the Time Delay menu under Frame 1 and choose 0.1 seconds A.
You only want the animation to play once. So click the looping option and choose Once B.
Create Frame 2
Click the Duplicate Animation Frame button at the bottom of the Layers palette to create Frame 2. Frame 2 is currently a copy of Frame 1. You'll change that in the next step.
Change Position on Frame 2
Select the Move tool in the toolbox. Select the FlyIn layer in the Layers palette. With Frame 2 selected, hold the Shift key (to move ten pixels at a time) and click the left arrow on your keyboard to move the block of text to the left until it is just outside your document window. You won't see the text at this point.
Reverse Frames 1 and 2
Now you'll reverse the frames so the frame with the text off-screen becomes Frame 1. Just click the arrow on the right side of the Animation palette and choose Reverse Frames.
Tween Position
Next, you'll use tweening to add six frames in-between the two existing frames. ImageReady will gradually change the position of the text block across the additional frames. Select Frame 2 and click the Tween button at the bottom of the Animation palette A. In the Tween dialog box set the following options and click OK:
Play the Animation
Click the Play/Stop button in the Animation palette to watch the animation play. The text block should fly into position from off-screen.
. Add Frame 9
You now have eight frames. Click the Duplicate Animation Frame icon at the bottom of the Animation palette to add Frame 9.
Change Opacity on Frame 9
With Frame 9 selected, go to the Layers palette and open the Contact layer set. Select the first layer in that layer set. Notice that the Opacity field at the top of the Layers palette reads 0%, which tells you that the layer is now invisible. Change Opacity to 100% A so that the layer becomes fully visible in the image.
Repeat this on each of the six layers in the Contact layer set one by one. (But don't change the opacity of the entire layer set.) All of the contact information is now visible in the image B.
Tween Opacity on Frame 9
Now you'll use tweening to fade in the contact information. With Frame 9 selected, click the Tween button on the Animation palette A. In the Tween dialog box set the following options and click OK:
20. Preview in a Browser
Click the Preview in Browser icon in the toolbox to watch your animation play in your default browser. The text block flies in from the left, and then the contact information fades in. The temporary HTML code in the Browser window tells you that this file is currently a GIF with a file size of about 100K. In the next steps you'll turn it into a Flash movie that will be 1/5 of this file size!
Export as SWF
Choose File>Export>Macromedia® Flash© SWF. In the Macromedia® Flash© (SWF) Export dialog box, choose the following settings and click OK:
Make sure that Preserve Appearance is unchecked A. Leaving this setting off ensures that your graphics will remain vector-based for fast download. Check Generate HTML B. This tells ImageReady to create an HTML file with code to display your SWF in a Web browser. Leave the other options at their defaults, as shown here. They are not relevant because you are not including bitmap images in your SWF. Save.
In the Export As Macromedia© SWF dialog box choose a location for your files and click Save. ImageReady makes a SWF file and an HTML file to display it. You could bring the files into a site-building program for inclusion in a full site, post them on the page as a single page, or bring the SWF into Flash for inclusion in work you're doing there.
Choose File>Save to resave the original PSD file with the graphics you added to it. The SWF is not editable so it's important to save the editable source file.
|