Explore the Flash Player

So far our Acme Interactive Web site has vector animation, an interactive navigation bar, a digital music soundtrack, scrolling text, and dynamically loaded digital video. In this lesson, we'll add two more advanced user functions. First we'll give our users the ability to mute the Web site's sound. Then we'll give Acme Interactive client users a private, password-protected Projects section where they see and approve the work being done for them. Before we begin work on these functions, though, let's learn a little more about the Flash Player and how it works.

Macromedia Flash Player is the browser plug-in that enables Web users across multiple platforms to view and interact with Web sites developed in Flash. According to Macromedia.com, as of July, 2003 there are more than 516 million online users who have the Flash Player installed and can immediately (without downloading) view Flash content.

The Macromedia Flash Player is preinstalled in most Web browsers and on most computers, including Windows 98, Windows XP, Netscape Navigator, Apple Macintosh, America Online, and WebTV, among others.

The important point to note is that no matter what operating system, browser, or browser version is being used, everyone who has the Flash Player installed can view and interact with your Web site exactly the way you originally intended them to. In this regard, Flash Web sites have a huge advantage over regular HTML and JavaScript sites, as well as Web sites that incorporate other technologies that are operating system and browser specific (such as Java applets or Active X controls).

Once installed, the Flash Player can play back movies in a browser or as a standalone application. And, luckily for us, Flash developers can use the Flash Player to store and retrieve information on a user's hard drive, just like browser cookies written in other Web technologies. To do this in Flash, we'll use Flash MX's new ActionScript Shared Object.

Create the Shared Object

In previous lessons, you learned that ActionScript is an object-oriented scripting language, and you manipulated objects such as MovieClips, buttons, and sound by writing scripts that affect an object's methods, behaviors, and properties. The local Shared Object (SO for short) is an ActionScript object that can be created to store user data locally that is, on the user's own disk, instead of on a server) via the Flash Player already installed on the user's system. You'll obtain the user's permission to do this and set the size of the data object you want to store. After the SO is created on the user's system, you'll retrieve the data you store there and use it in your Flash movie.

Shared Objects cannot remember a user's e-mail address or any other personal user information unless the user willingly provides this information by, for example, typing it into an input text field in a Flash movie. It's important to note that SO's can only be retrieved by Flash SWFs originating from the same domain that created the SO. That means if our Acme Interactive Web site creates an SO on a user's system, only movies from our Acme Interactive site can read and retrieve any info in that SO. Another Flash Web site can't read SO information written elsewhere.

Before you create your SO, let's make a mute button for our Web site's background music by scripting to the music Sound object you created in Lesson 3.

There's a lot of work for you to do, so jump right in to Assignment 1, "Create a Mute Button for Sound," and when you've finished that, move on to Assignment 2, "Create a Password-Protected Section," for which you'll create an SO. Then come back here to finish this lesson.

Publish your movie

You've tested and played back your movie using Test Movie (Command+Return or Ctrl+Enter), but you haven't finished publishing your movie for Web playback, specifically, in a browser and in HTML -- and for playback on the Web, your users will need both.

Your Flash movie -- and now we're talking about your SWF file, not the FLA authoring document -- must be embedded in an HTML file for browser playback. (This is not to say that every SWF must be played back in a browser, because you already know you can play a SWF back locally on your own system, without a browser or the Internet -- you do this every time you do a Test Movie. But on the Internet, you'll need to embed your document in HTML.) Don't worry, there's not a lot of ActionScripting involved on your part. All you have to do is make a few choices in the Publishing settings, and Flash does the rest for you.

decide on Publish Settings

Choose File > Publish Settings to access the Publish Settings dialog box, shown in Figure 6-1. By default, you should see the Formats, Flash, and HTML tabs, with Formats up front. Your publishing choices are listed under the Formats tab, along with their file suffix extensions, and a text field for the filename:

Figure 6-1: The Publish Settings dialog box.

On the Format window, the small checkbox at the bottom of the filename fields enables you to simply save the your published movie as the default name you've already given your FLA file, with the appropriate extension. Uncheck this, and you can name each format whatever you like.

Use HTML templates

When you elect to publish your movie in HTML, you gain access to the Publish Settings for HTML, as shown in Figure 6-2. The Template drop-down menu lists all the available templates, and the Info button right next to it provides a description of the selected template.

Figure 6-2: The HTML tab of the Publish Settings dialog box.

The Dimensions menu is important because it sets the Width and Height dimensions in your HTML tags. You can choose Match Movie to keep the size of the Stage the same as the move. If you choose Pixels, you can type new numbers in the Width and Height fields. Choose Percentage to enter a percentage ratio in the Width and Height fields (100% x 100% scales to the full size of the browser window; however, 90% works well in a variety of screen resolutions.)

The Playback options are just what they appear to be: Paused At Start pauses your movie until a user clicks something, Loop loops playback to the first frame after your movie ends, Display Menu shows the built-in minimenu from the Flash Player, and Device Font (Windows only) displays a better font image for static text in your movie in a font not loaded on the user's system.

The Quality drop-down menu lists settings that balance playback speed with image quality. As long as you don't have a lot of bitmaps and fonts, Best offers the nicest quality for Web playback.

The Window Mode menu lists various options for Windows OS/Internet Explorer, and DHTML (Dynamic HTML). For the fastest animation playback and in the interest of cross-browser and OS (operating system) compatibility, choose Window.

HTML Alignment, the next menu, can be a tricky thing. You're better off choosing Default to center your movie; Left, Right, Top, and Bottom crop off the opposite end of your movie in a smaller browser window.

The Scale menu options can also be tricky, because scaling can distort your movie's aspect ration (that is, squeeze it and distort it). Depending on your movie and its content, you may want to play around with these settings. For a typical Flash Web site, Default (Show All) is your best bet.

After your Flash movie and your HTML template are published, you can go back into your HTML and customize it as you like. If you want to simply play a Flash Web site centered in a browser window, it's best to place your Flash movie in a simple HTML table with nine cells, and place your Flash movie in the center cell.

TIP

The GIF, JPG, PNG, and QuickTime tabs all have lots of format-specific options. Have fun and play around with all the settings if you have a need to publish your Flash movie in one of these formats.

Optimise 

Don't forget to individually optimize your JPGs, bitmaps, and audio files in the Library using the Properties panel, as you learned in Lesson 3. However, you can also batch optimize these files when Publishing your movie in the Flash tab of Publishing. Before you do that, though, let's talk about the other options in the Flash section of publishing.

The Version menu on the Flash tab of the Publish Settings dialog box, shown in Figure 6-3, allows you to take advantage of all of the innovations in Flash MX with Flash Player 6, or to retroactively publish an older version -- but you'll lose newer features such as Components.

Figure 6-3: The Flash tab of the Publish Settings dialog box.

For Load Order, you have two choices: Bottom up or Top down. Keep this in mind when you're authoring your movies, because if you have sound files or many bitmaps, you may want to load them last, while the navigation or other key elements load first.

Under the Options checkboxes, always choose Compress Movie (for Flash Player 6 only) and Protect from Import, so no one can capture your SWF, open it as a FLA file, and reuse your work. Generate size report helpfully creates a text file that breaks down your movie's file size frame by frame and object by object, to help you see where you may need to go back and optimize something. Omit Trace actions strips out those Trace actions we learned to use in the last lesson, and Debugging Permitted and the Password field will keep unauthorized users from applying the Debugger, a feature that is essential when building complicated Flash files and applications.

The JPEG Quality slider lets you set a default compression for all the bitmaps in your movie. If you've already compressed your bitmaps in a program like ImageReady before you imported them into Flash, and individually set each bitmap's compression in the Library (see Lesson 3), then you can leave the JPEG Quality slider setting at 80 and you should be fine. Again, play around with it to get your best individual results.

The same thing applies to Audio files. Compressing them individually in the Symbols Properties settings provides better results. However, you can compress all your sounds, event and streaming, by clicking the Override sound settings and playing with the settings there as well. Just be sure to test your movie's settings before you upload to a Web site -- sometimes if you compress a sound too much, you can make it unusable.

Moving On

Ready to try publishing on your own? Go on to Assignment 3, " Publish a Finished Animation." When you've finished that and the quiz, you've completed this course. Congratulations!

Assignment: Create a mute button for sound

Open the Flash file you saved in Lesson 5, or download and open the Flash file FlashMX05.fla.

Let's first organize the files in your Library by using folders. This will make it easier for you to find and reuse your symbols in this movie, and help you locate symbols for reuse in any future movies using the File > Open as Library feature. Add three new folders by clicking the New Folder icon in the Library, and name them buttons, MCs, and sounds. Drag and drop all the files to the appropriate folders.

Now that you're organized, you can create your mute button. Here's what to do:

1. Create a button and name it mute. In the Up, Over, and Down states, type the word music and assign the text a different color in each frame. Make sure that the text in the Up frame is a dark color, such as black. (For a review of creating buttons, see Lesson 3, "Symbols, Sounds, and Instances.")
   
2. Jump back to the Stage (Command+E or Ctrl+E) and click in the keyframe (frame 2) of the sound layer. Make sure the sound layer isn't locked. Drag and drop your mute button from the Library and position it where you want it on the Stage.
   
3. With the button still selected on the Stage, click in the Properties panel, and name the button's instance mute_btn. Click away from the button to deselect it.
   
4. Back on the sound layer, click in the keyframe on frame 2. Open the Actions panel if it's not already open (F9). Click the View Options button, switch to Expert Mode, and make sure View Line Numbers is checked. The script should still read:

5. Add a new line for line 3 (put your cursor at the end of the code in Line 2 and press Return or Enter) and type the following to set the volume of our sound object to 10, a nice low background volume:

6. Add a new line (line 5) and type the following:

You want the button symbol instance mute_btn to do something after the user clicks it (for example, onRelease). When you want a symbol to perform an action, write a function. In ActionScript, a function is a set of statements that you define to perform a certain task. The syntax of a function always includes parenthesis where you can include parameters -- function() -- and statements, which are always listed within open and close curly brackets ({}). Each statement line always ends with a semicolon (;).

7. Finish writing the function for the mute button by typing the following, starting in line 6:

8. Save and test your movie. You should now be able to click your music button and toggle the sound on and off.

The following explains what you wrote in Step 7:

Go on to Assignment 2, "Create a Password-Protected Section," before heading back to the rest of Lesson 6.

Assignment: Create a password-protected section

Now that you've got your mute button working, let's create a clients-only Projects password-protected section on our Acme Interactive Web site. First, let's prioritize the steps you need to take. If you plan it out before you start, everything, especially our scripting, will go a lot easier. Here's what you want to do:

1. Create a Projects section in your Web site.
2. Create a log-in screen with username and password input fields, and a Log In button.
3. Create a SO (Shared Object) on the users' machines to store and retrieve their usernames and passwords (so they only have to log in once per session).
4. Script the username, password, and log in buttons to gather and store the SO data.

Create the Projects Section

First, you create the Projects section. Open the last saved version of your Flash movie and follow these steps:

1. Create a keyframe in frame 50 of the actions layer, and name it projects. Copy the attachMovie script from the other sections to place the logo file (see Lesson 5, "Movie Clips, Components, and Digital Video"). Then add a keyframe with a stop action in frame 60.
   
2. Create a button label called Projects, duplicate another arrow button, and script it to the projects frame label. (For details, see Lesson 3.) You may need to resize your background navigation bar to accommodate the additional button.
   
3. Create a new layer called log in and add a keyframe in the first frame of the Projects section. Keep the keyframe selected and click back on the Stage.
   
4. To create the username text field, choose the Text tool, and pick Input Text in the Text Property panel. Choose Single Line from the Line Type pop-up, and name the instance uname_txt. Pick Arial, black, 12 points as the font, and click the Show Border Around Text button. In the Maximum Characters allowed box, type 10.
5. To create the password text field, click the username text field on the Stage and duplicate it (Command+D or Ctrl+D). Move the duplicate down and line up its left edge with the original. Keep the duplicate selected.
   
6. In the Property panel, rename the duplicate instance pword_txt, and choose Password from the Line type pop-up menu.
   
7. Open the Components panel (Command+F7 or Ctrl+F7) and drag down an instance of the Push Button component. Drop it on the Stage under your password input text field. Keep the button selected.
   
8. In the Property panel, give the push button an instance name of login_btn and in the Label field, type LOG IN.
9. Add some static text labels for the fields (Username and Password) and let's also provide the users with instructions, such as Please enter your Username and Password.) Line everything up so that it's very clear to the users which field is which, and then put a colored rectangle background around the area to make it stand out like you did with the navigation bar.
   
10. Add a stop action to the projects keyframe in the actions layer. Your script should now look like this:

11. In the login layer, add a blank keyframe in the next frame, frame 51.

Basically, you're stopping the movie at the log-in screen, and after the users log in, the log-in screen is removed to clear the way on the Stage for the clients to view their project files. Now create the SO, and then you'll script our input text fields and log-in button.

create the shared object

First you need to verify whether the client's system can store SOs. You'll write a function to do that.

1. Click your projects keyframe in the actions layer. Make sure you're in Expert Mode. Add a line below the stop action on line 4, and type the following:

2. Write the rest of the script. Type exactly:

Let's deconstruct this script to understand it: function checkSO(){ sets up a function statement called checkSO:

The trace action behaves somewhat like the alert function in JavaScript. Traces are only seen in the Test Movie environment, not by the end user on your Web site; they're handy for recording programming notes or displaying messages in the Output window when you're testing your movie's scripts. When you place a message in the expression parameter () in quotations, you can write yourself a message to check if a condition exists, or to display values in the Output window.

So now that you've written a SO and tested to see if it works, you're ready to write a username and password SO.

write username and password shared objects

This time comments are in the script so you can easily see what's happening. Your script on the actions layer, projects keyframe should now look like this:

1. Make sure you're in Expert Mode, add a new line below the end curly bracket (the end of the function checkSO script), and type exactly the following, including all the comments that start with the double forward slashes (//):

2. Save you movie, and test it (Command+Return or Ctrl+Enter). Make sure to click to the Projects section and type in a username and password. Acme Interactive supplies their clients with a username of aiclient and a password of aipassword, all lowercase. Type those words into the appropriate fields, and click the Log In button.
   
3. Click back to the start of the movie (click the Acme Interactive button) and click back to the Projects section. Note that the Output window displays the last entered username and password values the SO stored and retrieved from your hard drive. Go back and forth like this and enter different names and passwords each time to see how the SO works.

write a validation script

Now let's write a quick script that verifies the appropriate username and password values were entered. If they were entered, the clients won't have to type them in again; they'll automatically jump to the Project site. This will happen each time they access the site, unless you delete the SO on their system with a simple line of script.

1. In the log in layer, click in the blank keyframe after our log-in screen (frame 51). Place an object or some text on the Stage to indicate we've passed the log in screen. (This is where clients would review the work Acme is doing on for them.)
   
2. Click back in the projects keyframe of the action layer where we have all of our scripts. In the Actions panel in Expert Mode, insert a new line where the stop action on line 3 is, deleting the stop action, and copy and paste or drag and drop the following code from farther down the script to line 3:

You needed to have the SO script firing earlier, before you verify whether the user is already logged in.

3. Now type the following after adding a new line:

You should be able to read this script and understand it by now, but we introduced a few new characters, so let's deconstruct:

You've done a lot of work in our last lesson's first two assignments, but you've learned a lot, too. Go back to finish the lesson now, and then the final assignment and quiz.

Assignment: Publish a finished animation

Let's Publish your movie in the most commonly used file formats and play it back in a browser.

1. Open the last saved version of your movie, or download and open the Flash file FlashMX06a.fla, and save it as FlashMX06b.fla.
2. Choose File > Publish Settings.
3. In the Publish Settings dialog box, check Flash, HTML, Windows Projector (.exe), Macintosh Projector, and Use default names.
4. On the Flash tab, choose Flash Player 6, and Top down. Under Options, check Protect from import and Compress Movie.
5. For your JPEG Quality, choose 80; for Audio, choose MP3; for Stream, choose 20 kpbs stereo; and for Event, choose MP3, 16 kpbs, and Mono.
6. On the HTML tab: for Template, choose Flash Only; for Dimensions, choose Percent; and type 90% for both Width and Height.
   
7. For Playback, your choices are Paused At Start, Loop, Display Menu, and Device Font. Let's just check Display Menu, for the following reasons: Unless you're using any embedded fonts, you don't need Device Font. (Whatever font you chose for the animated Logo we broke apart into a shape, and we chose Arial for our scrolling text, which is a Windows system font, anyway. Remember, Device Font is only needed on Windows.) And, you've already scripted the movie to play how you want it to, so you don't need to check Loop or Paused At Start.
   
8. For Quality, choose Best, Window Mode, Window. Choose Default for both HTML Alignment and Scale. For Flash Alignment, choose Center and Center.
9. You don't need to do anything else for the Projector files but name them. Flash does the rest.
   
10. Click the Publish button, watch the Progress bar animation for a few seconds until it goes away, and then click OK.
11. Quit the Flash authoring environment (the application) and click OK to save your changes.
    
12. Open your HTML document in Internet Explorer, Netscape Navigator, or any and all browsers with which you think your users might be accessing your Web site. Note the only thing in your Flash movie that isn't identical in all browsers is the text in the scrolling text box. That's because the browser handles any text that's not embedded in a Flash movie, just like it does in HTML.
    
13. If you want, you can open the Flash HTML template in any HTML editor or as a plain text file and for greater layout precision, position your SWF movie in a table. You can also add a link back Macromedia for users who do not have the Player installed (there's a button for this on the Macromedia Web site, complete with URL) or do anything else you want with your HTML. Just make sure you don't change the Embed and Object tags and parameters that Flash wrote for you, or you may need to go back and export your HTML again. Later, when you become better at publishing movies, you can change these parameters in just the HTML tags and you won't have to export your SWF again.
    
14. Test the stand alone for your OS and distribute to other OSs to check your stand-alone playback as well.

Now that you know how to take advantage of so many of Flash MX's new features, don't be afraid to try all of the components, download new ones at the Macromedia DevNet, and build rich user interfaces for your Web sites or applications. And don't worry about learning ActionScript -- the more you use it, the easier it is to understand and use. The learning time you spend now is well worth it, because you can be sure that Flash will continue to play an important role in Graphical User Interface design and Web design for years to come.

To finish this course, take the quiz to check what you've learned.

Quiz