Choosing Which Version to Publish Every time you create a Flash movie, you have to be aware of your audi-ence.. If you don’t need touse Flash Player 10 features to accomplish your goals,
Trang 1Granted, the changes made in this task were pretty minor, but now you
know where you can make edits to the published .htmlfile One last point
about using this scripted solution: It supersedes the browser’s auto-install
features For example, say the user has a browser that can unobtrusively
in-stall Flash If this user has no Flash inin-stalled or only Flash Player 5, he still
sees the previously mentioned alternative content Then, after visiting
Adobe’s site to install Flash, he has to know enough to return to your site
In many ways, this scripted approach is not ideal because it gives you
plenty of opportunity to explain things to the user in the alternative
con-tent, but requires the user take more steps Some other scripted solutions
(such as the Flash Detection Kit or SWFObject, mentioned earlier)
automati-cally redirect the user, which makes it hard for him to use his back button to
return to an earlier site he visited The bottom line is that each approach has
its own limitations
Using Publish Templates
There are other templates available in the HTML tab These correspond to
files installed in the HTML folder inside the Configuration folder You can
add to these templates by making your own templates It takes some
knowledge of HTML, but instructions are available if you search the help
panel for “Customizing HTML Publishing Templates.”
You can make minor adjustments to the built-in templates rather easily, as
shown in the following task
Customize a Template
TRY IT YOURSELF ▼
In this task, you improve on one of the built-in templates by removing the
natural padding around your Flash movie Follow these steps:
1 Find the local settings folder for Flash CS4 On Windows, you can
se-lect Start, Run and type local settings/application
data/adobe/flash cs4 On Macintosh (Mac), you can find the folder
at Macintosh HD/Applications/Adobe Flash CS4/en Go into the First
Run folder Inside the HTML folder, you find the templates used by the
Publish Settings dialog box Keep the HTML folder open
2 Star t by creating a movie that includes an animation of a clip instance
of a box moving from the top-left corner of the Stage to the bottom-left
corner Use the Align panel’s To Stage option or the Info panel to
align the box to the edge of the Stage in both keyframes
Trang 24 Press F12 to use Publish Preview Notice the square doesn’t actuallyreach the left edge of your browser.
5 Close the browser Save the movie, and then close Flash Find the filecalledDefault.htmlinside the HTML configuration folder (identified
in step 1), and copy and paste it
6 Rename the copied file myDefault.html, and then open it in a texteditor such as Notepad
7 Change the first line from this:
what-8 Change the par t in the 308th line, or wherever you see the <body>tagfrom this:
<body bgcolor=”$BG”>
to this:
<body bgcolor=”$BG” topmargin=”0” leftmargin=”0”
marginwidth=”0” marginheight=”0”>
This changes all the margins to 0 pixels wide
9 Save and close this file Restar t Flash, and open the movie you ated earlier in this task
cre-10 Select File, Publish Settings From the Template drop-down list on theHTML tab, select the No Padding template you just created Click OK
11 Press F12, and you should see a preview with no padding around themovie
Trang 3You can make more significant changes to the templates than shown in the
preceding task In addition, there are many other places where Flash
en-ables customization to the Actions panel and preinstalled templates
through the configuration folder It’s worth snooping through and reading
the help files on this topic
Adding Metadata to Your Flash
Creation
There are two built-in ways you can expose your Flash creations to search
engines: You can add keywords into the .htmlfile’s comments or add a title
and description to the .swffile The first, metadata in the HTML, has been
around for a while, and every search engine should be reading this data
al-ready While search engines crawl the web, they pick up words that you
place in the .html You can insert keywords you think apply to your
con-tent, and search engines point to your page You can increase the likelihood
your page gets linked to by studying search engine optimization (SEO)
techniques In addition to stuffing keywords into your .html, Flash
sup-ports embedding metadata in the form of a title and description Search
en-gines now extract these two elements from a .swf In fact, users can already
search the contents of .swffiles by adding the text filetype:swfto the end
of their search, but this isn’t useful because it includes everything in the
.swf—not just keywords You should follow some standard guidelines for
what to put into the title and description Specifically, put a clear and
con-cise name into the title and a detailed overview into the description
Add Metadata for Search Engine Optimization
TRY IT YOURSELF ▼
In this task, you embed both keywords into the .htmland metadata into
the.swfitself Follow these steps:
1 Create a new movie, and place the text click meonstage With the
text selected, open the Properties panel, and make sure the text is
set to Static Also, fill in the URL link field with a URL of your choice,
say http://www.informit.com Save the .flain a known location
2 Select File, Publish Settings, and click the Formats tab Select the
check boxes next to Flash and HTML From the HTML tab, ensure the
Detect Flash Version is not selected because the additional script this
option adds makes it harder to edit the .htmlfile You can still add
metadata when detecting the Flash version
Trang 4At this point, you can upload your files and then sit back and wait for theworld to beat a path to your site You’ve done what you can with Flash: in-jected comments into the .htmland metadata into the .swf
The XMP Panel
Before we leave behind the concept of metadata, there’s a type of metadatanew to the CS4 version of Flash you can put in your .flafiles: Extensible Metadata Platform (XMP) metadata It stores information such as title, au-
thor, description, copyright, and more in your .flafiles and is used bysome Adobe products For example, if you add XMP information to yourFlash file, you are able to see that information with the Adobe Bridge pro-gram More importantly, you are able to use Bridge to search through your.flafiles to find specific information
No-<!—url’s used in the movie—>
<!—text used in the movie—>
4 Flash inser ts another comment right after this that includes, in HTMLformat, the click metext and the corresponding link Provided thesearch engine looks at comments, it digests this as if the text and linkwere regular HTML and not hidden inside the .swf You’re welcome tomodify or add to these comments Remember each comment needs tobegin with <!—and end with —>
5 Because some search engines don’t bother reading and then indexingyour comments, you need to go a step fur ther Return to your Flashfile, and select Modify, Document Fill in the Title field with My Best Animationand the Description with A riveting and entertaining Macromedia Flash animation created by Me Obviously, you canuse any text you want, but the main idea is you want a shor t title andcomplete description
6 Click OK in the Document Proper ties dialog, and select File, Publishagain You don’t notice anything new in the .htmlfile, but it effectivelyhas two new lines in the HEADsection It’s not really in the .htmlbutrather in the .swf, but if it were in the .htmlit would look like this:
<meta name=”title” content=”My Best Animation”>
<meta name=”description” content=”A riveting and entertaining ”>
Trang 5Adobe has made the XMP library available to software developers, so
proj-ects can be built that support the use of XMP data It’s important to know
how to add this data to your own files, so future software you use can take
advantage of the data you’ve already stored Let’s add some XMP
informa-tion to a .flafile, and then take a look at it in Adobe Bridge
Add XMP Data
to a Movie
TRY IT YOURSELF ▼
In this task, you will add XMP data to a movie and then view it in the
Adobe Bridge application
1 Create a new movie or open one you’ve already created We’re going
to add XMP data to it, so the contents aren’t impor tant for this
exer-cise
2 Choose File, File Info A dialog box opens Click on the Description
tag You see fields including Document Title, Author, Description, and
Rating
3 Enter data in some of the fields Give your movie a rating of 5 Stars as
well Click OK
4 Publish your movie, and save your .flafile Your data is now stored in
your.flaand encoded in the .swfyou created Now, we can look at it
in Adobe Bridge
5 Open the Adobe Bridge program if you have it Browse to the folder
that contains your .flaand.swffiles
6 Make sure Window, Metadata is checked Click on your new .swffile
You should see the data you added to the file
7 We don’t go into too much detail about the Adobe Bridge program, but
play around with the inter face, specifically the toolbar at the top right
and the Filters panel (select Window, Filters) to get an idea of how to
see those .swffiles containing specific metadata that need to be
fil-tered out
Choosing Which Version to Publish
Every time you create a Flash movie, you have to be aware of your
audi-ence Not only do you have to watch the file size, you also need to have an
idea of what the bulk of your audience uses to view the Internet Are you
designing a state of the art upscale hotel website? Or maybe you are
build-ing an application to be used in a public school where the available version
of Flash Player might be many versions behind the most recent
Trang 6There’s not much you can do talking to your client to get an idea of the ties of your audience To get the most recent statistics Adobe has collected onFlash Player adoption, you can visit the Adobe website at http://www
abili-adobe.com/products/player_census/flashplayer/version_penetration.html
But those graphs still don’t tell you all that much about your particular dience The best advice we can offer is to stick to the oldest version you canthat uses the features you have to have in your movie If you don’t need touse Flash Player 10 features to accomplish your goals, then don’t; stick to 9
au-or 8 au-or even earlier Be careful in choosing the features your movie uses soyou can publish it for as many older Flash Player versions as you reason-ably can
Deciding Which Media Types to Publish
Comparing the different media types available in the Publish Settings log box’s Formats tab is a case of comparing apples to oranges You can ex-port a JPG image or you can export a QuickTime movie The former is astatic image, and the latter is a digital video This encompasses quite arange of options, making a comparison difficult The only two media typescomparable to GIF are JPG and PNG because they are both static imagetypes Therefore, instead of comparing the media types, the following sec-tions cover each individually
dia-Publishing Flash ( .swf) Files
.swfis the format you are likely to choose every time It’s the reason you’rereading this book—to make scalable vector animations that play well overthe Internet If there’s one disadvantage to using this option, it would bethat a few potential users don’t have the required Flash Player
You find some interesting options in the Flash tab of the Publish Settings alog box, as shown in Figure 24.4
di- Load Order—Affects in what order the layers appear as the movie
downloads Bottom Up, for example, causes the lower layers to come visible first In reality, many users won’t notice a difference withdifferent load orders because they affect just the first frame and be-come apparent only on slow connections
Trang 7be-ptg Generate Size Report—This exports a text file that contains the same
information you learned when using the Bandwidth Profiler, as
dis-cussed in Hour 22, “Minimizing File Size.” Omitting Trace actions
doesn’t make any difference if you play the movie in a web browser
because Trace has no effect in a browser Using ActionScript, you can
send test messages to the output window when you test the movie
The output window appears while you’re authoring, so the Omit
Trace Actions option is more of an authoring preference than a
pub-lishing setting
Protect From Import—This option prevents others from importing
the.swffile into their own Flash files Keep in mind that the .swffile
you post on your website downloads to every user’s machine (for
ex-ample, in a folder such as Temporary Internet Files in the Windows
folder) The Protect From Import option has limited value First,
when someone imports a swf file, each frame is imported as a
sepa-rate keyframe No ActionScript is retained Second, just because some
users import your file doesn’t mean they’re allowed to use it Your
.swfis by no means hack-proof Sensitive data, such as passwords,
should never reside in a movie
Local Playback Security—This option applies only to .swffiles that
users download and run on their desktops, not .swffiles posted on a
website When publishing, you have to choose between enabling a
lo-cally run movie access to only the Internet or only local files but not
both This applies only to .swffiles the user runs in Flash Player 8 or
FIGURE 24.4
The Flash tab of the Publish tings dialog box contains all the ex- por t settings for the swf file you’re publishing.
Trang 8later Also, if you want to make an application that accesses both the
Internet and the user’s hard drive, you need to make a Projector, as
described in the section “Projectors” later in this hour
Compress Movie—This option is a no-brainer You should always
leave it checked This compression/decompression routine wasadded to Flash to reduce the size of .swffiles It has nothing to dowith the quality settings on your raster graphics or sounds, buteverything else, including your scripts, can be compressed The Com-press Movie option is available only when you publish as Flash 6 orlater because older Flash players can’t decompress these movies
The default compression for the raster graphics and audio can be globallyspecified in the Flash tab of the Publish Settings dialog box You can over-ride compression settings made for individual sounds if you check theOverride Sound Settings option
Finally, unlike most publishing settings, which are chosen as the last step,the choice of which version of Flash to export is one you should make early
in a project First of all, you can export Flash version 10, and your moviemight play fine in the Flash 9 player; however, any new, previously unsup-ported features fails to execute and leads to unpredictable results If you’renot taking advantage of any Flash 10–only features, your movie plays fine
If you change this setting to, say, Flash 5 and simply use Test Movie, yousee a report of any unsupported features you’ve included This feature isnice because it enables you to fix these problems However, better than fix-ing problems after they’re created, you can set the Flash Version option asthe first step in a project This way, as you build, all the unsupported ac-tions appear in yellow (refer to Figure 24.3)
Publishing HTML Files
Although the HTML tab of the Publish Settings dialog box has been cussed several times already, there’s additional information in it that youfind valuable (see Figure 24.5) Every setting in this tab (except for DeviceFonts) affects only the HTML file You can always open the HTML file in atext editor and make edits manually If nothing else, the Publish Settings di-alog box gives you a way to learn all the HTML settings that are available
dis-To learn them, all you need to do is look at the corresponding HTML filescreated
Trang 9ptgNormally, users can right-click (or Control+click on the Mac) your movie to
display a menu like the one shown in Figure 24.6 Only a minimized
ver-sion of this menu appears for users if you deselect Display Menu in the
Playback section of the HTML tab The menu isn’t actually removed; it’s
just shorter than usual Keep in mind the Debugger line appears only for
users who happen to have Flash installed
to the version on the right.
The Windows Mode setting applies only to movies viewed in Windows and
through Internet Explorer version 4 or later Although this applies to a large
audience, it is limited Also, the other settings in this drop-down list—
Opaque Windowless and Transparent Windowless—affect only HTML
pages that have elements in layers As if this weren’t enough, the
perform-ance drops for these options Feel free to explore these options, but we
rec-ommend leaving the default, Window
Trang 10Publishing GIF, JPG, and PNG Files
JPG and PNG are both static image formats GIF has a sister format called
animated GIF that is an animation format All three of these formats have
their own unique attributes GIF files always have 256 or fewer discrete ors and tend to be most appropriate for geometric images JPG is best forphotographic or continuous-tone images JPG can also withstand signifi-cant compression with acceptable quality loss PNG is a high-quality imageformat that enables additional types of information to be included For ex-ample, a PNG file created in Fireworks has additional options, such as lay-ers and shadow effects When you want to export the best-quality image,PNG is a good choice—just don’t expect a small file size
col-When it comes to web delivery, your decision for static images is primarilybetween JPG and GIF, despite some browsers supporting PNG The ques-tion about which static format to use arises only when you attempt to de-liver an alternative image to users who don’t have the Flash Player Theparty line these days is usually that the users need the Flash Player; other-wise, they can’t see the site
When you do want to provide an alternative to users who don’t have theFlash Player (as you did in the task “Address Users Without Flash”), youneed to decide between JPG and GIF This decision is based on the nature ofthe image Remember, it’s not the whole movie that’s used; it’s only oneframe of the movie that you get to use for such static formats Flash, by de-fault, uses the first frame of your movie for any static image format Themovie’s first frame, though, could be entirely black To specify a differentframe, you open the Frame panel and create a label in the chosen framecalled#static It’s best to insert a new layer and then a keyframe exactlywhere you want this label, as shown in Figure 24.7, but this is a relativelysimple way to tell Flash which frame to export
After you decide which frame to use, you can decide between GIF or JPG
Remember, photorealistic images are best in JPG format, and geometricshapes are best in GIF format
PNG might seem like a useless format because the files are large and somebrowsers don’t support them, but there is some value PNG is a great imageformat to import, as you saw in Hour 3, “Importing Graphics into Flash,”
but here we’re talking about exporting If you want to export the highestquality possible, you should use PNG There might be several reasons to dothis For instance, even though the options available for exporting a GIF filefrom Flash are extensive, previewing the effects of every slight change is a
Trang 11tedious process of trial and error You have to make a change, publish, and
then view the results Frankly, there are better tools for creating GIF and
JPG files Adobe Fireworks, for example, enables you to change all the
out-put options for a GIF file while watching the image quality change (see
Figure 24.8) This fact alone might make the extra steps you’re about to
learn worth the effort For the most control over the GIF file you’re creating,
first use Flash to export a 24-bit PNG file (The export options for PNG are
shown in Figure 24.9.) Then open that PNG file in another image-editing
tool, such as Fireworks, and export the GIF file You can still use Flash’s
Publish feature to create the GIF and HTML files, but you replace the GIF
file Flash creates with one you create using a more suitable tool
The choice between JPG and GIF might be moot if you want to supply
ani-mation to users who don’t have the Flash Player Only GIF has the
Ani-mated Playback option (see Figure 24.10) You have several options when
creating an animated GIF Most are self-explanatory However, you don’t
notice an option to specify the first and last frames Flash uses the first and
last frames of your movie To override this, label the frame you want to be
used first as #firstand the last frame as #last Also, you can enable Flash
to create the HTML image map to be used with your static or animated GIF
Flash creates that image map with all the clickable areas based on all the
buttons that happen to be onscreen in the last frame of your movie
How-ever, you might not have any buttons in the last frame Just as you can
specify which frame is used for static images, you can specify for which
frame you want the onscreen buttons to be used in the creation of the image
map Label the frame #map That’s it
FIGURE 24.7
Labeling a frame with #static tells Flash you want this frame in- stead of Frame 1 to be used when publishing a static image.
Trang 12Projectors
If you put your .swffile in a web page, users just need the Flash Player toview it When you installed Flash, it installed the Flash Player, so you cansimply double-click any .swffile on your computer, and it runs If you
FIGURE 24.8
Fireworks is a much better tool
than Flash for creating static
graph-ics such as JPGs.
FIGURE 24.9
Expor ting a PNG file gives you the
best-quality static image.
Trang 13want to send this file to someone (that is, you don’t want to publish it in a
web page), you can The only catch is the user has to have the Flash Player
installed
Alternatively, you can create a projector, which is a standalone executable
Think of a projector as a modified version of the Flash Player that plays
only the .swffile you specify One way to make a standalone projector is to
open a .swffile with the Flash Player (just double-click a .swffile on your
computer) Select File, Create a Projector, and then name the file you would
like to create That’s all there is to it One catch is that your .swffile grows
by nearly 3MB when you convert it to a projector That’s the size of the
Flash Player, which you’re including in the projector The other catch is that
the projector you just made runs only on the platform you’re using
(Win-dows or Mac) .swffiles work on any platform because the user already
has the Flash Player unique to that platform installed Because projectors
have the platform-specific player built in, they can be played only on that
platform
To create a projector for whichever platform you’re not using—Windows or
Mac—you could repeat the steps listed on a computer using the target
plat-form However, you don’t have to do this From the Formats tab of the
Pub-lish Settings dialog box, you can specify for which platforms you want the
projector made (see Figure 24.11) The projector file that Flash creates can be
sent to whomever you want
FIGURE 24.10
Of all the traditionally static image formats, only GIF provides the Ani- mated option.
Trang 14ptgProjectors provide a nice way to use Flash for standalone applications For
example, you might be making a presentation to an audience and want touse Flash to create the slides Obviously, you can add a lot of spice to yourpresentations The action fscommandis designed for this purpose The pa-rameters for fscommandincludefullscreen,quit, and many others For ex-ample, you can put the action fscommand(“fullscreen”, “true”) in the firstframe to make your projector fill the screen Then, in the last frame, you canplace a button with the action fscommand(“quit”) as a way to exit
Although it is more difficult to distribute projectors than to simply post to awebsite, projectors work great for presentations Many people create port-folios of their work that they distribute via CD-ROM For example, they caninclude lots of uncompressed audio and high-quality images, and there are
no download issues But, if you use the fullscreenoption of fscommand,you need to give your users an obvious Quit button, too
QuickTime
You can export a QuickTime video that includes Flash Don’t confuse thiswith how you imported QuickTime video in Hour 19 There you exported a.swfthat just happened to include video The Publish Settings QuickTimeoption enables you to create a QuickTime video that requires the Quick-Time player
FIGURE 24.11
Standalone projectors can be
ex-por ted when you publish for both
Windows and Mac.
NOTE
Better Projectors
If you’re using a lot of projectors
or just want some added
fea-tures, a few other options
in-clude several third-par ty “.swf
to.exe” tools Here’s a list of a
Finally, coming soon from
Adobe, a desktop
application-creation tool codenamed Apollo
gives you another projector
op-tion
Trang 15Although it’s kind of cool how you can add a Flash layer including
interac-tivity to a QuickTime video, the fact is Flash video has improved so much
that there’s little reason to do so In addition, you’re limited to the feature
set of Flash 5 or earlier
Exporting Other Media Types
Believe it or not, Flash can export even more media types than those listed
in the Publish Settings dialog box Select File, Export, Export Movie, and
you see a list under the Save as Type drop-down list that’s quite long (see
Figure 24.12) In addition to the formats listed in the Publish Settings dialog
box, you might see others that interest you The following sections cover
two formats you might find particularly useful: AVI and image sequences
Publishing AVI Files
AVI is another digital video format It’s available only by selecting File,
Export, Export Movie, and then choosing AVI from the Save as Type
drop-down list in the Export Movie dialog box Because it’s similar to the limits
of QuickTime, you should avoid AVI In fact, with so many limits when
ex-porting AVIs, you often get better results simply doing a screen capture
while your .swfplays TechSmith’s Camtasia software works great for this
(www.camtasia.com)
Publishing Image Sequences
Image Sequences is another option that is available only in the Export
Movie dialog box A bitmap sequence, for example, exports a static BMP
file of each frame in your movie Several sequence formats are available
(re-fer to Figure 24.12) They’re all basically the same; only the file format
FIGURE 24.12
All the formats Flash can expor t cluding those found in the Publish Settings dialog box) are listed in the Expor t Movie dialog box.