Camtasia Studio Components for Macromedia Flash MX User's Guide

Transcription

1 Components for Macromedia Flash MX User's Guide Overview Components provide Flash developers with an easy way to incorporate and control SWF files in Macromedia Flash MX. The three are the first iteration of components from TechSmith Corporation. We hope that you find them useful and that you send us feedback for additional enhancements and other components. Please send all feedback to The following graphic shows the way your -made SWF movie might look during playback using options found in the Components. By TechSmith Corporation Component Descriptions 1

2 Component Descriptions The three Components are: 1. Movie Loader Drag-and-drop the Movie Loader to the Flash MX stage. The Movie Loader acts as a placeholder for your -created SWF. Simply type in the URL to the SWF file without writing any ActionScript. Incorporate an animated preloading SWF file. 2. Movie Controller Allows you to "scrub" back and forth in the -created SWF file. Play, Pause and Stop controls available. Fast Forward and Rewind controls available. About box to display movie information such as authorship, size, etc. built-in duration / time elapsed control. 3. Movie Duration Show the duration of the SWF file on the stage. Show the elapsed time of the SWF file. Platform and Flash Player Support of the Components You must have Flash MX installed in order to use the Components. The only work in Flash MX. Playback support for Component functionality includes Flash Player 5 and higher. SWF files play in Flash Player 4 and higher, but the added functionality that the components provide are only supported in Flash Player 5 and higher. Components work on both Windows and Mac platforms. After installing the Components using the Flash MX Extension Manager, the Components are available from the Components panel within Flash MX. Important Note: If you plan on using the Movie Controller component to add controls and a scrubber to your Camtasia Studio-made SWF movie, then you will want to produce your movie within Camtasia Producer with the Show Playback Controls option disabled as seen below. If you do not disable this option, then you will end up with a movie that contains two sets of playback controls. 2 Component Descriptions By TechSmith Corporation

3 Note: You get to these controls by choosing from within Producer: File > Produce Movie > SWF Movie File Format > Options > Macromedia Flash Tab > Show Playback Controls. Note: If you have already produced your Flash movie with these controls enabled, it is advised that you re-produce your movie with this option disabled. About this User's Guide This user's guide will: Give a general overview of Flash components. Walk you through installing and using each of the Components. Review the use of the Components. Give directions for exporting the movie. The subjects covered in this user guide include: Macromedia Flash MX Main Screen Overview Installing the Components Using the Movie Loader Component Using the Movie Controller Component Using the Movie Duration Component Finishing Up By TechSmith Corporation Component Descriptions 3

4 Macromedia Flash MX Main Screen Overview This graphic gives you a basic overview of the Flash MX main screen. This information detailed in this graphic is what you will need to be familiar with in order to create your Flash movie using Flash MX, a made SWF file, and the Components. If you should need any other help with Flash MX, consult the help file provided with Flash MX. 4 Component Descriptions By TechSmith Corporation

5 What is a Component? Overview A component is an add-on product for the Flash MX authoring environment. It allows extra functionality to be added to Flash MX. Components are also referred to as extensions. You may be more familiar with this type of functionality being called a plug-in. In Flash 5, a component was referred to as a Smart Clip. However, in Flash MX, this type of functionality is simply referred to as a component. There are many components available from Macromedia itself and third-party developers. The Components were created by TechSmith to assist Flash MX users in integrating and controlling -created SWF files and other linear-type SWF files. You may find many other components available for download at the Macromedia Exchange for Flash. For more information on Flash MX and components, visit the Designer and Developer Center for Flash MX at Installing the Components Note: Tip: In order to install the, you will need to use the Macromedia Extension Manager. If you do not already have the Macromedia Extension Manager installed, you may download it for free at the Macromedia Exchange for Flash. Make sure that you have closed Flash MX before you attempt to install the Components. After you install the components, the next time you launch Flash MX, they will show up in the Components panel. To install the Components: 1. Download the free components from the TechSmith Web site to your hard drive: 2. Uncompress the files with WinZip or Stuffit. You will now have a file called CamtasiaStudioComp.mxp. 3. Launch the Macromedia Extension Manager. Note: You may also be able to double-click on the.mxp file to open the Macromedia Extensions Manager. 4. In the Macromedia Extension Manager, select File > Install Extension Browse for and then select the CamtasiaStudioComp.mxp file. 5. Choose Install. By TechSmith Corporation What is a Component? 5

6 Note: If another version of Components is already installed in Flash MX, you will be asked if you want to overwrite the existing file. Choose Yes. 6. Once the installation is complete, the following Macromedia Extension Manager screen displays. 7. Launch the Flash MX application. 8. If the Components panel is not already open, select Window > Components. If installed correctly, the Components will show up in the Components panel. 9. Close the Macromedia Extension Manager. 10. Open Flash MX. Continue with Using the Movie Loader Component. 6 What is a Component? By TechSmith Corporation

7 Using the Movie Loader Component Overview This component allows you to: Load a -created SWF file onto the Flash MX stage without having to write any ActionScript. Create a rectangular preview of the SWF file on the Flash MX stage. Without using the component, you will only see a circle indicating the upper left-hand corner of the SWF file. To Use the Movie Loader To use the Movie Loader component, follow these steps: 1. Drag-and-drop the Movie Loader component from the Components panel onto the Flash MX stage. On the stage you will see a preview rectangle for your SWF file. 2. Click once on the rectangle to select it. When selected, a light blue line will display around the border of the rectangle. 3. Move the Movie Loader to the desired place on the stage. By TechSmith Corporation Using the Movie Loader Component 7

8 4. Choose Window > Properties to open the Properties window if this window is not already open. The Properties window displays. 5. Click on the Launch Component Parameters Panel button. 6. The Movie Loader properties dialog box displays.. Note: The first time you open this dialog box, you may need to resize it to see the entire dialog. Once you size it to be larger, Flash MX will remember your settings. At this time you will need to define the Movie Loader properties. Continue this topic with The Movie Loader Properties Window. 8 Using the Movie Loader Component By TechSmith Corporation

9 The Movie Loader Properties Window Overview The Movie Loader Property Window is used to define the properties of the shell that will house your SWF file. Movie Loader Properties Description Table Movie Loader Option Field Use Required / Movie URL Autostart Movie Movie Finished Handler Enter the URL to your SWF file. The URL may be absolute, containing: ( Or the URL can be relative (./mymovie.swf). Note: Later on in this process, if you want to automatically get the movie dimensions using the Get Movie Dimensions feature you must enter an absolute URL. If you do not enter an absolute value here, then you will need to manually get the movie dimensions. This information is explained in detail in the following table entry entitled GetMovieDimensions. Tip: If you would like to copy and paste a URL into this field, first copy the URL from where you have it. Next, right click on the Movie URL field and choose Paste from the pop-up menu. The keyboard shortcuts of CTRL+C and CTRL+V are not supported in the component windows. All copy and paste commands must be done through right-clicking. Note: To help get you up and going quickly with the Components, we have provided a URL that links to a -made SWF file. This URL might be helpful for you to use in the course of learning how to use the Components, especially if you have not yet developed any SWF content. The following URL points to a sample movie that can be used with the Movie Loader Component by entering the complete URL in the Movie URL field: If you would like your SWF file to begin playing automatically when it is opened, enable this option. If this checkbox is not checked you must click play for the movie to begin. Enter a handler name in this field if you would like Flash MX to execute a specific handler when the SWF file is complete. The handler you enter will be one that you have defined using ActionScript. Note: Reference panel entries are available for developers who know how to use ActionScript. Within Flash MX, choose Windows > Reference. In the left hand pane, there is an entry for the Components. Required By TechSmith Corporation Using the Movie Loader Component 9

10 Movie Loader Option Field Use Required / Get Movie Dimensions Click on that entry to expand the menu and see additional items. The Get Movie Dimensions option allows you to automatically get the dimensions of your movie. You can then take these dimensions and apply that same size to the Movie Loader placeholder that you are creating. It is important to understand that the size that is applied to the Movie Loader placeholder does not affect the size of your SWF file. Instead, having the placeholder be the same size of your movie is very useful for seeing how your movie will look on the stage. It also allows you to see how the movie will look in relation to the other components that you add. Note: It is recommended that you make the Movie Loader the same size as your movie. If you entered an absolute value in the Movie URL field: 1. Click on this button to automatically get the width and height of the video. Once you choose this button, the width and height are displayed in the Your Movie Dimensions dialog box. 2. Choose OK to automatically update the size to the Width and Height fields in the Movie Loader Properties dialog box. 10 Using the Movie Loader Component By TechSmith Corporation

11 Movie Loader Option Field Use Required / Note: If you attempt to use the Get Movie Dimensions button and you have not entered an absolute value, you will see the following error. In this case, you will need to get the movie dimensions using an alternate method. The instructions for this alternate method immediately follow these instructions. 3. Once you have the dimensions, enter those into the Properties window in the width and height fields. Note: This is the only place to edit the component's dimension properties. 4. Next, you will need to change the X and Y coordinates in this same window to whole numbers. To change, simply round up or down to the next whole number. Note: If you do not change these coordinates to whole numbers, you may see unwanted artifacts in your movie during playback. If you did not enter an absolute value in the My Movie field: You cannot use the Get Movie Dimensions button to automatically get the size of your referenced movie. Instead, you will need to use an alternate way of gathering the exact width and height dimensions. The following directions step you though an alternate method of gathering the movie size information. 1. Within Flash MX choose File > Open. Open the movie that you designated in the component's Movie URL field. By TechSmith Corporation Using the Movie Loader Component 11

12 Movie Loader Option Field Use Required / 2. Choose View > Bandwidth Profiler. Find the width and height in the field labeled Dim:. Write this information down or remember it. (The width is the first number.) 3. Close the Bandwidth Profiler. 4. Enter the dimensions into the Properties window in the width and height fields. 5. Next, you will need to change the X and Y coordinates in this same window to whole numbers. To change, simply round up or down to the next whole number. Show Loading Movie Note: If you do not change these coordinates to whole numbers, you may see unwanted artifacts in your movie during playback. Enable this option if you would like to show a SWF movie while your SWF file downloads. Once enabled, additional options become available. Match Component Size Enable this option if your would like your preloading movie's size to match the size of the Movie Loader component size. This option ensures that both movies are the same size in terms of width and height. If this option is not enabled, then the preloading movie will display at it's own width and height dimensions. 12 Using the Movie Loader Component By TechSmith Corporation

13 Movie Loader Option Field Use Required / Loading Movie URL % of main movie to preload Minimum Preload movie display time (in seconds) Enter the URL or path to the movie you would like to display while your SWF file loads. The URL may be absolute ( or relative (./mymovie.swf). Note: To help get you up and going quickly with the Components, we have provided a URL that links to a -made preload SWF file. This URL might be helpful for you to use in the course of learning how to use the Components, especially if you have not yet developed any SWF content. The following URL points to a sample preload movie that can be used with the Movie Loader Component by entering the complete URL in the Loading Movie URL field: Enter the percentage of the main movie that you would like to preload before it begins playing. The preload movie will remain on the screen until this percentage is reached. You may enter the minimum amount of time in seconds that you would like the preload movie to remain on the screen. This works in combination with the % of Main Movie to Preload setting. This means that both conditions must be met before the movie will begin playing. Note: After you have adjusted your Movie Loader component dimensions to match the SWF dimensions, if the stage is too small to accommodate the Movie Loader component and the other components you will be adding, you will need to increase the size of the stage. See Adjusting the Contents of the Stage. Testing the Movie Loader Component After you have added the Movie Loader component to the stage and selected the desired Movie Loader properties, you should test your component to ensure that it is working correctly. To test to see if the movie has loaded correctly, select <CTRL + Enter>. The movie should display and play in a browser window, or, in Flash Player if it is installed on your system. After testing, close the window. Congratulations! At this time, you have successfully installed and tested the Movie Loader component. To add a Movie Controller component to your movie, continue with Using the Movie Controller Component. To add a Movie Duration component to your movie, continue with Using the Movie Duration Component. By TechSmith Corporation Using the Movie Loader Component 13

14 Using the Movie Controller Component The Movie Controller component: Allows you to "scrub" back and forth in the -created SWF file. Has optional Play, Pause and Stop buttons available. Has optional About box to display movie information such as authorship, size, etc. Has optional built-in Duration bar. To add a Movie Controller component to your movie, drag-and-drop the Movie Controller component onto the Flash MX stage. The Movie Controller will display. Resizing the Movie Controller Before adjusting the size of your Movie Controller, it is important to keep in mind that proper functioning of the Movie Controller's scrubber is determined by a direct relationship between the length of your movie and the width of the scrubber. So, if you have a 30 second movie and you make the scrubber 600 pixels wide, you will see jerky movement in the scrubber while the movie is playing. Additionally, it will be difficult to grab the scrubber and move it back and forth along the control. On the other hand, if the movie is 30 seconds in length and the control is 300 pixels wide, you will see smooth movement of the scrubber as the movie is playing and the scrubber control can easily be moved back and forth along the control. To change the size of the Movie Controller, simply set the width in the Properties window using the width and height fields. Enter the desired dimensions in pixels. At this time you will need to define the Movie Controller properties. Continue this topic with The Movie Controller's Property Window. 14 Using the Movie Controller Component By TechSmith Corporation

15 The Movie Controller's Property Window The Movie Controller's Property Window is used to define the look of the controller that will operate your Camtasia Studio SWF file. To Adjust the Movie Controller Properties 1. Click once on the Movie Controller to select it. When selected, a light blue line will display around the border of the Movie Controller. 2. Move the Movie Controller to the desired place on the stage. 3. Choose Window > Properties to open the Properties window if this window is not already open. 4. Click on the Launch Component Parameters Panel button. 5. The Movie Controller properties dialog box displays. There will be two separate tabs, the Controller tab and the Duration tab. Each of the options found within these tabs ins described in the following sections. By TechSmith Corporation Using the Movie Controller Component 15

16 Controller Tab The Controller tab is used to set the controller properties for the control bar. The following table describes each of the options found within the Controller tab. Movie Controller Properties Description Table Movie Controller Option Field Use Required / Movie Controller color Click on the arrow of the Color box to display the color selection chart. Use the mouse to select the color that you want to tint the Movie Controller. Show % loaded text % Loaded text positioning play/pause/stop controls fast forward/rewind controls About box Note: If the color you want is not one of the swatches in the color selection box, enter the hexadecimal number for it in the number field. Enable this option to display the percent of the movie that has downloaded. If you have selected the option of displaying the % Loaded text, then this option determines where to display the text in relation to the Movie Controller. You may place it below the Movie Controller or to the right of it. Enable this option to display the Play, Pause, and Stop controls on the Movie Controller. When enabled, the finished movie will contain a Play, Pause, and Stop control button. Note: If neither the Play, Pause, and Stop controls nor the Fast Forward and Rewind controls are enabled, the Movie Controller will only display the movie scrubber in the finished movie. Enable this option to display the fast forward and the rewind controls on the Movie Controller. When enabled, the finished movie will contain a Fast Forward and Rewind control button. Note: If neither the Play, Pause, and Stop controls nor the Fast Forward and Rewind controls are enabled, the Movie Controller will only display the movie scrubber in the finished movie. Enable this option if you would like to make an "About" box available to the users. The About box is accessed by the user when the button is selected on the Movie Controller. This type of box usually contains important information such as copyright, authorship, dates, etc. When the About box option is enabled, the About box text field is displayed. When the About option is disabled, the About box text field is hidden. About box text Enter the desired information, up to eight lines of text. 16 Using the Movie Controller Component By TechSmith Corporation

17 Note: After you add the Movie Controller component, set the stage dimensions to match Contents. To do this select the Flash MX stage and in the Document Properties window, click the Size button. The Document Properties dialog box displays. Click on the Contents button. Choose OK to exit this dialog. Testing the Movie Controller Component After you have added the Movie Controller component to the stage and selected the desired properties, you should test your component to ensure that it is working correctly. To test to see if the movie has loaded correctly, select <CTRL + Enter>. The movie should display and play in a browser window, or, in Flash Player if it is installed on your system. After testing, close the window. Congratulations! At this time, you have successfully installed and tested the Movie Controller component. To add the built-in Movie Duration component to your movie, continue with Built-In Duration Tab. If you do not want to add a Movie Duration component, continue with Finishing Up. Built-In Duration Tab The Duration tab is used to set the duration and elapsed time properties for the control bar. With this option, the duration / time elapsed bar is built-in. Please note, the options found in this tab are the same as the options found in the Duration Properties dialog box. For complete information on these options, continue with The Movie Duration's Property Window. Testing the Movie Controller Component After you have added the Movie Controller component to the stage and selected the desired properties, you should test your component to ensure that it is working correctly. To test to see if the movie has loaded correctly, select <CTRL + Enter>. The movie should display and play in a browser window, or, in Flash Player if it is installed on your system. After testing, close the window. Congratulations! At this time, you have successfully installed and tested the Movie Controller component. To add the Movie Duration component to your movie, continue with Using the Movie Duration Component. If you do not want to add a Movie Duration component, continue with Finishing Up. By TechSmith Corporation Using the Movie Controller Component 17

18 Using the Movie Duration Component The Movie Duration Component allows you to display the duration and elapsed time that the movie has played. To add a Movie Duration component to your movie, drag-and-drop the Movie Duration component onto the Flash MX stage. The Movie Duration will display. At this time you will need to define the Movie Duration properties. Continue this topic with The Movie Duration. The Movie Duration's Property Window The Movie Duration Property Window is used to define the type of formatting that will display in the duration portion of the SWF file. To Adjust the Movie Duration Properties 1. Click once on the Movie Duration to select it. When selected, a light blue line will display around the border of the Movie Duration. 2. Move the Movie Duration to the desired place on the stage. 3. Choose Window > Properties to open the Properties window if this window is not already open. 4. Click on the Launch Component Parameters Panel button 5. The Movie Duration properties dialog box displays.. 18 Using the Movie Duration Component By TechSmith Corporation

19 Movie Duration Properties Description Table Movie Duration Option Field Use Required / Display Format From the dropdown menu, select a display text format for the duration and/or elapsed time. You may chose different Hour: Minute: Second combinations. You can also choose if you want the minute and second labels to be displayed. The small letters denote the display of the labels. Required Show Duration Display the total duration of the SWF movie in the selected display format. Show Elapsed Time Movie FPS Display the current time of the SWF movie in the selected display format. The FPS allows the movie duration and elapsed time to be calculated correctly. Enter the frames per second of the movie that you exported from. This will usually be frames per second. If you do not know your frames per second, the following directions step you though a method of gathering that information. 1. Within Flash MX choose File > Open. Open the movie that you designated in the component's Movie URL field. 2. Choose View > Bandwidth Profiler. Find the frames per second in the field labeled FR Rate: Required By TechSmith Corporation Using the Movie Duration Component 19

20 Movie Duration Option Field Use Required / Note: Write this information down or remember it. 3. Close the Bandwidth Profiler. 4. Enter the FPS into the Movie FPS field. Font Font Color Select the font in which you would like the duration and/or elapsed time to be displayed. To assure that the target machine has these fonts, there are two standard options for you to choose from, either Arial or Times New Roman. Select the color of the duration text. Click on the arrow of the Color box display the color selection chart. Use the mouse to select the desired color. to Note: If the color you want is not one of the swatches in the color selection box, enter the hexadecimal number for it in the number field. Testing the Movie Duration Component After you have added the Movie Duration component to the stage and selected the desired properties, you should test your component to ensure that it is working correctly. To test to see if the movie has loaded correctly, select <CTRL + Enter>. The movie should display and play in a browser window, or, in Flash Player if it is installed on your system. After testing, close the window. Congratulations! At this time, you have successfully installed and tested the Movie Duration component. Continue with Finishing Up. 20 Using the Movie Duration Component By TechSmith Corporation

21 Finishing Up After you have added and tested your components, there are an additional two steps that you must complete before your movie is finished: adjusting the contents of the stage and exporting the movie. Adjusting the Contents of the Stage After you have added the desired components, you should set the stage dimensions to match the actual contents of the stage. This allows Flash MX to assess the stage size that is necessary to correctly accommodate all of your components. Note: During the testing phase where you chose <CTRL + ENTER> to ensure that the components were working correctly, if the components were not on the stage correctly, they still showed up in the test movie. Nevertheless, even if the components did show up in the test, if they are not on the stage, they will not show up in the finished movie. Note: If you have already adjusted the size of your stage, you may not need to do this step. However, going through this step is an added safeguard that ensures all of your components are situated on the stage correctly. To Update the Contents 1. To update the contents, first select the Flash MX stage. 2. From the menu bar, choose Modify > Document. The Document Properties dialog box displays. By TechSmith Corporation Finishing Up 21

22 3. Click on the Contents button. Note: Make sure the values for the width and the height are whole numbers. If there are decimals in these fields, you may see artifacts on the stage after publishing to HTML. 4. The Dimensions fields will be updated with the width and height size that is necessary to accommodate the components. 5. Choose OK to exit this dialog. The stage will now be resized to accommodate all of your components. 22 Finishing Up By TechSmith Corporation

23 Exporting the Movie Now that you have added and tested all of your components and have matched the size of the stage to your movie contents, it is time to export the actual Flash movie. 1. To export the movie, from the menu bar choose File > Export Movie. 2. The Export Movie dialog box displays. In the File Name field, enter a name for the output file. Additionally, choose the file format from the Save as Type dropdown menu. 3. If the format you selected requires more information, the Export dialog box appears. Set the export options for the format you selected. Click on OK. 4. After the Export is complete, choose File > Save to save the project that you have created. To view the movie, go to the directory that you exported to and double-click on the movie file. The movie should display and play in a browser window, or, in Flash Player if it is installed on your system. License Agreement TechSmith Corporation provides this manual "as is", makes no representations or warranties with respect to its contents or use, and specifically disclaims any expressed or implied warranties of merchantability or fitness for any particular purpose. TechSmith Corporation reserves the right to make changes to the content of this manual, at any time, without obligation to notify any person or entity of such changes. The software described in this document is furnished under a license agreement. The software may be used or copied only in accordance with the terms of the agreement. It is against the law to copy the software on any medium except as specifically allowed in the license agreement. No part of this manual may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or information storage and retrieval systems, for any purpose other than the purchaser s personal use, without the express written permission of TechSmith Corporation. Copyright TechSmith Corporation. All Rights Reserved. Printed in the United States of America. Trademarks: TechSmith, SnagIt, and Camtasia are registered trademarks and is a trademark of TechSmith Corporation. All other registered trademarks and trademarks are the property of their respective companies. All rights reserved. By TechSmith Corporation Finishing Up 23