Week 14 Topics

Chapter 16 - Publishing and Exporting

Exercise 1 - Macromedia Flash MX and HTML (using publish.fla)

Open the file and choose Control>Test Movie. Notice the title publish at the top of the movie and that a .swf file is created in the same folder as the .fla file. Choose File>Publish Preview<Default - HTML which triggers the Publish Preview command which launches the default browser displaying the .html file which references the .swf file. The html file is also in the same folder as the .fla file. All 3 files have, by default, the same name, differing only by extension. Publish Preview is a more accurate indication of how your movie will look and sound than Control>Test Movie.
Choose File>Publish Settings>Formats (the default tab). Notice that all of the filenames will utilize publish because the "Use default names" box is checked. If you uncheck the box, you can specify the filenames you want - choose movie.swf and webPage.html and click the Publish button. These new files will be created.
In the Publish Settings dialog box, click on the Flash tab. For Load Order, choose Top Down. This will load your layers from the top down and if you put your actions in the top layer, this will mean your actions always load first in the Flash Player.
Place a check next to "Generate Size Report" and then click Publish. Open the folder containing the .fla file and you will see a text file named movie Report.txt Double click this file to open it which tells you about the size of various elements of the movie.
Back in the Publish Settings box with the Flash tab, place a checkmark next to Protect from import. This prevents someone from importing your .swf file into Flash and converting it back to a project file (however can be imported into Director and a utility called SWIFFER can break into the movie).
Double click the html file and resize the window by clicking the restore down button at the top right of the window and then dragging the bottom right corner of the window. Notice that the .swf file doesn't resize with the browser window. Back in the Publish Settings box, under the HTML tab, notice that the Dimensions setting is Match Movie. Choose Percent and then click Publish to replace the previous HTML page. Now resize the HTML file again and notice that the .swf file resizes this time. The Dimensions setting determines what parameter will be placed in the <object> and <embed> tags. A value of "Match Movie" will utilize the pixels settings of the .fla file, whereas one can set a different value by choosing pixels (and then setting a value) or percentage (percent of screen window). A percent setting is a more flexible setting if screen resolution varies among users.

Exercise 2 - Creating Projectors (using projector.fla)

Open the file and choose Control>Test Movie. This creates the .swf file and saves it in the same folder as the .fla file. Choose File>Publish Settings>Format and uncheck the boxes next to Flash and HTML and check the boxes next to Windows Projector and Macintosh Projector. Uncheck the "use default names" box and give names of wProjector.exe and mProjector. Click Publish. Double click the wProjector.exe file (from Windows Explorer) to open it. Save the file for the next exercise.

Exercise 3 - Modifying Projectors with FSCommands - FSCommands are actions that invoke JavaScript functions from Flash.

Save the file projector.fla under a new filename fsProjector.fla. Insert a new layer, naming it actions and putting it on top of the other layers and press F9 to open the Actions Panel. Choose Actions>Browser/Network and double click on fscommand to add it to the Script pane. In the Commands for standalone player dropdown box, choose fullscreen [true/false]. This automatically populates the command and parameters fields and inserts the arguments in the script below. This will make the projector launch and fully fill the user's machine.
Choose File>Publish Settings and rename the files fsWprojector.exe and fsMprojector.hqx. Click Publish and double click on the appropriate file. Click Esc to exit fullscreen mode.
Doubleclick on the fscommand and choose the showmenu [true/false] option and change the Parameters field to false. Choose File>Publish and doubleclick the appropriate projector file. No menu will be displayed and one will not be accessible by right clicking. Save and close the file.

Exercise 4 - Exporting Image Files (using exportingImages.fla) (for use in other applications)

Open the fla file and choose Control>Test Movie. The animated logo is a Movie Clip symbol instance. Select the logo on the Stage and notice the setting in the Property Inspector that it is an instance of mcOverAnim. Double click on the instance to open the Movie Clip's timeline. Scrub the playhead to determine where in the tween animation the logo is at full color (frame 20).
Flash will give you a choice whether to export the frame that the Playhead is over (all layers), export a selected frame (all layers), or export a selected image (including the frame the image is on and all layers. Position the Playhead over Frame 20 and choose File>Export Image Give the file a name of logo and choose PNG as the type and click Save. You will then be presented with a dialog box that is specific to the file type to which you have chosen to export. For a PNG, leave the settings at their default setting.

You can also create an image using the Publish settings but exporting is simpler. In the Publish Settings dialog box, if you check file type to which you want to publish, a tab appears that pertains to that file type which provides you with choices particular to that file type. These settings are discussed in the text so will not be repeated here except to highlight a few choices:

- GIF - Playback option determines whether the Gif will be static or animated. If the Static radio button is selected, the first keyframe is used, except if a frame has been named #Static in which case that frame will be used instead. (same is true for jpgs) If the Animated radio button is instead selected, Flash MX will export the entire file as an animated gif. If you want only certain frames, add labels of #First and #Last to the first and last keyframes you want. You can also set whether the animated gif will loop continuously or repeat a given number of times.

Because gifs are limited to 256 colors, there are a number of options relative to dithering and palette

Text describes various choices for publishing as jpg, png, and quicktime movies.

Chapter 17 - Putting it All Together

Exercise 1 - The Big Picture (using xboardingSiteFinal.fla)

Open the fla file from the siteFinal folder and choose Control>Test Movie. Note that the user won't see the message about missing fonts. On the login screen, enter username of guest and password of gotsnow. Look for the drag button on a couple of the screens (e.g. the form) where you can drag a window around. With the preview window still open, choose View>Bandwidth Profiler and choose View>Show Streaming. This will allow you to see the preloader for the site. A Preloader is a short animation that plays while ActionScripting checks how many frames have been downloaded to the user's computer. Close the preview window but keep the file open for the next exercise.

Exercise 2 - Examining the Scenes

Click on the Edit Scene button to list the scenes within the project. Select the home scene. Select Frame 1 in the actions layer and open the Actions Panel (F9). You will see a stop action. Using the Edit Scenes button, select the gear scene. Click Frame 1 of the actions layer to see another stop action.

Layer Management - remember that there are three special types of layers - guide layers (motion guide layers and guided layers), mask layers, and layer folders

Exercise 3 - Examining the Layers

Select the intro scene and notice the layer folder in the Timeline. Click on the arrow to the left to expand all the layers inside the folder.
Select the main scene and click on the snowflake to select it; notice that the motionGuide layer is highlighted in the Timeline. Double click on the snowflake instance to enter the Movie Clip's Timeline. Inside you will see the Guide layer and the Guided layer. Leave the file open for the next exercise.

Library Organization - Be consistent in your naming conventions. Choose brief, descriptive names, and use folders to organize the Library elements and be consistent in your naming of folders.

Exercise 4 - Investigating the Library

Open the Library (F11) and double click on the folders -- notice that the elements are named consistently and placed in the proper folder. Click on the Options menu and there is an expand all folders and a collapse all folders option, for the folders in the library. Notice that there is a file outside of any folder. Try to drag the file into the bitmaps folder and because there is already a file with that name inside of the folder, one gets a prompt. If one chooses the "don't replace" option, the new items gets a name of the original plus "copy" at the end. Save the file and leave it open for the next exercise..

Exercise 5 - Using the Movie Explorer

Choose Window>Movie Explorer. Click on the buttons next to Show to select the categories of elements to be displayed. From the Options menu at the far right, choose Show All Scenes. In the Find text box, type the item name btnClipofDay to search for the element (make sure that the Show Buttons, Movie Clips, and Graphics filter button is depressed.) When it finds it, it will display it in the window. The Movie Explorer will only look for the categories that are currently selected.
If it is not already expanded, click on the plus sign next to the actions for btnClipofDay to reveal more elements associated with that object -- in this case, ActionScript. However, the ActionScript will only show up if the ActionScript button filter button is selected. You can view the full path to the object selected at the bottom of the Movie Explorer. If the layer is not locked in the project file, Flash MX will select the element on the Stage when you select it in the Movie Explorer. Close the file.

Exercise 6 - Building a Preloader (using xBoardingSite.fla from the siteInProgress folder) - Users may see the movie differently depending on their connection speed; a preloader allows you to wait until a specified amount of frames have been loaded, thus creating less variability in the user experience.

Open the fla file. Click the Edit Scenes button to access the intro scene. The order of scenes listed in the Edit Scenes menu is the order they will play in the movie unless you tell the Timeline otherwise. The Preloader therefore needs to be in the first scene. Even though the Stage looks black, it is actually white with a black Graphic symbol over the top of it (as one can verify by unlocking the layer, selecting the symbol, deleting it, and then undoing that). Since we will be previewing Movie Clips in the Library that involves white text, change the background color to black so that we will be able to see the artwork.
Open the library (F11). Inside the movieClips folder, click on the Movie Clip named mcLoading to select it and press Play to preview it. Similarly preview the mcFlakes movie clip. Click the insert layer button and add a new layer, naming it flake. When you add a layer, Flash adds frames up to the current last frame in the Timeline. Since we don't need these extra frames, we can highlight frames 2 through 100 and right click and choose Remove Frames.
From the Library, drag an instance of the mcFlakes Movie Clip on the the center of the Stage. You can use Align panel to center it and the Free Transform Tool to make it bigger. Lock the layer.
Insert a new layer, naming it loader and put it above the flake layer. Highlight frames 2 through 100, rightclick and select Remove Frames. From the Library, drag an instance of the mcLoading Movie Clip onto the center of the Stage. You can use the Align Panel to center it and lock the loader layer.
Click and drag down in Frame 4 of the loader and flake layers and press F5 to add frames up to Frame 4 on both layers. Click away on the Stage to deselect everything and choose white for the background color in the Property Inspector.
Click the Insert Layer button to add a new layer and rename it labels, putting it above the loader level. Highlight frames 2 through 100 and right click and remove them. Select Frame 5 and press F7 to add a blank keyframe and type start for the frame label in the Property Inspector. Press F5 with Frame 9 selected to add frames so that you can see the frame label. [Note: the intro animation begins in Frame 5 and we will be adding ActionScript to the Preloader to determine whether all the frames are loaded in the movie; if they are, the Playhead will be sent to the start frame (frame 5) to begin the animation.]
Click the Insert Layer button and add a layer, naming it actions, placing it above the other layers. Press F7 to add another blank keyframe to the actions layer (by default there is one in Frame 1). Highlight frames 3 through 100 and right click to remove them.
Select Frame 2 in the actions layer and open the Actions panel, choosing Actions>Conditions/Loops and double click on the if action to add it to the script pane. Choose Actions>Properties and doubleclick on the _framesloaded property to add it to both the Parameters pane and the Script pane. Then add ">=" after this. Then choose Actions>Properties and doubleclick on _totalframes property to add it to the Condition and the Script pane.
Choose Actions>Movie Control and doubleclick on goto to add it to the Script pane. Choose intro for Scene, Frame Label for type, and start for Frame. This tells Flash to check whether the frames that have been loaded in the movie are greater than or equal to the total frames in the movie -- if so, then play the intro scene, starting at frame 5.
However, what if this condition is not true -- all frames haven't been loaded?. Choose Actions>Conditions/Loops and doubleclick on the else action. Select Actions>Movie Control and doubleclick on the goto action to add it to the script pane. Choose intro for scene, Frame Number for type, and 1 for frame. This tells Flash that if all the frames aren't loaded, to go back to frame 1 of the intro scene (this creates a loop that repeatedly checks whether all the frames are loaded.
Choose Control>Test Scene to preview the scene only. You may not see the preloader at all since the frames may load so fast. The Bandwidth Profiler allows you to see how the movie would stream based on different connection speeds. With the Preview Window open, choose View>Bandwidth Profiler (if it is not already checked), then select Debug>56K (4.7 Kb/s) and choose View>Show Streaming. When you are done, choose View>Bandwidth Profiler to deselect this so that it won't show.
If you don't want all the frames in the movie to load before the animation begins, one can specify a number of frames in the condition, e.g. _framesloaded>=50. Save and keep the file open for the next exercise.

Exercise 7 - Printing from the Project File - You can print within the project file -- all the frames in the movie, or just the first frame of ech scene.

With the file from the previous exercise, choose File>Page Setup. Choose First Frame Only and from the Layout menu, choose Storyboard - Boxes. Click OK. Choose File>Print Preview to preview what would be printed. Choose Print from the Print Preview to print the first frames of each scene from the project file. Choose Print from the Print Preview window -- note that the number of pages is not the number of physical pages but the number of frames.

If a user right clicks on the Flash movie and choose the Print option in the drop down menu, every frame of the movie will print. You can disable this by putting !#p in a keyframe, but this doesn't disable printing from the browser's print command, only from the Flash player.

Exercise 8 - Printing from the Macromedia Flash Player

With the previous file, click on the Edit Scenes button and choose the learningL1 scene. Add a new layer below the actions layer, naming it labels. With the first frame in the labels layer selected, enter #p in the Property Inspector in the frame label field to define that keyframe as printable. Choose Control>Test Scene. Right click on the movie and choose Print -- once you have add a #p to a keyframe, only those frames labeled as #p will print.
Lock the three layers and add a new layer, naming it print btn, and move it below the labels layer. Open the library and drag an instance of the btnPrintMe button from the buttons folder onto the lower right corner of the Stage. With the button selected, open the Actions panel and choose Actions>Printing and double click on the print action. Choose Print:as bitmap, for location select Target from the drop-down menu. Next to the target field, highlight the 0 and click on the Insert Target Path button and select "this" and click OK. In the Parameters pane, check the Expression box. When the ActionScript is attached to a button, the keyword "this" refers to the Timeline that contains the button. Because you added the frame label #p in that Timeline, Frame 1 will be printable. Leaving Bounding at the default setting of movie. The Print area is determined by the Stage size of the movie.
Choose Control>Test Scene and test the Print button by clicking on it in the Preview Window.

Location parameter has two possible values - level (specifies the level to print) and target (identifies the instance name of the Movie Clip or Timeline to print. In either case, by default all frames will be printed, but you can designate particular frames for printing by attaching a #p label to these frames

Exercise 9 - Exporting the Scenes

Click on the edit scenes button and select the home scene. On the Stage, doubleclick on the menu Movie Clip to open its Timeline. Click on Frame 5 of the actions layer and open the Actions Panel (F9). This ActionScripting stops the playhead which it reaches this frame and loads a movie called background.swf into Level 50.
Click on the Edit Scenes button to open the intro scene. Choose Control>Test Scene. If you choose Control>Test Movie, the resulting .swf file that is put in the same folder as the fla file contains the whole movie; if you choose Control>Test Scene, the swf file only contains that scene. Flash names the file with the name of the fla file followed by an underscore and the name of the scene.
Choose Edit Scenes and select the password scene. Choose Control>Test Scene. The goal is to export the .swf file for the password scene. Repeat this step for each of the remaining scenes. Then open the folder, to rename each .swf file by deleting the xboardSite name and the underscore. This is so that the filenames will match the ActionScripting in the drop down menu created in Chapter 11.
Choose Control>Test Movie. In the Preview Window, choose View>Bandwidth Profiler to hide it and enter the username guest and the password gotsnow to enter the site. Save the file and keep it open for the last exercise.

Exercise 10 - Creating Draggable Movies

Click on the Edit Scenes button and select the safety scene. On the Stage, click on the Watch the RC Movie button to select it. Open the Actions Panel (F9); the ActionScript here will tell Flash that when a user releases the button, it should load the movie named soundSync.swf into Level 85. Save and close the file.
Open the soundSync.fla file. Choose Control>Test Movie and notice that the movie is not draggable. Close the Preview window and add a layer to the project file, naming it btn Invisible, just below the labels layer. Open the Library (F11) and click on the buttons folder to expand it and doubleclick on the btnInvisible symbol. Notice that the button only has a hit frame; it will therefore serve as an invisible button in the movie.
Click on Scene 1 to return to the main Timeline. Drag an instance of btnInvisible onto the Stage, positioning it so that it is on top of the tab on the upper left hand side of the Stage. Open the Actions Panel (F9) and choose Actions>Miscellaneous Actions and double click on comment. This will add two slashes to the Script pane. In the Comment field of the Paramaters pane, type "Add the ActionScipting to start the drag here". Choose Actions>Miscellaneous Actions and double click on comment again. In the Comment field, type "Add the ActionScripting to stop the drag here. Comments are not exported with the .swf file and thus do not affect the size of the exported file.
[The button is still selected] Select the top comment and choose Actions>Movie Clip Control and doubleclick on the startDrag action. This will place the ActionScripting below the first comment. In the Script pane, click on the on (release) { line and in the Parameters pane, click the Event:Release box to deselect it and then select the Press checkbox. This will tell Flash to start the drag when the user presses the button, not when the user releases the button.
Select the startdrag(''); line and in the Parameters pane, type the word this is the target field and make sure the Expression box is checked.
Select the second comment in the Script Panel, and choose Actions>Movie Clip Control and doubleclick on the stopDrag action. This ActionScripting will stop the movie from being dragged when the user lets go of the mouse. Choose Control>Test Movie to test the dragging.
Insert a layer naming it close btn and move it above the btn invisible layer. From the Library, drag an instance of the btnCloseWindow symbol onto the lower right corner of the Stage. Open the Actions Panel. Choose Actions>Browser/Network and doubleclick on the unloadMovie action. In the Parameters pane, enter 85 in the field next to Level (remember that the soundSync.swf file was loaded into level 85.
Choose Control>Test Movie. The Close Window button won't work yet, since you are viewing the soundSync.swf file, but we need to test it to export the .swf file. Save and close the file.
Double click on the xboardingSite.swf to preview the movie again. Enter the username and password and click on the Safety button and click on the Watch the RC Movie button and drag the movie around the screen. Click on the Close Window button to unload the movie.

Revised: May 7, 2006. Comments to William Pegram, wpegram@nvcc.edu