Introduction Connexions modules can contain many different types of multimedia. This document explains how you can add the following types of multimedia objects to a module: Images Flash objects Movies Java applets Audio files LabVIEW demonstrations Any type of multimedia object that can be embedded in a Web page can be put into a Connexions module using the CNXML media tag. See the description of the media tag in the CNXML Language Specification for more information. The only requirement is that the object must have a valid MIME (Multipurpose Internet Mail Extension) type. MIME is a protocol that enables the transmission of data, such as sound or movies, over the Internet without first having to be translated into an ASCII format. See MIME Types for more information. This module contains examples of the CNXML entries and their resulting displays for the different multimedia objects.

Important Notes on Multimedia Additions Please note the following items when you are working with multimedia additions to your module: The CNXML examples shown in this module are specific to the media displays in this module. If you copy them into your module, please edit the CNXML for your situation. The type attribute must match the MIME type for the media object you want to appear in the module. For example, if you are adding an image file that is in the Portable Networks Graphics (png file extension) format, the type attribute must be image/png. The entry would look like the following example:

]]>

You can use any type of media object as long as it has a valid MIME type. If you need assistance adding a multimedia object, or you have questions about an object not listed in this module, please contact Connexions technical support at techsupport@cnx.rice.edu. You can pass controlling options or parameters to the multimedia objects with the param tag.

Images Some of the image file types and their corresponding MIME types used in Connexions modules are: eps - media type="application/postscript" png - media type="image/png" jpeg - media type="image/jpeg" gif - media type="image/gif" This list is not all inclusive. Any image with a valid MIME type can be used in a module. To embed images in your module, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:


	 
	    Example Figure
	    
	    A graphic image displayed as a figure.
	   
	]]>

The src attribute in the media tag gives the location or source of the image that you want to appear in the module. The attribute can be a file name if you have uploaded the file into your module, or a full URL for an image file stored elsewhere on the Internet. The actual display for the previous CNXML example is:

Example figure A graphic image displayed as a figure. You can place two images within the same figure using the subfigure tag. This is useful when you have two related images that you want to display side-by-side or one above the other. To display two images within the same figure, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:


	 
        
          Tall Icon and Envelope
          
          
          Subfigure 1.
          
        
        
          Small Icon and Envelope
          
          
            Subfigure 2.            
          
        
 	Two images displayed horizontally in one figure.
     
	  ]]>

The actual display for the previous CNXML example is:

Blue on blue Subfigure 1. Orange on white Subfigure 2. Two images displayed horizontally in one figure. The attribute orient can have a value of horizontal or vertical, and determines how the images are arranged in the figure.

Including Images for Both On-Line and Print Versions of Your Module If the images in your module are the appropriate size when you view them on-line, but when you print the module they appear too large for the page, Connexions lets you insert an additional image file in your module that can be formatted and sized specifically for the print version. Image files formatted in eps are the preferred format for printed versions of Connexions modules. If your module contains eps files and png files of the same image, Connexions uses the eps files when it generates a PDF file for printing and uses the png files when displaying the module on-line. Here is how to insert additional image files in your module for the print version: Create an eps format version of your image files. The image should be sized to the appropriate dimensions. Insert a media type entry for the eps image file in the "index.cnxml" file just above the entry for image file for the on-line display. The image files should have the same name, except that the extension should indicate the file type. For example: "image1.png" (for on-line) and "image1.eps" (for print) Add the eps image file to the module. Here is an example of the CNXML code required to include additional images:

]]>

The print image (eps) entry must appear above the on-line image (png) entry in the "index.cnxml" file. The on-line image entry should be indented and nested under the alternate image entry.

Creating an Image with a Link to a Larger Version You can also display an image, that when clicked, displays a larger version of the image. Here is how to do it: Create a thumbnail-sized version of your image file. Insert a media type entry for the full-sized and thumbnail images, as shown in the following example. Add the full-sized and thumbnail image files to the module. Here is an example of the CNXML code required to include a thumbnail image that links to a full size version:

]]>

The actual display for the previous CNXML example is:

The photograph of the Taj Mahal in this figure and the following figures was taken by Steve Evans. It is licensed for public use under the Creative Commons Attribution License.

Adjusting the Size of the Image in the On-Line Version You can also adjust the size of the image in the on-line version of your document by using param tags with name attributes for height and width. Here is an example of the CNXML code required to adjust the size of the on-line version of an image:

]]>

The way this code would display is shown in .

The original figure is shown in .

Flash Objects You can insert Flash objects in your module. Here is an example of the CNXML code required to include a Flash object:


	 
	  
	    
            
          
	  "Welcome to Connexions" example Flash object.
         
	  ]]>

The Flash object appears in your module, similar to the way in which a movie or an image appears.

"Welcome to Connexions" example Flash object. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Movies The following is a list of some types of movies that you can include in your module. You can embed these types and any other type that can normally be inserted into a web page. quicktime mpeg Movies can be added to your module by including code similar to the following:


	 
	  
	    
	    
	    
	  
	  The Creative Commons movie: "Building on the Past". 
	 Click the Play button to start the movie.
	
	  ]]>

The actual display for the previous CNXML example is:

The Creative Commons movie: "Building on the Past". Click the Play button to start the movie. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Java Applets Java applets can be added to your module by including code similar to the following:


	 
          
            
            
	  
          3D Animation of a Complex Sinusoid. Click the Run button 
           to start the animation.
        
	  ]]>

The actual display for the previous CNXML example is:

3D Animation of a Complex Sinusoid. Click the Run button to start the animation. If the graphic does not appear in the figure above, you may need to install or upgrade the Java plug-in on your computer. Please go to java.com to download the latest version of the Java plug-in. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Audio Files Audio files such as mp3, real audio, and wav files can be inserted into your module quickly and easily. To include audio files in your document, upload the corresponding audio file and include code similar to the following in your "index.cnxml" document:


	 
      	  
      	  A chromatic scale performed on clarinet by Michael Lawrence.
         
	  ]]>

The actual display for the previous CNXML example is:

A chromatic scale performed on clarinet by Michael Lawrence. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

LabVIEW Demonstrations For information on including LabVIEW demonstrations in your module, please see Creating LabVIEW demonstrations for Connexions.

Media Type Parameters Some multimedia objects need options or parameters to display properly. You can pass this information to the multimedia objects with the param tag. This tag is contained within the media tags and does not require modification of the media tag. See the description of the param tag in the CNXML Language Specification for more information. Here is an example of a param tag entry for a video (mpg) object:

]]>

You should include the height and width parameters for any movie, Flash object, or Java applet that needs to display on-line in a specific size. The default units of height and width are pixels. In the previous example, the movie displays as a 300 pixel by 300 pixel box. Different multimedia object types support and respond to different parameters. Examples of some of the parameters for the different multimedia object types are: Images (image/*): height, width, title, alt Flash (application/x-shockwave-flash): height, width, base Video (video/*): height, width, classid, codebase, autostart Java Applets (application/x-java-applet): height, width, code, codebase, archive Audio (audio/*): title, volume LabVIEW (application/x-labview): viinfo (See Creating LabVIEW demonstrations for Connexions for more information.) The param tag allows you to specify the run-time settings for an object inserted into XHTML documents.

Params and Alternate Images If you are using nested media tags to provide for an alternate image display, such as a photograph that appears in the printed version of the module to replace a movie that appears in the on-line version, insert the param entries for the primary image before the nested media entry for the alternate image, as shown in the following example: