Welcome!

Adobe Flex Authors: Maureen O'Gara, Liz McMillan, RealWire News Distribution, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Delivering Captivate Content on the Web

Jesse Warden´s utility: CaptivatePlayer

Advanced authors can specify these options in the index.html file that calls the CaptivatePlayer.swf file, but the XML file takes precedence.

The following example is a typical web deployment.

Figure 6. For a typical web deployment, the folder would contain these files

Figure 7. For a typical executable deployment, the folder would contain these files

How to Use the Play List XML File
Before you get nervous, remember that XML files are just text files. You can edit them in Notepad, WordPad, Microsoft Word, or any other text editor. I prefer Macromedia Dreamweaver because it color codes my XML nodes, aiding readability. The following is the XML file in Dreamweaver:

<?xml version="1.0" encoding="iso-8859-1"? >

  <captivate_playlist
   autoplay="true"
    "volume="50"
     content="true">

     <swf src="demonstration1.swf" name="Introduction">
     <swf src="demonstration2.swf" name="How To Do">
     <swf src="demonstration3.swf" name="Conclusion">

  </captivate_playlist>

</xml>

When CaptivatePlayer uses the XML file excerpted in Figure 8, CaptivatePlayer performs the following actions:

  • Automatically starts playing the first SWF file
  • Sets the volume to 50%
  • Scales the Captivate SWF file to fit to the size the CaptivatePlayer
  • Puts demonstration1.swf, demonstration2.swf, and demonstration3.swf into the menu, but uses the names Introduction, How To Do, and Conclusion
Listed below are the options for each of the attributes.

Attributes for the captivate_playlist tag Value
autoplay true or false. Defaults to "true."
volume 0-100
scalecontent true or false. Defaults to "true."

In the code sample above, the SWF source tag has a specified name attribute. You could have used the SWF file name, but "Introduction" is more intuitive to the user than demonstration1.swf. If you want to add more Captivate SWF files, you simply add another SWF tag in the XML file, just like the examples provided. You can add as many SWF tags as you like, but you must have at least one SWF tag always present.

How to Use the index.html File
I included a default index.html file for authors with either a Flash or ColdFusion background. First, for those in a hurry, the HTML is already written for you; the CaptivatePlayer is embedded into the HTML with the necessary code to make it play in the full screen in the browser. Second, for those incorporating CaptivatePlayer into their own website design, you can copy and paste the code for embedding CaptivatePlayer.

For more details, refer to readme_index.txt, included in the ZIP file you downloaded in the Requirements section. It explains in detail how to customize and use the index.html file.

The CaptivatePlayer Source Files
There are many ways you can use CaptivatePlayer (as an embedded SWF file in HTML or as an EXE file) and it can be confusing understanding all the files included in the ZIP file that accompanies this article.

After unzipping the archive, the base level directory has two folders and three files (Figure 10).

Figure 8. The contents of the ZIP file, unzipped

For Flash Developers who need to use the CaptivatePlayer in an existing Rich Internet Application, the necessary files are in the "Flash MX 2004 Install" folder. Included is the MXP, which installs the CaptivatePlayer as a component in the Components Panel. I've included the MXI and SWC for Flash Developers who need those instead.

Figure 9. The three files in the Flash MX 2004 Install folder

For Flash Developers who have more specific needs to customize CaptivatePlayer, the "Source Files" folder contains the FLA file, created in Flash MX 2004 and source AS (ActionScript) files. This folder contains everything a Flash Developer needs to customize the design of the CaptivatePlayer, tweak the way it works, add functionality, and/or compile a customized version. A default setup file, used to initialize the CaptivatePlayer, is included in the includes folder.

Figure 10. The files in the Source Files folder

Back to top
Where to Go from Here
Macromedia Captivate is the easiest and most flexible way to create interactive demonstrations and software simulations. It is fun to use, does the hard work for you, and lets you spend more time focusing on polishing up your tutorial, simulation, demonstration, or test to make it more effective. Because I have prior experience creating these types of presentations manually in Flash, I know that Captivate significantly reduces the amount of time and work required to create these demonstrations and simulations. I hope that CaptivatePlayer complements your workflow by providing a final, easy step in deploying your finished work for your users online, on an intranet, or even running locally, off of another user's machine.

In talking to Captivate authors from all over the USA, from Canada to Germany, by phone and e-mail, I can definitely say there is room to grow and improve the way the CaptivatePlayer deploys Captivate movies. One author has requested that I add a global control bar instead of having Captivate generate one for each demonstration or simulation. This would help end users quickly access other Captivate content, not just locations inside one demonstration or simulation. Other authors, who have lot of Captivate content, called modules, also have sub-modules. They prefer the current menu to contain nested menus, like most context menus do today (File > New or Right click > Properties for example). This is especially ideal for users, because a volume of 50-100 Captivate demonstrations or simulations does not fit well into a one-level menu.

Creating these demonstrations or simulations is only part of the process. I created CaptivatePlayer to fulfill a need to deliver Captivate content quickly to users. There is still room for improvement as I have mentioned, so if the CaptivatePlayer does not satisfy your deployment needs, please do send me feedback.

Notes from the Author:

  1. You can see CaptivatePlayer in action. The following is a tutorial I created for creating a Flash MX 2004 component: dev.jessewarden.com/captivate/flashcomponents/main.html.
  2. To request changes in the next version of Captivate, go to: www.macromedia.com/go/wish/.

More Stories By Jesse Randall Warden

Jesse R. Warden, a member of the Editorial Board of Web Developer's & Designer's Journal, is a Flex, Flash and Flash Lite consultant for Universal Mind. A professional multimedia developer, he maintains a Website at jessewarden.com where he writes about technical topics that relate to Flash and Flex.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.