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

It contains integrated supported for the widely used Microsoft Active Accessibility—an application programming interface that allows users of assistive technology products such as screen

U T I L I Z I N G B E S T P R A C T I C E S

T O G E T T H E M O S T O U T O F Y O U R

F L A S H C S 4 M O V I E S

When Stan Lee, one of the founding fathers of the superhero comics that have kept 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

gen-a wide rgen-ange of people, you gen-are helping them to succeed

During the course of this book you have learned how to build amazing Flash CS4 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

anima-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-opers, that’s what building Flash CS4 applications is all about—getting the clients to your website to find the information that will drive them to purchase your client’s product.But best practice is not simply about your user’s Internet-connection speed It’s about ensuring the widest possible range of your target demographic can access and interpret your website—that means everything from ensuring that you are creating Flash applica-tions that can be read by the Adobe Flash Player with the most market penetration to ensuring that people with disabilities can read and interpret your site

It is also important, having invested precious time and resources into building sive Flash applications, that you can gauge the results of your efforts For advertising, that is generally done in conjunction with publishers such as Yahoo! or MSN who generate reports from your ad campaign when it runs on their network, where you can see the number of people who have clicked on your ad to visit your site, see which areas of your site are most popular, and allow you to plan upgrades and redesigns to take advantage of this

comprehen-This chapter is about enabling you to take the guesswork out of your campaigns—to lyze results and change campaigns accordingly

Accessibility is responsibility

When you create an accessible application or website, you are enabling people of all

abili-ties and disabiliabili-ties to use it You must consider many factors when you are making your

site accessible, including visual, mobility, cognitive, and auditory considerations, and

sei-zures caused by strobing and similar effects

Adobe Flash Player 10 is the first rich media player that allows people with disabilities to

access all the content within your Flash application It contains integrated supported for

the widely used Microsoft Active Accessibility—an application programming interface that

allows users of assistive technology products such as screen readers, touch-screen

key-boards designed for people with limited physical abilities, and narrative software for users

with limited hearing—and ensures that the content within Flash applications is

immedi-ately accessible with widely used screen readers (such as JAWS from Freedom Scientific

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,

Flash 10 The current standard is because of the lowest-common-denominator rule 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 ActionScript 3.0 Additionally, Flash 9 introduced some graphical filters that use a lot of CPU resources, and some users’ computers can’t yet handle that.

men-Pages that are set for advertising, such as those you will find on Yahoo! or MSN, have up to four banner ads apiece The W3C and publishers must ensure that the ads shown on a page are light enough for the average user’s computer to be able to display them cor-rectly Therefore, if you are creating advertising to be consumed on a popular site, be sure

to check that site’s specifications

The following URLs are for three major international publishers’ advertising specifications:

Yahoo!:dppl6++okhqpekjo*u]dkk*_ki

MSN: dppl6++]`ranpeoejc*ie_nkokbp*_ki+_na]pera)ola_o AOL: sss*lh]pbkni)]*_ki+]`)ola_o+ne_d)ia`e]+op]j`]n`)ne_d)ia`e])+)pa_d)je_]h)cqe`ahejao+pa_dje_]h)cqe`ahejao+bh]od)_k`ejc)cqe

This chapter’s first exercise shows you how to publish your files in specific Flash Player sions We will publish a banner that you completed in Chapter 6 in Flash Player 8 format, which means you would be able to send it to a publisher such as Yahoo! to be displayed on their site If you have not completed the banner exercise in Chapter 6, you can download the completed FLA file from the Downloads section for this book on the friends of ED website, dppl6++bneaj`okba`*_ki

1 Open the 72890-pixel banner ad that you created in Chapter 6, or download

),-*bh]

2 Locate the Properties panel

3 Expand the Publish section by clicking the down arrow, as shown in Figure 11-1

Figure 11-1 The Publish

section of the Properties panel allows you to change the Publish

options

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 PublishSettings dialog box

8 Save your FLA file

9 Select Export¢Export Movie, as shown in Figure 11-3

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

3 Click on the Formats tab

4 Check the GIF Image (.gif) check box, as shown in Figure 11-4

Figure 11-4 Selecting the GIF format

5 A GIF tab will appear Click on it

The GIF tab, shown in Figure 11-5, offers you GIF publishing settings Let’s check out a few

of those settings

Figure 11-5 Setting your GIF to be animated and to

loop twice

The Dimensions setting specifies the dimensions of your GIF When the Match Movie check

box is selected, your GIF will take on the exact dimensions of your Flash movie When the

check box is deselected, you can change the dimensions of your GIF to have dimensions

that you can specify in the Width and Height fields

The Playback section offers options for how your GIF will be played Static means your GIF

will be a single frame Animated will animate your GIF—that is, an exact replica of your

Flash animation will be reproduced in an animated GIF Loop Continuously makes the

ani-mation play repeatedly (or you can specify in the Repeat section how many times the

animated GIF will play)

The Options section allows you to remove unused colors from a GIF’s color table by ing the Optimize Colors check box, which effectively reduces the file size of your GIF The

select-Interlace option incrementally displays the GIF in a browser before it completely loads, which may download the file quicker over a slow network connection The user will see a basic representation of the image immediately, while the rest of the content is being 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

down-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 ground when it’s converted to a GIF Opaque makes the background a solid color,

back-Transparent makes the background transparent, and Alpha allows you to specify the degree

6 Select the Animated radio button in the Playback section

7 Enter 2 into the Repeat field

One option is to create a static GIF If you were on the first frame and created a static backup GIF using the method you just learned, it would display as shown in Figure 11-6 This doesn’t deliver the advertising message, and doesn’t prompt the user to click

Figure 11-6 A static backup GIF that doesn’t tell the user our marketing message

Flash CS4 allows us to choose the frame that we want to convert to a GIF We’ll investigate this now

1 With the Flash animation still open, scrub the playhead on the timeline to frame

216, as shown in Figure 11-7

Figure 11-7 Selecting the frame we wish to be our static backup GIF

2 Open the Publish Settings dialog box by selecting File¢Publish Settings

3 Click on the GIF tab

4 Select the Static radio button

5 Click Publish

Navigate to where your FLA file is saved and launch the GIF that now resides there Your

static backup GIF will display the frame that you have chosen, as shown in Figure 11-8

Figure 11-8 The completed backup GIF

As this backup GIF is only 6KB, it is fine to send to the publisher along with your Flash

animation

It’s worthwhile to experiment with animated GIFs if your Flash animation is simple Files

that include photos and many-colored palettes, though, are often too large for publishers’

specifications Play around to find the right style for you

Adhering to IAB standards for banner ads

Most banners that Flash designers are required to build will be displayed on sites that

adhere to the Internet Advisory Board (IAB) standards The IAB is composed of more than

350 industry professionals and is dedicated to fostering the standards, guidelines, and best

practices that are adopted on commercial sites throughout the world These standards are

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

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

Figure 11-10 A leaderboard banner ad created in Chapter 6

For more information about Internet advertising standards, visit sss*e]^*jap.

Tracking your banner advertisement

In addition to standard sizes, several international advertising networks—for example,

Yahoo!—recommend the use of standardized tracking This consists of a clickTAG (a

track-ing code assigned by publishers, includtrack-ing Google, Yahoo!, and MSN) placed on the click

event in your Flash movie to track the number of clicks on the advertisement This enables

marketers to know how successful their campaigns are at inspiring users to click on banner

ads, and enables networks that serve the ad to know where the ad appears

Let’s assign a clickTAG to a banner

1 Open ),.*bh] in Flash CS4

We’re going to create a new transparent layer to place the clickTag on

2 Create a new layer above all of the other layers on the timeline

3 Call this new layer Click here, as shown in Figure 11-11

Figure 11-11 Creating a layer for the

button

We are now going to create a button on frame 236 of the banner ad to give the user a

clear call to action to click the banner ad to be taken to the advertised site We have

pre-made the button for you to apply the code to; you will find this button in the library for

this document

4 Scroll the playhead along to frame 236 on the new Click here layer and insert a

keyframe

5 Drag the button symbol from the Library onto frame 236 of the Click here layer

onto the stage, as shown in Figure 11-12

Figure 11-12 Positioning the button on the stage

You can choose to apply the same motion presets to the button as we have the

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]oa9bqj_pekj$%w

capQNH$_he_gP=C([^h]jg%7

y7

opkl$%

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

Flash CS4 applications using the Accessibility panel

The Accessibility panel, shown in Figure 11-15, enables Flash CS4 designers and developers

to apply descriptive text to make individual movie elements and element groups

accessi-ble MSAA distributes these descriptions to the assistive technology the application user

has installed

Let’s open the Accessibility panel now and investigate it

1 Once again, open atan_eoa2,-*bh] in Flash CS4

2 Select Window¢Other Panels¢Accessibility

The Accessibility panel will appear as in Figure 11-15.

Figure 11-15

The Accessibility panel provides an option to give elements and element groups descriptive text

The Accessibility panel displays three fields—Make Movie Accessible, Make Child Objects Accessible, and Auto Label—with corresponding check boxes that are checked by default Because we haven’t selected any objects on the Flash CS4 animation, the Accessibility panel assumes that we want to make the whole movie accessible via this panel

Close the panel by clicking on the X in the top-right corner and then click on the Flying Bug symbol on the screen Once again, select Window¢Other Panels ¢Accessibility to 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

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-board shortcut into this field in the Accessibility panel automatically creates the

shortcut terminology that the reader reads You must create actual functional

key-board shortcuts via ActionScript

Tab Index: Using this builds a tabbing order for objects that are accessed when the

Tab key on the keyboard is pressed This works for keyboard navigation through a

Flash CS4 application but not for the order that the screen reader reads the

con-tent in your Flash movie

Making Flash movies screen reader–friendly

The basic function of screen-reading software is to read websites and applications aloud

Making your Flash movies screen reader–friendly can be difficult, and unexpected errors

can often be thrown in FLA files that have been developed for use in conjunction with

screen readers

When you are contemplating your Flash CS4 accessible application you must consider the

way both the screen reader and the user interact with your application without the benefit

of a mouse—in other words, enabling the user to tab through your Flash CS4 application

using the Tab key on the keyboard The order in which elements and objects appear on the

page is not necessarily the default order in which information is tabbed through When

you build applications in Flash CS4, you can specify the order in which it is tabbed through

and the Screen Reader reads it

Optimizing the tab-control experience

The following exercise will show you how to create an intuitive tab-control order in your

Flash CS4 navigation

1 Open ?d [at-*bh] in Flash CS4

It will open as per Figure 11-16 You will notice that it has four static text elements: three

dynamic input fields and a Submit button We are going to assign Tab control so that it

runs down the page—first the copy, then a static text field, then a dynamic text field, and

so on until the Submit button is reached

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 NameLast NameEmail

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

Converting static textfields to movie clips

Figure 11-17 Converting static text fields to a movie clip in order to assign them a tabbing order

5 In the Accessibility panel type the following in each of the fields, as shown in

Figure 11-18:

Name: Gene with Envy

Description: Gene with Envy Page Title

Tab index: 1

Figure 11-18 Assigning a tab order to the Gene with Envy heading

6 Repeat this for each section as per the following table.

Table 11-2 Creating Your Tabbing Order

Stage Accessibility Panel

Gene with Envy header Gene with Envy Gene with Envy page header 1

Sign up for the Gene with

Envy eNewsletter to stay

abreast of our latest pet

creations

Gene with Envy Sign up for the Gene with

Envy eNewsletter to stay abreast of our latest pet creations

2

First Name dynamic text First Name text field Type your first name here 4

Last Name dynamic text Last Name text field Type your last name here 6

Email dynamic text Email text field Type your email address here 8

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

For more information about creating accessible Flash CS4 animations, visit the Adobe

Accessibility Resource Center at sss*]`k^a*_ki+] aooêehepự

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*_kị