The Essential Guide to Flash CS4 friends of ED ADOBE LEARNING LIBRARY PHẦN 2 ppt

WELCOME TO FLASH CS4 21 1 5. Convert the flower to a Movie Clip by right-clicking on the graphic and selecting Movie Clip from the Convert to Symbol dialog box. Call it Flower, as shown in Figure 1-31. Figure 1-31. Select the flower then convert it to a movie clip. 6. Select a leaf color from the palette. 7. Using the Brush tool draw a very small leaf. This leaf will populate the branches of the Vine fill as shown in Figure 1-32. Figure 1-32. Select the leaf then convert it to a movie clip. THE ESSENTIAL GUIDE TO FLASH CS4 22 8. Select the whole leaf and convert it to a movie clip called Leaf, as we did previously with the Flower movie clip. 9. Select the Deco tool and locate the Properties Inspector. 10. With the Deco tool still selected, click the Edit button next to the Leaf field in the Properties Inspector, as shown in Figure 1-33. We will now repeat this for the Flower symbol. 11. With the Deco tool still selected, click the Edit button that is to the right of the Flower field in the Properties Inspector, also show in Figure 1-33. Figure 1-33. The Properties Inspector allows you to choose custom graphics for your fill. WELCOME TO FLASH CS4 23 1 12. In the Deco tool’s Properties Inspector, set the Branch Angle to 100 CW, Pattern Scale to 50%, and Segment Length to 5.00px, as shown in Figure 1-33. The color of the branch is controlled by the colored square adjacent to Branch Angle. 13. Fill the middle circle with the new Deco fill tool as shown in Figure 1-34. Figure 1-34. The customized Vine fill The Grid fill We are now going to use the customized flower and leaf symbols we created in the previ- ous exercise to generate the customized fill. 1. Starting from where you left off with the Vine fill, delete the Vine fill within the oval. 2. Select the Deco tool and change the drawing effect to Grid Fill. Make sure the Fill movie clip is set to Flower. Change Horizontal Spacing and Vertical Spacing to 3.00px. Also change the scale to 300% to match Figure 1-35. THE ESSENTIAL GUIDE TO FLASH CS4 24 Figure 1-35. The Grid fill settings 3. Using the Deco tool, fill the middle of the oval. You should see the oval populate with evenly spaced flowers, as shown in Figure 1-36. Figure 1-36. The Grid fill drawing effect WELCOME TO FLASH CS4 25 1 The Symmetry brush The Symmetry brush allows you to create kaleidoscope effects using the Deco tool and one or more symbols. 1. Starting from where you left off with the Grid fill, delete the Grid fill within the oval. 2. Select the Deco tool and change the drawing effect to Symmetry Brush. Make sure the module is set to Flower as shown in Figure 1-37. Figure 1-37. The Symmetry brush settings 3. Adjust the Symmetry brush’s arms on the center of the stage to bring the arms close together. The number of movie-clip duplications you need depends on the angle between the Symmetry brush’s arms. The smaller the angle and the closer the arms are to each other, the more movie clips will be duplicated to the stage. 4. Use your mouse to drag a pattern onto the stage. The further you drag your mouse, the larger the radius of the Symmetry brush, as shown in Figure 1-38. THE ESSENTIAL GUIDE TO FLASH CS4 26 Figure 1-38. The Symmetry brush in use Just how do all these great things benefit us? Not only is Flash CS4 designed to get you up and running as quickly and painlessly as pos- sible, it also contains templates designed to get you up and running in the marketing world. These enable you to create advertising banners that act as conduits between your potential clients and your website. Online advertising uses the Internet to promote your brand to consumers. Online advertis- ing can take many forms, but one of the most popular is banner advertising. Banner adver- tising allows you to bring your unique designs, animations, and audio to the mass market. You can see banner ads on almost any major site; simply visit sss*u]dkk*_ki or sss*ioj* _ki to see a selection. In the distant past, banner ads were capped at a 20KB file weight. Today this specification has doubled for most online publishers to 40KB for a standard banner ad, which enables you to include more graphics and animations than before. There are also nonstandard ads called rich media and polite download banners that enable you to create ads with a total WELCOME TO FLASH CS4 27 1 of 100MB to run video, sound, and larger animations. We will investigate how to set up rich media templates in Chapter 8, as they rely heavily on ActionScript to run. For now we’ll focus on the banner templates that come standard with Flash CS4. You can find out more about advertising standards and tracking the success of your online banner campaign in Chapter 11. Advertising templates in Flash CS4 Flash CS4 is equipped with standard banner templates that you can implement immedi- ately. In the next section, you’ll find out how to use the templates and you’ll implement some of the techniques you learned previously in this chapter to see how quickly you can create a marketing campaign in Flash CS4. Let’s waste no more time—check out the Flash CS4 advertising template. 1. Open Flash CS4. The Welcome screen will appear as shown in Figure 1-39. Figure 1-39. The Welcome screen in Flash CS4 2. Click on the Advertising link under the Create from Template section. THE ESSENTIAL GUIDE TO FLASH CS4 28 A screen will appear with a choice of 16 advertising templates that are commonly employed on large-scale websites. To learn more about Internet industry standards, see Chapter 11 of this book. 3. Select the 160600—Wide Skyscraper banner ad and click OK. On the stage you will see the Flash CS4 document appear in the size 160600, the size of the industry-standard wide skyscraper banner advertisement. We are going to place a small amount of animated text on it to create the advertisement. 4. Click on the Text tool to select it. On the stage, type the word Gene as shown in Figure 1-40. Because we are going to animate the text by having it fly in from off the banner, we need to convert it to a Movie Clip symbol type. 5. Right-click the Gene text and select Convert to Symbol from the menu that opens, as shown in Figure 1-41. Figure 1-41. Converting static text to a symbol 6. The Convert to Symbol dialog box will appear. Name the movie Gene. 7. Rename Layer 1 of the timeline where the Gene symbol is placed; name it Gene. 8. Click on the Selection tool and then the Gene movie clip on the stage to select it. Figure 1-40. Adding text to a wide skyscraper banner advertisement WELCOME TO FLASH CS4 29 1 Remember earlier in the chapter when we investigated motion presets? You’re now going to see how easily we can use them to create an informative advertising asset. 9. From the menu, select Window ¢ Motion Presets. You will see the Motion Presets panel open, as shown in Figure 1-42. Figure 1-42. The Motion Presets panel We’re going to have the first line of the text, Gene, fly in from the left hand side. 10. Scroll down the Motion Presets panel and select the fly-in-left option as shown in Figure 1-43. Figure 1-43. Selecting the fly-in-left option in the Motion Presets panel 11. Click Apply. You will see the timeline on the Gene layer is populated, and a path has appeared on the page, as shown in Figure 1-44. Figure 1-44. The motion preset path on the stage THE ESSENTIAL GUIDE TO FLASH CS4 30 12. Test your movie by selecting Control ¢ Test Movie. You will see that your movie begins with Gene in the middle of the 160x600 stage, then moving off it to the right. We don’t want this. We would like to have it move from the left of the banner into the middle of the banner. We’ll make this happen now. 13. Click on the Selection tool, then click on the motion path on the stage. 14. Using your arrow keys or your mouse, drag the path and the movie clip to the left side of the stage so that the path ends in the middle of the stage, as shown in Figure 1-45. Figure 1-45. Moving the path to end the animation on the banner 15. Test your movie again by selecting Control ¢ Test Movie. 16. Save your movie as -2,t2,,*bh]. You will see that the movie now animates with the Gene movie clip sliding from the left of the banner to the middle of the banner. It will loop rapidly, but we will fix that soon. The next exercise will allow us to add animation to finish off the advertisement. 1. Open the -2,t2,,*bh] document as completed in the previous exercise. 2. Create a new layer on the timeline by clicking the New Layer button . 3. Call the new layer With, as shown in Figure 1-46. Figure 1-46. Creating a new layer in the banner advertisement 4. Right-click frame 10 on the With layer of the timeline and select Insert Keyframe from the menu. 5. Select the Text tool, and in the same font as Gene, type with on the stage as shown in Figure 1-47. Figure 1-47. Adding more copy to the stage 6. Right-click the with text on the stage and choose Convert to Symbol. 7. Choose Movie Clip from the Convert to Symbol dialog box and call it With. [...]... Figure 2- 26, to open the movie in Flash Player 3 Select View Simulate Download in the window that plays your Flash movie, as shown in Figure 2- 27 4 To simulate different connection screens, select View Download Settings to change the value of the download settings (also shown in Figure 2- 27) 55 THE ESSENTIAL GUIDE TO FLASH CS4 Figure 2- 26 Testing your movie in Flash CS4 Figure 2- 27 Flash CS4 allows you to. .. able to create a backup GIF and send the banner to the client to display On clicking you will be taken to the Gene-with-Envy website This website contains many Flash CS4 applications that you will be building throughout the course of this book 33 THE ESSENTIAL GUIDE TO FLASH CS4 Who uses Flash CS4? No longer the realm of dedicated web designers alone, a number of professionals will find Flash CS4 helpful... Figure 2- 2 A SWOT analysis of the Gene with Envy business 41 THE ESSENTIAL GUIDE TO FLASH CS4 From the SWOT analysis shown in Figure 2- 2, we can begin to draw conclusions about what kinds of assets we need to build to capture our demographics needs From the Strengths section, we can see that the new product is receiving lots of media attention It would be beneficial to have a news section that displays the. .. hard to read Hard -to- read fonts kill communication and must be avoided at all costs Some common scripts include Caflisch, Edwardian, Mistral, Lucinda, Corsiva, Brush, and the dreaded, never -to- be-used-at-any-cost Comic Sans Examples of script typefaces are shown in Figure 2- 22 Figure 2- 22 Examples of script typefaces 53 THE ESSENTIAL GUIDE TO FLASH CS4 Computerized typography made it possible to re-create... Figure 2- 10), is a classic example of radial balance Note the way that the nymph is the central balance with the lines of the painting—for example, the arrows of the cherubs in the sky draw the eye to the central figure Figure 2- 10 The Triumph of Galatea is an example of radial balance Symmetrical balance is the most easily recognized and understood It’s achieved by evenly placing design elements upon the. .. information An example of this is Christ at the Sea of Galilee, the classical painting by Tintoretto, as shown in Figure 2- 8 Examine the structure of the painting Jesus is the central figure, yet he is not at the center of the painting The eye is drawn through tone, light, and lines to him standing at the left side of the painting Figure 2- 8 An example of an asymmetrical piece of art Radial balance... shape on the stage that covers the entire 160 600 banner as shown in Figure 1-51 4 Right-click the button and choose Convert to Symbol from the menu 5 Choose Button from the Type drop-down in the Convert to Symbol dialog box 6 Name your button Button 7 Click on the Properties Inspector and give your button the instance name of Figure 1-51 Creating a large button on the stage 32 Button 8 With Button layer... running 12 Create a new layer on the timeline 13 Call it Envy 14 Right-click on frame 20 of the timeline and select Insert Keyframe 15 Select the Text tool and type Envy onto the stage 16 Convert the Envy text on the stage to a movie clip called Envy 17 Open the Motion Presets panel and apply the fly-in-left preset to the Envy movie clip 18 As before, move the preset path to conclude in the middle of the. .. 1-49 The stage with all three animations on it 19 Test and save your movie We have one last step to complete the animation We are going to give the viewer of the banner advertisement a reason to want to click on it—by promoting a sale The next exercise is basically a repetition of the animation that we have applied to the words Gene with Envy previously 31 THE ESSENTIAL GUIDE TO FLASH CS4 1 Open in Flash. .. HOW TO MAKE YOUR IDEAS COME TO LIFE THROUGH PROJECT PLANNING 2 Figure 2- 4 Flash CS4 provides useful tools for creating the line element of design Figure 2- 5 Flash CS4 provides a useful Shape tool for creating the shape elements of a design Size This design element is the relative proportion of objects on the canvas to each other Practically, you can use differences in size to encourage viewer focus to . have applied to the words Gene with Envy previously. THE ESSENTIAL GUIDE TO FLASH CS4 32 1. Open -2, t2,,*bh] in Flash CS4, taking up where we left off with the previous exercise. 2. Add a. in Figure 1- 32. Figure 1- 32. Select the leaf then convert it to a movie clip. THE ESSENTIAL GUIDE TO FLASH CS4 22 8. Select the whole leaf and convert it to a movie clip called Leaf, as we. contains many Flash CS4 applications that you will be building throughout the course of this book. THE ESSENTIAL GUIDE TO FLASH CS4 34 Who uses Flash CS4? No longer the realm of dedicated web designers