Foundation Flash CS4 for Designers- P23 pdf

In the Export Movie dialog box, navigate to the folder where you want to save the file and select QuickTime *.mov from the Save as type drop- down list, as shown in Figure 15-18.. In the

The _na]paHappan$% function is how the letters arrive in the movie The first variable, bip, creates

a PatpBkni]p$% instance, which is used to format text fields, as you learned in Chapter 6

With the bip instance created, we need to give it some formatting information The size of the text is set by using a custom function, n]j`ki>apsaaj$%, which determines the maximum and minimum size

of the letters That function is coming in step 4 The color is set by picking a random value between 0 and 1 and then multiplying that result by 16,777,216 Where did that number come from? That’s how many colors you can find in the 24- bit color space

We then create a movieclip and add a text field to its display list Before it is added to the display list, the text field is centered, and random letters are added to it That’s accomplished with this line:pb*patp9Opnejc*bnki?d]n?k`a$n]j`ki>apsaaj$53(- %%7

This looks rather complex, but it makes sense when you break it down We needed random values, so

we reused that n]j`ki>apsaaj$% function and told it to return a value between (and inclusive of) 97

and 122 What numbers are those? Those represent ASCII values for the lowercase letters a through z

The Opnejc*bnki?d]n?k`a$% method converts those into their corresponding characters

The next two lines tell Flash to apply the text formatting to the text field—pb*oapPatpBkni]p$bip%—and finally, to add the text field to the movieclip’s display list—i_*]``?deh`$p%

The remainder of the code tells Flash where to position the text- containing movieclip (including the configuration of two custom properties: ]jc and n]jca, used in an event handler function you’re about

to write) The final line tells Flash to animate the movieclip by using a custom odeiiu$% function Let’s write that function

3 Press Return (Enter) twice and enter the following code, which puts the letters in motion:

This code block determines the stage movement of the movieclip containing a random letter from the previous code block Each one is randomly placed on the y axis, and the cosine method of the I]pd class —I]pd*_ko$%—is used to add a right to left shimmy, as the letters move upward

As the letters move up the stage along the y axis, they are continuously scaled down by 2% —i_*o_]haU)9,*,.7—every time the Peian instance “ticks.” The last three lines essentially tell Flash, “Look, this

To finish off the code, let’s write that n]j`ki>apsaaj$% method.

4 Press Return (Enter) twice and type the following:

Therefore the size of this letter would be 94 pixels

If you get any errors, you might want to check your code against ours The file—

>q^^hejcHappano*bh]—can be found in the Chapter 15 ?kilhapa folder.

5 Save and test the movie You should see letters moving up the stage in a wavy motion (see

Figure 15-17) They get smaller as they move upward and eventually disappear

Figure 15-17 Letters

randomly generated, formatted, and put into motion using ActionScript

6 Select File ° Export ° Export Movie In the Export Movie dialog box, navigate to the folder where you want to save the file and select QuickTime (*.mov) from the Save as type drop- down list, as shown in Figure 15-18 Then click Save

Figure 15-18 Exporting a Flash file as a QuickTime movie

7 In the QuickTime Export Settings dialog box, select Ignore stage color (generate alpha channel) and change the After time elapsed: value to 10, as shown in Figure 15-19 Click the Export button

Figure 15-19 The QuickTime Export Settings dialog box

8 A progress bar will appear, and you’ll eventually see an alert that tells you where the export log

can be found Click OK and quit Flash

Let’s return to the QuickTime Export Settings dialog box and briefly review its options:

Render width and Render height: These values match the current stage size and will be the physical dimensions of the video You can change these values by clicking the QuickTime Settings button

Maintain aspect ratio: When checked, this option ensures distortion is not added if you resize the video

Ignore stage color: Selecting this option essentially turns the stage color invisible, which makes

it ideal if you want this animation to play over content in After Effects CS4 or some other video editor

Stop exporting: The choices in this section give Flash an idea of when to stop the process The first choice should be used if you have content on the timeline The second one is ideal for situations such as this exercise, where content is generated by ActionScript In this case, we are producing a clip with a duration of 10 seconds

Store temp data: This is used during the render process You can choose to store this data in memory for short movies, or choose to create the temporary file on the desktop or some other location

QuickTime Settings: This button opens a QuickTime settings dialog box, where you can change the codec and audio settings for the final movie

As we said earlier, you can export these Flash- created movies as animations for use in other tions For example, one of the authors dropped the file into an After Effects CS3 project, as shown in Figure 15-20, and then created the QuickTime movie named >q^^hejcHappanoBej]h*ikr that is found

applica-in this chapter’s ?kilhapa folder

Figure 15-20 The video is used in After Effects CS3.

Publishing and web formats

If there is one fundamental fact regarding publishing your Flash movie to the Web, it is this: the SWF isn’t a web document Nothing drives us crazier than someone telling us, “Dudes, check out my Flash

site,” only to have that individual double- click a SWF on his computer’s desktop Flash SWFs should appear on the Web only if they are embedded into an HTML page Why? Because you can use the HTML to control aspects of the SWF— scaling, context menu items, and more— that you can’t do with-out the HTML wrapper Thus a “Flash site,” to be precise, is composed of an HTML page that points

to the SWF, along with any media— audio, video, images, text— that the SWF may need from external sources

Creating the SWF is a bit more complicated than selecting File ° Publish Preview and merrily clicking away in the Publish panel As we pointed out in the previous chapter, you need a solid grounding in what’s under the hood before you create the car

Again, we stress the same theme we have been repeating since page 1 of this book: keep it small! This

is the reason for Flash’s broad acceptance on the Web and where an understanding of the publishing process is invaluable Up to this point, we have essentially created a bunch of FLA files and asked you

to test them The time has arrived to get off the test track and put the vehicle on the street

When you publish your movie, Flash compresses the file, removes the redundant information in the FLA, and what you are left with— especially if you’ve been taking this chapter to heart— is one sleek, mean web presentation The default output file format— yes, there is more than one— is the SWF The SWF is wrapped in HTML through the use of 8k^fa_p: and/or 8ai^a`: tags, plus extra information about how the browser should play the SWF

Yes, you can link directly to a SWF without that bothersome HTML Just be aware that the SWF will expand to the full size of the browser window, meaning all of the content on the stage will also enlarge In many respects, linking directly to the SWF is rookie error number one.

Before we move into actually publishing a movie, let’s look at some of the more common file types used on the Web, listed here:

them, it became known as Shockwave for Flash and used the *osb file extension Flash Player is the

Flash Player has become ubiquitous on the Web In fact, Adobe can rightfully claim that Flash Player, regardless of version, can be found on 98% of all Internet- enabled computers on the planet This means, in theory, that you can assume your movies are readily available to anyone who wishes to watch them But the reality gets a bit more complicated.

For you trivia buffs, the first couple of iterations of Shockwave for Director used

a small application named Afterburner to create the DCR files When Director

developers prepared a presentation for the Web, they didn’t just create the DCR,

the movie was “shocked.” One of the authors happened to be around on the

night Macromedia quietly released Shockwave and Afterburner to the Director

community He still remembers the excitement generated by members of the

group as they posted circles that moved across the page, and the “oohs” and

“ahs” that followed as the circles moved up and down.

Each new Flash Player version brings with it new functionality Flash Player 8 introduced filter and blend effects, which can’t be displayed in Flash Player 7 FLV video can’t be played in Flash Player 5 Any movie you prepare using ActionScript 3.0 can be played only in Flash Player 9 or higher Flash Player 9,0,115,0 was the first to display HD video content Though you may initially regard this as

a nonissue, you would be making a gross miscalculation Corporations, through their IT departments, have strict policies regarding the addition or installation of software to corporate- owned computers

We personally know of one organization that isn’t budging, and its Flash Player policy is Flash Player 6

or lower to this day Shrewd Flash designers actually ask potential clients which versions of Flash Player are to be targeted for the project The last thing you need is to find yourself rewriting every line of code and reworking the project, because you assumed the target was Flash Player 9, but corporate policy dictates Flash Player 7 or lower

Flash Player 10 follows a tradition that each successive version of Flash Player

will play content faster than its predecessors When Flash Player 9 was released,

Adobe claimed it provided a 75% speed increase over Flash Player 8, which was

partly due to the support for ActionScript 3.0 introduced in Flash Player 9 This

sort of increase is usually enough for most users to install the new version Even

so, in many instances, actually downloading and installing the plug- in is

becom-ing a thbecom-ing of the past Flash Player has the ability to download and install in

the background, but, as one of the authors is quick to point out: “It takes a

pro-grammer to make it work.”

HTML

HTML is short for Hypertext Markup Language Where HTML and ActionScript part company is that HTML

is a formatting language, whereas ActionScript is a scripting language This means HTML is composed of

a set of specific instructions that tell the browser where content is placed on a web page and what it looks like ActionScript has nothing to do with the browser It tells Flash how the movie is to perform

The HTML instructions, or tags, are both its strength and its weakness HTML was originally oped to allow the presentation of text and simple graphics As the Web matured, HTML found itself hard- pressed to stay current with a community that was becoming bored with static content on pages

devel-The real problems with HTML start when you try to drop multimedia or interactive media into a web page HTML simply wasn’t designed for this sort of heavy- lifting, which explains why JavaScript (a lan-guage that shares roots with ActionScript) is now so widely used.

For a Flash designer, knowledge of how HTML works is critical, because it is the technology that enables your movies to be played on the Web Of course, this isn’t as difficult as it once was Today, through the use of Dreamweaver CS4 and even Flash, creating the HTML involves nothing more than

a couple of mouse clicks You will still need to play with the HTML— you saw this in Chapter 10 when you had to dig into the JavaScript code to enable full- screen playback of a Flash video— because your HTML document can do things that Flash can’t This would include such features as ]hp attributes for screen readers and keywords used to attract search engines

The other thing to stick in the back of your mind is that Flash- only web pages aren’t as common as they once were Web pages consisting solely of one SWF are still around, but Flash is also becoming

a medium of choice for the delivery of banner ads, videos, and other interactive content that are ments of an HTML web page To see an example of this, you need look no further than our beloved publisher If you hit the friends of ED home page at dppl6++sss*bneaj`okbA`*_ki, you will see a Flash banner at the top of the home page (see Figure 15-21), while the rest of the page is composed of HTML

Figure 15-21 A typical Flash/HTML hybrid page

Exporting as an animated GIF

Let’s reuse our now- familiar parrot to see how animated GIF exporting works

1 Open the U]sjejcL]nnkp*bh] file in this chapter’s Atan_eoa folder This is the file to be exported as an animated GIF Flash will convert each frame of the movie to a GIF image There are 355 frames in this animation, meaning you should prepare yourself to create 355 separate GIF images

Okay, web- heads, settle down Creating an animated GIF consisting of 355 frames

is, as our editor, Ben Renow- Clarke, would say, “Simply not done, old chap.” We

know that, but if you understand what happens— in a big way — you’ll be more

cautious in your efforts Anyway, the parrot is pretty cool and makes for a rather

interesting workout for Fireworks CS4.

2 Select File ° Export ° Export Movie (press Ctrl+Alt+Shift+S on the PC or Cmd+Option+Shift+S

on the Mac) to open the Export Movie dialog box (see Figure 15-22) Navigate to the L]nnkp folder in the Chapter 15 Atan_eoa folder and select GIF Sequence (*.gif) in the Save as type drop- down menu Then click Save

Figure 15-22 Select GIF Sequence (*.gif) as the image type.

3 In the Export GIF dialog box, specify these settings (see Figure 15-23):

Dimensions: 570  550 pixels

Colors: 256

Smooth: Selected

Figure 15-23 Preparing to export the Flash timeline as a GIF animation

You may notice that when you change the Dimensions settings, there is a corresponding reduction in the Resolution value If you click the Match Screen button, you will be returned to the original settings for this image The physical reduction of each frame and its corresponding reduction in resolution have the net effect of creating a rather small GIF image In this case, you need to just ignore size That can be dealt with in Fireworks CS4

4 Click the OK button A progress bar will appear, showing you the progress of the export This is

a fairly quick process and should take less than 10 or 15 seconds When it finishes, the progress bar will disappear, and you will be returned to the Flash stage

At this point, you are now the proud owner of the 355 GIF images that will be used to create the mation We aren’t going to get into the nitty- gritty of creating the GIF animation in Fireworks CS4 The process is fairly simple, and the next steps give you the general idea

5 Launch Fireworks CS4, and then select File ° Batch Process

6 Scale the images to a size of 113  109 and save the scaled images to a new folder

7 Still in Fireworks CS4, click the Open button on the Welcome screen, and navigate to the folder

containing your GIF images Select all of them in the Open dialog box and select Open as mation, as shown in Figure 15-24 Then click the Open button

ani-Fireworks will create the animated GIF by putting each image in a frame You can then do what you need to do and export the file from Fireworks CS4 as an animated GIF

Figure 15-24 Importing the GIF files into Fireworks The key is to select Open as animation.

Only the main timeline is considered when Flash content is converted to an

ani-mated GIF Nested movieclip timelines and ActionScript do not make it through the

translation process The simple rule of thumb is that if you can see it move while

you manually scrub the timeline, the GIF can, too If you can’t, it won’t show.

Yes, this exercise was partly mischievous If you select File ° Export ° Export Movie, you can bypass the need to restitch the GIF sequence in Fireworks by choosing Animated GIF from the Export Movie dialog box Still, it’s good to know your options!

Importing an animated GIF

Now that you know how to create a GIF animation in Flash, let’s look at the reverse process Here’s how to import a GIF animation into Flash:

1 Open a new Flash CS4 document and select File ° Import ° Import to Library

2 Navigate to the L]nnkpBS*ceb file in the Atan_eoa folder for this chapter and click Import to Library When the process finishes, you will see that each image in the animation, along with

a movieclip, has been added to the library

3 Drag the movieclip to the stage and test the movie You have a low- resolution version of the

yawning parrot, as shown in Figure 15-25

Figure 15-25 A yawning parrot in the GIF format

QuickTime

QuickTime is Apple’s Internet streaming video technology As we have pointed out throughout this book, QuickTime is losing its grip as the premiere web video technology What you should have learned from the >q^^hejcHappano*bh] exercise earlier in this chapter is this: the reports of QuickTime’s death are premature.

Flash is gaining ground as a broadcast animation technology, and no matter how you slice it, QuickTime

is the way to go with digital video Up until the previous release of Flash, QuickTime and Flash have had a rather uneasy relationship It was extremely difficult to get Flash animations into QuickTime for editing in a video- editing application Why? Because you couldn’t use nested movieclips, nested timelines, or ActionScript These impediments have been removed, and publishing a Flash document

as a QuickTime movie is easier than it ever has been

Which raises this question: how do you publish a Flash movie for the Web?

It’s showtime!

Everything works as it should You have sweated buckets to optimize the movie, and the client has finally signed off on the project It’s showtime The Flash movie is ready to hit the Web and dazzle the audience Though you may think publishing a Flash movie involves nothing more than selecting Publish in the File menu, you would be seriously mistaken The process is as follows:

Open the Publish Settings window to determine how the movie will be published

Publish the movie and preview the SWF

Upload the SWF and any support files to your web server

Figure 15-26 The Publish Settings dialog box

You can also launch the Publish Settings dialog box by clicking the Edit button in

the Profile area of the Publish section in the Property inspector The one thing you

don’t want to do, unless you have a lot of Flash experience under your belt, is to

select File ° Publish Selecting this will publish the movie using whatever default

settings are in place.

As you can see, this dialog box is divided into three distinct sections: Formats, Flash, and HTML In fact, that last tab (or tabs) will change depending on the format chosen We’ll get to that in a minute The five buttons along the top, next to the drop- down menu, are the Profile buttons These allow you to

“tweak” your settings and then save them for future use

Formats

The file types are as follows:

Flash (.swf): Select this, and you will create a SWF that uses the name in the File area unless you specify otherwise

HTML (.html): The default publishing setting is that the Flash and HTML settings are both selected This does not mean your SWF will be converted to an HTML document It means Flash will generate the HTML wrapper for the SWF

If you are a Dreamweaver CS4 user, you don’t need to select the HTML (.html)

option Dreamweaver will write the necessary code for the SWF when it is imported into the Dreamweaver CS4 document.

GIF Image (.gif): Select this, and the Flash animation will be output as an animated GIF, or the first frame of the movie will be output as a GIF image

JPEG Image (.jpg): The first frame of the Flash movie will be output as a JPEG image

PNG Image (.png): The first frame of the movie will be output as a PNG image Be careful with this one, because not all browsers can handle a PNG image

Windows Projector (.exe): Think of this as being a desktop SWF that is best suited to play back from a Windows desktop or CD, not from the browser

Macintosh Projector: This is the same idea as the Windows projector Just be aware that a Mac projector won’t play on a PC, and vice versa

The Navigate buttons (they look like folders and are located beside each file type) allow you to gate to the folder where the SWF will be saved (see Figure 15-27) If you see a path, click the Use Default Names button to strip out the path from the file name

Figure 15-27 Strip out any paths in the file name

to avoid problems

Select all of the types Notice how each file type kicks out its own tab Deselect everything but the Flash (.swf) option before continuing

Flash settings

Click the Flash tab to open the Flash settings, as shown in Figure 15-28

Figure 15-28 The Flash

settings in the Publish Settings dialog boxLet’s review each of the areas in this panel:

Player: This drop- down menu allows you to choose

any version of Flash Player from versions 1 to 10

(the current version), AIR 1.1, and any version of

Flash Lite Player from versions 1 to 3.0 If you have

the Property inspector open, you will see the

ver-sion chosen also appears there It is extremely

important you understand that if you change your

Flash Player version and are using features in the

movie that aren’t supported by the chosen Flash

Player version, you will be greeted by the alert

dia-log box (see Figure 15-29), but this happens only

when you return to the Flash stage and try to add

or manipulate something that isn’t supported In the case of Figure 15-29, we tried to use the FLVPlayback component, and that feature is not supported in our target player

Figure 15-29 Flash will let you know you

can’t, when you try to do something that isn’t supported by the version of Flash Player you have targeted

Script: There are three versions of the ActionScript language If you are publishing to Flash Player 9 or higher, you are safe with ActionScript 3.0, ActionScript 2.0, or ActionScript 1.0 (we recommend ActionScript 3.0) If you are publishing to Flash Player 8 through 6, or Flash Lite 2

or 2.1, ActionScript 2.0 is your choice, though ActionScript 1.0 will work Everything else uses ActionScript 1.0

Images and Sounds: This is where you control the compression of JPG images and sound ity Your choices are as follows:

qual-JPEG quality: This slider and text field combo specifies the amount of qual-JPEG compression applied to bitmapped artwork in your movie The value you set here will be applied to all settings in the Bitmap Properties area of the library, unless you override it for individual bit-maps on a per- image basis

Audio stream: Unless there is a compelling reason to do otherwise, leave this one alone The value shown is the one applied to the Stream option for audio in the Property inspector.Audio event: Same warning as the previous choice but for event sounds

Override sound settings: Click this, and any settings—Stream or Event— you set in the Sound Properties area of the library are, for all intents and purposes, gone

Export device sounds: Use this only if you are using Flash Lite and publishing to a mobile device

SWF Settings: Use this area to tell Flash how to create the SWF The following options are able:

avail-Compress movie: Even though Flash compresses the FLA’s assets when it creates the SWF, selecting this allows Flash to compress the SWF itself — usually text- heavy or ActionScript- heavy — to an even greater extent during the publish process If you are publishing to Flash Player 5 or lower, you can’t use this option

Include hidden layers: This option falls squarely in the category of “it’s your call.” All this means is that any timeline layer whose visibility icon is turned off will not be compiled into the SWF Designers often like to keep reference layers handy during authoring, but in previ-ous versions of Flash, such layers would show in the SWF, even if they were hidden in the FLA An old trick to “really” hide them was to convert such layers to guide layers— but that can get tedious If you really want those layers gone, just delete them If you’re a little lazy, use this feature instead We tend to leave it unselected, but if there is a compelling reason

to include your hidden layers, select this option

Include XMP metadata: Select this option and click the File Info button, and the dialog box shown in Figure 15-30 will appear Any text entered here will be added to the SWF’s metadata

As you can see, the amount of metadata you can add is quite extensive For more information about Extensible Metadata Platform (XMP), see dppl6++sss*]`k^a*_ki+lnk`q_po+til+.Export SWC: Unless your name is Grant Skinner or you have been living and breathing Flash for most of your natural life, leave this one alone It is used to create a component for Flash