The Essential Guide to Flash CS4 friends of ED ADOBE LEARNING LIBRARY PHẦN 9 - Pdf 21


CHAPTER 11
UTILIZING BEST PRACTICES
TO GET THE MOST OUT OF YOUR
FLASH CS4 MOVIES
THE ESSENTIAL GUIDE TO FLASH CS4
324
When Stan Lee, one of the founding fathers of the superhero comics that have kept gen-
erations in thrall, wrote the immortal words, “With great power there must also come
great responsibility,” he was referring to the power of fictional individuals such as Superman
and Spider-Man. However, the idea is important to keep in mind as you are designing your
Flash CS4 masterpieces. By ensuring that your Flash CS4 web animations are accessible to
a wide range of people, you are helping them to succeed.
During the course of this book you have learned how to build amazing Flash CS4 anima-
tions and applications. You have learned how to make the characters in your animations
move along prescribed guidelines and move in carousels, you’ve given them the power of
sound, and you’ve used them in movies. With all you’ve learned, you now have absolute
power with Flash. This chapter is designed to teach you how to wield that power wisely.
Part of that is following the guidelines of the World Wide Web Consortium (W3C), an
internationally recognized body dedicated to enforcing and creating standards for the
World Wide Web, You’ll need to adhere to those standards to get the best possible result
from the hard work you put into your Flash CS4 gems.
When the W3C was established in 1994, the Web was a blossoming technology without
protocols or standards to guide developers and designers. The W3C’s guidelines and best
practices helped standardize user experience across the Web while allowing new technolo-
gies to be used to their full potential. Over time, these standards have evolved to include
new developments. Although more than 90 percent of active Internet users in the US have
broadband Internet (according to sss*sa^oepaklpeiev]pekj*_ki), we still need to cater to
the lowest common denominator—that is, the people with dial-up Internet speeds. After
all, from a commercial perspective, their dollar is worth the same as a dollar from a cus-
tomer with faster Internet speed. And at the end of the day, for Flash designers and devel-

and Window-Eyes from GW Micro). Creating Flash documents that are accessible, and sup-
port the user of assistive technologies ensures that your Flash applications can be seen by
a wider audience. This coupled with Flash CS4’s ability to create completely accessible
rich-media applications enables you to develop Flash applications that are accessible to
the vast majority of users. In the next section you will learn how to utilize accessibility
options in Flash CS4.
Currently, accessibility guidelines fall into four categories:
Auditory disabilities: People who have disabled hearing may need subtitling software.
Cognitive disabilities: People with learning disabilities and disabilities related to prob-
lem-solving and logic skills. These people may find the Web a better experience using
assistive technology such as voice recognition and word-prediction software.
Motor disabilities: People who have difficulty using the hands due to tremors, or loss
of muscle control may use special touch screens.
Visual impairment: People with color-blindness or limited vision. These people may
use screen readers, screen magnification, and audio assistants.
To make your site completely accessible, you need to ensure that people with these dis-
abilities can use assistive technologies to view your Flash CS4 application.
Accessibility is more and more a prime consideration when developing Flash CS4 applica-
tions. This doesn’t mean that you have to develop two stand-alone applications to ensure
complete access; it means only that you have to plan your project wisely.
Ensuring your banners comply with publishers’
standards
By now we are very much used to publishing files in Flash CS4. At the time of writing this
book, the industry standard for Flash banner advertisements is mostly Flash 8 or Flash 9,
with ActionScript 2.0 only. In the future it will be Flash 9 with ActionScript 3.0, and then
THE ESSENTIAL GUIDE TO FLASH CS4
326
Flash 10. The current standard is because of the lowest-common-denominator rule men-
tioned in this chapter’s introduction. Many publishers—companies such as MSN and
Yahoo!—simply have not had the resources available to assist and debug files with

4. Click on the Edit button that corresponds to the Profile: Default field. The Publish
Settings
dialog box will appear as shown in Figure 11-2.
Figure 11-2. The Publish Settings dialog box allows you to specify the
Flash Player version in which to publish.
5. Select Flash Player 9 from the Player drop-down list.
6. Select ActionScript 2.0 from the Script drop-down list.
7. Click OK to close the Publish Settings dialog box.
8. Save your FLA file.
9. Select Export ¢ Export Movie, as shown in Figure 11-3.
THE ESSENTIAL GUIDE TO FLASH CS4
328
Figure 11-3. Exporting a movie in Flash CS4
Your banner ad is now ready to submit to publishers for display on their sites—but they
will not accept your SWF file alone. Remember the lowest-common-denominator rule? It
applies here, only this time you need to ensure that people who do not run Flash Player
can see your ad. The next section will show you how to create a static backup GIF from
Flash CS4.
Creating your backup GIF
Backup GIFs are served as alternatives to Flash files for people who cannot view Flash
documents. This ensures that the largest group of people possible can see your ads.
Flash CS4 includes a handy option to export a backup GIF at the same time as you publish
your file. We’ll investigate this now.
1. Open the previous exercise.
2. Select File ¢ Publish Settings.
The
Publish Settings dialog box will appear. By default it displays the Flash publishing settings.
UTILIZING BEST PRACTICES TO GET THE MOST OUT OF YOUR FLASH CS4 MOVIES
329
11

downloaded. You must never interlace an animated GIF.
Smooth applies anti-aliasing to
produce a higher-quality image but may result in a halo of gray pixels around images.
Dither Solids allows dithering to gradients along with solid colors, and Remove Gradients
renders gradients in your Flash animation as solid colors in your GIF.
The
Transparent drop-down list allows you specify the transparency of the Flash file’s back-
ground when it’s converted to a GIF.
Opaque makes the background a solid color,
Transparent makes the background transparent, and Alpha allows you to specify the degree
of transparency.
Selecting a
Dither option allows you to specify how pixels in the file are combined to simu-
late colors not available in the chosen palette.
You define the palette by choosing a
Palette Type. Web 216 uses the standard web-safe
color palette to create the GIF image,
Adaptive analyzes the image to create a unique color
palette for the GIF,
Web Snap Adaptive creates a palette unique to the image but using only
web-safe colors where possible, and
Custom allows you to specify a palette.
6. Select the Animated radio button in the Playback section.
7. Enter 2 into the Repeat field.
8. Click Publish.
Your backup GIF will be saved in the same directory where you saved your Flash movie.
Navigate to and double-click it to open it.
You will see your backup GIF launch and cycle through the animation. The GIF animation
isn’t as compelling as your Flash animation. Further, backup-GIF specifications usually
dictate that they be 20KB or smaller, and this backup GIF is 173KB! In this circumstance,

designed to ensure that your banners do not impact the experience of using sites, and to
share information that will allow them to create successful online campaigns. For more
information about the IAB, visit, sss*e]^*jap.
THE ESSENTIAL GUIDE TO FLASH CS4
332
Universal banner standards
In 2002 a project was begun with the aim to reduce the number of banner-advertising sizes
in an effort to reduce inefficiencies and costs associated with creating and buying online
media. The result was the Universal Ad Package, which consists of four banner sizes that are
standard across most large publishers. You can find out more about the Universal Ad
Package by clicking on the
Guidelines, Products & Services tab of the IAB website. Table 11-1
details the pixel and file-size guidelines of the Universal Ad Package.
Table 11-1. The Universal Ad Package Dimensions
Ad Type Dimension Weight Recommended
Duration
Medium rectangle 300
250 40KB 15 seconds
Rectangle 180
150 40KB 15 seconds
Wide skyscraper 160
600 40KB 15 seconds
Leaderboard 728
90 40KB 15 seconds
In Chapters 3 and 6 we created a medium rectangle 300
250 and a leaderboard 72890,
respectively. They’re shown in Figures 11-9 and 11-10.
Figure 11-9. A medium-rectangle banner ad
created in Chapter 3
Figure 11-10. A leaderboard banner ad created in Chapter 6

to the rest of the text; simply revisit Chapter 6 for step by step instructions.
We want to stop the movie clip where the button is displayed, so we’ll add a bit of
ActionScript (unrelated to the clickTAG) to the movie.
6. Select frame 236 of the Click here layer.
7. Select Window ¢ Actions and type the following code into the Actions panel, as
shown in Figure 11-13:
opkl$%7
Figure 11-13. Inserting code to stop the movie from looping
Take a moment to test your movie. You will see that it no longer loops—we have stopped
the looping because we want to leave the user with a clear call to action, and therefore
impetus to click on the ad. We are now going to assign the clickTAG to the button.
Because, as mentioned earlier, currently publishers are dubious about accepting Flash
movies containing ActionScript 3.0, we need to create the clickTAG in ActionScript 2.0.
8. Insert the following code above the opkl$%, as shown in Figure 11-14:
iu>qppkj[^pj*kjNaha]oa9bqj_pekj$%w
capQNH$_he_gP=C([^h]jg%7
y7
opkl$%
UTILIZING BEST PRACTICES TO GET THE MOST OUT OF YOUR FLASH CS4 MOVIES
335
11
Figure 11-14. Inserting the clickTAG into the button
9. Test your move by selecting Control ¢ Test Movie.
The movie plays as before. But when the animation finishes and the button remains on the
static end frame, when you mouse over, the mouse pointer turns into a hand to indicate
that the button is now clickable. When the publisher uploads your Flash CS4 animation,
they will insert into their system the destination URL that will be called when the user
clicks the button.
Using the Accessibility panel
Flash CS4 allows designers and developers to include accessibility information in their

produce the
Accessibility panel. What do you see?
You will note that the
Make Movie Accessible field has become Make Object Accessible. The
field changes based on what you have selected, which allows you to drive accessibility
deep down into complicated Flash animations.
Make Object/Movie Accessible: When the Make Movie Accessible box is checked,
Flash Player is directed to send the accessibility information for the object to a
screen reader. If you disable the option, this information is not sent to the screen
reader.
Make Child Objects Accessible: Having this box checked when you publish your
Flash CS4 movie tells Flash Player to send the information in the child object to the
screen reader. Note that if the movie clip has button behavior assigned to it, this
field is ignored.
Auto Label: Checking this option instructs Flash CS4 to automatically label objects
on the stage with the copy that you have associated with them.
Name: Entering text into this field specifies the object name, which screen readers
will read aloud. If you don’t give your accessible object a name, the screen reader
might read a generic word, which can be confusing.
UTILIZING BEST PRACTICES TO GET THE MOST OUT OF YOUR FLASH CS4 MOVIES
337
11
It’s important that you don’t confuse object names that are specified in the
Accessibility panel with the instance name that you specify in the Properties
Inspector. Assigning the Accessibility name does not automatically assign the
object an instance name.
Description: The copy that you enter into the Description field is read by the screen
reader.
Shortcut: If you have assigned a keyboard shortcut to your object, you can enter
the shortcut in this field, and the screen reader will read it aloud. Entering a key-

THE ESSENTIAL GUIDE TO FLASH CS4
338
Figure 11-16. The Ch11_ex1.fla document in Flash CS4, awaiting you
to assign accessibility
The Accessibility panel in Flash CS4 allows you to create a tab-order index on the following
elements:
Buttons
Components
Dynamic text
Input text
Movie clips
Screens
To be able to assign tabbing order, each of the static text elements needs to be converted
to a movie clip. We will do that now.
2. Convert the following static text elements on the stage into movie clips, as indi-
cated in Figure 11-17.
Sign up for the Gene with Envy eNewsletter to stay abreast of our latest pet creations.
Gene with Envy header
First Name
Last Name
Email
The remainder of the elements on the stage consist of dynamic text and a button, and
therefore can already be assigned a tab order and a descriptor. Let’s do this now!
3. Open the Accessibility panel by selecting Window ¢ Other Panels ¢ Accessibility.
4. Click on the Gene with Envy header.
UTILIZING BEST PRACTICES TO GET THE MOST OUT OF YOUR FLASH CS4 MOVIES
339
11
Converting static text
fields to movie clips

details to our database
9
Let’s check out our tabbing order on screen.
7. Select View ¢ Show Tab Order. Your Flash CS4 movie will display as shown in
Figure 11-19.
Figure 11-19. Viewing the tabbing order
UTILIZING BEST PRACTICES TO GET THE MOST OUT OF YOUR FLASH CS4 MOVIES
341
11
For more information about creating accessible Flash CS4 animations, visit the Adobe
Accessibility Resource Center at sss*]`k^a*_ki+]__aooe^ehepu+.
Summary
Ensuring your Flash CS4 animation is accessible to a broad demographic is crucial to
ensuring its success. In this chapter we have touched on creating accessible animation for
screen readers and keyboard navigation, as well as investigating different publishing
settings.
Also important is creating banner advertisements that are acceptable to a wide range of
publishers. This will allow you to run your ad at many sites on the World Wide Web, and
will streamline your development time, ensuring that you will not have to revise your ads
for different networks.
In this book’s final chapter, we will assemble the assets that we have developed throughout
this book and publish them to sss*caja)ajru*_ki.

CHAPTER 12
THE END OF THE BEGINNING
THE ESSENTIAL GUIDE TO FLASH CS4
344
This final chapter represents a culmination of all the ideas represented thus far. Here you
will attempt to pull together the separate parts of a website that you have built to create
a whole. Using the drawing, video, and 3D lessons from this book, you will create the basis

for the user and draw them away from their purpose. Remember, when you are displaying
your website, you have less than 10 seconds to engage your audience, or they may well
move on to your competitors.
As you will have noticed in Figure 12-1, there are four buttons for each page of the site:
the Home, Pets, Promo, and Contact buttons. We now need to consider how each of these
pages sits within the initial sketch. In the case of this site, we decided that we would host
the countdown timer on the home page, so our visitors can see instantly how long until
they should return to get a bargain in our big sale. This is demonstrated in Figure 12-2.
THE END OF THE BEGINNING
345
12
Figure 12-1. The gene-with-envy site starts with a sketch that shows the stage upon which your
animations will sit.
Figure 12-2. The home page sketch of our site
THE ESSENTIAL GUIDE TO FLASH CS4
346
The Pets page, which is accessed by the Pets button, will display the available products for
sale in the space above the countdown timer. This is displayed in Figure 12-3.
Figure 12-3. The product page of the site
The product page, as sketched in Figure 12-4, is going to display our promotional video.
You will remember this from Chapter 10.
Figure 12-4. The video in your site


Nhờ tải bản gốc

Tài liệu, ebook tham khảo khác

Music ♫

Copyright: Tài liệu đại học © DMCA.com Protection Status