Flash Image Rotator

From DreamHost
Jump to: navigation, search

Introduction

DreamHost has licensed Jeroen Wijering's excellent Flash Image Rotator. This tool enables all DreamHost customers to embed flash slideshows into any of their web pages! The current version installed at DreamHost is 3.1

This script can be used for non-commercial AND commercial purposes. (A separate license does not need to be purchased.)

The Flash Image Rotator will display several photos in sequence with fluid transitions between them. It supports rotation of an RSS/XSPF playlist with JPG/GIF/PNG images, a wide range of flashvars (settings) for tweaking both behavior and appearance and an extensive, documented javascript/actionscript API.

Preparing Your Images

Before you can begin displaying your photos, you'll first need to create an XML file which contains metadata about your pictures. You can create this file with any standard text editor, so long as it has an .xml extension.

A typical XML file would have the following format:

<playlist version="1" xmlns="http://xspf.org/ns/0/">
	<trackList>

		<track>
			<title>Grass by Night</title>
			<creator>Jeroen Wijering</creator>
			<location>image1.jpg</location>
			<info>http://www.jeroenwijering.com</info>
		</track>

		<track>
			<title>At the Sidewalk</title>
			<creator>Jeroen Wijering</creator>
			<location>image2.jpg</location>
			<info>http://www.jeroenwijering.com</info>
		</track>

		<track>
			<title>Tio Pepe Madrid</title>
			<creator>Jeroen Wijering</creator>
			<location>image3.jpg</location>
			<info>http://www.jeroenwijering.com</info>
		</track>

	</trackList>
</playlist>

Place this file in the directory that contains your photos and you're almost done!

NOTE: If you find that your Image Rotator is showing you a black screen with that spinning progress icon, chances are pretty good that it can't actually find your images. Try using the full URL for the images between those <location> tags in your playlist.xml file.

Usage

You'll just need to paste a small piece of code into your HTML to embed the player:

<script type="text/javascript" src="https://media.dreamhost.com/ufo.js"></script>
<p id="playlist.xml"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>

<script type="text/javascript">
  var FO = { movie:"imagerotator.swf",width:"300",height:"157",majorversion:"7",build:"0",bgcolor:"#000000",
             flashvars:"file=playlist.xml&transition=random" };
UFO.create(FO,"playlist.xml");
</script>

You'll need to change two things in the code above. You'll need to set the height and width to a size that you'd like, and you'll need to change the "playlist.xml" to match your XML filename.

Using the Flash Image Rotator more than once on the same page

If you just copy and paste the above code twice for two different instances of the rotator, the above code will not work on your page--only one instance of the rotator will display. To make it work, just make sure to only have the first line appear once in your page. Below is an example of a page with two instances of the rotator:

<script type="text/javascript" src="https://media.dreamhost.com/ufo.js"></script>

<p id="playlist1.xml"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>

<script type="text/javascript">
  var FO = { movie:"imagerotator.swf",width:"300",height:"157",majorversion:"7",build:"0",bgcolor:"#000000",
             flashvars:"file=playlist1.xml&transition=random" };
UFO.create(FO,"playlist1.xml");
</script>

<p id="playlist2.xml"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>

<script type="text/javascript">
  var FO = { movie:"imagerotator.swf",width:"300",height:"157",majorversion:"7",build:"0",bgcolor:"#000000",
             flashvars:"file=playlist2.xml&transition=random" };
UFO.create(FO,"playlist2.xml");
</script>

You'll need to change two things in the code above. You'll need to set the height and width to a size that you'd like for each instance of the rotator, and you'll need to change the "playlistx.xml" to match the appropriate XML filename in each place that it is found for each instance of the rotator.

Important Note

For the image player to work you need to download and copy imagerotator.swf to your own site! (For the Flash Media Player you should just link to the one hosted at https://media.dreamhost.com/ though.)


Flashvars

Flashvars are configuration options you can insert into your HTML code to control both behavior and appearance of the rotator.

Because Flashvars are so numerous and often change from version to version, we refer you to the author's documentation for their use.

Playlists

The imagerotator supports two commonly used playlist formats to ensure maximum compatibility: RSS (much-used for Podcasts - and Flickr Feeds) and XSPF (much used for CC playlists). The example playlist.xml of this download is in XSPF format. Here is a list of all flashvars and their corresponding XSPF/RSS tags that are supported by the imagerotator. Their names should be self-explanatory:

FlashvarXSPF TagRSS Tag
filelocationenclosure.url or media:content
titletitletitle
linkinfolink
ididentifierguid

History

  • 3.5: Some minor bugfixes.
  • 3.4: Enabled autostart flashvar, added "repeat=list" flashvar.
  • 3.3: Various bugfixes. Added smooth transitions for different image sizes. Added ATOM playlist support. File link/title/author/id are broadcast to javascript.
  • 3.2: Various bugfixes. Added "targetlink" and "showicons" Flashvars. Added play/pause/duration support for SWF files. Added "fit" and "none" parameter to "overstretch" flashvar. Enabled "loadFile()" function for actionscript/javascript.
  • 3.1: Some bugfixes. Bottom images are hidden in between transitions. Download
  • 3.0: Complete rewrite of the image rotator. Added RSS/XSPF support, title display, a new transition and lots of flashvars.
  • 2.1: Latest version called the JPG Rotator. Includes config and file settings in a single XML file and simple navigation buttons. Download

Links