Foundation Flash CS4 for Designers- P22 doc

Type the companion “up” and “down” handlers for the Fast- Forward button as well: The code for the Prev and Next buttons is so similar to the MP3 player’s version, we’re confident you’ll

To save keystrokes down the line, these functions invoke the relevant JapOpna]i methods and, in addition, update the Play/Pause button icon, and then either add or remove the custom oaagGjk^Ql)

`]pa$% function as a listener of the Arajp*AJPAN[BN=IA event

Note that the gjk^ instance—the knob movieclip in the library—is nested inside the re`ak?kjpnkho instance (controls in the library) Nesting the symbols makes it easy to move around all of the playback controls as a single group while on the main timeline

Handling the button events

It’s already time for the buttons! Nothing to it, but to do it

In the Actions panel, type the following ActionScript beneath what’s already there:

The second group of lines wires up all the corresponding event handlers Most of the buttons need

to respond only to the IkqoaArajp*?HE?G event, but the rewind and fast- forward buttons require the use of click and hold For this reason, those movieclips are associated with IkqoaArajp*IKQOA[@KSJ to begin the rewind or fast- forward routine, and IkqoaArajp*IKQOA[QL to cancel it

Here’s the code for the Mute button Type this beneath the existing ActionScript:

mov-Here are the “down” and “up” handlers for the Rewind button Once you grasp this one, you’ll be able

to understand the Fast- Forward button as well Type this beneath the existing ActionScript:

`han$% function stops the nsPeian It’s as simple as that

Type the companion “up” and “down” handlers for the Fast- Forward button as well:

The code for the Prev and Next buttons is so similar to the MP3 player’s version, we’re confident you’ll

be able to connect the dots Type the following ActionScript after the existing code:

Programming the slider

We hope you’re beginning to notice a theme here Maybe a sense of déjà vu? The concepts we’re

discussing may not quite roll off the tongue just yet, but we hope some of these trees start ing familiar—that you get some comfort from the sense that Lake Nanagook seems to have a few well- worn landmarks Let’s take a look at the slider code for this video player

look-Continuing with the existing code, type the following new ActionScript beneath the >qppkjo block:

The instance names may have changed, but the dance is still the same

When the user presses the mouse over the knob in order to drag it, the oaagGjk^Ql`]pa$% tion, which animates its movement, needs to be halted If not, the knob will skip around frantically,

func-looping oaagGjk^Ql`]pa$% function The very first line of this function—naikraArajpHeopajan$%—accomplishes this need perfectly Why not instead use the custom l]qoaRe`ak$% function, which also invokes the same naikraArajpHeopajan$%? It’s a matter of choice You certainly could To mix things

up, we decided to let the video continue while the user scrubs around

The na_p variable is assigned a new Na_p]jcha instance, which is employed, as before, to constrain the area of the dragging To wrap up the function, the stage is asked to keep an ear open for IkqoaArajp*IKQOA[QL

Let’s go ahead and write the event handler for that IKQOA[QL listener Type in the following new code:bqj_pekjoaagOpkl@n]c$arp6IkqoaArajp%6rke`w

of the video has already downloaded

The eb statement checks if the video is currently playing, and if so, reassigns the Arajp*AJPAN[BN=IA event handler that animates the knob’s position Finally, because the stage listener is no longer needed, this function unhooks its IkqoaArajp*IKQOA[QL association

And here’s the oaagGjk^Ql`]pa$% function, which moves the knob in correspondence with the gression of the video Type the following ActionScript under the existing code:

This function operates just like its cousin in the MP3 player Note that its arp parameter is set to jqhh

by default, which makes it optional This happens here for the same reason you’ve seen the technique used elsewhere in this chapter: this function needs to be called either as an event handler or on its own The on-its- own part happens in the Peian event handlers, which are coming up next

BUILDING STUFF

Using timers to rewind and fast- forward

In the JapOpna]i*oaag$% method used in the previous section, the knob’s position determined the time offset in which the video should play Rewinding and fast- forwarding is nothing more than

a repeat performance of the same functionality The Peian instances you declared at the beginning of this exercise—nsPeian and bbPeian—and the oaagN]pa variable, are about to give you everything you need to accomplish these features

In the Actions panel, enter the following ActionScript beneath what’s already there:

Here’s the first one of those, nasej`$% Type the following ActionScript after the existing code:

If the subtraction would, in fact, seek to a negative number, jo is told to seek to 0 Finally, the oaag)Gjk^Ql`]pa$% function updates the position of the knob to match the current time offset of the video

With the code as it stands—specifically, a oaagN]pa value of -,—the act of rewinding repeatedly sends the video playhead back 10 seconds at a time, which is a fairly hefty number What if you want to seek

to a finer degree? Just change oaagN]pa to a smaller number—say, 1, , or maybe even ,*1 But watch out, if you do: unless you’re using RTMP, as you would with Flash Media Server, you can only seek

to video keyframes The frequency of your keyframes (not timeline keyframes, but video keyframes) determines how successfully you can rewind or fast- forward In the video files included with this

chapter, you’ll find that EjgOkjc*il0, which has many keyframes, handles a much smaller oaagN]pa value than either of the FLVs When you have a mix of videos, you’ll need to go with the lowest com-mon denominator, which in this case means the highest common oaagN]pa value How do you figure that value out? With good, old- fashioned testing.

To wrap it up, type these final lines at the very bottom of your script:

As before, the oaagGjk^Ql`]pa$% function keeps the knob up-to- date on where it needs to be as fast- forwarding occurs Remember that these timers are started and stopped in the event handlers triggered by mouse presses and releases to the Rewind and Fast- forward buttons

Test the movie and enjoy the show (see Figure 14-17)

Figure 14-17 Take a bow.You now know how to create your own

personal video controller!

BUILDING STUFF

After being mesmerized by the musical ink blots—truly an inventive and gorgeous

combi-nation of the visual and musical arts—you might be wondering what made us choose the

particular videos we did to wrap up this chapter There are a number of reasons, actually.

First and foremost, these videos are flat- out interesting.

Second, they’re an inspiration Chen Zhou, who created the “Ink’s song” video, has

accom-plished with splashes of ink what Robert Bringhurst (quoted in Chapter 6) admonishes

typographers to endeavor with text The authors would like to thank the China Central

Academy of Fine Arts’ Media Lab in Beijing for permission to use Chen’s video in this book

In the other two files, Greg Pattillo breaks the mold by performing his own interpretation

of well- known tunes on the flute—while beatboxing at the same time Recognized by the

New York Times as “the best person in the world at what he does,” Greg makes it clear

that truly cool things can come from trying something new We thank Greg for his

permis-sion to include his videos (collectively viewed online over 20 million times) with this book.

Third, these files are interesting from a technical standpoint Why’s that? The MP4 is an HD

H.264- encoded file, while the FLVs are standard batch- encoded YouTube files Why is this

interesting? It demonstrates Flash Player’s flexibility in a compelling way Using a

smatter-ing of XML and less than 200 lines of ActionScript, you’re able to build an insanely small

(3KB!) video player that handles anything from 73MB HD video to popular YouTube

per-formances Now think back to Chapter 10 The BHRLh]u^]_g component does all of this,

but the resulting SWF weighs in at 52KB Use the drawing tools to create the assets, write

a couple hundred lines of code to do it yourself, and your SWF sheds 49KB.

We think that’s about as neat as it gets.

If you’re interested in more beatbox flute, head over to dppl6++_`^]^u*_ki+_`+

lnkfa_piqoe_, where Greg collaborates with Eric Stephenson (cello) and Peter Seymour

(bass) in their genre- defying ensemble, PROJECT.

What you have learned

Rather than list what we covered in this chapter, we think it is more important to take a broader view

of that statement Step back for a moment and think about what you knew when you first laid this book on your desk and flamed up Flash CS4 The answer, we suspect, is “Not a lot.”

Now think about your working through this chapter The odds are pretty good you were able to follow along, and we are willing to bet there were a couple of points where you may have asked us to “move along a little quicker.” This says to us that we have done our job, and that you may just know a lot more than you are aware of Congratulations

We were also a little sneaky with this chapter If you follow the flow from the start to the end, you will see it actually follows the structure of this book: each exercise is designed to add to your knowledge base by building upon what you learned in the preceding exercise and, as we kept pointing out, in preceding chapters

Finally, this chapter expanded on practically every concept presented in this book If you have pleted the exercises, then you have quite a bit of practical experience using Flash CS4

com-Now that you’ve learned the ropes and have practiced numerous techniques, let’s concentrate on the end game of the Flash design and development process: publishing your file

When it comes to Flash on the Web, a common user experience is sitting around waiting for the movie to start From your perspective, as the artist who designed the site, this may seem odd After all, when you tested the movie in the authoring envi-ronment, it was seriously fast and played flawlessly What happened? To be succinct, the Web happened Your movie may indeed be cool, but you made a fundamental mistake: you fell in love with the technology, not the user In this chapter, we’ll talk about how to improve the user experience.

Here’s what we’ll cover in this chapter:

Understanding how Flash movies are streamed to a web page Using the Bandwidth Profiler to turbo- charge movies Optimizing Flash movies

Converting a Flash movie to a QuickTime video Choosing web formats

Publishing a SWF for web playback Dealing with remote content

OPTIMIZING AND PUBLISHING FLASH MOVIES

Chapter 15

The following files are used in this chapter (located in ?d]lpan-1+Atan_eoaBehao[?d-1+Atan_eoa+):U]sjejcL]nnkp*bh]

dppl6++sss*bneaj`okbA@*_ki+`ksjhk]`*dpih;eo^j9534-0/,.-,5/-Flash’s love- hate Internet relationship

Back in the early days of Flash, when we really didn’t know better, Flash designers would prepare these really “cool” intros to the site, which played while the rest of the site loaded The problem was they were large and, in many cases, the intro seemed to take almost as long to load as the site The solution was the infamous Skip Intro button, as shown in Figure 15-1 The intro would start playing and, after

a couple of seconds, the Skip Intro button would appear The user would click it, only to discover the site hadn’t quite loaded Users were left to sit there, drumming their fingers on their desk So, users began to see the button not as a Skip Intro option, but as a Skip Site warning This resulted in Flash gaining a rather nasty reputation for bloat, which it still has not shaken entirely

Of course, the Flash community does have quite a sense of humor One of the more popular Flash sites of the time was named “Skip Intro.” You can watch

it via ]n_dera*knc’s Wayback Machine, dppl6++sa^*]n_dera*knc+sa^+

.,, .-0,,141,+dppl6++sss*ogelejpnk*jh+ogelejpnk+ogelejpnk54*dpi

When you launch the site, make sure to click the phrase “Play Ball” (hip for

“Enter this site”) to start the never- ending Flash intro.

To deal with the bloat issue, it is critical that you understand the underlying technology behind your Flash movie This means we need to revisit what the Web really is, so you can become familiar with many of the terms commonly used in the Flash design and developer community

OPTIMIZING AND PUBLISHING FLASH MOVIES

Figure 15-1 Welcome to “Skip Intro” hell.

This “Internet” thing

The Internet’s roots go back to the U.S Department of Defense’s need to create a bulletproof means

of maintaining communications among computers This involved such things as file transfers, ing, and so on At the time, computers were a virtual Tower of Babel, which meant different computer types and operating systems rarely, if ever, could talk to each other As well, in battle conditions, the needed system would have to carry on even if a piece of it was knocked out, and it had to be acces-sible to everything from portable computers to the big, honking mainframes in “clean rooms” around the world

messag-The solution was an enabling technology called the Internet Protocol suite, though we know it by a far sexier name: TCP/IP This is how data moves from your computer to our computers, or from your web

server to our computers and, as you may have guessed, the slash character indicates that it comes in two parts

IP (Internet Protocol): How data gets from here to there by using an address called the IP

address This address is a unique number used to identify any computer currently on the Internet This protocol creates little bundles of information, called packets, which can then be

shot out through the Internet to your computer Obviously, the route is not a straight line The

packets pass through special computers called routers, and their job is to point those packets

to your computer Depending on the distance traveled, there could be any number of routers, which check your packets and send them either directly to your computer or to the next router along the line

TCP (Transmission Control Protocol): The technology that verifies all of the data packets got

to your computer The IP portion of the trip couldn’t care less if packet 10 arrives at your puter before packet 1, or even that it got there at all This is where TCP comes in Its job is to ensure that all of the packets get to where they are supposed to go

com-Once all of this got the kinks worked out, the US military had quite the communications system on its hands

Enter the World Wide Web

Although straight data transmission was interesting, once the cool factor wore off, people started wondering how it would be possible to use this communication network to access files containing images, audio, and video The solution was the World Wide Web— a network of networks, which is commonly seen as web pages and hyperlinks

A web page is a simple text file, which uses HTML— a formatting language of tags and text— to define how a page should look and behave This is important, because your Flash movies should always be found in an HTML wrapper

The concept of hyperlinks and hypertext was around long before the Internet

The gentleman who managed the atomic bomb project for the United States during World War II, Vannevar Bush, wrote an article for the Atlantic Monthly in July 1945 that proposed a system of linking all information with all other infor- mation The article was entitled “As We May Think,” and you can still read it at dppl6++sss*pda]ph]jpe_*_ki+`k_+-501,3+^qod.

An HTML page may be nothing more than a text file, but it can contain links to other assets, such as CSS files, JPGs, GIFs, and your Flash movies These links take the form of a URL (Uniform Resource Locator) and specify the location of the assets requested by the HTML document When Firefox, Internet Explorer, or any other graphical browser translates the page, those addresses are used to load the external assets and display them on your computer screen Thus, the Web is really composed

of two parts: browsers that request files and servers that store files and make them available when

a browser asks for them

As you can see, the infrastructure that moves your SWF files from a server to thousands of browsers is

already in place Where your pain and heartache arise is from something called bandwidth.

OPTIMIZING AND PUBLISHING FLASH MOVIES

Bandwidth

In the early days of Flash, around the year 1999, one of the authors read an article written by a New York Flash designer, Hillman Curtis, and one phrase leaped out of the article and has been glued to the front of his cerebral cortex ever since What’s that phrase? “Keep an eye on the pipe.”

The “pipe” is bandwidth Bandwidth is a measure of how much data will move along a given path at

a given time or how much information can be downloaded through a modem and how fast One of the authors, when speaking on this topic at conferences or in class, uses a rather amusing analogy that will help you to understand this topic Imagine trying to push the amount of data contained in your favorite TV show through a modem When that modem is connected to a telephone line, the effort is

no different from “trying to push a watermelon through a worm.”

Bandwidth is measured in bits per second (bps), usually in the thousands (Kbps) or millions (Mbps)

A bit is either a one or a zero, so ultimately, bandwidth is a measure of how many ones and zeros can be fed through a modem each second The higher the number, the greater the bandwidth, and the faster things get from here to there But bandwidth is not constant It requires more bandwidth

to move a video from here to there than it does to transfer a page of text The issue is not “here

to there.” The issue is the modem’s capacity to manage the data This is the “pipe.” Users with 56K dial- up modems have a pipe that has the diameter of a garden hose Users with cable modems have

a pipe that has the diameter of a fire hose Connect the tiny garden hose to the fire hydrant in front

of your house, and you will get a graphic demonstration of data flow and the pipe when you turn on the hydrant

As we pointed out earlier, the data packets sent to your computer get there eventually, and the route

is never a straight line Over time, TCP/IP ensures that the transmission rate averages to a more or less constant rate, but this is technology we’re dealing with here It is the prudent Flash designer who approaches technology with a dose of pragmatism and does not assume a constant flow This has implications for your design efforts, and we will get into those shortly

You need to regard the pipe and data transmission in much the same manner you regard your local highway It may have six lanes for traffic and a posted speed limit of 60 mph or 100 kph, but all of that becomes irrelevant during rush hour Traffic moves at the pace of the slowest car It is no different with the Internet Servers can become overloaded

A powerful example of this in recent history is the infamous event known as 9/11 On that day, the Internet essentially ground to halt as it seemed like every computer on the planet was attempting to get the latest information on the tragedy What people overlooked on that day was that a server is only a computer, and can only reply to a finite number of requests at a set rate If the browser can’t get the information, it will assume the assets are not there As a consequence, the requested page will either not be displayed or will be displayed with information missing It got so bad for CNN and the BBC that they were forced to post a message that essentially told people “come back later.” Even the people lucky enough to make a connection experienced pauses in the download and frequent discon-nects, which are the hallmarks of an overloaded server

What you need to take away from this story is that the time it takes to download and play your Flash movie is totally dependent on the contents of your Flash movie and traffic flow on the Internet This means you need to not only concentrate on what is in your movie, but also on who wants to access it This is where you fall in love with the user and not the technology

So who are these folks we call users?

The Flash community is an oddball collection of people, ranging from those who ride skateboards for entertainment to the classic nerd working in a corporate cubicle farm This disparity, which actually

is the strength of the Flash community, has resulted in a bit of a split between those who use charged computers to develop their content, and take a “Sucks to be you” attitude if you can’t revel

super-in their work, and the corporate types who operate withsuper-in strict standards set by their IT department This standard is usually in the form of the following commandment:

Thou shalt develop to a Flash Player 7 standard, and may whatever god you worship have mercy upon your miserable soul if you step outside this stricture.

So, what do you really need to know before putting your work out there? Here are some general guidelines:

Small means fast Studies show you have 15 seconds to hook the user If nothing is happening

or is appealing to your users, they’re gone Small SWFs mean fast download The days of ductory eye candy for your Flash movies are over If the content they see within that 15- second window is not relevant to the site or the experience, users leave

If a bleeding- edge Flash site isn’t viewable on a two-year- old computer with a standard ing system and hardware, it’s time to go back to the drawing board

For a commercial site, you may have to go back three years Corporations are relatively slow to upgrade hardware because of the significant cost to do so Old hardware means slower com-puters

If your target audience is urban and in a developed country, assume they have, at minimum,

In the previous chapter, we looked at ways to prevent bulking up frame 1, by preloading the SWF itself and by externalizing assets and loading them at runtime In this chapter, you’ll learn how to optimize the rest of your timeline, to help balance out and redistribute the load of a SWF’s assets Your goal will

be to facilitate Flash Player’s natural tendency to stream

Please understand that streaming doesn’t make things faster What it does is give you the opportunity to intelligently organize the timeline so the movie starts playing in very short order Used wisely, streaming can ensure that everything in the Flash movie is downloaded before it is needed The result is a Flash movie that seems to start playing almost immediately and moves “as smooth as the hair on frog’s back.”