4. When you are finished, save, publish, or test the file. All XML files for all languages are overwritten with the information in the Strings panel. Note: If you want to preserve the translation in an XML file, save it in a different folder. To translate text in an XML file: 1. Using an XML file editor or translating software, open the folder for the desired language, then the XML file for that language. The XML file is populated with the IDs for each text string. 2.
Creating documents with multilanguage text without using the Strings panel You can create documents with multilanguage text without using the Strings panel. Using the XMLConnector component to connect to external XML files You can use the XMLConnector component to connect to an external XML document in order to bind to properties in the document. Its purpose is to read or write XML documents using HTTP GET operations, POST operations, or both.
You should save the external file in UTF-8 (recommended), UTF-16BE, or UTF-16LE format, using an application that supports the format. If you are using UTF-16BE or UTF-16LE format, the file must begin with a BOM to identify the encoding format to Flash Player. For more information, see “Unicode encoding formats supported by Flash Player” on page 237. Note: If the external file is an XML file, you cannot use an XML encoding tag to change the encoding of the file.
You must include the following header as the first line of the file, to identify the file as Unicode to the Flash authoring tool: //!-- UTF8 Note: Be sure to include a space after the second dash (-). By default, the Flash authoring application assumes that external files that use the #include action are encoded in the traditional code page of the operating system running the authoring tool. Using the //!-- UTF8 header in a file tells the authoring tool that the external file is encoded as UTF-8.
Using external text or XML files that are not Unicode encoded If you load external files into a Flash Player 7 application that are not Unicode-encoded, the text in the external files does not appear correctly when Flash Player attempts to show them as Unicode. You can tell Flash Player to use the traditional code page of the operating system that is running the player. To do this, add the following code as the first line of code in the first frame of the Flash application that is loading the data: system.
Chapter 13: Creating Multilanguage Text
CHAPTER 14 Data Integration (Flash Professional Only) Macromedia Flash MX Professional 2004 provides a flexible, component-based architecture and object model for connecting to external data sources, binding data to user interface (UI) components, and managing what data is displayed and how it’s updated at the source. The Macromedia website and Flash Help has many tutorials on creating rich Internet data applications in Flash.
When you integrate external data into a Flash application, you connect to the external data, select different elements of the data schema that you need for your application, and bind them to component fields within your application. You manage how the data is displayed in your application and how it’s updated on the server. The following image depicts the flow of data within a Flash application and identifies the different elements that comprise the Flash data architecture.
For more information, see the following topics in this chapter: Additional resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Creating a simple application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Workflows for using the data components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Data binding (Flash Professional only) . . . . . . . . . .
Creating a simple application The following example walks you through creating a simple data integration application, which can help you understand the concepts and steps involved. In the example, you create a simple application that loads and displays a dinner menu. You load an XML file, which you’ll use both as a data source and as a sample for the data source’s schema. The UI consists of a data grid, into which the XML data is loaded, and a button that loads the data.
8. Next, populate the data grid with the XML data by binding the XML data—through the DataSet component— to the data grid. Select the DataSet component and click the Bindings tab. You see the binding to the xmlConn instance that you just added.
3. Set up the connector component: ■ Set component parameters. ■ Set component properties on the Schema tab. 4. Bind the connector component to DataSet component. 5. Set up the DataSet component: ■ Set component parameters. ■ Set component properties on the Schema tab. 6. Bind the UI component to the DataSet component. 7. Set up the resolver component: ■ Set component parameters. ■ Set component properties on the Schema tab. 8. Bind the resolver component to the DataSet component. 9.
Data binding (Flash Professional only) Data binding lets you map the properties of one component to another component. A binding is simply a statement that says “When property X of component A changes, copy the new value to property Y of component B.” For rich internet applications, you can map data from external data sources to Flash components. The external data source is represented in your application by a component; items in the data source’s schema are represented as properties of the component.
8. Select Control > Test Movie. Click the Up and Down buttons on component stepper1_nm. Each time you click the buttons on stepper1_nm, the value property of stepper1_nm is copied to the value property of stepper2_nm. Each time you click the buttons on stepper2_nm, the value property of stepper2_nm is copied to the value property of stepper1_nm. 9. Return to editing the application. 10. Add another NumericStepper component and name it stepper3_nm. 11. Add a TextInput component called myInput_txt. 12.
The following illustration shows the Schema tab for the XMLConnector component used in “Creating a simple application” on page 256. The top pane shows the bindable properties for the xmlConn instance, with the food:Array property selected, and the bottom pane shows the settings for the food:Array property.
There are several ways to define the schema for a component. Here are the most common ways: • For an XMLConnector component, you can import an XML sample file to define the schema. See “Connecting to XML data with the XMLConnector component (Flash Professional only)” on page 277. • For a WebServiceConnector component, you can import the WSDL for a web service to define the schema. See “Connecting to web services with the WebService connector component (Flash Professional only)” on page 274.
8. In the Bound To dialog box, select the CheckBox component under Component Path, and click OK. 9. Select the Checkbox component on the Stage, and click the Parameters tab in the Component inspector. 10. Select Control > Test Movie. To test the functionality, type a value into the TextInput component and then deselect the CheckBox component. You should now be unable to enter text into the TextInput component.
The following illustration shows the runtime process of the data binding engine. The four attributes that handle data types are shown in the illustration and discussed in the following text.
Data type and formatter When you want to set data into a component, data binding first needs to convert the data to an ActionScript data type, which is a form that the component can read; this conversion is automatic, depending on the Data Type setting. If the data is a string and a Formatter setting exists, then the formatter converts the data from string to the specified ActionScript data type.
The following illustration shows the Bindings tab. The top pane lists the properties exposed for binding, represented by their schema location, of the component that’s selected on the Stage and contains Add Binding (+) and Remove Binding (-) buttons. The bottom pane shows information about settings for the selected property, such as what it’s bound to and in which direction it’s bound.
Adding a binding To add a binding, click the Add Binding (+) button on the Bindings tab. The Add Binding dialog box appears. This dialog box shows all the schema items (properties) for the selected component. You use this dialog box to select which property you want to expose for binding. Component properties appear as root nodes within the schema tree.
Configuring bindings When a property is selected on the Bindings tab, you can further define it using the options located in the bottom pane of the Bindings tab. You can specify information such as Direction and Bound To, which you’ll commonly need to specify, as well more complex properties such as Formatter and Formatter Options: Direction Shows a list of directions that can be set for a binding. You need to select a value from the list: • In: The selected schema item is the destination of a binding.
Defining what to bind to When you expose a component property for binding, you need to define what to bind the property to. The Bound To dialog box appears when you click Bound To in the Binding Attributes pane of the Bindings tab. The Bound To dialog box includes the Component Path pane and the Schema Location pane. The Component Path pane shows a tree of components that have properties to which you can bind.
To use a dynamic value for the Bound To property: 1. Select a component in the Component Path pane. 2. Do one of the following actions to select a schema item for the data: ■ ■ Select a schema item using the Schema tree located within the Schema Location pane. Select Use Path Expression, select a component property from the schema tree, and enter a path expression. For more information, see “Adding bindings using path expressions” on page 302.
3. Select the xmlConn instance, click the Bindings tab, click the + symbol, and select the description:String property, which is in the food array. Notice that on the Bindings tab, the attribute Index for ‘food’ is dynamically added, as shown in the following image; you’ll fill in this value in a later step. 4. With the results:dinner_menu:food.[n].description:String field selected on the Bindings tab, click Bound To, click the magnifying glass icon, select myTextArea, and select the property.
6. Next, set the DataGrid index default value to 0 to make it available for data binding: select the menu_dg instance, click the Schema tab, select selectedIndex:number, and in the Default Value field in the lower pane, type 0. 7. Save and test the application. Click Load Data, then click different items in the data grid. The text area updates with the detailed description for each food item.
When you run an application that turns the trace on, a detailed log of data binding and web services events and actions appears in the Output window.
Data connectivity (Flash Professional only) You use the connector components in Flash to connect to your data source. The schema for your data source is mapped to properties of a connector component. A typical application might contain several connector components for retrieving or updating data, or both. Before you can create data bindings, you must either set up a connector component on the Stage or create the proper mappings in ActionScript using the WebServiceConnector component class.
To use the WebServiceConnector component, you need to load the web service’s schema into the WebServiceConnector component. A web service’s schema is defined by a Web Service Description Language (WSDL) file. The WSDL file, which is accessible through a URL, specifies a list of operations, parameters, and results that are exposed by the web service. Once the schema is loaded, you can proceed to add data bindings.
The Schema tab displays a schematic representation of the service that you are calling. The parameters and results structure are defined within the schema. The Tips schema states that the service expects one String parameter, product, when it is called; this is the write-only input, as indicated by the right-pointing arrow. The service returns a string as the result of the call; this is the read-only output, as indicated by the left-pointing arrow.
To add, edit the name of, or remove a web service: 1. Click Define Web Services (the planet icon at the top of the panel). 2. To add a service, click Add Web Service, and enter the URL of the web service. Double-click an existing web service to edit its name, or select a service and click Remove to remove it. If you want to edit a WebServiceConnector component’s schema, you can edit it from the Schema tab of the Component inspector.
6. In the Open File dialog box, select the file that you want to use as a sample, and click Open. The schema appears in the Schema tab. You can now create bindings between elements of your XML document and other component properties within your application. Note: Some XML documents may have a structure that Flash MX cannot represent; for example, elements that contain text and child elements mixed together. The following illustration shows the schema for a file named Animals.
A typical workflow for an application that works with data would include binding an array from the XMLConnector component to the DataSet component’s dataProvider property. Or, you can directly bind UI components to fields within certain records of the array, as shown in the example application in “Creating an indexed binding” on page 270. In this scenario, the data set could be used to manage the data. The fields within the data set could then be mapped to any of the UI components using data binding.
Many of the SOAP-based applications that you build will use private web services hosted on your server. After you determine the best way to implement and expose your own web services, it is easy to make public web services available to your client application. When you are in control of the server, you can offer a complete solution. The server is the ideal place for business logic that can determine the best way to respond to requests for data and the results that should be sent back to the client.
Managing data with the DataSet component (Flash Professional only) The data structure that is fundamental to data-driven applications is a table with rows and columns, or fields. To expose the fields of the current row in the table, you must define properties of a DataSet component on the Schema tab. (For an example, see the design time example in “Accessing the data” on page 284.
The DataSet component uses functionality in the DataBinding classes. If you intend to work with the DataSet component in ActionScript only, without using the Binding and Schema tabs in the Component inspector to set properties, you must import the DataBinding classes into your FLA file and set schema properties in your code. For more information, see “Making data binding classes available at runtime (Flash Professional only)” in Using Components. The DataSet component works only with Flash Player 7.
myDataSet.items = recData; } Remoting RecordSet The following ActionScript example assumes that you’re using Flash Remoting and that you’ve made a remoting call that returns a RecordSet. The RecordSet object implements the DataProvider interface. The result is assigned to the dataProvider property of the myDataset component instance: function getSQLData_Result(result) { myDataset.
Array of objects returned from an XMLConnector component The following illustration shows an example of using the Component inspector to bind an array of XML nodes, represented with the XMLConnector component. It assumes that you have imported a schema for an XML file that contains an array of XML nodes. The illustration on the left shows the schema of the XML document, the array of XML nodes represented as an ActionScript array. The illustration on the right shows how the results.datapacket.
//Assigns recData to the items property of the “myDataSet” DataSet component instance myDataSet.items = recData; //Adds schema types for the expected fields var i:mx.data.types.Str; var j:mx.data.types.Num; //Makes the first item the current item myDataSet.first(); //Traces through the properties while ( myDataSet.hasNext() ) { //access the data through the Dataset properties trace(myDataSet.firstName + " " + myDataSet.lastName); myDataSet.next(); } Design time example.
7. Select the DataGrid component, and click the Bindings tab of the Component inspector. 8. Click the Add Binding (+) button to add a new binding. Select dataProvider:Array. 9. Click Bound To, select the DataSet component, and select its dataProvider:Array property. 10. Click Direction and select In. 11. Save and test the application. The data contained within the data set appears in the data grid.
Resolver components do not send any data from a SWF to server-side scripts or external data sources. You need to set up this kind of data transfer. Here are the most common ways to send data outside a SWF: • Bind the resolver’s processed data to a connector component, such as the XMLConnector or WebServiceConnector components. This connector component instance is in addition to the instance that connects your data source to a DataSet or to UI components; see the diagram at the beginning of this chapter.
Note: The information contained within the XML update packet is affected in part by the component parameter values that are assigned by the developer. For information on the XUpdateResolver component parameters, see “Using the XUpdateResolver component (Flash Professional only)” in Using Components. The following XML code is an example of an update packet created by an XUpdateResolver component: For a typical workflow and information on the methods, properties, and events of the RDBMSResolver class, see “Using the RDBMSResolver component (Flash Professional only)” and “RDBMSResolver class (Flash Professional only)” in Using Components. In addition to requirements for your Flash application to resolve data, there are requirements for your server code to fulfill. For more information, see “Server-side requirements for resolving data for RDBMS” on page 304.
The schema of a component shows what properties and fields are available for data binding. For each property or field, there are settings that control validation, formatting, type conversion, and other features that affect how data binding and the data management components handle the data of a field. The Schema Attributes pane, the bottom pane of the Schema tab, presents these settings, which you can view and edit.
• Validation Options: Validation options are additional settings that affect the validation rules for this field. The settings are presented in the Validation Options dialog box, which appears when you select this item. These settings vary according to data type. For example, the String data type has settings for the minimum and maximum allowed length of the data. The XML data type has a setting to control if white space is ignored when converting from a String to XML.
Default settings These settings let you set defaults for various situations. The following list describes the uses for these settings: • If a field’s value is undefined, the default value is used whenever the value of the field is used as the source of a data binding. For example, the data fields of a DataSet component, or the results property of a connector component, can have an undefined value.
@billable: String @hours : Integer @id : Integer @rate : Integer Suppose you want to treat the row node as a record within a grid, and you want the @billable attribute to be treated as a Boolean value and show a true or false value in the grid instead of ON or OFF. Getting the data into the grid is simple: You can simply bind the row schema field to the dataProvider property of the grid.
Schema kinds A kind determines how a schema item for your component should be accessed at runtime. The following kinds come with Flash MX Professional 2004: None The default kind. This kind is identical to the Data kind. Data The schema item is a data structure, and the data field is stored within the data structure as specified by the field’s schema location. This is the normal case. The data structure can be in either ActionScript or XML form. Calculated This kind is used with the DataSet component.
To do this, you set the field’s data type to Boolean, which tells the data binding mechanism to expect Boolean values in that field; and you set the field’s encoder to Boolean, which performs the translation between the underlying string value and the Boolean value that data binding expects the property to have. See the example in “Using kinds and encoders” on page 292. The following encoders come with Flash MX Professional 2004: None The default encoder. No encoding/decoding occurs.
In the following example, the row node represents a record within the XML file. The value of the id attribute is what makes the row unique.
You can create custom encoders. The number of encoders allowed is unlimited. Encoders are defined by XML files found in the Flash MX Professional 2004 Configuration/Encoders folder. The definition includes the following metadata: • An ActionScript class that will be instantiated to encode/decode the data. This class must be a subclass of mx.databinding.DataAccessor.
The fieldnameN are the names of the fields in the new array or records. The definitionN is one of the following: • The name of a field in the original record • A string, enclosed in single quotes ('), that contains a mix of text and tags. A tag is the name of a field in the original array, enclosed in < and >. • A single dot (.), which represents the entire original record For example, suppose you want to assign an array to the DataProvider property of a List component using data binding.
Custom Lets you add a custom class to check for this special kind of validation. Your code should call the validate function when the field is assigned a new value, inspect the value, and determine whether it’s valid. If it is, the function should simply return. If not, the function should call this.ValidationError(“some informative message”);. The custom class must be in the classpath and formatted as shown in the following example: class myCustomType extends mx.databinding.
When to edit schema item settings You can edit anything within the Schema Attributes pane, even schemas that come from an external source, such a web service WSDL file. You can always change any value for any field of any schema, with the following restrictions: • If you change the type, all the other schema item attributes are reset to the default values for the new data type.
Component Property/field Settings Any component Any property or field Kind, Kind Options, Various purposes, as Encoding, Encoding Options described in “Using kinds and encoders” on page 292. Any connector results (and its subfields) Path When to use To identify the location of the data for a virtual schema field. Virtual schemas When you bind an array of data to a DataSet’s items or dataprovider property, the data set only recognizes fields that are top-level items within each row of the array.
The solution is to create a new schema field under the object within the Bird array. The new schema field is named id. Every schema field has a property called path that accepts an XPath statement that points to the data in your XML file. In this case the XPath expression would be key/@id. When you get to the second bullet in the above process, data binding finds an id field for the object. It looks at the path property and uses the XPath statement to get the correct data from the XML file.
• Predicate syntax to further specify nodes to be selected: /B[C] (child node syntax; selects all B nodes that have a C node as a child) /B[@id] (attribute existence syntax; selects all B nodes that have an attribute named id) /B[@id="A1"] (attribute value syntax; selects all B nodes that have an id attribute whose value is A1) • Support for predicate comparison operators: = • Support for Boolean AND and OR values in predicates: /B[@id=1 AND @customer="macromedia"] Note: The following operators are
After the server finishes with the update packet, either successfully or unsuccessfully, it should send back to your Flash application a results packet containing errors or additional XML updates resulting from the update operation. If there are no messages, the results packet should still be sent, but it will have no operation result nodes.
Example of an RDMBSResolver component XML update packet To handle server-side code, you’ll need to understand the XML update packet generated by the resolver component. The information contained within the XML update packet is affected in part by the component parameter values that are assigned by the developer. For information on the RDBMSResolver component parameters, see “Using the RDBMSResolver component (Flash Professional only)” in Using Components.
The following table describes how the key attributes value is determined. If a field is defined as a key field, using the RDBMSResolver component’s fieldInfo parameter, it will always appear in the update packet with key="true".
• The optional msg attribute contains a message string that describes the problem that occurred when attempting the operation • Zero, one, or more field child nodes give field-level specific information. Each field node, at a minimum, should have a name attribute that contains the field name, and a msg attribute that gives the field-level message. It can also optionally contain a curValue attribute that holds the most current value for that field in that row on the server.
To request the data, use the myArray[myIndex] ActionScript expression, as for any array. You must access the array using numeric indices; that is, myIndex must be a number. To iterate over the array, use the following statement: for(var i=0; i < myArray.length; i++); The expression for(var i in myArray) won’t work in this case. To control lazy decoding, you use ActionScript. For more information, see “SOAPCall.doLazyDecoding” in Using Components.
CHAPTER 15 Publishing When you’re ready to deliver Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 content to an audience, you can publish it for playback. By default, the Publish command creates a Flash SWF file and an HTML document that inserts your Flash content in a browser window. The Publish command also creates and copies detection files for Flash 4 and later. If you change publish settings, Flash saves the changes with the document.
This chapter contains the following sections: Playing your Flash SWF files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 About publishing secure Flash documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Publishing Flash documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 About publishing Flash Lite documents . . . . . . . . . . . . . . . . . . . . . . .
About exact domain matching for sharing data between Flash documents Flash Player 7 enforces a stricter security model than previous versions of Flash Player. There were two primary changes in the security model between Flash Player 6 and 7: Exact domain matching Flash Player 6 lets SWF files from similar domains (for example, and store.macromedia.com) communicate freely with each other and with other documents.
To set general publish settings for a Flash document: 1. Open the Publish Settings dialog box. Do one of the following: ■ ■ Select File > Publish Settings. In the Property inspector for the document (which is available when no object is selected), click the Settings button. Note: To create a publish profile for the publish settings that you specify, see “Using publish profiles” on page 327. 2. In the Publish Settings dialog box, select the option for each file format you want to create.
To set publish options for a Flash document: 1. Open the Publish Settings dialog box. Do one of the following: ■ ■ Select File > Publish Settings. In the Property inspector for the document (which is available when no object is selected), click the Settings button. Note: To create a publish profile for the publish settings that you specify, see “Using publish profiles” on page 327. 2. Click the Flash tab and select a Player version from the Version pop-up menu.
Optimize for Flash Player 6 r65 If you selected Flash Player 6 in the Version pop-up menu, you can select this option to target a release of Flash Player 6. The updated version uses ActionScript register allocation to improve performance. Users must have the same release of Flash Player 6 or later. 6. If you selected either Debugging Permitted or Protect from Import in step 5, you can enter a password in the Password text box.
To modify the document-level classpath: 1. Select File > Publish Settings to open the Publish Settings dialog box. 2. Click the Flash tab. 3. Verify that ActionScript 2.0 is selected in the ActionScript Version pop-up menu and click Settings. 4. In the ActionScript Settings dialog box, specify the frame on which the class definition should reside in the Export Frame for classes text box. 5.
To publish HTML that displays your Flash SWF file: 1. Do one of the following to open the Publish Settings dialog box: ■ ■ Select File > Publish Settings. In the Property inspector for the document (which is available when no object is selected), click the Settings button. Note: To create a publish profile for the publish settings that you’ll specify, see “Using publish profiles” on page 327. 2. On the Formats tab, the HTML file type is selected by default.
7. Select Quality options to determine the trade-off between processing time and appearance, as described in the following list. This option sets the QUALITY parameter’s value in the object and embed tags. Low favors playback speed over appearance and does not use anti-aliasing. Auto Low emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If Flash Player detects that the processor can handle it, anti-aliasing is turned on.
10. Select a Scale option to place the Flash content within specified boundaries, if you’ve changed the document’s original width and height. The Scale option sets the SCALE parameter in the and embed tags. object Default (Show All) shows the entire document in the specified area without distortion while maintaining the original aspect ratio of the SWF files. Borders can appear on two sides of the application.
To enable Flash Player detection: 1. Select Detect Flash Version on the HTML tab of the Publish Settings dialog box. For general information, see “Specifying publish settings that create HTML documents with embedded Flash content” on page 315. Note: The option is available only if you selected Flash Player 4 or later on the Flash tab of the Publish Settings dialog box, and if you have not selected QuickTime or Image Map as a template. 2. Click Settings for Detect Flash Version.
To publish a GIF file with your Flash file: 1. Do one of the following to open the Publish Settings dialog box: ■ ■ Select File > Publish Settings. In the Property inspector for the document (which is available when no object is selected), click the Settings button. Note: To create a publish profile for the publish settings that you specify, see “Using publish profiles” on page 327. 2. On the Formats tab, select the GIF Image type.
7. Select one of the following Transparent options to determine the transparency of the application’s background and the way alpha settings are converted to GIF: Opaque makes the background a solid color. Transparent makes the background transparent. Alpha sets partial transparency. You can enter a Threshold value between 0 and 255. A lower value results in greater transparency. A value of 128 corresponds to 50% transparency. 8.
Specifying publish settings for JPEG files The JPEG format lets you save an image as a highly compressed, 24-bit bitmap. Generally, GIF format is better for exporting line art, and JPEG format is better for images with continuous tones, such as photographs, gradients, or embedded bitmaps. Flash exports the first frame in the SWF file as a JPEG, unless you mark a different keyframe for export by entering the frame label #Static. To publish a JPEG file with your Flash SWF file: 1.
To publish a PNG file with your Flash SWF file: 1. Do one of the following to open the Publish Settings dialog box: ■ ■ Select File > Publish Settings. In the Property inspector for the document (which is available when no object is selected), click the Settings button. Note: To create a publish profile for the publish settings that you specify, see “Using publish profiles” on page 327. 2. On the Formats tab, select the PNG Image type.
6. If you selected 8-bit for Bit Depth in step 4, select a Dither option to specify how pixels of available colors are mixed to simulate colors not available in the current palette. Dithering can improve color quality, but it increases file size. Select from the following options: None turns off dithering and replaces colors not in the basic color table with the solid color from the table that most closely approximates the specified color.
Path computes a simple linear function of the three neighboring pixels (left, above, upper left), and then selects the neighboring pixel closest to the computed value as a predictor. Adaptive analyzes the colors in the image and creates a unique color table for the selected PNG file. This option is best for systems showing thousands or millions of colors; it creates the most accurate color for the image but results in a file size larger than a PNG created with the web 216 palette.
4. For Dimensions, enter a width and height in pixels for the exported QuickTime video, or select Match Movie to make the QuickTime video the same size as the Flash SWF file and keep its aspect ratio. 5. Select one of the following Alpha options to control the transparency (alpha) mode of the Flash track in the QuickTime video without affecting any alpha settings in the Flash application: Alpha Transparent makes the Flash track SWF file transparent and shows any content in tracks behind the Flash track.
About publishing Flash Lite documents Macromedia Flash Lite lets Flash designers, developers, and content providers quickly create engaging content for mobile phones using the ActionScript scripting language, drawing tools, and templates. For detailed information on authoring for mobile devices, see the Content Development Kits on the Mobile and Devices Development Center at www.macromedia.com/ devnet/devices. Flash Lite 1.1 supports two new ActionScript functions: FSCommand() and FSCommand2().
Duplicating a publish profile If you’ve modified publish settings for a publish profile and you want to save the modifications, you can create a duplicate profile. To duplicate a publish profile: 1. From the Current Profile pop-up menu in the Publish Settings dialog box (File > Publish Settings), select the publish profile that you want to copy. 2. Click the Duplicate Profile button. 3. In the Duplicate Profile dialog box, enter the profile name in the Duplicate Name text box, and click OK.
Deleting a publish profile When you no longer need a publish profile, you can delete it from the document. To delete a publish profile: 1. In the Publish Settings dialog box (File > Publish Settings), select the publish profile that you want to delete in the Current Profile pop-up menu. 2. Click the Delete Profile button. In the dialog box that requests confirmation of the deletion, click OK.
Customizing HTML publishing templates If you’re familiar with HTML, you can modify HTML template variables to create an image map, a text report or a URL report, or to insert custom values for some of the most common Flash object and embed parameters (for Internet Explorer and Netscape Communicator/ Navigator, respectively). Flash templates can include any HTML content for your application or even code for special interpreters such as ColdFusion and ASP. To modify an HTML publishing template: 1.
Using HTML template variables The following table lists the template variables that Flash recognizes. For a definition of all the tags with which these variables work, see “Editing Flash HTML settings” on page 334.
Attribute/parameter Template variable JPEG height $JH JPEG filename $JN PNG width $PW PNG height $PH PNG filename $PN Creating an image map Flash can generate an image map to show any image and maintain the function of buttons that link to URLs. When an HTML template includes the $IM template variable, Flash inserts the image map code. The $IU variable identifies the name of the GIF, JPEG, or PNG file. To create an image map: 1.
Creating a text report The $MT template variable causes Flash to insert all the text from the current Flash SWF file as a comment in the HTML code. This is useful for indexing the content of a SWF file and making it visible to search engines. Creating a URL report The $MU template variable makes Flash generate a list of the URLs referred to by actions in the current SWF file and insert it at the current location as a comment. This lets link verification tools see and verify the links in the SWF file.
Editing Flash HTML settings You need an HTML document to play a Flash SWF file in a web browser and specify browser settings. If you are experienced with HTML, you can change or enter HTML parameters in an HTML editor or create custom HTML files to control a Flash SWF file. You can also have Flash create the HTML document automatically when you publish a SWF file; see “Publishing Flash documents” on page 311.
Note: If you use both the object and the embed tags, use identical values for each attribute or parameter to ensure consistent playback across browsers. The parameter swflash.cab#version=7,0,0,0 is optional, and you can omit it if you don’t want to check for the version number. Parameters and attributes The following tag attributes and parameters describe the HTML code created by the Publish command. You can refer to this list as you write custom HTML to show Flash content.
classid attribute Value clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 Description Identifies the ActiveX control for the browser. The value must be entered exactly as shown. Applies to the object tag only. width attribute Value n or n% Template variable: $WI Description Specifies the width of the application either in pixels or as a percentage of the browser window.
Description Identifies the location of the Flash Player plug-in so that the user can download it if it is not already installed. The value must be entered exactly as shown. Applies to the embed tag only. swliveconnect attribute Value true | false Description (Optional) Specifies whether the browser should start Java when loading Flash Player for the first time. The default value is false if this attribute is omitted.
quality attribute/parameter Value low | medium | high | autolow | autohigh | best Template variable: $QU Description (Optional) Specifies the level of anti-aliasing to be used when your application plays. Because anti-aliasing requires a faster processor to smooth each frame of the SWF file before it is rendered on the viewer’s screen, select one of the following values based on whether your priority is speed or appearance: Low favors playback speed over appearance and never uses anti-aliasing.
scale attribute/parameter Value showall | noborder | exactfit Template variable: $SC Description (Optional) Defines how the application is placed within the browser window when width and height values are percentages. Showall (Default) makes the entire Flash content visible in the specified area without distortion while maintaining the original aspect ratio of the. Borders can appear on two sides of the application.
Description (Optional) Specifies where a scaled Flash SWF file is positioned within the area defined by the width and height settings. For more information about these conditions, see “scale attribute/ parameter” on page 339. L, R, T, and B align the application along the left, right, top or bottom edge, respectively, of the browser window and crop the remaining three sides as needed.
Description (Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0. This attribute/parameter works only in Windows with the Flash Player ActiveX control. Window plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item. Opaque makes the application hide everything behind it on the page.
true (or omitted) sets the ActiveX control will perform seamless tabbing: after users tab through the Flash application, the next tab keypress will move the focus out of the Flash application and into the surrounding HTML content or to the browser status bar if there is nothing focusable in the HTML following the Flash application.
About configuring a web server for Flash When your files are accessed from a web server, the server must properly identify them as Flash content to display them. If the MIME type is missing or not properly delivered by the server, the browser can show error messages or a blank window with a puzzle piece icon.
Chapter 15: Publishing
CHAPTER 16 Exporting The Export Movie command in Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 lets you create content that can be edited in other applications and export Flash content directly into a single format. For example, you can export an entire document as a Flash SWF file, as a series of bitmap images, as a single frame or image file, or as moving and still images in various formats, including GIF, JPEG, PNG, BMP, PICT, QuickTime, or AVI.
Remember the following considerations: • When you export a Flash image as a vector-graphic file (in Adobe Illustrator format), you preserve its vector information. You can edit these files in other vector-based drawing programs, but you can’t import these images into most page-layout and word-processing programs. • When you save a Flash image as a bitmap GIF, JPEG, PICT (Macintosh), or BMP (Windows) file, the image loses its vector information and is saved with pixel information only.
File type Extension Windows Macintosh “Macromedia Flash Video (FLV)” on page 349 .flv ✔ ✔ “JPEG Sequence and JPEG Image” on page 349 .jpg ✔ ✔ “PICT (Macintosh)” on page 349 .pct “PNG sequence and PNG image” on page 350 .png ✔ ✔ “QuickTime” on page 350 .mov ✔ ✔ “QuickTime Video (Macintosh)” on page 351 .mov “WAV audio (Windows)” on page 351 .wav ✔ “Windows AVI (Windows)” on page 351 .avi ✔ .
Animation is available for the Animated GIF export format only and lets you enter the number of repetitions, where 0 repeats endlessly. Bitmap (BMP) The Bitmap (BMP) format lets you create bitmap images for use in other applications. The Bitmap Export Options dialog box has the following options: Dimensions sets the size of the exported bitmap image in pixels. Flash ensures that the size you specify always has the same aspect ratio as your original image.
Flash document (SWF) You can export the entire document as a Flash SWF file, to place the Flash content in another application, such as Dreamweaver. You can select the same options for exporting a document as you can for publishing the document. See “Publishing Flash documents” on page 311. Macromedia Flash Video (FLV) The Macromedia FLV file format lets you import or export a static video stream with encoded audio.
Include sets the portion of the document to be exported, either Minimum Image Area or Full Document Size. Color Depth designates whether the PICT file is object-based or bitmap. Object-based images generally look better when printed, and scaling doesn’t affect their appearance. Bitmap PICT images normally look best onscreen and can be manipulated in applications such as Adobe Photoshop. You can also select a variety of color depths with bitmap PICT files.
These export options are identical to QuickTime publish options. See “Specifying publish settings for QuickTime videos” on page 325. QuickTime Video (Macintosh) The QuickTime Video format converts the Flash document into a sequence of bitmaps embedded in the file’s video track. The Flash content is exported as a bitmap image without any interactivity. This format is useful for editing Flash content in a video-editing application.
Video Format selects a color depth. Some applications do not yet support the Windows 32-bit image format. If you have problems using this format, use the older 24-bit format. Compress Video displays a dialog box for selecting standard AVI compression options. Smooth applies anti-aliasing to the exported AVI movie. Anti-aliasing produces a higher-quality bitmap image, but it can cause a halo of gray pixels to appear around images when placed over a colored background.
5. Update the Flash document (FLA) as needed in Flash. 6. To save the Flash document (FLA) and re-export the Flash content to Dreamweaver, do one of the following: ■ ■ To update the file and close Flash, click the Done button above the upper left corner of the Stage. To update the file and keep Flash open, select File > Update for Dreamweaver.
Chapter 16: Exporting
CHAPTER 17 Creating Accessible Content You can create Flash content that is accessible to all users, including those with disabilities, using the accessibility features provided with Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. As you design accessible Flash applications, consider how users might interact with the content.
• Provide captions for narrative audio. Be aware of audio in your document that might interfere with a user being able to listen to the screen reader. See “Testing accessible content” on page 373. • Ensure that color is not the only means of conveying information. In addition, make sure that the foreground and background contrast sufficiently to make text readable for people with low vision and color blindness.
For additional information about Section 508, see the following websites: • The US government-sponsored website at www.section508.gov • The Macromedia accessibility site at www.macromedia.com/macromedia/accessibility/ Macromedia Flash Accessibility web page For the latest information on creating and viewing accessible Flash content, including supported platforms, screen reader compatibility, articles, and accessible examples, consult the Macromedia Flash Accessibility web page at www.macromedia.
The Windows ActiveX (Internet Explorer plug-in) version of Flash Player 6 supports MSAA, but the Windows Netscape and Windows stand-alone players do not. Caution: MSAA is currently not supported in the opaque windowless and transparent windowless modes. (These modes are options in the HTML Publish Settings panel, available for use with the Windows version of Internet Explorer 4.0 or later, with the Flash ActiveX control.
Input text Text is transferred to the screen reader. No names are transferred, except where labeling relationships are found, and no descriptions or keyboard shortcut strings are transferred. Buttons The state of the button is transferred to the screen reader. No names are transferred, except where labeling relationships are found, and no descriptions or keyboard shortcut strings are transferred. Documents The document state is transferred to the screen reader, but with no name or description.
All objects in Flash documents must have instance names for you to apply accessibility options to them. You create instance names for objects in the Property inspector. The instance name is used to refer to the object in ActionScript. To open the Accessibility panel: 1. Select Window > Other Panels > Accessibility. 2. Select from the available options: Make Object Accessible instructs Flash Player to pass the accessibility information for an object to a screen reader.
For more information, see the Macromedia Flash Accessibility web page at www.macromedia.com/software/Flash/productinfo/accessibility/. Selecting names for buttons, text fields, and entire Flash applications You can use the Accessibility panel to assign names to buttons and input text fields so that they are identified appropriately by the screen reader. There are two ways of doing this: • Use the auto label feature to assign text adjacent or within the object as a label.
For example, in the following figure, the text that describes the button appears outside and to the right of the button. In this location, Flash Player does not detect the text, and it is not read by the screen reader. To rectify this, open the Accessibility panel and select the button and enter the desired name (for example, “left arrow”) and description (for example, “Go to previous page”) in the Name and Description text boxes, respectively. To prevent repetition, make the text object inaccessible.
3. Enter information for the selected object as needed: Dynamic text Enter a name for the text object in the Name text box and an optional description of the text in the Description text box. (To provide a description for static text, you must convert it to dynamic text.) Input text fields or buttons Enter a name for the object. Enter a description of the object in the Description text box. Enter a keyboard shortcut in the Shortcut text box. Movie clips Enter a name for the object.
Hiding an object from the screen reader You can hide an object from the screen reader simply by turning off accessibility for the object. You should only hide objects that are repetitive or convey no content. When an object is hidden, the screen reader ignores the object. 1. On the Stage, select the button or input text field you want to hide from the screen reader. 2. Do one of the following: ■ ■ Select Window > Properties if the inspector is not visible.
3. In the Shortcut field, type the name of the keyboard shortcut, using the following conventions: ■ Spell out key names, such as Control or Alt. ■ Use capital letters for alphabetic characters. ■ Use a plus sign (+) between key names, with no spaces (for example, Control+A). Warning: Flash does not check that the ActionScript to code the keyboard shortcut has been created.
2. In the Accessibility panel, select Make Movie Accessible (the default setting) to expose the document to screen readers. 3. Select or deselect the Make Children Accessible option to expose or omit any accessible objects in the document to screen readers. 4. If you selected Make Movie Accessible in step 3, enter information for the document as needed: ■ Enter a name for the document in the Name text box. ■ Enter a description of the document in the Description text box. 5.
Creating a tab order index for keyboard navigation in the Accessibility panel (Flash Professional only) You can create a tab order index in the Accessibility panel for keyboard navigation. You can create a custom tab order for the following objects: • • • • • • Dynamic text Input text Buttons Movie clips, including compiled movie clips Components Screens Note: You can also use ActionScript to create a keyboard navigation tab order index.
To view a tab order: • Select View > Show Tab Order. Tab index numbers for individual objects appear in the upper left corner of the object. Note: Tab order created with ActionScript code, rather than the Accessibility panel, does not appear when you enable the Show Tab Order option. About animation and accessibility for the visually impaired In some situations, you might want to change the property of an accessible object during movie playback.
Using accessible components To accelerate building accessible applications, Macromedia has built a core set of UI components. These components automate many of the most common accessibility practices related to labeling, keyboard access, and testing and help ensure a consistent user experience across rich applications.
For properties that apply to a specific object, you can use the syntax instancename._accProps. The value of _accProps is an object that can include any of the following properties: Property Type Equivalent selection in the Accessibility panel Applies to .
Implementing screen reader detection with the Accessibility.isActive() method To create Flash content that behaves in a specific way if a screen reader is active, you can use the ActionScript method Accessibility.isActive(), which returns a value of true if a screen reader is present, and false otherwise. You can then design your Flash content to perform so that it’s compatible with screen reader use (for example, by hiding child elements from the screen reader). For more information, see Accessibility.
Because static text cannot be assigned an instance name, it cannot be included in the list of the tabIndex property values. As a result, a single instance of static text anywhere in the SWF file causes the reading order to revert to the default. To specify a tab order, you assign an order number to the tabIndex property, as shown in the following example: _this.myOption1.btn.tabIndex = 1 _this.myOption2.txt.tabIndex = 2 See Button.tabIndex, MovieClip.tabIndex, and TextField.
Testing accessible content When you test your accessible Flash applications, follow these recommendations: • If you are designing your document to work with screen readers, download several screen readers and test your application by playing it in a browser with the screen reader enabled. Make sure that the screen reader is not attempting to “talk over” places in your document where you have inserted separate audio.
Chapter 17: Creating Accessible Content
CHAPTER 18 Printing from SWF Files You can add printing functionality to your Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 document that lets users print from Flash Player. You can use the ActionScript PrintJob class, or you can use the print() or printAsBitmap() ActionScript functions. Users can also access the Flash Player context menu and select the Print command there.
Printing from the Flash Player context menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Publishing a document with printable frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Controlling printing To control what users can print, remember the following items as you set up documents and movie clips for printing: • Adjust the page layout in any frames that you designate as printable to match the desired printed output.
Because you are spooling a print job to the user’s operating system between your calls to PrintJob.start() and PrintJob.send(), and because the PrintJob functions might temporarily affect the Flash Player internal view of onscreen Flash content, you should implement print-specific activities only between your calls to PrintJob.start() and PrintJob.send(). For example, the Flash content should not interact with the user between PrintJob.start() and PrintJob.send().
Starting a print job Calling the PrintJob.start() method prompts Flash Player to spool the print job to the user’s operating system and also prompts the user’s operating system print dialog box to appear. If the user selects an option in the print dialog box to begin printing, the PrintJob.start() method returns a value of true. (The value is false if the user cancels the print job, in which case the script should call only delete). If successful, the PrintJob.
Each call to add a new page is unique, which lets you modify parameters without affecting previously set parameters. For example, you can specify that one page print as a bitmap image and another page print as a vector graphic. You can add as many new pages to your print job as the print job requires. One call to add a page equals one printed page. Note: Any ActionScript that needs to be called to change a resulting printout must run before the PrintJob.addPage() method is called.
About scaling A print job using the PrintJob class prints Flash content, by default, without scaling it. For example, an object that is 144 pixels wide on screen will print as 144 points, or 2 inches wide (One point equals one pixel. In the authoring tool, 72 pixels equals one inch; on paper, 72 points equals one inch.) To understand how Flash screen content maps to the printed page, it helps to understand screen and print units of measure.
Sending the print job to the printer To send the print job to the printer after using the addPage() calls, use the PrintJob.send() method, which causes Flash Player to stop spooling the print job so that the printer starts printing. Deleting the print job After sending the print job to a printer, use the ActionScript function delete PrintJob() to delete the PrintJob object, which frees memory. For more information, see delete in Flash ActionScript Language Reference.
To control what users can print, remember the following items as you set up documents and movie clips for printing: • Adjust the page layout in any frames that you designate as printable to match the desired printed output. Using Flash Player, you can print all shapes, symbols, bitmaps, text blocks, and text fields. Levels in a SWF file are not composited on print output. • The Flash Player printer driver uses the HTML settings for dimension, scale, and alignment in the Publish Settings dialog box.
You use the label #b to designate a frame to be used to designate the print area. The label #b must be on the same layer as a frame labeled #p. For more information about print() function parameters, see print() in Flash ActionScript Language Reference. To specify a print area when printing frames: 1. Open the Flash document (FLA) containing the frames you will set to print. 2. Select a frame that you have not specified to print with a #p frame label.
Changing the printed background color With Flash Player, you can print the background color set in the Document Properties dialog box. You can change the background color for only the frames to be printed by placing a colored object on the lowest layer of the Timeline being printed. To change the printed background color: 1. Place a filled shape that covers the Stage on the lowest layer of the Timeline that will print. 2. Select the shape and select Modify > Document.
For more information on publishing options, see “Publishing Flash documents” on page 311. Printing from the Flash Player context menu You can use the Print command in the Flash Player context menu to print frames from any Flash SWF file. The context menu’s Print command cannot print transparency or color effects and cannot print frames from other movie clips; for more sophisticated printing capabilities, use the PrintJob object or the print() function.
Chapter 18: Printing from SWF Files
CHAPTER 19 Creating E-learning Content Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 learning interactions help you create interactive online (e-learning) courses that run in Flash. Using the Flash learning interactions has many benefits: • Anyone with a Flash-enabled web browser can use the instructional content you create. • You can customize the interface to meet your needs.
Setting control button labels for a learning interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Tracking to AICC- or SCORM-compliant learning management systems . . . . . . . . . . . . . . . 414 Extending learning interaction scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Including a Flash learning interaction in a document You can use either quiz templates or stand-alone interactions in your Flash documents: • The quiz templates are designed for scenarios in which interaction-based quizzes are required or tracking is necessary. The quiz learning interactions are graphically designed to fit into the quiz format. The quiz templates contain a mechanism that counts a cumulative score and starts and stops the necessary tracking in both AICC- and SCORM-compliant APIs.
To create a quiz: 1. Create a new file by selecting File > New. 2. In the New from Template window, select the Templates tab. 3. In the Category column, select Quiz; then in the Templates column, select one of the quiz styles. Setting the quiz parameters After you create a new file and select one of the quiz templates, the next step is to set the quiz parameters.
2. Do one of the following to open the Component Inspector: ■ Select Window > Development Panels > Component Inspector. ■ In the Property inspector, click Launch Component Inspector. Note: If the text in the Component inspector is too small to be legible, drag a corner of the panel to enlarge it. You may need to undock the panel to enlarge it. 3. Select Randomize if you want the quiz questions to be presented in a random order and not necessarily in the order in which they appear in the Timeline. 4.
6. In the Activity ID and Activity Name text boxes, enter the activity ID and activity name of your LMS, if you are using one. If you are not using an LMS, you can either accept or delete the default entries. 7. Select Show Results Page if you want to present quiz results to users after they have completed the quiz. Modifying learning interactions in a quiz Each question in the quiz is considered an interaction.
Configuring a Learning Interaction component Included with each quiz template is one of each of the six learning interaction types, stored in movie clips in the library. These movie clips are simply containers for the collection of elements that make up each interaction. When you add an interaction (movie clip) to the Stage, you must break it apart to edit the individual objects. To configure a Learning Interaction component: 1. With the entire learning interaction selected, select Modify > Break Apart.
4. In the Property inspector, click Launch Component Inspector. 5. If the Flash application will send tracking information to a server-side LMS, specify a name for the interaction in the Interaction ID text box. You should uniquely name each interaction in the quiz as specified by your LMS. Each interaction in the quiz templates is uniquely named. However, if you add interactions from the library or you are not using the quiz template, make sure to uniquely name each interaction in your file. 6.
9. (Optional) Click the Assets button, and change the assets for the learning interaction. See “Adding, naming, and registering assets” on page 407. Adding learning interactions to a quiz template When you use a quiz template, you add learning interactions to the Interactions layer. To add an interaction to the Timeline when using a quiz template: 1. In the first layer of the Timeline, select the frame that precedes the frame number in which you want to add the interaction.
Adding learning interactions to a document that doesn’t use a quiz template If you are adding learning interactions to a Flash document that does not use a quiz template, you can place stand-alone learning interactions on the Timeline in a single frame, sequential frames (for example, 10 questions in 10 sequential frames), or labeled frames. To add a stand-alone learning interaction to the Timeline when not using a quiz template: 1.
About managing library assets for learning interactions When you drag a learning interaction from the Learning Interactions common library to the Stage, the symbols that comprise the learning interaction are copied from the common library to the library of the Flash document you are creating. For example, if you copy a Hot Object learning interaction from the Learning Interactions common library to your document, the symbols in the following illustration become part of the document library.
Testing to see if a movie clip is broken apart It is a good idea to check whether a learning interaction is broken apart or still grouped within the movie clip container. To verify whether a learning interaction is broken apart: • Select a text field or any other single element of the learning interaction on the Stage. If a grouped object is selected, the interaction is not broken apart.
Changing buttons, check boxes, and radio buttons The learning interactions use the Flash user interface (UI) Button, CheckBox, RadioButton and TextInput components. You must use these UI components within the learning interaction movie clips. The learning interaction scripts use the internal features of the UI components to function properly. The quiz templates already contain all the necessary UI components for each interaction.
Testing a quiz It is important to test a quiz frequently as you add and remove interactions. To test a quiz: 1. Select Control > Test Movie. The quiz appears in the Flash Player window. 2. Answer the questions as they appear. 3. When you complete the quiz, close it in the Flash Player window to return to the workspace in which you edit the document. Configuring learning interactions For each of the six interactions, you must enter specific parameters for the quiz to function properly.
4. In the Matches Target Name column, list the matching target instance name for that Drag object. Each target must have a unique name. If you add a new target on the Stage, make sure to enter its name here. If you enter a Drag instance name in the Drag Object Name column, you need to enter a corresponding Target instance name in the Matches Target Name column. However, you can enter a Target instance name in the Matches Target Name column without a matching Drag instance name.
Configuring a Fill in the Blank interaction The Fill in the Blank interaction uses a question text field, a user entry text field, a control button, and a feedback text field. To set up a Fill in the Blank interaction: 1. If you are not using a quiz template, place the learning interaction on the Stage. If you are using a quiz template, select the frame on the Interactions layer that contains the Fill in the Blank interaction (Frame 3, if you have not added or removed keyframes). 2.
5. Specify whether the matching response must be an exact match. If you select Exact Match, a correct response matches only if the user enters the text exactly as it appears in your response. With Exact Match deselected, an answer is considered correct if it contains the correct word. For example, if the answer is zebra and the user enters striped zebra, the answer is considered correct. This feature does not work if the correct answer is more than one word.
Adding and removing hot object distractors You can change the default number of six distractors (choices) by adding more distractors or deleting existing distrators. You can include from one to eight hot object distractors in a Hot Object learning interaction. To add a hot object distractor: 1. Create a movie clip symbol containing the graphics for the hot object distractor.
To configure a Hot Spot interaction: 1. If you are not using a quiz template, place the learning interaction on the Stage. If you are using a quiz template, select the frame on the Interactions layer that contains the Hot Spot interaction (Frame 5, if you have not added or removed keyframes). 2. Break the movie clip apart (Modify > Break Apart), display the Component Inspector, and then type the interaction ID and the question. See “Configuring a Learning Interaction component” on page 393. 3.
Configuring a Multiple Choice interaction In a Multiple Choice interaction, the user responds to a question with multiple answers; either one answer or several answers can be correct. To configure a Multiple Choice interaction: 1. If you are not using a quiz template, place the learning interaction on the Stage. If you are using a quiz template, select the frame on the Interactions layer that contains the Multiple Choice interaction (Frame 6, if you have not added or removed keyframes). 2.
Configuring a True or False interaction In a True or False interaction, the user responds with an answer of either True or False. To configure a True or False interaction: 1. If you are not using a quiz template, place the learning interaction on the Stage. If you are using a quiz template, select the frame on the Interactions layer that contains the True or False interaction (Frame 7, if you have not added or removed keyframes). 2.
• Text fields can share the same instance names across multiple interactions. After you name the assets on the Stage, it’s important to register those names in the Component inspector for the learning interaction so that the scripts can control the assets. About naming Learning Interaction component instances Every interaction has an interaction component associated with it to configure its unique parameters. These components do not need to be named.
Naming and registering graphic distractors Graphic distractors such as Drag objects, Target objects, hot spots, and hot objects must be named uniquely across all interactions. This means that in a file with two Drag and Drop interactions, each containing four Drag objects, each of the eight Drag objects in the file must be named uniquely.
Asset Description Object type Instance name Reset button Resets Drag objects Flash UI Button component Template_ResetButton 1-8 Drag objects Drag object distractors Movie clip symbol Drag1 – Drag8 1-8 Target objects Targets for Drag objects Movie clip symbol Target1 – Target8 Fill in the Blank learning interaction asset names Asset Description Object type Instance name Question text field Holds question text Dynamic text field Template_Question Feedback text field Holds feedback tex
Multiple Choice learning interaction asset names Asset Description Object type Instance name Question text field Holds question text Dynamic text field Template_Question Feedback text field Holds feedback text Dynamic text field Template_Feedback Control button Submits user response Flash UI Button and controls navigation component Template_ControlButton 3-8 check boxes Check box distractors Checkbox1-8 Flash UI CheckBox component True or False learning interaction asset names Asset Desc
Setting Knowledge Track options for a learning interaction Knowledge Track is an automatic data-tracking feature that lets you transmit student performance data to a LMS, such as Lotus LearningSpace, or to other back-end tracking systems. Knowledge Track works with both AICC- and SCORM-compliant learning management systems. Knowledge Track captures and/or stores student information internal to the Flash application and transmits that data to an HTML page.
5. Specify the Weighting value for the interaction. The quiz templates use this parameter to calculate the score in the Results page. The default value is 1. Weighting indicates the relative importance of a question. You can enter any numeric value. If all learning interactions have a weight of 1, they are all scored equally. A weight of 2 counts twice as much as a weight of 1 and half as much as a weight of 4.
Setting control button labels for a learning interaction All six types of interactions use an instance of the same control buttons: Check Answer, Submit, Next Question, and Reset. The only exception to this is the True/False interaction, which does not use a Reset button. You can change the label for the instance of each button using the Component Inspector. To change the label for an instance of a control button: 1. Select the Learning Interaction component, to the left of the Stage in the quiz template.
Overview of the communication for AICC- and SCORM-compliant content The following overview shows what a student experiences when completing a quiz, along with hidden steps that are not exposed to the student. AICC communication overview When a student takes an AICC-compliant quiz, the following events occur: 1. The LMS is opened. 2. The student logs in to the LMS. 3. The student navigates through the course structure to find an assignable unit (AU).
Preparing Flash learning interactions for web hosting In order for web users to see your Flash application, you need to embed it into a web page. The steps to prepare AICC- and SCORM-compliant files for web hosting are slightly different and are covered in the following two sections.
10. Start the LMS system (or create the AICC Course Descriptor Files) that references the frameset.htm file. Preparing a SCORM-compliant learning interaction for web hosting To send tracking data to a SCORM-compliant LMS, you must enable tracking for the quiz and publish the learning interaction using the Flash with SCORM Tracking template. In addition, you must place the files generated by Flash on your web server in the same directory.
• When the Timeline moves to the third interaction, that interaction’s component creates an instance of LToolBox global class in index2 of the SessionArray. It continues with index3, index4, and so on, until all interactions are in an index. • At the end of a series of interactions, all the data processed during those interactions are available and organized. Note: The SessionArray is used the same way in the stand-alone interactions and the quiz interactions.
All the methods and properties of the LToolBox global class are available within each SessionArray index. Basic structure of the Learning Interaction scripts and components Now that you know how the interaction data are stored and retrieved, here’s a little more information to complete the picture. The Learning Interaction components are really the center of the e-learning setup.
Chapter 19: Creating E-learning Content
APPENDIX A Using Samples and Templates Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 come with several samples and templates to help you get started. This appendix contains information on how to use samples and how to use templates. Using samples One of the quickest ways to learn Flash is to look at existing sample files to see how they were created. Each of the samples provided is described in the subsections below.
Building a photo scrapbook This sample shows how to build an interactive photo scrapbook easily using behaviors instead of scripting. Behaviors provide an easy way to add interactivity to Flash content without having to write ActionScript. In this example, multiple behaviors are combined to create an interactive scrapbook. You can explore the source to learn more or to customize it to add your own pictures.
Building custom panels with the Extensibility API This sample covers how to design and build a panel to control the functions of Flash. The Trace Bitmap panel was built using the Extensibility API available in Flash. The Extensibility API is a series of JavaScript methods and properties that correspond to methods and properties inside the Flash application. You can explore the document to see how the JavaScript commands are used and to get ideas for building your own panel.
Using templates Flash is equipped with several templates to help streamline your work.
Browser compatibility and requirements with advertising templates You should work with webmasters and network administrators to create detailed testing plans that include tasks relevant to your specific users. These plans should be publicly available and updated regularly. Also, vendors should publish detailed plans indicating the browser and platform combinations in which their technologies are stable. Examples are available at the IAB Rich Media testing site at www.iab.net/standards/guidelines.asp.
The data property of the radio buttons is set to a string that is appended to a base string to properly form the correct URL. For example, if the user selects High Bandwidth and the base string is cartoon, the file that is loaded is cartoon_hi.flv. To change the base string, open the Actions panel and select Frame 1 of the Actions layer of the Select screen.
Adding content to the video templates (Flash Professional only) Adding content to the video templates is as easy as adding new slides to the presentation and creating graphics and text, importing media, and adding animation. There are a few slides with some content to help get you started, but you can replace the content on the slides. After you’ve added content, you can use the Behaviors panel to add transitions between slides for eye-catching animation.
Using autoplay mode with the Photo Slideshow template The Photo Slideshow template also has a built-in autoplay mode that automatically changes the photo after a set delay. The template is set to a default delay time of 4 seconds, but you can change this setting easily. To adjust the delay: 1. Unlock the _controller layer. 2. Select the controller component. 3. Display the Parameters tab in the Component inspector by selecting Window > Development Panels > Component Inspector.
You can also print each slide in your presentation by clicking the Print icon. If you know that you won’t print your slides, you can delete the icon from the layout. Customizing your slide presentation If you want to change the colors in the template, select Modify > Movie, and change the background color. The presentation background changes to the newly selected color. Additionally, many templates come with alternate backgrounds. Show and hide the additional background layers to expose alternate designs.
Adding transitions to the screen presentation templates (Flash Professional only) After you’ve customized the content of your presentation, you can add animated transitions that help illustrate your points. Use the Behaviors panel to add transitions to your presentations. To add transitions to a screen presentation: 1. Select the screen for which you’d like to add a transition. 2. If the Behaviors panel isn’t visible, select Window > Development Panels > Behaviors. 3.
Using form application templates (Flash Professional only) Flash MX Professional 2004 provides two templates you can use to create form-based applications: • “Query-Error-Response template (Flash Professional only)” on page 431 • “Windowed Application template (Flash Professional only)” on page 432 Query-Error-Response template (Flash Professional only) The Query-Error-Response template helps you create applications that perform a simple query to a remote data source, and then, depending on the outcome, di
To customize the Response form: 1. Select the Response form in the Screen Outline pane. 2. Use components to create fields that will show the results. For example, if your service is a weather service that returns temperature, you could use a label component to create a non-editable text display. After you’ve laid out your components, use the Parameters tab on the Component inspector to create bindings between your components and the results of your service connector. To customize the Error form: 1.
To modify window content: 1. Select any form in the outline and replace the contents with components of your choice. You can even add data connectors to populate your components with remote data. For more information about data connectors, see Chapter 1, “About Components” in Using Components. 2. After altering the contents of a form, make sure that the window component that will load the form is sized properly, so your form’s content won’t appear clipped at runtime. To add new windows and content: 1.
Appendix A: Using Samples and Templates
APPENDIX B XML to UI Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 come with several extensibility features including Behaviors, Commands (JavaScript API), Effects, and Tools. With these features, advanced users can extend or automate the authoring tool’s functionality. The XML to UI engine works with each of these extensibility features to create dialog boxes that the user sees if the extension either requires or accepts parameters.
Tag Description
Attributes None. Child tags Control tags. Parent tag
Child tags
Parent tag
... child tags ... Attributes None. Child tags Control tags. Parent tag
... Attributes None. Child tags
Child tags None. Parent tag
// Create an XML to UI dialog box using the XML definition in the // Trace Selections.xml file var traceSelectionsDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/Trace Selections.xml" ); if (traceSelectionsDlg.dismiss == "accept") { fl.trace("Checkbox 1: " + traceSelectionsDlg.checkbox1); fl.trace("Checkbox 2: " + traceSelectionsDlg.checkbox2); fl.trace("Checkbox 3: " + traceSelectionsDlg.checkbox3); fl.trace("Checkbox 4: " + traceSelectionsDlg.checkbox4); fl.
Number; an integer used to set the control’s position in the tab order (available only on Windows). tabindex accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows). oncommand A JavaScript command that executes when the button is clicked. Child tags None. Parent tag
The button command now appears on the Commands menu. If you have a Flash document open, you can select the button command from the Commands menu and the dialog box defined by button.xml appears.
Parent tag
Child tags
Parent tag
// Call skewSelection() to carry out the resizing command. if (inputIsValid ) { fl.getDocumentDOM().skewSelection(xSkew, ySkew, edge); } } Second, create a file named skewlist.xml and place it in your Commands folder.
Number; an integer used to set the control’s position in the tab order (available only on Windows). tabindex Child tags
Attributes None. Child tags
Attributes label String; text that appears in the pop-up menu for that item. String; text that is returned if the user selects the item. If not set, the value of the label attribute is returned. value Child tags None. Parent tag
Number; an integer that represents the control’s position in the tab order (available only on Windows). tabindex minvalue Number; an integer that represents the minimum value. maxvalue Number; an integer that represents the maximum value. Child tags None. Parent tag
inputIsValid = false; } if (ySkew == 0 || isNaN(ySkew)) { inputIsValid = false; } // Call skewSelection() to carry out the resizing command. if (inputIsValid ) { fl.getDocumentDOM().skewSelection(xSkew, ySkew, edge); } } Second, create a file named skew.xml and place it in your Commands folder.
The skew command now appears on the Commands menu. Draw a shape on the stage, then select it with the pointer tool. If you then select the skew command from the Commands menu, the dialog box defined by skew.xml appears, as shown in the following figure:
label = "myLabel" groupbox = "true|false">
accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows). Child tags None. Parent tag
Description Control tag; creates a control that lists all instances of a class and lets the user select an instance. Example The following example is excepted from the Load Graphic behavior definition file. The tags define a targetlist control that lets users select a movie clip into which a graphic will be loaded. For the complete dialog box definition, see the Graphic_load_graphic.xml file in the Behaviors folder.
Attributes id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns. Boolean value; if true, the value that is returned from this control is enclosed by quotation marks (""). If false, which is the default setting, the returned value does not have quotation marks.(""). literal maxlength Number; sets the maximum number of characters that can be entered.
// check for valid input because sending 0 or undefined to // scaleSelection() will cause the object to disappear. var inputIsValid = true; if (xScale == 0 || isNaN(xScale)) { inputIsValid = false; } if (yScale == 0 || isNaN(yScale)) { inputIsValid = false; } // Call scaleSelection to carry out the resizing command. if (inputIsValid ) { fl.getDocumentDOM().scaleSelection(xScale, yScale); } } Second, create a file named scale.xml and place it in your Commands folder.
INDEX A absolute target path 24 accessibility animation and 368 automatic labeling 361 automatic labels for buttons and input text fields 366 button and text field labels for 361 components 369 creating properties in ActionScript 369 creating reading and tab order using ActionScript 371 creating reading order in Accessibility panel 367 creating tab order 371 default reading and tab order 366 defining for entire Flash applications 365 descriptions for accessible objects 363 detecting screen reader with Acti
aligning objects 155 text blocks 113 text characters 113 alignment, HTML (publish setting) 317 Alpha effect instance property 63 partial transparency 321 ancestor screen, defined 218 anchor points adding 94 adjusting 94 converting between corner and curve 94 deleting 94 dragging 94, 95 moving 94 nudging 94 showing on shapes 97 animated GIF files exporting 347 importing 133 publishing 319 animation accessibility and 368 converting to movie clip symbol 56 creating keyframes in 162 displaying frames as onion s
Load External Movie Clip 65 Load Graphic 65 screen navigation and control 228 screen transitions 229 Send Backward 66 Send to Back 66 Start Dragging Movieclip 66 Stop Dragging Movieclip 66 video, adding and configuring 192 video, controlling video playback 191 bgcolor attribute/parameter 338 Bindings tab Binding Attributes pane 268 in Component inspector 265 Bit Rate option, for MP3 sound compression 211 bitmap fills applying 79 transforming 80 bitmap images anti-aliasing 40, 139 breaking apart 141 compared
color palette Adaptive 321 default 83 importing and exporting 83 modifying 82 saving current as default 83 web-safe 83 Color Picker, opening 76 Color Swatches panel Add Colors option 84 Clear Colors option 83 loading default palette 83 modifying color palettes and 82 Replace Colors option 84 Save as Default option 83 Save Colors option 84 sorting 83 Web 216 option 83 colors background 14 changing with the Property inspector 76 choosing for text 112 Color Picker, opening 76 copying with the Eyedropper tool 8
Create Copy button, in Transform panel 148 createTextField method 125 creating new document 12 passwords for debugging files 314 cumulative tracking data, accessing in learning interactions 417 curves adjusting points and tangent handles 95 adjusting segments 94 dragging tangent handles on 95 drawing, with Pen tool 92 optimizing 99 straightening and smoothing 98 Custom color palette 321 Custom option, for sound 204 Cut command 149 cutting a screen 227 D data managed versus unmanaged 280 data binding 259 con
saving as template 15 saving Flash 14 saving in Flash MX format 15 saving when quitting 15 screen hierarchy 217 size report, generating 43 slide presentation 217 speeding up display 40 Stage size, setting 13 tabs for multiple documents 14 template, creating from 13 template, saving as 15 text and fonts, optimizing 41 Document command 13 document, setting background color 13 dimensions 13 frame rate 13 properties for 13 ruler units 13 Stage size 13 document-editing mode 56, 57 Don’t Replace Existing Items op
dynamic text creating 108 defined 105 HTML formatting for 121 HTML option 116 rich text formatting for 121 setting options 115 dynamic text fields accessible descriptions for 363 naming in a learning interaction 408 E Easing option for motion tweening 166, 167 for shape tweening 170 Edit Envelope for sounds 206 units in 206 Edit in New Window command 62 Edit in Place command 61 Edit Multiple Frames button 173 Edit Selected command 147 Edit Symbols command 62 editing imported bitmap images 140 reshaping line
locked gradient or bitmap, with 82 Paint Bucket tool, applying with 79 selecting default color 76 softening edges 100 swapping color with stroke color 76 text, for 112 transparent, applying 76 Find and Replace overview 30 screens 230 finding and replacing bitmaps 33 colors 32 fonts 31 sound 33 text 30 video 33 Fireworks PNG files, importing 134 FLA files printing 43 saving 14 Flash applications accessibility options for 366 naming for accessibility 362 Flash content, aligning and cropping 318 Flash Form App
animation, in Timeline 163 Bandwidth Profiler, testing performance with 42 converting keyframes into 172 copying and pasting 172 copying by dragging 172 displaying as onion skin outlines 173 dragging in Timeline 172 editing in an animation 172 editing multiple 173 exporting as static images 345 images, registering in 173 inserting 172 keyframes, converting into 172 multiple, editing 173 onion skinning 173 pasting 172 printing 385 registering images in 173 removing 172 static images, exporting as 345 testing
publish settings 315 publishing templates 329 tag reference 334 templates 330 HTML Alignment publish setting 317 hyperlinks, viewing in Flash Player 39 I identifiers, assigning to sounds 205 images exporting 345 importing 131, 132 Import command 132 Import for Runtime Sharing option 71 imported video, formats for 178 importing bitmap images 138 bitmaps with transparency 132 color palettes 83 embedded video clips 182 FLV files 187 linked QuickTime video 188 sounds 202 sounds for mobile devices 213 importing
images, extending 164 inserting 172 motion tweening 168 removing 172 selecting everything between two 145 shape tweening 169 Sorenson Spark codec, for 179 sounds, associating with 208 tweened frame sequences, dragging in 173 tweening 161 kinds creating custom 294 Knowledge Track options, setting for a learning interaction 412 L Lasso tool Magic Wand modifier 141 Magic Wand Settings modifier 141 Polygon mode 145 selecting objects with 145 layers guided 169 mask 174 masking additional layers 175 selecting eve
spacing 113 straightening 98 Link option, for text 120 Linkage option for font symbol 116 for sounds 205 linking text blocks 120 Load Default Colors option 83 Load External Movie Clip behavior 65 Load Graphic behavior 65 Load Order option 313 loaded documents, controlling 25 loadMovie action and levels 22 Lock command 145 Lock Fill modifier 82 logging data operations 272 loop attribute/parameter 337 Loop option about 65 for sound 204 LOOP parameter publish settings 316 looping in accessible content 368 of a
Movie Explorer about 28 context menu 29 displaying symbol definition 68 filtering displayed items in 28 Find text box 28 instance information 67 instances in 67 options menu 29 for screens 230 selecting items in 29 movie parameter 335 moving entire animation 174 objects 147 MP3 compression, for sound 210 sounds, importing 202 MSAA (Microsoft Active Accessibility) 357 multilanguage text creating with Strings panel 240 encoding language 236 #include action and 249 non-Unicode external files and 251 overview 2
optimizing curves 99 documents 40 GIF colors 320 PNG colors 323 Orient to Path option, for motion tweening 166, 167 Outlines command 40 Oval tool 89 Over state (for buttons) 59 overlayChildren parameter 225 Override Sound Settings option 314 P Page Setup command (Windows only) 44 Paint Bucket tool applying fills with 79 Gap Size modifier 79 Lock Fill modifier 82 painting closing gaps with the Paint Bucket tool 79 tools 87 panels Accessibility.
printers, supported 376 printing from authoring environment 43 FLA files 43 Flash Player context menu 385 PrintJob addPage method 378 object and class 375 orientation property 378 pageHeight property 378 pageWidth property 378 paperHeight property 378 paperWidth property 378 send method 381 start method 376 using the ActionScript class 376 projectors creating 311 playing with stand-alone player 342 stand-alone movie 310 projects adding a file 47 closing 48 closing files in 48 creating 46 creating a folder 4
Recognize Lines preference 103 Recognize Shapes preference 103 Rectangle tool about 89 Round Rectangle modifier 89 Redo command 34 redoing steps with the History panel 35 registering images from frame to frame 173 registration point changing 61 displaying coordinates 67 relative target path 25 Remove Frame command 172 Remove Gradients option 320, 323 removing a screen 228 renaming projects or project folders 48 Render Text as HTML option 121 Repeat command 34 repeating commands 37 steps 34 replacing bitmaps
schemas adding a component property 262 adding a schema field 263 data type 298 editing schema item settings 300 editing the schema item settings 300 encoder 294 for web services 275 for XML data sources 277 formatter 297 kind 294 kinds and encoders 292 schema item attributes 263 schema item settings 290 SCORM communication overview 415 preparing compliant learning interactions for web hosting 417 tracking quiz results 412 tracking to a compliant LMS 414 screen child screens 223 Screen Outline pane about 21
width and height, viewing 223 workflow 216 x and y coordinates 223 scrolling text 110, 128 Seconds button, in Edit Envelope 206 Select Screen dialog box 228 Selectable option for dynamic text 115 for text 115 selectable text 114 selecting adding to a selection 145 connected lines 144 deselecting 145 everything between two keyframes 145 everything in a scene 145 freehand selection area, with 145 hiding selection edges 146 keyframes, everything between two 145 Lasso tool, with 145 locking groups or symbols 14
snapping to objects 101 to pixels 101 tolerance, setting for objects 103 Soften Fill Edges command 100 Sound Designer II files, importing 202 Sound object, using a sound with 205 Sound Properties dialog box 209 sounds in accessible applications 366 ADPCM compression 210 buttons, adding to 204 compressing for export 209 compression menu options 209 controls, editing for 206 efficiently using 212 envelope lines 206 envelopes, editing 206 event and stream 201 Event synchronization option 204 file size, tips fo
Property inspector, selecting with 77 Selection tool, selecting with 144 swapping color with fill color 76 transparent, applying 76 weight, selecting 77 strokes, selecting default color 76 line style 77 with Property inspector 77 with Selection tool 144 weight 77 Subselection tool adjusting line segments 94 showing anchor points 97 substitute fonts deleting 123 specifying 123 turning off alert 123 viewing 123 Sun AU files, importing 202 Swap Symbol dialog box 64 SWF files frame load order 313 importing 133
Test Scene command 42, 60 testing accessible content 373 Generate Size Report option 43 projects 47 sounds 210 text aliasing 111 alignment 113 anti-aliasing 40 breaking apart 120, 155, 368 character options 113 Clipboard, importing with 148 color, choosing 112 creating 108 device fonts 107 device fonts, selecting 115 dynamic text options 115 dynamically formatting 126 editing 117 embedded fonts 107 fields 105 fill color 112 finding and replacing 30 fixed width or height 110 flow, horizontal or vertical 110
in movie clips 22 multiple Timelines 22 onion skinning frames 173 parent alias 25 for screens 231 target paths 23 target paths, absolute 24 target paths, relative 25 Timeline effects adding 158 deleting 161 description and settings 159 editing 161 types of objects 158 Timeline frames copying and pasting 172 deleting 172 dragging 172 Tint effect 63 Tint instance property 63 tolerance, for snapping to objects 103 tools Brush 95 Eraser 99 Eyedropper 81 Fill Transform 80 Free Transform 151 Ink Bottle 79 Lasso 1
V Variable option for dynamic text 116 variables, HTML template 331 vector graphics compared to bitmaps 85 creating from imported bitmap images 142 importing with Clipboard 148 version control defining site for 49 editing sites 50 opening a file 50 troubleshooting remote folder setup 51 vertical text creating 108 flow 110 preferences 109 video bandwidth options 184 behaviors, adding and controlling 192 behaviors, controlling video 191 brightness 186 components 196 compression, custom profile 184 compression
Index
