Recall from Hour 19 that publishing is as easy as selecting File, Publish. In practice, however, you'll want to first save your files in a known folder and then step through all the publishing settings before finally publishing. The following task steps you through a scenario using Publish.
Try It Yourself: Set Up the Publish Settings and Then Publish a Movie
This task walks you through using the Publish Settings dialog box. Here are the steps to follow:
Either open a movie you've created in the past or create a simple animation. Make sure there's some visual change; for example, a movie clip might tween across the screen.
Select File, Save As and save this file in a new folder that contains no other files.
Select File, Publish Settings. The Publish Settings dialog box appears. Note that any changes you make in the Publish Settings dialog box will only be saved with this file. However, you can save your settings as a profile that becomes available to other files.
Select the Formats tab of the Publish Settings dialog box so you can specify which formats will be exported. For every format you select, an additional tab will appear (see Figure 24.1). The options in this dialog box will be covered in depth later this hour. For now, select Flash, and HTML. Notice that each file has the same name as your source file (with a different extension). You can override this setting, but leaving it is probably easiest you can always rename files on your hard drive before you upload them. (Clicking Use Default Names restores any changes you make to the filenames.)
Figure 24.1. The Formats tab of the Publish Settings dialog box allows you to specify which file formats you plan to export.
Click the Flash tab and take a quick look at the Version option. Determining which setting to choose for this option is subjective. For this task, suppose you want your movie to work for users who have the Flash Player 6 plug-in or later. Change the Version drop-down list's setting to Flash Player 6. Also, for the sake of demonstration, select Optimize for Flash Player 6 r65. The completed Flash tab is shown in Figure 24.2.
Figure 24.2. You can ensure that your movie will work with older versions of the Flash Player by changing the Version setting in the Flash tab.
By the Way: Using User Interface Components
If you're using any of the user interface components (also known as V2 components), it's easiest to publish using Flash version 7 or greater. It turns out, you can also make these components work in Flash Player 6, but only revision 65 or later. In any event, you'll also have to select the option ActionScript version 2.0.
Click the HTML tab. Here you can make some adjustments to the HTML that Flash will create. From the Template drop-down list, select Flash Only. Next, select the Detect Flash Version check box. The Major version is fixed at 6 (to match what you set in the Flash tab). However, you can edit the next two fields to read 0 and 65, respectively. The HTML generated when you publish will have additional code to ensure visitors have at least the Flash Player 6,0,65. (In the next task, I'll show you how you can control what happens to those visitors who don't meet this requirement.)
Set the Dimensions option to Percent and then type 100 in both the Width and Height fields so the movie will entirely fill the browser window. You can come back later and make changes to any of these settings. For now, just make sure the check boxes Loop and Display Menu are unchecked. (Unchecking Display Menu prevents users from seeing the extended options when right-clicking your movie.)
When you've gone through both tabs (for the two formats you selected), click OK. The publish settings are saved. Save your Flash file now, too. Select File, Publish. It might not seem like anything happens, but a .swf and the corresponding .html file are exported into the folder where the source file resides. Go into that folder and double-click the HTML file that matches your movie's name.
By the Way: Using Off-Limits Features
If you are using a Flash Player 8 only feature such as Filters or Blends and you set the Publish settings to target an earlier version of the Player, those features will be turned off and grayed out. So many new features are added with each Flash Player update that sometimes you won't see that you're using an off-limit feature until you publish. For example, Flash Player 1 doesn't even support movie clips. At the time you publish, a warning dialog appears and the Output window contains complete details of the problem. In addition, all the off-limit features of the ActionScript language are highlighted in yellow, as shown in Figure 24.3.
Figure 24.3. When you specify an older version of Flash for export, all the unavailable actions for that version are highlighted yellow.
Compared to using Test Movie, the preceding task was a lot of work. Realize, though, that when using the method described in this task, you get to step through each detail and decide how it should be published. By the way, selecting File, Publish Preview (or pressing F12) is the same as using File, Publish, except that immediately following the export process your default browser is launched with the HTML file.
The preceding task walked you through each tab of the Publish Settings dialog box, and you made changes as you went. This is the typical approach. Although you might not choose exactly the same settings in real life as you did in the task, the process is the same. After a few more details about this particular task, you'll take a look at the rest of the options later this hour. The point is that this was just an exercise. The options chosen are not necessarily the ones you'll always want to use.
By the Way: Testing All Player Versions
In order to see what users with older Flash Player versions will experience, you need to uninstall the Flash Player. Macromedia has a Flash Player Uninstaller (at www.macromedia.com/shockwave/download/alternates/) plus a Tenchnote that links to an archive of the older Flash Player versions that you can install (just type tn_14266 into the search field at www.macromedia.com).
Ensuring Users Have the Flash Player
In the preceding task, you selected Detect Flash Version to require version 6 r65 (6,0,65). What happens to those users who don't have the required Flash Player or have an older Flash Player? Obviously, they won't see your content until they install the latest player, but you can control the exact sequence of events they experience.
Here's a detailed overview of possible scenarios:
Rely on the browser's auto-install features Even if you do not select Detect Flash Version from the Publish Setting's HTML tab, the generated HTML will still indicate the version you selected from the Flash tab. Normally, that's 8,0,0,0 or 7,0,0,0 or 6,0,0,0 but there's also the special case of 6,0,65,0 when you say Optimize for Flash 6 r65. In any event, this version number appears in the HTML and, by itself, means the browser will handle upgrading the user. Depending on the browser, the user will usually see one or a combination of the following: the Flash Player automatically downloads and then is installed after the user approves a security dialog box; a missing plug-in button appears that helps the user select and install the Flash player; or a box the size of your Flash movie appears but not the Flash movie (because the user doesn't have the player). Although this is not the most seamless experience, it works pretty well on most modern browsers.
Use a script in the HTML to gracefully send users to alternative content This relates to selecting the Detect Flash Version option (from the HTML tab in the Publish Settings dialog box). Basically, if the users don't have the correct Flash Player (or if the script can't detect it), the users see different content. By default, the published HTML says something generic like Alternate Content, please click here to upgrade. However, in the next task, you'll learn how to replace this with a custom message. Some custom script-sensing approaches go a step further by beginning with an all-script page and then redirecting users to another HTML page either one with Flash content or one with alternative content (such as an upgrade prompt). Check out Macromedia's Flash Detection Kit at www.macromedia.com/go/fp_detectionkit.
Use Flash to attempt to detect the Flash version This approach requires that the user has some version of Flash. Using ActionScript, there are several ways to see the user's exact Flash version. Unfortunately, it gets complicated when you consider there are different ActionScript approaches for different versions of Flash. Plus, the entire approach depends on users having at least a version of Flash. I recommend using Flash itself to detect which version the user has only as a last resort and only for checking the revision number, not the major version. For example, if you're using an esoteric feature that's supported only in version 6,0,79 (such as masking device fonts), use a different approach to check that users have Flash to begin with; then use Flash to see whether they lack the exact revision (in which case jump to a frame where you warn the user that certain features are turned off or you recommend they upgrade).
Unfortunately, all these approaches have their limits. Several security settings and user preferences wreck havoc on these technologies. For the definitive word on this subject please download and read the recently updated "Flash Detection Kit" (listed above) which goes into much more detail on all of these approaches. The kit also discusses future technologies that will make the process even easier for versions after Flash 8.
Personally, unless my client wants to use a custom script (such as one in Macromedia's Flash Detection Kit), my preference is to simply rely on the browser's auto-install features. It works for a large majority of users, most people already have Flash, and the new versions get adopted quickly (you can find statistics at www.macromedia.com/software/player_census/flashplayer). My attitude is based on the idea that I don't want to spend 90% of my time attempting to accommodate 1% of the audience. (Granted, I made up those numbers and I often don't have the same stake in a project as my clients do.) Ultimately, you can always place a link underneath the Flash content that says, "If you can't see this, click here to install Flash." That's a surefire approach, albeit a bit clunky.
The next task shows you how to edit the alternative content produced when you selected Detect Flash Version in step 6 in the task "Set Up the Publish Settings and Then Publish a Movie."
Try It Yourself: Address Users Without Flash
In this task, you'll display alternative information (basically a prompt to upgrade) for users who lack the required Flash version. Follow these steps:
First, you can simulate what users who lack Flash Player 6,0,65,0 will experience by editing the .html file produced in the previous task. Launch a text editor such as Notepad and then open the .html file. On line 11 you should find the following script:
var requiredMajorVersion = 6;
Change the 6 to a 9, meaning you'll need Flash Player 9 (which isn't out at the time of this writing).
Save the .html file and then double-click it again to launch your browser. You should see a generic message and a link labeled Get Flash. You can edit this message, as I'll show in the next step.
var alternateContent = 'We detected you need ' + ' Macromedia Flash Player.' + '<A HREF=http://www.macromedia.com/go/getflash/>Click here to download</A>';
If you know HTML, you could get fancier and include a graphic or really anything you want.
Completely replace lines 153 and 154 with the following code:
We detected you need Macromedia Flash Player. <A HREF="http://www.macromedia.com/go/getflash/">Click here to download</A>
Save the .html file and launch it one more time to test it. Finally and this is important be sure to go back and reset the requiredMajorVersion variable to 6 (like it was before step 1).
Granted, the changes made in this task were pretty minor. But now you know where you can make edits to the published .html file. There's one last point about using this scripted solution: It supercedes the browser's auto-install features. For example, say the user has a browser that can unobtrusively install Flash. If this user has no Flash installed or only Flash Player 5, she'll still see the previously mentioned alternative content. Then, after visiting Macromedia's site to install Flash, she'll have 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 content) but requires that the user take more steps. I should mention that some other scripted solutions (such as the Flash Detection Kit, mentioned earlier) automatically redirect the user, which makes it hard for her to use her back button to return to an earlier site she visited. I guess the bottom line is that each approach has its own limits.
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.
Try It Yourself: Customize a Template
In this task you'll improve on one of the built-in templates by removing the natural padding around your Flash movie. Follow these steps:
Find the First Run folder adjacent to your installed copy of Flash 8 (in a subfolder called en, for English). Inside the HTML folder you'll find the templates used by the Publish Settings dialog box. The default location in Windows is C:\Program Files\Macromedia\Flash 8\en\First Run\HTML. (The en is for English; your installation might use a different two-letter language code, such as es for Espanol.)
Start 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.
Select File, Publish Settings and choose both HTML and Flash. From the HTML tab, select the template Flash Only. (Leave Detect Flash Version unchecked.) Click OK.
Press F12 to use Publish Preview. Notice that the square doesn't actually reach the left edge of your browser.
Close the browser. Save the movie and then close Flash. Find the file called Default.html inside the HTML configuration folder (identified in step 1) and copy and paste it.
Rename the copied file myDefault.html and then open it in a text editor such as Notepad.
Change the very first line from this:
$TTFlash Only (Default)
This changes the template name to No Padding. You can name it whatever you want; just be sure to retain the first three characters, $TT, when you do the renaming.
Change the part in the 12th line from this:
<body bgcolor="$BG" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
This changes all the margins to 0 pixels wide.
Save and close this file. Restart Flash and open the movie you created earlier in this task.
Select File, Publish Settings. From the Template drop-down list on the HTML tab select the template you just created: No Padding. Click OK.
Press F12, and you should see a preview this time, with no padding around the movie.
You can make more significant changes to the templates than shown in the preceding task. In addition, there are many other places where Flash allows customization to the Actions panel and pre-installed templates through the First Run configuration folder. It's worth snooping through and reading the help files on this topic.