Solution: Creating Dynamic Flash Web Banners

In this advanced project you'll automatically create variations on a Flash Web banner using data sets and dynamic text variables. You can use the resulting Web banners to spice up individual pages in a Web site.

Create a Fly-In Animation

Get started by making a simple tweened animation in ImageReady. We'll walk you through the process, but if you have any questions about animations review previous tutorial, Animation. Choose Window>Animation to open the Animation palette. Click the Duplicate Animation Frame icon at the bottom of the Animation palette A to create Frame 2. In the Layers palette, select the text here layer B. Select the Move tool in the toolbox, and press the right arrow key on your keyboard several times to move the text to the right until it is outside the document window and no longer visible in the image C.

With Frame 2 selected, click the Tween icon at the bottom of the Animation palette D. In the Tween dialog box E, choose Tween With: Previous Frame, and Frames to Add: 3. Leave all three Parameters checked and click OK. Click the side arrow on the Animation palette F and choose Reverse Frames.

Add a Fade-In Animation

Select Frame 5 in the Animation palette. In the Layers palette, select the GAME HERE layer and click in the Visibility field to the left of the GAME HERE layer to add an Eye icon A, making the words GAME HERE visible in the image. Change the Opacity field at the top of the Layers palette to 0% B. Click the Duplicate Animation Frame icon at the bottom of the Animation palette C to create Frame 6. With Frame 6 selected, change the Opacity field in the Layers palette back to 100%. Then click the Tween icon D. Leave the options in the Tween dialog box as you set them in the previous step and click OK. You now have nine frames in the animation.

Click the Play button at the bottom of the Animation palette E to see the words text here fly in from the right, followed by the words GAME HERE fading into view. Select Frame 9 in the Animation palette so all of the elements are visible in the document window.

Define Text Variables

Now things get really interesting. You'll define two variables, one for each of the text layers. Choose Image>Variables>Define. In the Variables dialog box, choose text here from the Layer menu A to define the source of the first variable. Check Text Replacement to establish that this is a text variable B. Type page name as the name of this variable, being careful not to include spaces or unusual characters in the variable name C. Don't click OK yet.

To define the second variable, choose GAME HERE from the Layer menu D in the Variables dialog box, check Text Replacement E, and type game_name as the name of this variable F.

Create the Home Banner Data Set

In the next two steps you'll create a set of data that will be used to replace the words text here and GAME HERE on one of the Web banners you're creating—a banner for a home page.

First you'll create the data for the page_name variable (the data that will replace the words text here on the home Web banner). Choose Data Sets from the menu at the top of the Variables dialog box A. Set the fields in the Data Sets panel of the Variables dialog box as follows:

Type Home Data Set in the Data Set field B. This names the set of data that will be used for the home Web banner. This data set will have two variables—the page_name variable and the game_name variable.
Choose page_name from the Name menu C. This is the name of the variable you're working on. You'll see this variable highlighted in the variables list at the bottom of the dialog box D.
In the Value field, type home E. This is the text that will appear in place of the words text here on the home Web banner.

TIP

Understanding What You've Done. This is pretty advanced stuff, but if you understand what you've done so far, making the rest of the data sets will be easy. You may want to reread Steps 3 through 5 to make sure you understand how you made the variables and the home data set before moving on to Step 6.

Add to the Home Banner Data Set

Now you'll create the data for the game_name variable (the data that will replace the words GAME HERE on the home Web banner). Choose game_name from the Name menu A. You'll see this variable highlighted in the variables list at the bottom of the dialog box B. In the Value field type SLAM—the name of a fictitious game C. This is the text that will appear in place of the words GAME HERE on your home Web banner. Leave this dialog box open for the next steps.

Create the Links Banner Data Set

Now you'll make another data set that will replace the page_name and game_name variables on another Web banner—a banner for a links page. In the Variables dialog box, make a new data set by clicking the New Data Set icon A. Then set the rest of the fields as follows to create data for the page_name variable in this data set:

Type Links Data Set in the Data Set field to name this new data set B.
Choose page_name from the Name menu C.
Type links in the Value field. This is the text that will appear in place of the words text here on the links Web banner D.

Now choose game_name from the Name menu E to create data for the second variable in this data set. In the Value field type KINGPIN—the name of another game F. This is the text that will appear in place of the words GAME HERE on your links Web banner.

Create the Games Data Set

Now make a third data set for another Web banner, this one for a games page. There's nothing new here, so relax. Make a new data set by clicking the New Data Set icon in the Variables dialog box A. Set the rest of the fields as follows to create data for the page_name variable in this data set:

Type Games Data Set in the Data Set field B.
Choose page_name from the Name menu C.
Type games in the Value field D.
Now choose game_name from the Name menu E.
And in the Value field type B-BALL, the name of another game F.

Create the About Us Data Set

Now you'll make the last data set, this one for a Web banner to use on an about us page. This step is just like the last two steps. Are you starting to get the picture?

Make a new data set by clicking the New Data Set icon in the Variables dialog box A. Set the rest of the fields as follows to create data for the page_name variable in this data set:

Type About Us Data Set in the Data Set field B.
Choose page_name from the Name menu C.
Type about us in the Value field D.
Now choose game_name from the Name menu E.
And in the Value field type WARRIOR, the name of another game F.

Preview the Web Banners

Click the forward arrow in the Variables dialog box A to cycle through the data sets you created. Leave Preview checked B to see a live preview of each of the data sets. If you notice any errors, correct them by editing the fields in the Variables dialog box. When you're satisfied, click OK. Choose File>Save to save the PSD file with its data sets.

Export the Banners as a Flash File

Each of the four data sets you've made will generate a separate Web banner. You can export them all together as a Flash movie (SWF format). This allows you to check that all the banners export correctly and gives you a quick reference file. Choose File>Export>Macro-media®Flash© SWF. This opens the Macromedia Flash (SWF) Export dialog box, where you'll set export options in the next step.

CAUTION

Truncated Text. Occasionally, the text in a dynamic text file will look truncated in the exported file. Use the Flash movie you exported in this step to check for truncated text. If some text is cut off, go back to your original PSD file and try substituting a different font. Make sure the original text layer (text here, GAMES HERE) is longer than the text in each of your data sets.

11.

Set SWF Export Options

In the Macromedia Flash (SWF) Export dialog box, set the following options:

Check Preserve Appearance A. This ensures that the text retains its appearance.
Check Generate HTML B. This creates an HTML file to display the SWF in a Web browser.
Check Enable Dynamic Text C. This is necessary to make your dynamic text variables work.
Choose Full Set from the Embed Fonts menu D. This embeds a full set of fonts in your Flash movie.
Under Bitmap Options, leave Format set to Auto Select, and set JPEG Quality to 50 E. This controls how the logo and background are optimized.

Click OK to open the Export as Macromedia© SWF dialog box F. Create a new output folder, and click OK. Open the resulting HTML file in a Web browser to view all four of your Web banners in a Flash movie G.

12.

Export Individual Flash Banners

You can also export the Web banners generated by your data sets as individual Flash movies so that you can add each of them to a different page in a Web site. Choose File>Export>Data Sets as Files. Click Choose to choose an output folder A. Leave Data Set set to All Data Sets B. Choose Macromedia®Flash© (.swf) from the Save As menu C. Leave the SWF settings as they were in the last step. Otherwise you'd click Set D to open the SWF Export dialog box. Click OK. You'll find four SWF files on your hard drive, each one a separate Web banner ready to be added to individual pages in a site-building program.

In this tutorial:

Solution

Wednesday, September 1, 2010

Creating Dynamic Flash Web Banners

TIP

CAUTION

1 comment:

Blog Archive