Section 7.2. Templates


7.2. Templates

While symbols let you reuse images and series of frames , templates let you reuse entire Flash documents.

Templates are useful when you find yourself cranking out animations that look and behave similarly. For example, say you create marketing animations for display on your corporate Web site. You may find that your animations share a lot of the same elements: your company's logo somewhere on the background, a copyright notice, the same sound clips of your CEO speaking, the same color palette, the same size Stage, and the same intro and credit scenes.

Using a template, you can create all these basic elements just once. Then, the next time you're tapped to do a marketing spot, you can load the template and just add the new content you need. You've not only saved yourself a lot of time, but you've also ensured consistency among your animations (highly important in certain corporate circles).

In this section, you see how to create and use your own templates. You also see how to take advantage of Flash's prebuilt templates.

7.2.1. Using a Prebuilt Template

Flash comes with a bunch of templates all ready for you to customize. While they're obviously not specific to your particular company or project, they can save you time on a lot of basic animations, including banner ads, slideshows, and presentations. Here's a quick rundown of the templates you find in Flash (Figure 7-23):

  • Advertising . Pop-up, skyscraper (skinny vertical), banner (skinny horizontal), and full-page ads.

  • Form applications . Data input forms that you need to hook up to a server on the back end.

  • Global phones . Stages targeted for certain (Symbian) phones.

  • Japanese phones . Stages targeted for Japanese phones.

  • PDAs . Stages targeted for Nokia, Motorola, Sony, and other personal digital assistants (handhelds).

  • Photo Slideshows . For Flash animations showing drawings or bitmaps overlaid with Forward and Back controls.

  • Presentations . Automatic ( noninteractive ) slideshows, similar to PowerPoint presentations.

  • Quiz . Simplified data input forms that let your audience page through multiple screens and answer yes/no questions.

  • Slide Presentations . Similar to Photo Slideshows, but with nontraditional buttons and decorative graphics.


Note: Flash's templates are useful if you can figure out what they're supposed to do and how to customize them. To see what few hints the Help system offers, select Help Flash Help, and then, in the window that appears, type using templates and click Search. A better option: Check out one of the Flash developer support sites listed in the Appendix.

To use one of the prebuilt templates that come with Flash:

  1. Select File New .

    The New Document window appears.

  2. In the New Document window, click the Templates tab .

    The New from Template window in Figure 7-23 appears.

    Figure 7-23. Flash offers a ton of templates you can use to jump-start the animation process. They don't come with descriptions or instructions, but hints are included in each template file itself. In this section, you see how to customize the Photo Slideshow template to create a spiffy slideshow in just a couple of minutes.
  3. In the Category box, click to select Photo Slideshows .

    Modern Photo Slideshow appears selected in the Templates box. You see a thumbnail of the first keyframe in the preview window and, below the preview window, a short description of this template.

  4. Click OK .

    Flash opens the Modern Photo Slideshow (Figure 7-24).

    Figure 7-24. Clicking the bottom of the Timeline and dragging downward expands the Timeline so you can see all the layers . Other than a few vague hints in the Flash Help, these layer names are your only clues for understanding what you need to do to customize this template.
  5. Select Control Test Movie to preview the template. Its always a good idea to preview a template before you begin to customize it .

    A test window similar to the one in Figure 7-25 appears.

    Figure 7-25. Notice the title (My Photo Album), the screen number (1 of 4), the photo itself (an ocean cliff), and the caption ("The elegant seashore"). You can customize all these items while keeping the nifty controller that lets you scroll forward and back through the photos.
  6. In the test window, select File Close .

    The test file closes , and Flash returns you to the template workspace.

    Next, change the title of the slideshow.

  7. Change the title of the slideshow. To do so :

  8. On the Timeline, click to select the first keyframe in the Title, Date layer .

    On the Stage, you see a selection box around the text "My Photo Album" (Figure 7-26).

  9. Click the text box, and then replace "My Photo Album" by typing Custom Slideshow .

    Next, replace the photos that appear in the slideshow.

  10. Click the first keyframe in the layer named "picture layer". On the Stage, click the photo to select it and then choose Edit Cut .

    The photo disappears.

  11. Click the Oval tool; then click the Stage and drag your cursor to create a red circle .

    This example shows a circle for simplicity's sake in demonstrating the Modern Photo Slideshow template, but after reading Chapter 8 you may prefer to add a scanned-in photo of your own to the Stage (Section 8.1).

    Figure 7-26. This template was set up to make customization easy: Its creators placed every element you can editfrom the slideshow title to the caption for each pictureon its own separate, appropriately named layer.
  12. Repeat the previous step for the second and third keyframes of the picture layer .

    Insert a square and a star, respectively. There's one more keyframe, which you're going to remove.

  13. Click the fourth keyframe of the picture layer. On the Stage, right-click the photo and then, from the pop-up menu that appears, select Cut .

    Flash removes the solid black dot that indicates a filled keyframe and replaces it with a hollow dot that indicates an empty keyframe.

    Next, change the captions for your three new images.

  14. Click the first keyframe in the layer named Captions .

    On the Stage, a selection box appears around the text "The elegant seashore". (You may need to scroll down the Stage to see the text.)

  15. Click the text box and then replace "The elegant seashore" by typing Circle .

    Repeat Steps 10 and 11 for the second and third keyframes of the Captions layer, replacing the existing captions with Square and Star , respectively.

  16. On the Timeline, click to select the fourth frame in the "_actions layer". Then Shift-click in the fourth frame of the "picture layer" .

    Flash highlights the fourth frame of all seven layers, as shown in Figure 7-27.

  17. Right-click the selected frames and then, from the pop-up menu that appears, select Remove Frames .

    Flash deletes the fourth frame of every layer.

  18. Test your customized template by selecting Control Test Movie .

    You should see something similar to Figure 7-28.

Figure 7-27. This template displays the slide number (1 of 4, 2 of 4, 3 of 4, and so on) based on how many frames the Timeline contains. So because in this example you're only replacing content for three of the frames, you want to remove the fourth frame of each layer so that the template (technically, the template's ActionScript code) can calculate and display the correct number of frames.

Figure 7-28. Note the changes you made: the title (now Custom Slideshow), the number of pages (now 1 of 3), the content of the frame itself (a basic circle), and the caption (Circle). When you click the Next button, you step through your remaining frames containing the square and the star. You've got a professional-looking, fully functional, completely customized slideshowall for just a few minutes' effort. That is the power of templates.

7.2.2. Creating and Using Your Own Custom Template

You create a custom template the same way you create a regular Flash document with one exception, as you see in the steps below.

To create a custom template:

  1. Create a new Flash document. Add to it the images, frames, and layers you want your template to have .

    Because you know you (or your colleagues) will be reusing this template, you need to think about reuse as you're deciding which graphic elements and effects to add. The box on Section 7.2.2 gives you some ideas.

    DESIGN TIME
    Building a Better Template

    Sometimes, you'll find yourself creating a template almost by accident . For example, imagine that you're hard at work on one animation when your boss comes in, peeks over your shoulder, and tells you to create another one "just like that one" for another client. Choose File Save As Template, continue with the instructions you find on Section 7.2.2, and youre on your way.

    But if you know beforehand that you're creating a template, you can plan for reuse. And planning always results in a more useful template. Here are a few planning tips for creating a template you'll use over and over again:

    • Include only reusable stuff . If you save a working animation as a template (complete with company-specific elements), you'll need to delete any unusable elements each time you reuse the template. Consider up front which elements apply across the board, and include only those in your template.

    • Name your layers . Giving your layers meaningful names that describe what each layer contains (such as actions, sounds, background, buttons, and so on) is always a good idea. But it's even more important when you're creating a template, because it gives you (or your colleague, or whoever's reusing the template two weeks from now) an easy way to find and change the elements that need to be changed.

    • Document, document, document . Have pity on the person who tries to reuse your template a month from now, and tell him up front what the template's for (a product demonstration combined with an order form, for example) and what needs to be changed (the company logo, demo movie clip, and three form fields). The quickie description you type when you create your template (below) is rarely enough. Instead, attach a script to the first frame and use ActionScript comments to document the template. Orbetter yetadd documentation text to the first frame, where the person reusing your template can't miss it (but can easily delete it before putting the template into action).


  2. Save your template. To do so, choose File Save As Template .

    The Save As Template window in Figure 7-29 appears, complete with a thumbnail preview of the first keyframe of your template.

  3. In the Name field, type a short, descriptive name for your template. Then, from the Category pop-up menu, choose a category .

    The categories listed are the same categories you see when you use one of Flash's built-in templates: Advertising, Form Applications, Global Phones, Japanese Phones, PDAs, Photo Slideshows, Presentations, Quiz, and Slide Presentations. If none of these categories seems appropriate for your template, you can type your own category into the Category box.

  4. In the Description box, type a complete, concise description of your template and then click Save .

    Flash saves your document as a template.

You use a custom template the same way you use one of Flash's prebuilt templates. To use ( open ) a custom template:

  1. Select File New .

    The New Document window appears.

    Figure 7-29. Choosing File Save As Template displays the window you see here, which lets you type a name (not a file name, but an actual human-readable name), a category (to let you group your templates), and a description (to help remind you which features you added to this template and which situations its most appropriate for). Be sure to add as complete a description as you can in the 255 characters Flash gives you. The few minutes you spend now will pay off in the future, when you don't have to keep opening the template over and over again just to remind yourself what it does.
  2. In the New Document window, click the Templates tab .

    Your custom template appears in the "New from Template" window listed in the category you selected for it in step 5 above. Figure 7-30 shows you an example.

Figure 7-30. The next time you go to open a template, you see your template listed in the category you selected for it, complete with a preview and the description you typed in when you saved it. Click OK to create a document from this template just as though it were one of Flash's prebuilt templates.




Flash 8
Flash Fox and Bono Bear (Chimps) (Chimps Series)
ISBN: 1901737438
EAN: 2147483647
Year: 2006
Pages: 126
Authors: Tessa Moore

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net