Writing Markup for Flash Movies


In Chapter 21, you learned how to use the Publish feature, which included automated HTML templates. These templates created the necessary HTML tags to display Flash movies on Web pages. In this section, we discuss the use of Flash movies in your handwritten HTML documents. You can also use this information to alter HTML documents created by the Publish feature.

Note 

In the following code examples, we use an asterisk (*) when displaying optional parameters that are not in the default options that are enabled in the Flash Only HTML template. We also use the term plug-in to mean both the Netscape/Mozilla-compatible plug-in and the ActiveX control for Flash Player 8.

You can use two tags to place Flash movies on a Web page (such as an HTML document): <object> and <embed>. You need to include both of these plug-in tags in HTML documents, as each tag is specific to a browser: <object> for Internet Explorer (IE) on Windows, and <embed> for Mozilla-compatible browsers on Windows and Mac. Each tag works similarly to the other, with some slight differences in attribute names and organization. Remember that if both sets of tags are included with the HTML, only one set of tags is actually read by the browser, depending on which browser is used to view the Web page. Without these tags, the browser cannot display Flash movies with other HTML elements such as images and text.

Web Resource 

You can, however, directly link to Flash movie files (.swf) as an alternative method for displaying Flash content. That method, however, precludes the use of parameters to control the look and playback of the Flash movie — it would be the same as loading the Flash movie straight into the stand-alone Flash Player. For more information on direct linking, see Colin Moock's tutorial, "Filling the Browser Windows Using the <frameset> Tag," found at the book's Web site, www.flashsupport.com/archive.

Using the <object> Tag

Microsoft Internet Explorer for Windows uses this tag exclusively to enable the Flash Player ActiveX control. When the Flash Only HTML template is used in Publish Settings, the HTML document that is published uses the <object> tag in the following way. Some of these options (marked with an asterisk) are created only if you enable/disable specific options in the HTML tab of the Publish Settings dialog box.

Note 

Flash MX/Flash Player 6 ActionScript introduced a Stage object that enables you to control or override many of the same properties that the Player HTML tags specify. For more details on the Stage object, refer to the Flash ActionScript Bible series by Robert Reinhardt and Joey Lott (Wiley).

 A. <object B.      class C.      codebase=" http://fpdownload.macromedia.com/pub/         shockwave/cabs/flash/swflash.cab#version=8,0,0,0" D.      width="550" height="400" E.       F.      align=" middle"> G.      <param name=" allowScriptAccess" value=" sameDomain" /> H.      <param name=" movie" value=" home.swf" /> I.*     <param name=" play" value=" false" /> J.*     <param name=" loop" value=" false" /> K.*     <param name=" menu" value=" false" /> L.      <param name=" quality" value=" high" /> M.*     <param name=" scale" value=" noborder" /> N.*     <param name=" salign" value=" LT" /> O.*     <param name=" wmode" value=" transparent" /> P.*     <param name=" devicefont value=" true" /> Q.      <param name=" bgcolor" value="#FFFFFF" /> R.*     <param name=" flashvars" value=" title=My%20Movie" /> S.*     <param name=" base" value="." /> T. </object> 

Note 

Flash 8's HTML templates use XHTML-compliant code. Notice that all the tags use lowercase, and that all <param> tags end with a />.

  1. <object: This is the opening tag containing the ID code and locations of the ActiveX control for the Flash Player. Note that this opening tag includes the attributes lettered B through F.

  2. classid: This lengthy string is the unique ActiveX identification code. If you are inserting the <object> tag by hand in a text editor, make sure that you copy this ID string exactly.

  3. codebase: Like the codebase attribute of a Java <applet> tag, this attribute of the <object> tag specifies the location of the ActiveX control installer file (.cab) as a URL. Notice that the #version=8,0,0,0 portion of the URL indicates that the Flash Player version 8 should be used. You can also specify specific minor releases, such as #version=6,0,65,0, which would require Flash Player 6.0 r65 ActiveX control or higher. If the visitor doesn't have the ActiveX control already installed, Internet Explorer automatically downloads the control from this URL.

    Tip 

    If you want to make a secure Web page with Flash content, make sure the codebase URL uses https:// instead of http://.

  4. width and height: These attributes control the actual width and height, respectively, of the Flash movie as it appears on the Web page. If no unit of measurement is specified, these values are in pixels. If the % character is added to the end of each value, the attribute adjusts the Flash movie to the corresponding percent of the browser window. For example, if 100 percent was the value for both width and height, the Flash movie fills the entire browser, except for the browser gutter. See Colin Moock's tutorial at the Web archive for this book to learn how to minimize this gutter thickness.

  5. id: This attribute of the <object> tag assigns a JavaScript/VBScript identifier to the Flash movie, so that it can be controlled by DHTML JavaScript/VBScript functions. By default, this attribute's value is the name of the actual .swf file, without the .swf extension. Each element on a DHTML page should have a unique id or name attribute. We discuss the name attribute in the next section.

  6. align: This attribute of the <object> tag determines how the Flash movie will align on the HTML document. The acceptable values for this attribute are left, right, top, bottom, or middle. As with <img> tags in HTML, the align attribute gives very loose layout control. It's likely that you'll want to rely on other HTML tags and Cascading Style Sheets (CSS) to position a Flash movie with other HTML elements.

  7. <param name=" allowScriptAccess" value=" sameDomain" />: This is the first set of <param> subtags within the <object></object> tags. Each parameter tag has a unique name= setting, not to be confused with JavaScript names or ids. allowScriptAccess controls how the Flash movie can access JavaScript or VBScript functions contained within the HTML document. A Flash movie can try to invoke a JavaScript or VBScript function by using an ActionScript fscommand() or getURL() line of code. There are three values supported: always, never, and sameDomain. The value always enables the Flash movie to access scripts on the page, while never prohibits the Flash movie from accessing scripts. The value sameDomain, which is the default value, enables a Flash movie to access scripts on the page only if the Flash movie resides on the same domain as the HTML page containing the movie. The allowScriptAccess attribute is supported by Flash Player 6 r40 and higher.

  8. <param name=" movie" value=" home.swf" />: This parameter determines which Flash movie file (.swf) is loaded into the document. The value attribute specifies the filename of the Flash movie, as a relative or absolute URL. Note that you can pass Flash variables to the movie directly by specifying them after the filename. For example, home.swf?firstName=Joey will pass a variable named firstName with a string value of Joey to the _root timeline (that is, _level0). You can use the newer flashvars (item R) HTML attribute to do this type of data transfer as well.

  9. <param name=" play" value=" false" />: This optional parameter tells the Flash Player whether it should start playing the Flash movie as it downloads. If value equals false, the Flash movie loads in a "paused" state, just as if a stop() action was placed on the first frame. If the value equals true, the Flash Player starts playing the movie as soon as it starts to stream into the browser. If this tag is omitted, the Flash Player behaves as if play equals true.

    Note 

    If you do have a stop() action on the first frame of your movie, setting play to true will not override the stop() action.

  10. <param name=" loop" value=" false" />: This optional setting tells the Flash Player whether the Main Timeline should repeat when the Playhead reaches the last frame. If value equals false, the Playhead will not loop. If value equals true, the Playhead will loop. If this parameter tag is omitted, the Flash Player by default will loop playback of the Main Timeline.

    Note 

    If you have a stop() action on the last frame of the Main Timeline, the Flash movie will not loop, regardless of the HTML loop value.

  11. <param name=" menu" value=" false" />: This setting controls the display of the Flash Player contextual menu that can be invoked by right-clicking (Windows) or Control+clicking (Mac) the Flash movie in the Web browser. If you set this option to false, the menu displays the options shown in Figure 22-1. If you set this option to true, all of the options are available to the end-user, as shown in Figure 22-2. Also, the player's Settings option is available in both modes of the menu.

    Note 

    The Play, Stop, and Rewind options that were available in Flash Player 6 and earlier are no longer available in Flash Player 7 or higher.

    Note 

    If you have installed the Debugger version of Flash Player 8, the contextual menu displays a Debugger option in both modes of the menu attribute (true and false). Figure 22-2 shows the Debugger option. Refer to Chapter 32, "Managing and Troubleshooting Flash Movies" for more information on debugging Flash movies.

    Note 

    Flash Player 7 and higher supports additional items that you can script into the contextual menu, using the new ContextMenu class. You learn how to use this class in Chapter 35, "Building an Image Gallery Component." For more detailed information on the usage of this class, refer to the Flash ActionScript Bible series by Robert Reinhardt and Joey Lott (Wiley).

  12. <param name=" quality" value=" high" />: This parameter controls how the Flash movie's artwork renders within the browser window. value can be low, autolow, autohigh, high, or best. Most Flash movies on the Web use the high value, as this forces the Flash Player to render the movie elements anti-aliased. For a full description of each of the quality settings, please refer to the section "Using the HTML settings" in Chapter 21, "Publishing Flash Movies."

  13. <param name=" scale" value=" noborder" />: This optional parameter controls how the Flash movie scales in the window defined by the width and height attributes of the opening <object> tag. Its value can be showall, noborder, exactfit, or noscale. If this entire subtag is omitted, the Flash Player treats the movie as if the showall default setting was specified. The showall setting fits the Flash movie within the boundaries of the width and height dimensions without any distortion to the original aspect ratio of the Flash movie. Again, refer to the "Using the HTML settings" section in Chapter 21 for a complete description of the scale settings and how they work within the dimensions of a Flash movie.

  14. <param name=" salign" value=" lt" />: This parameter controls the alignment of the Flash movie within the space allocated to the viewing area of the movie in the browser window. For example, if you size your Flash movie to use 100 percent of the width and height of the browser window, a value of lt aligns the Flash movie to the left and top of the browser window. The acceptable values for this parameter are shown in the following list. For more information, refer to our coverage in Chapter 21, "Publishing Flash Movies."

    • l: left edge, centered vertically

    • r: right edge, centered vertically

    • t: top edge, centered horizontally

    • b: bottom edge, centered horizontally

    • lt: left and top edges

    • rt: right and top edges

    • lb: left and bottom edges

    • rb: right and bottom edges

  15. <param name=" wmode" value=" transparent" />: This Player option works with all versions of the Flash Player if you are using Internet Explorer (version 3 or higher) for Windows, or with Flash Player 6 r65 or higher on Internet Explorer, Netscape, and most Mac OS X browsers. If you are only targeting an audience that uses these browsers, you can control how the Flash movie's background color appears on top of the HTML or DHTML elements on the Web page. There are three acceptable values:

    • window: This value is the default appearance of movies playing in the Flash Player on Web pages. With this value, movies play within the area specified by the width and height attributes (discussed in item D), and the background color of the Flash movie's stage (as defined by Document Properties, or item Q, later in this section) displays.

    • opaque: This value provides the same visual appearance of the movie's stage as window does. However, if you want to animate other DHTML objects in front of or behind a layer containing the Flash movie, it is recommended that you use the opaque value.

    • transparent: This value enables the stage of the Flash movie to act like an alpha channel. When enabled, the Flash movie appears to float on the HTML page, with out any background color to reveal the corners of the Flash movie's stage. Again, while this feature is somewhat extraordinary, it will function only with specific browsers and later versions of the Flash Player plug-in. Also, because the browser must anti-alias the Flash artwork on top of other HTML elements, play back of Flash animations may suffer.

  16. <param name=" devicefont" value=" true" />: This feature controls how Flash text appears in the browser window and works only on the Windows operating system. Like the device fonts with the Flash authoring environment (_sans, _serif, and _typewriter), this option can display any and all embedded text to system fonts such as Times and Arial. To do this, set value to true. To disable device font rendering in this fashion, set value to false. If this tag is omitted from the HTML, the value defaults to false. Finally, the rules of Flash device fonts apply to system device fonts as well. For example, device or system fonts cannot be masked, rotated, or manipulated with the Transform panel or the Property inspector.

    Note 

    This seldom-used setting does not work predictably from use to use. In our tests, we could not get devicefont to work consistently from movie to movie, nor could we propose any reasonable use for it. It's likely that this is a legacy setting, meaning that it was made available for machines that had slow video or computing performance when the Flash Player was first introduced to the market.

  17. <param name=" bgcolor" value="#FFFFFF" />: This parameter name, bgcolor, controls the background color of the Flash movie. If you published an HTML document via the Publish command, the value is automatically set to the background color specified by the Modify ð Document command in Flash. However, you can override the Movie setting by entering a different value in this parameter tag. Note that this parameter, like all HTML tags and attributes concerning color, uses hexadecimal code to describe the color. For more information on color, see Chapter 7, "Applying Color."

  18. <param name=" flashvars" value=" title=My%20Flash%Movie" />: This Flash Player 6 and higher attribute enables you to declare variables within the Flash movie when it loads into the Web browser. flashvars stands for "Flash Variables." This feature enables you to circumvent the browser URL length limitation for declaring variables in the Flash movie's filename, as we discussed in item H of this list. For example, you can use client-side (for example, JavaScript) or server-side (for example, ColdFusion, ASP, PHP) scripting to dynamically write the value for this tag in your HTML, passing information from databases into the Flash movie at load time.

    Tip 

    If you use Flash Remoting services with your Flash movie, be sure to declare the gatewayUrl variable in flashvars. The gatewayUrl variable specifies the location of the Flash Remoting gateway, such as <param name=" flashvars" value="gatewayUrl=http://mydomain.com/flashservices/gateway"/>.

  19. <param name=" base" value="." />: This attribute tells the Flash movie how to interpret any relative paths used with ActionScript. The default value is ".", which means that Flash will resolve any relative paths within ActionScript to the same directory that the Flash movie resides in. For example, if base is set to ".", the following action will look for an HTML document named form.html in the same directory as the Flash movie file (.swf):

     getURL("form.html"); 

    You can use dot notation with the base attribute, such as "../", or specify a fully-qualified domain name, such as "http://www.myserver.com/section_1", to let the Flash movie know that all relative paths should be resolved from that starting point.

    Web Resource 

    You can read Macromedia's tech notes about the base attribute by perusing the links in the "Flash and HTML Tags" category at www.flashsupport.com/links.

    Caution 

    In our tests, we only saw the base attribute recognized by getURL() actions. Other actions that use URLs, such as loadMovie(), LoadVars, XML, and NetStream, did not use the base attribute to resolve relative URLs. If you keep your Flash movie files (.swf) in a separate folder from assets that need to be loaded into the Flash movies, you should pass the starting path into the Flash movie with flashvars (see Item R in this list) and append that value to all of your relative paths in ActionScript.

    Also, if you use dot notation with the base attribute, such as "../", the path is oddly interpreted relative to the HTML document, not the Flash movie.

  20. </object>: This is the closing tag for the starting <object> tag. As we show you later in this chapter, you can put other HTML tags between the last <param> tag and the closing </object> tag for non-ActiveX–enabled browsers, such as Netscape or Apple Safari. Because Internet Explorer for Windows is the primary browser that currently recognizes <object> tags, most browsers simply skip the <object> tag (as well as its <param> tags) and only read the tags between the last <param> and </object> tags.

image from book
Figure 22-1: The Flash Player menu with control options disabled

image from book
Figure 22-2: The Flash Player menu with control options enabled

Tip 

We recommend that you consistently apply quotes around names and values, such as <param name=" bgcolor" value="#FFFFFF" />. This syntax is especially important for the flashvars attribute.

Using the <embed> Tag

Netscape, Mozilla-based browsers, and browsers on a Macintosh (including Internet Explorer for Mac) use the <embed> tag to display nonbrowser native file formats that require a plug-in, such as Macromedia Flash and Shockwave Director or Apple QuickTime. Following is a sample listing of attributes and values for the <embed> tag. Again, attributes with an asterisk are generally optional for most Flash movie playback.

 A.  <embed B.       src="/books/4/403/1/html/2/ home.swf" C.*      play=" false" D.*      loop=" false" E.       quality=" high" F.*      scale=" noborder" G.*      salign=" lt" H.*      wmode=" transparent" I.*      devicefont=" true" J.       bgcolor="#FFFFFF" K.       width="550" height="400" L.*      swLiveConnect=" false" M.       name=" home" N.*       0.       align=" middle" P.       allowScriptAccess=" sameDomain" Q.*      flashvars=" name=Lucian" R.       type=" application/x-shockwave-flash" S.*      base="." T.       pluginspage=" http://www.macromedia.com/go/          getflashplayer"> U.  </embed> 

  1. <embed: This is the opening <embed> tag. Note that lines B through T are attributes of the opening <embed> tag, which is why you don't see the > character at the end of line A.

  2. src: This stands for source, and it indicates the filename of the Flash movie. This attribute of <embed> works exactly like the movie parameter of the <object> tag.

  3. play: This attribute behaves in the same manner as the play parameter of the <object> tag. If you omit this attribute in your HTML, the Flash Player assumes that it should automatically play the Flash movie.

  4. loop: This attribute controls the same behavior as the loop parameter of the <object> tag. If you omit this attribute in your HTML, the Flash Player automatically loops playback of the movie's Main Timeline.

  5. quality: This attribute controls how the Flash movie's artwork will display in the browser window. Like the equivalent quality parameter of the <object> tag, its value can be low, autolow, autohigh, high, or best.

  6. scale: This attribute of <embed> controls how the Flash movie fits within the browser window and/or the dimensions specified by width and height (item K). Its value can be showall (default if attribute is omitted), noborder, exactfit, or noscale.

  7. salign: This attribute controls the internal alignment of the Flash movie within the viewing area of the movie's dimensions. See the description for the salign parameter of the <object> tag for more information.

  8. wmode: This attribute controls the opacity of the Flash movie's background color and works only with specific browser and Flash Player version combinations. See the wmode parameter description in the <object> tag for more details.

  9. devicefont: This attribute controls the appearance of any text within a Flash movie and functions correctly only on the Windows operating system. See the description for devicefont in the <object> tag section.

  10. bgcolor: This setting controls the Flash movie's background color. Again, this attribute behaves identically to the equivalent <param> subtag of the <object> tag. See that tag's description in the preceding section.

  11. width and height: These attributes control the dimensions of the Flash movie as it appears on the Web page. Refer to the width and height descriptions of the <object> tag for more information.

  12. swLiveConnect: This is one attribute that you won't find in the <object> tag. This unique tag enables Netscape's LiveConnect feature, which enables plug-ins and Java applets to communicate with JavaScript. By default, this attribute is set to false. If it is enabled (the attribute is set to true), the Web page may experience a short delay during loading. The latest versions of Netscape don't start the Java engine during a browsing session until a Web page containing a Java applet (or a Java-enabled plug-in such as the Flash Player) is loaded. Unless you use fscommand() actions in your Flash movies, it's best to omit this attribute or set its value to false.

  13. name: This attribute works in tandem with the swLiveConnect attribute, enabling the Flash movie to be identified in JavaScript. The value given to the name attribute will be the Flash movie object name that can be used within your JavaScript programming.

  14. id: This attribute is also used for JavaScript functionality. It's uncertain whether this value is necessary if the name attribute exists, but Flash MX 2004's Flash with FSCommand HTML template (in the Publish Settings) includes both the name and id attributes. The id attribute should use the same value as the name attribute.

  15. align: This attribute behaves exactly the same as the align parameter for the <object>. See its description in the preceding section for more information.

  16. allowScriptAccess: This attribute controls how the Flash movie can access JavaScript from getURL() and fscommand() actions. See the description of allowScriptAccess in the <object> tag coverage earlier in this chapter.

  17. flashvars: This attribute assigns variables to the Main Timeline of the Flash movie at run time. See the description of flashvars in the <object> tag coverage earlier in this chapter.

  18. type=" application/x-shockwave-flash": This attribute tells the browser what MIME (Multipurpose Internet Mail Extension) content-type the embedded file is. Each file type (TIF, JPEG, GIF, PDF, and so on) has a unique MIME content-type header, describing what its content is. For Flash movies, the content-type is application/x-shockwave-flash. Any program (or operating system) that uses files over the Internet handles MIME content-types according to a reference chart that links each MIME content-type to its appropriate parent application or plug-in. Without this attribute, the browser may not understand what type of file the Flash movie is. As a result, it may display the broken plug-in icon when the Flash movie downloads to the browser.

  19. base=".": This attribute tells the Flash movie how to resolve relative paths used in the movie's ActionScript code. See the description of base in the <object> tag coverage earlier in this chapter.

  20. pluginspage: Literally "plugin's page," this attribute tells the browser where to go to find the appropriate plug-in installer if it doesn't have the Flash plug-in already installed. This is not equivalent to a JavaScript-enabled auto installer or detection page. It simply redirects the browser to the URL of the Web page where the appropriate soft ware can be downloaded.

  21. </embed>: This is the closing tag for the original <embed> tag in line A. Some older or text-based browsers such as Lynx are incapable of displaying <embed> tags. You can insert alternate HTML (such as a static or animated GIF image with the <img> tag) between the <embed></embed> tags for these browsers. Some browsers may require that you insert these alternate tags between a <noembed></noembed> set of tags within or after the <embed></embed> tags.

Caution 

You may be surprised to learn that all versions of Internet Explorer (IE) for the Macintosh cannot read <object> tags. Rather, IE for Mac uses a Netscape plug-in emulator to read <embed> tags. However, this emulator does not interpret all <embed> tags with the same level of support as Netscape. As a result, the swLiveConnect attribute does not function on IE for Mac browsers. This means that the fscommand() action is not supported on these browsers.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net