mono SLIDESHOW - Urbica · 2010-02-02 · Monoslideshow Manual 4 The basics One .XML file to customize Monoslideshow is a single .SWF file. There’s no need to edit the slideshow

monoSLIDESHOW

Monoslideshow Manualversion 2.05

ContentsIntroduction 3

Some features 3What you'll need 3How does it work? 3

The basics 4One .XML file to customize 4A brief introduction to XML 4

Example 1 4Example 2 5

Implementation 6Prepare folder structure 6Create .XML file 6Put Monoslideshow on your site 6

Customization 7Embedding the .SWF file in your page 7Custom dimensions 7Changing background color 7Loading custom .XML file 8Starting with a specified item or album 8Loading RSS feeds 9Custom fonts 9Custom controller buttons 10Disabling start up logo 11Disabling registration info 11

Monoslideshow API 12Actionscript 3 13

Loading Monoslideshow into your Flash® project 13Listening to events 13

Javascript 14Pass XML data directly to Monoslideshow 14Listening to events 14Calling methods 15

XML reference 17Interface elements 17Attributes per XML node 18

Album element 18Album configuration element 18Feed element 20Image element 20Image configuration element 21Video element 21Video configuration element 22Transition element 22Caption element 23Caption transition element 24Caption title element 24Caption description element 25Controller element 25Scrub bar element 26Navigation element 26Navigation caption element 27Navigation albums element 27Navigation album caption element 28Navigation transition element 28Navigation items element 29Page indicator element 29Thumbnail navigation element 29Progress element 30Reflection element 30Mark element 31Shadow element 31Sound element 31

List of available XML nodes 33

3Monoslideshow Manual

IntroductionMonoslideshow is a Flash® slideshow to view your images and videos in a web page. It can be placed on every website, in whatever size you want and filled with whatever content you like. It's designed for maximum flexibility, whether you want to have a professional looking portfolio, or a simple image rotator on your website.

Some featuresProfessional transitions•Ken Burns effect•Color and resize interface element•Easily navigate between photo albums•Fully resizable•API for Javscript and Actionscript 3 •

What you'll needFlash® player 9 or higher•Text editor (e.g. Notepad)•FTP client•A website to embed the slideshow in •

How does it work?Monoslideshow is a single .SWF-file. There's no need to recompile or edit the slideshow in the Flash® IDE. Instead, all Monoslideshow needs is information that is directly read from a .XML-file. It's compact, extremely versatile and easy for web developers to integrate in existing websites.


The basicsOne .XML file to customizeMonoslideshow is a single .SWF file. There’s no need to edit the slideshow in the Flash® IDE itself. Instead, all its information is directly read from a .XML file. It’s compact, extremely versatile and easy to set up. The fact that Monoslideshow uses XML to populate the albums and setting the preferences, means that it is flexible and easily integrated in your existing site. You only have to do one thing, and that's editing the .XML file in a text editor.

Tip: use the demo page on www.monoslideshow.com/demo to automatically set up .XML files.

A brief introduction to XMLMonoslideshow reads all its information from a single text file called monoslideshow.xml. To put images in your slideshow, you have to edit this file. This can be done easily by using a simple text editor such as Notepad or TextEdit.

What exactly is an .XML file? Well, basically it’s just a plain text file. But .XML files differ from ordinary files in that they use certain rules to structure the content. XML is a computer language, and actually it’s a bit like HTML. Just as with .HTML files, content in .XML files is placed inside tags.

Example 1Let’s take a look at an example to illustrate how all this works.

<?xml version="1.0" encoding="utf-8"?> <album thumbnail="albumThumbnail.jpg" itemPath="images"> <contents> <image source="photo1.jpg" thumbnail="thumb1.jpg" /> <image source="photo2.jpg" thumbnail="thumb2.jpg" /> <image source="photo3.jpg" thumbnail="thumb3.jpg" /> </contents> </album>

The first line says that this textfile is a file which uses the XML-language. You always have to include this line. The second line is an opening tag called <album>. It’s corresponding closing tag is located at the last line. Everything between these two tags is the content of it. An opening tag must always have the exact same name as the closing tag. The only way a closing tag differs from its opening tag, is an extra forward slash in front of it.

Inside the opening tag <album> are two attributes, called thumbnail and itemPath. Attributes are always placed inside a tag. The value of an attribute (in this case albumThumbnail.jpg and images, respectively) must always be enclosed between quotes (" or '). They are used to specify something about the tag they are contained in. In this case, the thumbnail of the album is albumThumbnail.jpg and the path to all its images is images.

The three next <image> tags are the actual image files. They all contain two attributes, called source and thumbnail. The attribute source specifies the link to the image inside the folder specified by itemPath. The link to the thumbnail is specified by the attribute thumbnail. As you’ve perhaps noticed, these tags lack a regular closing tag. Instead of writing <image source="photo1.jpg"></image>, you could also write <image source="photo1.jpg" />. These type of tags are called self closing tags. We use them here because the <image> tag has no content by itself. All the information is extracted out of its attributes.

You can completely build your own slideshow by writing your own .XMl file. You only have to know which attribute names Monoslideshow uses to customize the slideshow. They are all summed up in the XML reference.


Example 2Let’s take a look at another example:

<?xml version="1.0" encoding="utf-8"?> <album> <configuration> <transition type="shatter" delay="3" /> </configuration> <contents> <album thumbnail="albumThumbnail1.jpg" itemPath="album1" > <contents> <image source="photo1.jpg" thumbnail="thumb1.jpg" /> <image source="photo2.jpg" thumbnail="thumb2.jpg" /> <image source="photo3.jpg" thumbnail="thumb3.jpg" /> </contents> </album> <album thumbnail="albumThumbnail2.jpg" itemPath="album2" thumbnailPath="albumThumbnails2" > <contents> <image source="photo1.jpg" /> <image source="photo2.jpg" /> <image source="photo3.jpg" /> <image source="photo4.jpg" /> <image source="photo5.jpg" /> </contents> </album> </contents> </album>

This slideshow consists of two albums. You can place <album> tags inside other album's <contents> tags to create sub albums. In this way, you can also create sub sub albums, and you can go to even deeper levels as well.

Two new tags are introduced here: the <configuration> and the <transition> tag. Here you would insert the configuration attributes which you’d like to apply for the elements inside the <contents> tag. In this case, the delay is set to three seconds and the transition is set to type "shatter". These attributes also apply to sub albums. However, you can define a <configuration> tag in each <album> tag, so that each album can have its own configuration. Configuration attributes inserted at a lower level override those at a higher level. In this case, there's only one configuration defined, and it applies to both its sub albums.

There's also a new attribute introduced in the second <album> tag, called thumbnailPath. This attribute defines the path to all the thumbnail images. Now, if an <image> tag doesn’t contain a thumbnail attribute, it looks for a thumbnail file in the folder albumThumbnails2 with the exact same name as defined in the source attribute of that image. This way, you could easily set up two folders: One for all the images (in this case album2), and one for all the thumbnails (in this case albumThumbnails2). Each folder would have the exact same file names.


ImplementationMonoslideshow is made to be implemented on in a web page. You can do this by inserting code in a HTML page. So, as a global overview, there's three steps you have to follow:

prepare folder structure•create .XML file•put Monoslideshow on your site•

Prepare folder structureThe following example shows a basic structure for your folders:

/index.html /slideshow/ /slideshow/monoslideshow.xml /slideshow/monoslideshow.swf /slideshow/images/ /slideshow/images/photo1.jpg /slideshow/images/photo2.jpg /slideshow/images/photo3.jpg /slideshow/thumbnails/ /slideshow/thumbnails/photo1.jpg /slideshow/thumbnails/photo2.jpg /slideshow/thumbnails/photo3.jpg

Create .XML fileAfter the folder structure is prepared, and the files are in their place, put all references to all images and thumbnails in your .XML file. Then you can further extend your .XML file by inserting titles, descriptions and by modifying layout settings. There's a multitude of options available for you to adjust. Please use the examples and the XML reference to see how the .XML file is structured and which options are available. You can also generate a template .XML file as a basis for your own on the demo page: monoslideshow.com/demo.

Put Monoslideshow on your siteTo put Monoslideshow.swf on your site, you have to embed it in your webpages. Flash® content is mostly placed in websites via Javascript. A good technique for this is using SWFObject. You can download the latest version and find instructions of how to use it here: code.google.com/p/swfobject.


CustomizationMonoslideshow can be customized by altering the .XML file, and by passing Flash® variables to the SWFObject call. In this chapter, a couple of the most typical customizations are presented.

Embedding the .SWF file in your pageHere's a basic example that shows how to embed Monoslideshow into your HTML page, using SWFObject:

<html> <head> <script type="text/javascript" src="swfobject.js"></script> </head> <body> <divid="flashContent"> <p>Please install Flash®</p> </div> <script type="text/javascript"> varflashvars={}; varparams={}; varattributes={}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); </script> </body> </html>

Firstly, the SWFObject.js script has to be loaded in the <head> tag. Then you can call the SWFObject script to put monoslideshow.swf into the <div> tag with the id attribute flashContent. Basically, the SWFObject script replaces the content of that <div> with code to load Monoslideshow. The <p> tag inside the <div> tag will therefore be erased. It only remains visible if the SWFObject call didn't complete, either due to a script error, or due to unavailability of Javascript in the browser of the end user.

Custom dimensionsMonoslideshow can take any dimensions you like. Just specify the width and height in the SWFObject call and Monoslideshow will scale accordingly. Monoslideshow is fully flexible and even scales along with content areas that are scaled real time in the browser. This makes Monoslideshow perfect for liquid layouts.

Below is an example that sets the width to 100% of the browser window and the height to 500 pixels:

<script type="text/javascript"> varflashvars={}; varparams={}; varattributes={}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "100%", "500", "9", false, flashvars,params,attributes ); </script>

Changing background colorBecause of the way Flash® works, you have to define the background color twice. Once in the SWFObject call, and once in the .XML file. Here's how you set the background color to red, or #ff0000, in the SWFObject call:


<script type="text/javascript"> varflashvars={}; varparams={}; varattributes={bgColor:"ff0000"}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); </script>

And here's how to change to the same background color in the .XML file:

<<album> <configurationbackgroundColor="#ff0000"/> <contents> <image source="photo.jpg" /> </contents> </album>

Loading custom .XML fileBy default, Monoslideshow looks for a file named monoslideshow.xml. You can also load your own file, as long as it's formatted according to the XML format of Monoslideshow. The file does not have to end with .xml, it can just as well be a PHP script that outputs XML formatted content. To specify your own file, you have to pass a variable dataFile to Monoslideshow:

<script type="text/javascript"> varflashvars={dataFile:"yourCustomFile.xml"}; varparams={}; varattributes={}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); </script>

Starting with a specified item or albumYou can start your slideshow with a specified item or album by instructing Monoslideshow to look for a .XML node with a specific ID. You can do this by specifying startWithImageID or startWithAlbumID in the album configuration node. For example, the following code instructs Monoslideshow to start with the item with ID "myPhoto":

<album> <configurationstartWithItemID="myPhoto"/> <contents> <image source="photo1.jpg" /> <image source="photo2.jpg" id="myPhoto" /> <image source="photo3.jpg" /> </contents> </album>

This example shows how to start with the album "myAlbum":


<<album> <configurationstartWithAlbumID="myAlbum"/> <contents> <album> <contents> <image source="photo1.jpg" /> </contents> </album> <album id="myAlbum"> <contents> <image source="photo2.jpg" /> </contents> </album> </contents> </album>

It does not matter how deeply nested the item with the specified ID is, as long as you define startWithItemID or startWithAlbumID in the top album configuration node.

Loading RSS feedsMonoslideshow can read any RSS file that is set up according to the Media RSS specification. Media RSS is a specific type of RSS that contains media files, such as images, audio and video. For example, Flickr RSS feeds are formatted according to the specifications of Media RSS. You can find the specifications of Media RSS feeds here: search.yahoo.com/mrss/

You can embed Media RSS feeds in Monoslideshow, by defining a feed element in the contents node of an album. You can place multiple feeds in an album. The following .XML file setup embeds two feeds between two user defined images.

<album> <configuration/> <contents> <image source="photo1.jpg" /> <feedurl="yourOwnCustomFeed.rss"/> <feedurl="http://api.flickr.com/services/feeds/groups_pool.gne?id=49432949@N00&lang=en-us&format=rss_200"type="flickr"size="medium"/> <image source="photo2.jpg" /> </contents> </album>

The second feed is actually the Flickr Monoslideshow pool. Flickr hosts multiple sizes of your uploaded photos. You can select a size for the Flickr feed images, by specifying both that the feed is of type "flickr", and by defining the size attribute ("medium" in this case).

Note: Monoslideshow must read the feed contents before the slideshow is started. The more feed elements you add, the more time Monoslideshow needs to initialize the slideshow.

Custom fontsBy default, Monoslideshow uses system fonts. However, you can use custom fonts as well. Custom fonts are loaded by creating .SWF files of your custom fonts and load these into Monoslideshow. Instructions for Flash®:

go to your library and add a new font1. right click on the newly created font in your library and select "linkage"2. in the "class" input field, choose a class name for your font, for example "MyFont"3. check "Export for Actionscript" and "Export in first frame"4. publish the Flash file for Flash Player 9, Actionscript 3 and choose a file name, for example "myFont.swf"5.

Now that you have your font .SWF file, you have to load it in Monoslideshow. You can do this by defining the font attribute as your class name (in this case "MyFont"), and by defining the fontFile attribute, which holds the specified font:


<<album> <configuration> <caption> <title font="MyFont" fontFile="myFont.swf" /> <description font="MyFont" fontFile="myFont.swf /> </caption> </configuration> </album>

You can define multiple font classes in one fontFile, or split them up accross multiple files. You can also mix system fonts and custom fonts together.

Custom controller buttonsYou can create your own button images for all the buttons in Monoslideshow. You have to do this by creating a button file which holds the graphical states of each button. The button file has to be saved as a transparent .PNG file. This is a typical example of a button file:

The buttons are ordered as folows, from left to right:

navigation window1. full screen2. previous3. play4. pause5. next6. unmute7. mute8.

navigation close9. navigation album up10. navigation previous11. navigation next12. thumbnail navigation previous13. thumbnail navigation next14. thumbnail navigation vertical previous15. thumbnail navigation vertical next16.

Each button can have 3 or 4 states, and are ordered as follows, from top to bottom:

up: the normal state of the button1. over: displayed when the user hovers over the button2. down: displayed when the user clicks the button3. disable: displayed when the option is not available4.

Each button state graphic must be placed in a rectangle with a stroke of exactly 1 pixel that has the color #000000 (black). There has to be exactly 1 transparent pixel between the button state graphic and the rectangular stroke. The top rectangle (the "up" state) defines the dimensions of the other states of that button. So, the rectangles in one column must have the exact same dimensions. You can however, define different rectangular dimensions per button.

When you've created your .PNG file, you can load the button file in Monoslideshow by defining this code in the .XML file:


<<album> <configuration> <controller buttonFile="customButtonFile.png" /> </configuration> </album>

Disabling start up logoBy default, Monoslideshow shows a logo during the initialization process of the slideshow. During this process the .XML file is loaded, feeds are parsed, sound and font files are preloaded, etc. To disable the display of the Monoslideshow logo, you have to pass the variable showLogo to Monoslideshow and set it to "false":

<script type="text/javascript"> varflashvars={showLogo:"false"}; varparams={}; varattributes={}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); </script>

Disabling registration infoBy default, Monoslideshow shows registration info in the right click context menu. To disable this, you have to pass the variable showRegistration to Monoslideshow and set it to "false":

<script type="text/javascript"> varflashvars={showRegistration:"false"}; varparams={}; varattributes={}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); </script>


Monoslideshow APIYou can communicate with Monoslideshow via Javascript and via Actionscript 3. Monoslideshow can receive function calls that instruct the slideshow to perform certain actions. Monoslideshow also sends certain messages, which your program code can receive. This way, you can synchronize your actions to Monoslideshow events, and Monoslideshow can perform actions on your command.

The following events are broadcasted by Monoslideshow to Javascript and Actionscript 3:

itemClick• , an item is clicked upon, the following event attributes are available:title, the title description, the description id, the unique user specified ID link, the link to go to after a user clicks the item target, the target window to load the link in

itemLoaderComplete• , an item has completed loading, the following event attributes are available:source, the source as defined in the .XMl file url, the resolved URL to the file title, the title description, the description id, the unique user specified ID link, the link to go to after a user clicks the item target, the target window to load the link in

itemLoaderError• , an item has not been correctly loaded, the following event attributes are available:source, the source as defined in the .XMl file url, the resolved URL to the file title, the title description, the description id, the unique user specified ID link, the link to go to after a user clicks the item target, the target window to load the link in

navigationClose• , the navigation window is closednavigationShow• , the navigation window is shownmonoslideshowInitialized• , monoslideshow is fully initialized and ready to receive API callsalbumFinished• , the last item in the album has finished playing

The following methods are available in Javascript and Actionscript 3:

previousImage()• , go to previous imagenextImage()• , go to next imagejumpToImage(index:int)• , jump to a specified image index (starting at 0)toggleMute()• , mutes or unmutes the slideshowtogglePause()• , pause or resume the slideshowshowNavigation()• , show the navigation windowcloseNavigation()• , close the navigation windowaddListener(event:String,callBack:Function)• , call a function if Monoslideshow broadcasts an eventremoveListener(event:String,callBack:Function)• , remove the event listener and the callback associ-ated with itloadDataFile(file:String)•isPlaying():Boolean• , returns true if the slideshow currently is playing


The following methods are available in Actionscript 3 only:

loadXML(xml:XML)•setViewport(x:Number,y:Number,widt• h:Number,height:Number), set the viewing rectangle in which Monoslideshow is being displayedreset()• , resets Monoslideshow completely and removes the displayshowLogo• , a boolean attribute that can either be assigned true or falseshowRegistration• , a boolean attribute that can either be assigned true or false

Actionscript 3Loading Monoslideshow into your Flash® projectThe following example loads Monoslideshow into your own Flash® project.

varloader:Loader=newLoader(); varmonoslideshow:Object; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); addChild(loader); loader.load(newURLRequest("monoslideshow.swf")); functiononLoadComplete(event:Event):void{ monoslideshow=event.target.content; monoslideshow.setViewport(newRectangle(50,50,480,360)); monoslideshow.loadDataFile("monoslideshow.xml"); }

As you can see in the example above, Monoslideshow is loaded as an object. When the loading is complete, you can perform function calls on this object. In this example, firstly the viewport is defined to be 480 pixels wide by 360 pixels high, placed on the top left coordinates 50, 50. Secondly, the data file monoslideshow.xml is loaded.

Instead of loading an external file, you can also let Monoslideshow parse a XML object that you can create on the fly. The next example illustrates how. It also shows how to disable the Monoslideshow logo used during the initialization process.

varloader:Loader=newLoader(); varmonoslideshow:Object; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); addChild(loader); loader.load(newURLRequest("monoslideshow.swf")); functiononLoadComplete(event:Event):void{ monoslideshow=event.target.content; monoslideshow.showLogo=false; monoslideshow.setViewport(newRectangle(50,50,480,360)); varxml:XML= <album title="!" itemPath="images/" thumbnailPath="thumbnails/"> <contents> <image source="1.jpg" /> <image source="2.jpg" /> <image source="3.jpg" /> </contents> </album> monoslideshow.loadXML(xml); }

Listening to eventsTo listen to Monoslideshow events in Actionscript 3, you have to add listeners to Monoslideshow. You can do this by calling the function addListener(event:String,function:Function) on the Monoslideshow instance. Once the event is received in the function specified, you can read out certain attributes of the event. Each event has its own attributes. Please refer to the list mentioned above. The example below instructs Monoslideshow to send the event itemLoaderComplete to the function onItemLoaderComplete and reads out all attributes associated with the event object.


varloader:Loader=newLoader(); varmonoslideshow:Object; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); addChild(loader); loader.load(newURLRequest("monoslideshow.swf")); functiononLoadComplete(event:Event):void{ monoslideshow=event.target.content; monoslideshow.addListener("itemLoaderComplete",onItemLoaderComplete); monoslideshow.setViewport(newRectangle(50,50,480,360)); monoslideshow.loadXML(xml); } functiononItemLoaderComplete(event:Object):void{ trace("source:"+event.getAttribute("source")); trace("url:"+event.getAttribute("url")); trace("title:"+event.getAttribute("title")); trace("description:"+event.getAttribute("description")); trace("id:"+event.getAttribute("id")); trace("link:"+event.getAttribute("link")); trace("target:"+event.getAttribute("target")); }

JavascriptPass XML data directly to MonoslideshowBy passing the Flash® variable xml via SWFObject, you can directly pass a Monoslideshow formatted XML string to the Monoslideshow instance. This variable overrides the data file specified in the attribute dataFile. Below is an example of passing a XML string to Monoslideshow.

varflashvars={xml: '<albumtitle="!"itemPath="test/images/"thumbnailPath="test/thumbnails/">'+ '<contents>'+ '<imagesource="1.jpg"/>'+ '<imagesource="2.jpg"/>'+ '<imagesource="3.jpg"/>'+ '</contents>'+ '</album>' }; varparams={allowScriptAccess:"always"}; varattributes={id:"monoslideshow",name:"monoslideshow"}; swfobject.embedSWF( "Monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes );

Listening to eventsTo listen to Monoslideshow events in Javscript, you have to add listeners to Monoslideshow. You can do this by calling the function addListener(event, function) on the Monoslideshow instance. The example below instructs Monoslideshow to send the event itemLoaderComplete to the function onItemLoaderComplete.

swf=document.getElementById("Monoslideshow"); swf.addListener("itemLoaderComplete","onItemLoaderComplete"); functiononItemLoaderComplete(event){ alert("itemloaded"); }

Before you can add listeners to the Monoslideshow instance, Monoslideshow has to be fully loaded. To be sure of this, Monoslideshow calls a Javacscript function that you can specify, directly after Monoslideshow is loaded. You can specify this callback function using the variable callBackFunction in the SWFObject embed code. In the example below, Monoslideshow calls the function initializeMonoslideshow directly after Monoslideshow has been loaded.


varflashvars={callBackFunction:"initializeMonoslideshow"}; varparams={allowScriptAccess:"always"}; varattributes={id:"Monoslideshow",name:"Monoslideshow"}; swfobject.embedSWF( "Monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); functioninitializeMonoslideshow(){ alert("Monoslideshowhasbeeninitialized"); }

The following example traces out a couple of events that have been called. It requires that you have a HTML template with:

a • div with id flashContent, where Monoslideshow is loaded ina • form with a textarea element with id textArea, where text output is traced tothe necessary files (• monoslideshow.swf, swfobjects.js).

varswf; varflashvars={callBackFunction:"initializeMonoslideshow"}; varparams={allowScriptAccess:"always"}; varattributes={id:"Monoslideshow",name:"Monoslideshow"}; swfobject.embedSWF( "Monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); functiontrace(string){ vararea=document.getElementById("textArea"); area.value+=string+"\n"; } functiononNavigationClose(event){ trace("closingnavigation"); }; functiononNavigationShow(event){ trace("showingnavigation"); }; functiononItemClick(event){ trace("itemclicked:"+event.link); } functiononItemLoaderComplete(event){ trace("itemloaded:"+event.url); } functiononItemLoaderError(event){ trace("errorloading:"+event.url); } functioninitializeMonoslideshow(){ swf=document.getElementById("Monoslideshow"); swf.addListener("navigationClose","onNavigationClose"); swf.addListener("navigationShow","onNavigationShow"); swf.addListener("itemClick","onItemClick"); swf.addListener("itemLoaderComplete","onItemLoaderComplete"); swf.addListener("itemLoaderError","onItemLoaderError"); }

Calling methodsYou can also call certain methods via Javascript. Again, you have to wait before Monoslideshow has been fully loaded to call a method. You can use the initializeMonoslideshow variable to determine which Javascript function to load after Monoslideshow has been initialized. Below you find an example of how to control Monoslideshow via Javascript.


<divid="flashContent"></div> <script type="text/javascript"> varswf; varflashvars={callBackFunction:"initializeMonoslideshow"}; varparams={allowScriptAccess:"always"}; varattributes={id:"monoslideshow",name:"monoslideshow"}; swfobject.embedSWF( "monoslideshow.swf","flashContent", "480", "360", "9", false, flashvars,params,attributes ); functionpreviousImage(){ swf.previousImage(); } functionnextImage(){ swf.nextImage(); } functiontoggleMute(){ swf.toggleMute(); } functiontogglePause(){ swf.togglePause(); } functionshowNavigation(){ swf.showNavigation(); } functioncloseNavigation(){ swf.closeNavigation(); } functioninitializeMonoslideshow(){ swf=document.getElementById("monoslideshow"); } </script> <formname="form"onsubmit="returnfalse;"> <inputtype="button"value="previous"onclick="previousImage();"/> <inputtype="button"value="next"onclick="nextImage();"/><br/> <inputtype="button"value="togglemute"onclick="toggleMute();"/> <inputtype="button"value="togglepause"onclick="togglePause();"/><br/> <inputtype="button"value="showNavigation"onclick="showNavigation();"/> <inputtype="button"value="closeNavigation"onclick="closeNavigation();"/><br/> <textareaid="textArea"style="width:480px;height:100px;"></textarea> </form>


XML referenceInterface elementsBelow you see two screenshots of a typical Monoslideshow setup. The main visual objects are shown, and you can manipulate their position, size, color and a whole lot more.

progress

titledescription

caption

controllerre�ection

item

viewport

This is a screenshot of the main interface. The item is displayed in the viewport. The viewport also holds the reflection. Outside the viewport, and in the slideshow area, there's the caption, which holds the title and description of the currently displayed item. You'll also see the progress, which indicates the amount of bytes loaded. And, finally, there's the controller, which lets you navigate through item thumbnails.

navigation

item

controller

When you click the navigation button, the slideshow pauses, the controller flips and the navigation window controls appear. You're now in navigation mode, and you can click on the item thumbnails in the navigation window to load a specific item. When you click on an item thumbnail, the navigation window disappears and the slideshow will resume playing.


Attributes per XML nodeAlbum element<contents> <album> <configuration/> </album> </contents>

The album element contains the contents of the slideshow. Images, .SWF files, videos and RSS feed elements can be used to populate an album. In addition, you can place albums inside other albums. There’s practical no limit on how many items an album can contain, as Monoslideshow loads items only when they are needed.

attribute default type descriptiondescription string description text.highResPath url path to the high resolution folder. the high resolution items

are displayed when the slideshow is in full screen mode.note: when high resolution items are loaded, the source attribute value is prepended with highResPath. only images are displayed in their high resolution version, not .SWF files. specify type="image" in the <image> node to instruct Monoslideshow that the file is an image, instead of a swf.

id string you can give an album an ID that you can use together with startWithAlbumID

itemPath string the path to the folder that contains all the items. the source attribute value of an item is prepended with this attribute.

thumbnail url the URL of a thumbnail of an album.note: this attribute is not prepended with itemPath or thumbnailPath

thumbnailPath url the path to the folder that contains all the thumbnails of the images. the source attribute value of an item is prepended with this attribute.

title string title text.

Album configuration element<album> <configuration> <caption /> <controller /> <navigation /> <progress /> <reflection/> <shadow /> <sound /> <transition /> </configuration> </album>

The album configuration element holds the configuration of an album. The global properties are defined here, such as the background color of the slideshow, the scale mode of items and what to do when the album finishes.

attribute default type descriptionbackgroundColor #000000 color background colorbackgroundImage url background image

note: this attribute does not use itemPath and is scaled in mode scaleToFill.

bufferTime 2 number 0–MAX seconds to buffer the video before playingdelay 3 number 0–MAX seconds of pause between itemserrorImageColor1 #272822 color background color of an error imageerrorImageColor2 #f92672 color foreground color of an error imagefollowImageLinks false boolean determines if images should be clickableframesPerSecond 30 number 1—MAX frames per second of the Flash® movie


attribute default type descriptionfullScreenScaleMode scaleToFit option scaleToFit

scale the image so that it fits inside the viewportscaleToFillscale the image so that it fills the entire viewportnonedoes not scale the imagedownscaleToFitscales the image to fit the viewport only if the resulting image has smaller dimensions than the originaldownscaleToFillscales the image to fill the viewport only if the resulting image has smaller dimensions than the original

onAlbumEnd loop option loadNextAlbumloads next album that is at same level as current albumloadURLloads an URL defined by onAlbumEndURL in target defined by onAlbumEndTargetlooploops the albumreloadDataFilereloads the data fileshowNavigationshows the navigation windowshowParentAlbumshows the album that contains the current album(s)

onAlbumEndURL string the URL that is loaded if onAlbumEnd is "loadURL"onAlbumEndTarget string the target that the URL onAlbumEndURL is loaded intoonLoadError displayErrorIm-

ageoption displayErrorImage

displays an error image if a load error occursskipskips to the next image if a load error occursnote: if the consecutive number of errors exceeds 5, the error image is displayed.

preloadItems 0 number 0—MAX items to preloadnote: a value of 0 does not preload any items

randomize false boolean randomizes the contents and albums of the slideshowrenderQuality high option low, medium, high, best

the higher the quality, the more CPU power is used.reloadTimeThreshold 0 number 0–MAX the number of seconds after which dataFile is forced to

reload when the album is ended.note: setting this value to 0 does not reload the data file.

scaleMode scaleToFill option scaleToFitscale the image so that it fits inside the viewportscaleToFillscale the image so that it fills the entire viewportnonedoes not scale the imagedownscaleToFitscales the image to fit the viewport only if the resulting image has smaller dimensions than the originaldownscaleToFillscales the image to fill the viewport only if the resulting image has smaller dimensions than the original

startSlideshowOnAlbum-Select

false boolean when set to true, clicking an album plays the slideshow without showing the thumbnails first, except when the album contains other sub albums

startWithAlbumID text starts the slideshow with the album with the specified id.startWithItemID text starts the slideshow with the item with the specified id.startWithNavigation-Window

false boolean start with displaying the navigation window, so you can start the slideshow by selecting an item

viewport 0, 0, 0, 0 offset specifies the viewport where the items are displayed in. The format is x, y, width, height, where x, y are the top left coordinates of the viewport. You can also specify the viewport as left, top, right, bottom, "offset", in which case the viewport scales along with the Flash® window and the 4 coordinates function as margins. For example, a value of 10, 20, 30, 40, offset will place the viewport 10 pixels from the left, 20 from the top, 30 from the right and 40 from the bottom of the Flash® window.note: a value of 0, 0, 0, 0 means the viewport is defined as the complete Flash® window.

viewportRoundness 0 number 0–MAX the roundness of the viewportvolume 1 number 0–1 the sound volumewaitForSound true boolean if a sound is playing during an item, wait for the sound to

complete, before moving on to the next item


Feed element<album> <feed /> </album>

The feed element can be used to load Media RSS feeds into an album. Media RSS is a specific type of RSS that contains media files, such as images, audio and video. For example, Flickr RSS feeds are formatted according to the specifications of Media RSS. You can find the specifications of Media RSS feeds here: search.yahoo.com/mrss/

attribute default type descriptionnumber 0 number 0—MAX maximum number of images to insert from the feed. use 0

for all the images in the feed.note: every web service determines how many items to serve in their RSS feed. For example, Flickr inserts only the latest 20 items. So this is also the maximum number of items that Monoslideshow has access to.

size medium option tiny, thumbnail, small, medium, largethe size used for flickr type feeds

type generic option flickrused for Flickr type RSS feedstumblrused for Tumblr RSS feeds. URL example: http://username.tumblr.com/api/readgenericgeneric Media RSS feeds

url url the URL of the feed

Image element<album> <image> <configuration/> </image> </album>

The image element contains an image file or a Flash® .SWF file. Supported types: JPG, PNG, GIF, SWF.

attribute default type descriptionaction none option clickToAdvance

after this image, the slideshow is paused. click on the image to resume the slideshowshowNavigationafter this image, show the navigation windowclickToShowNavigationafter this image, click to show the navigation windowpauseafter this image, pause the slideshownoneno specific action is performed

description string description textid string you can give an image an ID that you can use together with

startWithItemID in the album’s configuration nodelink url when an image is clicked, go to this linksound url url to an MP3 file to play during the time an image is

displayed.nore: you can use the watForSound attribute in the configuration node to let Monoslideshow know that it should wait for the sound to complete, before advancing to the next item.

source url url of the imagetarget string target frame to load the link in, for example "_blank" or

"_parent"thumbnail url url to a thumbnail of this image, used in the navigation

window.title string title texttype image option image

item is an imageswfitem is a .SWF fileswfAsImagecaptures the .SWF file as a bitmap, so bitmap effects can be used (like the Ken Burns effect and some transitions)note: this attribute is used to instruct Monoslideshow which item type this is in full screen mode. if not specified, Monoslideshow looks at the file extension of the file.


Image configuration element<image> <configuration> <caption /> <progress /> <transition /> </configuration> </image>

The image configuration element holds the configuration of an image.

attribute default type descriptiondelay 3 number 0–MAX seconds of pause between imageserrorImageColor1 #272822 color background color of the error imageerrorImageColor2 #f92672 color foreground color of the error imagefullScreenScaleMode scaleToFit option scaleToFit


onLoadError displayErrorIm-age

option displayErrorImagedisplays an error image if a load error occursskipskips to the next image if a load error occursnote: if the consecutive number of errors exceeds 5, the error image is displayed.

scaleMode scaleToFill option scaleToFitscale the image so that it fits inside the viewportscaleToFillscale the image so that it fills the entire viewport nonedoes not scale the imagedownscaleToFitscales the image to fit the viewport only if the resulting image has smaller dimensions than the originaldownscaleToFillscales the image to fill the viewport only if the resulting image has smaller dimensions than the original

volume 1 number 0–1 the sound volumewaitForSound true boolean if a sound is playing during an item, wait for the sound to


Video element<album> <video> <configuration/> </video> </album>

The video element contains a video file. Supported codecs: adobe.com/go/kb402866

attribute default type descriptionaction none option clickToAdvance

after this video, the slideshow is paused. click on the image to resume the slideshowshowNavigationafter this video, show the navigation windowclickToShowNavigationafter this video, click to show the navigation windowpauseafter this video, pause the slideshownoneno specific action is performed

description string description textid string you can give a video an ID that you can use together with

startWithItemID in the album’s configuration nodelink url when a video is clicked, go to this linksound url url to an MP3 file to play during the time a video is

displayed.nore: you can use the watForSound attribute in the configuration node to let Monoslideshow know that it should wait for the sound to complete, before advancing to the next item.


attribute default type descriptionsource url url of the videotarget string target frame to load the link in, for example "_blank" or

"parent"thumbnail url url to a thumbnail of this video, used in the navigation

window.title string title text

Video configuration element<video> <configuration> <caption /> <progress /> <transition /> </configuration> </video>

The video configuration element holds the configuration of a video.

attribute default type descriptionbufferTime 1 number 0–MAX seconds to buffer the video before playingdelay 3 number 0–MAX the delay between imageserrorImageColor1 color background color of the error imageerrorImageColor2 color foreground color of the error imagefullScreenScaleMode scaleToFit option scaleToFit


onLoadError displayErrorIm-age

option displayErrorImagedisplays an error image if a load error occursskipskips to the next image if a load error occursnote: if the consecutive number of errors exceeds 5, the error image is displayed.

scaleMode scaleToFill option scaleToFitscale the image so that it fits inside the viewportscaleToFillscale the image so that it fills the entire viewport nonedoes not scale the imagedownscaleToFitscales the image to fit the viewport only if the resulting image has smaller dimensions than the originaldownscaleToFillscales the image to fill the viewport only if the resulting image has smaller dimensions than the original

volume 1 number 0–1 the sound volumewaitForSound true boolean if a sound is playing during an item, wait for the sound to


Transition element<configuration> <transition /> </configuration>

The transition element determines which transition to perform when loading and displaying a new item.

attribute default type descriptionchannel1 red option red, green, blue, alpha

pixel channel 1 to use if type is melt, noise, selfMelt, shatter, water, waterDrop

channel2 blue option red, green, blue, alphapixel channel 2 to use if type is melt, noise, shatter, water, waterDrop

direction leftToRight option topToBottom, bottomToTop, leftToRight, rightToLeftused if type is wipe, swap


attribute default type descriptioneasing easeInOut option easeIn, easeOut, easeInOut, easing

determines the easing mode during the transitionkenBurnsEndRectangle rectangle the viewing rectangle defined on the item to end the Ken

Burns transition withnote: rectangle defined as x, y, width, height. that rectangle is then scaled to fill the viewport (with mode scaleToFill)

kenBurnsMode none option randomPanrandomly pans accross the itemrandomZoomIn, randomZoomOut, randomZoomrandomly zooms the itemrandomZoomAndPanrandomly zoom or pans accross the itemautoPan,autoPanBackwardsalways show the entire item by panning horizontally or vertically3D,3DBackwardsgently rotates the item in 3Drandom3Drandomly rotates the item in 3D or in backwards 3Drandomrandomly chooses a Ken Burns Mode, except for autoPan or autoPanBackwardsnonedon't apply the Ken Burns effect

kenBurnsStartRectangle rectangle the viewing rectangle defined on the item to start the Ken Burns transition withnote: rectangle defined as x, y, width, height. that rectangle is then scaled to fill the viewport (with mode scaleToFill):

kenBurnsStrength 0.15 number 0—1 how much the Ken Burns effect will applykenBurnsTime 6 number 0—MAX time in seconds the Ken burns effect is playingpauseTransitionTime 0 number 0—MAX the transition time of items if the slideshow is pausedperformOutro false booelean perform transition outro or start with intro of next itempivotPoint topLeft option topRight, bottomRight, bottomLeft, topLeft

used if type is pivotsize 0.1 number 0—1 the size of the transition type applied (if type is noise,

spark,water,waterDrop,wipe)strength 0.1 number 0—1 the strength of the transition type (if type is noise,

spark,water,waterDrop)time 0.5 number 0—MAX transition time in secondstype blend option blend,bubbles,flash,flow,focusFade,melt,

noise,pivot,push,selfMelt,shatter,spark,swap, water, waterDrop, wipenote: the following transitions overwrite the Ken Burns effect: melt, swap,flow

Caption element<configuration> <caption> <description /> <shadow /> <title /> <transition /> </caption> </configuration>

The caption element displays a title and a description of an item. You can use your own fonts or you can use a system font. For a list of safe system fonts, you can check en.wikipedia.org/wiki/Core_fonts_for_the_Web

attribute default type descriptionbackgroundAlpha 0.75 number 0—1 the opacity of the backgroundbackgroundColor #000000 color the background color of the caption elementbackgroundRoundness 10 number 0—MAX the roundness of the caption elementbackgroundType fitTextLines option fitCompleteText

fits the background around the complete text field. this results in a rectangular shape.firTextLinesfits the background around the individual text lines. this results in multiple rectangular shapes.

countSeparator / string displayed between current image and total images


attribute default type descriptiondisplayMode always option always

always display the captiononHoveronly display caption when the mouse hovers over the slideshownevernever display the caption

delay 0 number 0–MAX delay before the caption fades outmargin 10, 10, 10, 10 margin margin around the caption elementpadding 5, 5, 5, 5 padding padding inside the caption elementposition topLeft option topCenter,topRight,rightCenter,bottomRight,

bottomCenter,bottomLeft,leftCenter,topLeft,center

showCount false boolean shows the index of an image and the total number of images in front of the caption title

spacing 0 number 0—MAX spacing between the title and the description textstrokeColor #fffef1 color color of the stroke around the caption elementstrokeType round option square, roundstrokeWidth 0 number 0—MAX width of the stroke around the caption elementtextAlign left option left, right, centertextAlpha 1 number 0—1 opacity of the texttitleSeparator : string displayed between image count and titlewidth 0 number 0—MAX,

or percentagewidth of the caption. if the value is not 0, the backgroundType is set to fitCompleteText and the caption gets a fixed width. You can also enter a percentage, which stretches the caption to the corresponding part of the Flash® window.

Caption transition element<caption> <transition /> </caption>

The transition element determines which transition to perform when displaying a caption.

attribute default type descriptiondirection leftToRight option topToBottom, bottomToTop, leftToRight,

rightToLeftused if type is moveIn

easing easeInOut option easeIn, easeOut, easeInOut, nonedetermines the easing mode during the transition

time 0.5 number 0—MAX transition time in secondstype blend option blend, moveIn

Caption title element<caption> <title /> </caption>

This element holds the title configuration of a caption.

attribute default type descriptioncolor #fffef1 color color of the textfont Arial, sans-

serifstring name of a system font, or a custom defined font class

loaded via fontFilefontFile url a font file containing one or more font classes. use the

font attribute to specify which font class to use.leading 0 number space between text linesletterSpacing 0 number space between letterssize 22 number 1—MAX font sizestyle normal option normal, italictype normal oprion normal, noneweight normal option normal, bold


Caption description element<caption> <description /> </caption>

This element holds the description configuration of a caption.

attribute default type descriptioncolor #7f7f78 color color of the textfont Arial, sans-

serifstring name of a system font, or a custom defined font class

loaded via fontFilefontFile url a font file containing one or more font classes. use the

font attribute to specify which font class to use.leading 0 number space between text linesletterSpacing 0 number space between letterssize 12 number 1—MAX font sizestyle normal option normal, italictype normal oprion normal, noneweight normal option normal, bold

Controller element<album> <controller> <scrubBar /> <shadow /> </controller> </album>

The controller element holds the buttons to navigate through the slideshow. If the navigation window that contains the thumbnails is shown, the controller flips and shows the buttons for the navigation window.

attribute default type descriptionappearTime 1 number 0—MAX appear transition in secondsautoHide true boolean auto hides the controller after disappearDelay secondsautoPlay true boolean automatically plays the slideshowbackgroundAlpha 0.75 number 0—1 background opacity of the controller elementbackgroundColor #000000 color background color of the controller elementbackgroundRoundness 30 number 0—MAX roundness of the controller elementbuttonFile url a file containing bitmap sprites for the controller iconsdisappearDelay 3 number 0—MAX time in seconds before the controller element hides away.

time starts running when there’s no mouse interaction.disappearMode vertical option horizontal,vertical

specifies if the controller should disappear horizontally or vertically.

flipTime 0.3 number 0—MAX flip transition time of the controller, in secondsiconColorDisable #7f7f78 color color of icons that are disablediconColorDown #fffef1 color color of icons when clickediconColorOver #f92672 color color of icons when hovered overiconColorUp #fffef1 color normal color of iconsiconHeight 17 number 0—MAX height of an iconiconSpacing 2 number 0—MAX spacing between iconsiconWidth 17 number 0—MAX width of an iconmargin 20, 20, 20, 20 margin margin around controller elementpadding 10, 10, 10, 10 padding padding inside the controller elementposition bottomCenter option topCenter,topRight,rightCenter,bottomRight,

bottomCenter,bottomLeft,leftCenter,topLeft,centerposition of the controller element in the slideshow

resizeTime 0.3 number 0—MAX resize transition time when the scrub bar is displayed and the controller element changes its width

showFullScreenButton false boolean show full screen buttonshowMuteButton false boolean show mute buttonshowNavigationAlbumUp-Button

true boolean show album up button in the navigation window

showNavigationButton true boolean show navigation buttonshowNavigationClose-Button

true boolean show close button in the navigation window

showNavigationNextBut-ton

true boolean show next button in the navigation window


attribute default type descriptionshowNavigationPrevi-ousButton

true boolean show previous button in the navigation window

showNextButton true boolean show next buttonshowPlayButton true boolean show play buttonshowPreviousButton true boolean show previous buttonshowScrubBar true boolean show scrub barstartHidden false boolean hides the controller at startstrokeColor #fffef1 color color of the stroke around the controller elementstrokeType round option square, roundstrokeWidth 2 number 0—MAX width of the stroke around the controller elementtransitionTime 0.25 number 0—MAX show and hide transition timetype normal option none

do not display the controllernormaldisplay the controller

Scrub bar element</configuration> <scrubBar /> </configuration>

The scrub bar element will expand when a video is displayed. You can use the scrub bar to navigate through the timeline of a video.

attribute default type descriptionbackgroundColor #000000 color background colorheight 8 number 0—MAX heightinteractionEnabled true boolean determines if the scrub bar has mouse interactionloadingColor #fffef1 color color of the loader indicatormargin 4, 0, 4, 0 margin margin around the elementprogressColor #f92672 color color of the progress indicatorwidth 50 number 0—MAX width

Navigation element<configuration> <navigation> <albums /> <caption /> <items /> <pageIndicator /> </navigation> </configuration>

The navigation element displays the thumbnails of the contents of an album. You can navigate to sub albums and select items to display.

attribute default type descriptionbackgroundOverlayAlpha 0.65 number 0—1 the opacity of the overlay behind the navigationbackgroundOverlayColor #000000 color the color of the overlay behind the navigationbackgroundOverlayFa-deInTime

0.25 number 0—MAX the fade in time of the overlay behind the navigation

backgroundAlpha 0.75 number 0—1 opacity of backgroundbackgroundColor #000000 color color of backgroundbackgroundRoundness 30 number 0—MAX roundness of backgroundmargin 80, 80, 80, 80 margin space around elementerrorImageColor1 #fffef1 color background color of an error imageerrorImageColor2 #f92672 color foreground color of an error imagepadding 20, 20, 20, 20 padding space inside elementposition center option topCenter,topRight,rightCenter,bottomRight,


strokeColor #fffef1 color color of line around elementstrokeType round option square, roundstrokeWidth 2 number 0—MAX width of line around element


Navigation caption element<navigation> <caption> <description /> <title /> </caption> </navigation>

The navigation caption element displays the title of the album of which the contents are being displayed.

attribute default type descriptionalbumTitlePlaceholder … string in sub albums, place this in front of the title, to signify that

the current album is placed inside other albumsalbumTitleSeparator / string in sub albums, separate album titles with this stringbackgroundAlpha 0.75 number 0—1 the opacity of the background colorbackgroundColor #000000 color the background color of the caption elementbackgroundRoundness 10 number 0—MAX the roundness of the caption elementbackgroundType fitTextLines option fitCompleteText


countSeparator / string displayed between current image and total imagesdelay 0 number 0–MAX delay before the caption fades outdisplayFullTitles false boolean in sub albums, display full titles, or, if false, display

albumTitlePlaceholderdisplayParentAlbums true boolean in sub albums, display parent albums in front of the current

titleeasing easeInOut option easeIn, easeOut, easeInOut

determines the easing mode during the transitionmargin 0, 0, 0, 10 margin margin around the caption elementpadding 0, 0, 0, 0 padding padding inside the caption elementposition left option left, right, centershowCount false boolean shows the index of an image and the total number of

images in front of the caption titlespacing 0 number 0—MAX spacing between the title and the description textstrokeColor #fffef1 color color of the stroke around the caption elementstrokeType round option square, roundstrokeWidth 2 width of the stroke around the caption elementtextAlign left option left, right, centertextAlpha 1 number 0—1 opacity of the texttype normal option normal

display captionnonedo not display caption

Navigation albums element<navigation> <albums> <caption /> <shadow /> <transition /> </albums> </navigation>

The navigation album configuration element holds the configuration of albums in the navigation window. An album contains a thumbnail and a caption.

attribute default type descriptionbackgroundAlpha 1 number 0—1 the opacity of the background colorbackgroundColor #272822 color the background color of an albumbackgroundRoundness 8 number 0—MAX the roundness of an albumcolumns 0 number 0—MAX the number of columns

note: use a value of 0 to let Monoslideshow calculate the optimal number of columns

fadeInTime 0.25 number 0—MAX album fade in time in secondsheight 60 number 0—MAX height of an album elementhorizontalSpacing 2 number 0—MAX horizontal space between albumsimageBackgroundAlpha 0 number 0—1 background opacity of the thumbnail image in an albumimageBackgroundColor #000000 color background color of the thumbnail image in an album


attribute default type descriptionimageRoundness 6 number 0—MAX roundness of the thumbnail image in an albumimageScaleMode scaleToFill option scaleToFit, scaleToFill, noScale, downscaleToFit,

downscaleToFillthe scale mode of the thumbnail image in an album

padding 5, 5, 5, 5 padding padding inside the albumrows 0 number 0—MAX the number of rows.

note: use a value of 0 to let Monoslideshow calculate the optimal number of rows

strokeColor #3b3c36 color color of the stroke around the albumstrokeType round option square, roundstrokeWidth 0 number 0—MAX width of the stroke around the albumverticalSpacing 2 number 0—MAX vertical space between albumswidth 60 number 0—MAX width of an album

Navigation album caption element<albums> <caption> <description /> <title /> </caption> </albums>

The album caption element of an album in the navigation window.

attribute default type descriptionbackgroundAlpha 0 number 0—1 the opacity of the background colorbackgroundColor #000000 color the background color of the caption elementbackgroundRoundness 10 number 0—MAX the roundness of the caption elementbackgroundType fitTextLines option fitCompleteText


height 60 number 0—MAX height of the caption.note: a value of 0 is for autosizing the height based on the width

margin 5, 0, 0, 0 margin margin around the caption elementpadding 0, 0, 0, 0 padding padding inside the caption elementspacing 0 number 0—MAX spacing between the title and the description textstrokeColor #fffef10 color color of the stroke around the caption elementstrokeType round option square, roundstrokeWidth width of the stroke around the caption elementtextAlign left option left, right, centertextAlpha 1 number 0—1 opacity of the textwidth 120 number 0—MAX width of the caption

Navigation transition element<*> <transition> <shadow /> </transition> </*>

This element defines the transition type when hovering over an album or item in the navigation window.

attribute default type descriptiondistanceX 0 number 0—MAX hover horizontal translationdistanceY 0 number 0—MAX hover vertical translationhighlight overlay option overlay, screen

hover highlight modehighlightStrength 0.25 number 0—1 hover highlight strengthscale 1.1 number 1—2 scale factor when hovering over the elementtime 0.1 number 0—MAX highlight transition time in seconds


Navigation items element<navigation> <items> <shadow /> <transition /> </items> </navigation>

This element defines the characteristics of item thumbnails in the navigation window.

attribute default type descriptioncolumns 0 number 0—MAX the number of columns

note: use a value of 0 to let Monoslideshow calculate the optimal number of columns

fadeInTime 0.25 number 0—MAX item fade in time in secondsheight 50 number 0—MAX height of an album elementhorizontalSpacing 2 number 0—MAX horizontal spacing between itemsimageBackgroundAlpha 0 number 0—1 background opacityof the thumbnail imageimageBackgroundColor #000000 color background color of the thumbnail imageimageRoundness 4 number 0—MAX roundness of the thumbnail imageimageScaleMode scaleToFill option scaleToFit, scaleToFill, noScale, downscaleToFit,

downscaleToFillthe scale mode of the thumbnail image in an album

rows 0 number 0—MAX the number of rows.note: use a value of 0 to let Monoslideshow calculate the optimal number of rows

strokeColor #fffef1 color color of the stroke around the navigation elementstrokeType round option square, roundstrokeWidth 0 number 0—MAX width of the stroke around the navigation elementverticalSpacing 2 number 0—MAX horizontal spacing between itemswidth 50 number 0—MAX width of an album

Page indicator element<navigation> <pageIndicator /> </navigation>

The page indicator shows how many pages are in the navigation window and which one is currently active.

attribute default type descriptionautoHide true boolean auto hides if all items are visiblecolor #3b3c36 color color of backgroundcolorActive #fffef1 color roundness of backgroundindicatorType round option square, roundmargin 15, 15, 15, 0 margin margin around elementposition bottom option top, borrom, left, rightsize 5 number 0—MAX icon widthspacing 8 number 0—MAX space around elementtype normal option normal

display this elementnonedon’t display the element

Thumbnail navigation element<configuration> <thumbnailNavigation> <items /> </thumbnailNavigation> </configuration>

The thumbnail navigation window is a permanent navigation window that only contains items and a previous and next button.

attribute default type descriptionbackgroundAlpha 0.75 number 0—1 opacity of backgroundbackgroundColor #000000 color color of backgroundbackgroundRoundness 10 number 0—MAX roundness of backgroundiconHeight 17 number 0—MAX icon heighticonMargin 5, 5, 5, 5 margin margin around icon


attribute default type descriptioniconMode horizontal option horizontal,verticaliconWidth 17 number 0—MAX icon widthmargin 5, 5, 5, 5 margin space around elementerrorImageColor1 #fffef1 color background color of an error imageerrorImageColor2 #f92672 color foreground color of an error imagepadding 5, 5, 5, 5 padding space inside elementposition bottomCenter option topCenter,topRight,rightCenter,bottomRight,


showNextButton true boolean show next buttonshowPreviousButton true boolean show previous buttonstrokeColor #fffef1 color color of line around elementstrokeType round option square, roundstrokeWidth 0 number 0—MAX width of line around elementtype none option normal

display this elementnonedon’t display the element

Progress element<configuration> <progress /> </configuration>

The progress element shows the loading progress of the next item.

attribute default type descriptionbackgroundAlpha 0.75 number 0—1 opacity of the backgroundbackgroundColor #000000 color color of the backgrounddelay 0.25 number 0—MAX delay in seconds before progress is showneasingTime 0.5 number 0—MAX time in seconds to animate to the next load valueheight 5 number 0—MAX height of the progress elementmargin 20, 20, 20, 20 margin margin around the progress elementpadding 6, 6, 6, 6 padding padding inside the progress elementposition bottomRight option topCenter,topRight,rightCenter,bottomRight,


progressColor #fffef1 color color of the progress indicatorradius 12 number 0—MAX radius in case of type piestrokeColor #fffef1 color color of line around elementstrokeType round option square, roundstrokeWidth 2 number 0—MAX width of line around elementtransitionTime 0.5 number 0—MAX time in seconds to fade the progress element in and outtype pie option bar

display a rectangular progress indicatorpiedisplay a round progress indicatornonewon't display indicator

width 100 number 0—MAX width of the progress element

Reflection element<configuration> <reflection/> </configuration>

The reflection element defines a reflection of the items in the viewport.

attribute default type descriptionalpha 0.5 number 0—1 opacity of the reflectionheight 0 number 0—MAX height of the reflectionoffset 1 number 0—MAX space between the item and the reflection


Mark element<configuration> <mark> <shadow /> <mark> </configuration>

The mark element instructs Monoslideshow to display a graphic or .SWF file on top of the slideshow.

attribute default type descriptionalpha 1 number 0—1 opacity of the objectmargin 10, 10, 10, 10 margin space around the objectposition topRight option topCenter,topRight,rightCenter,bottomRight,


source url url to the mark file (image or .SWF)transitionTime 0.5 number 0—MAX time in seconds to fade in

Shadow element<*> <shadow /> </*>

The shadow element can be applied to various elements. Refer to the XML list below to see which ones. You can disable the shadow element by setting the alpha to 0.

attribute default type descriptionalpha 1 number 0—1 opacity of the effectangle 45 number 0—360 anglecolor #000000 color color of the effectdistance 0 number 0—MAX distancequality 3 number 1—15 quality of the effect. a higher number means more quality,

but consumes more CPUsizeX 12 number 1—100 horizontal blur sizesizeY 12 number 1—100 vertical blur sizestrength 1 number 1—100 amount of strength / spreading of the effect

Sound element<configuration> <sound /> </configuration>

The sound element defines background music and sounds on button interaction. There are two global sound attributes: hover and select, which define sounds when hovering over and clicking on a button, respectively. The other attributes override these global sound attributes.

attribute default type descriptionbackgroundMusic url url to a mp3 file to play in the background

note: to play multiple mp3 files after each other, separate multiple url's by commas

backgroundMusicVolume 1 number 0—1 volume of the background musicbackgroundMusicNaviga-tionVolume

0.25 number 0—1 volume of the background music when the navigation window is displayed

fullScreenHover url sound when hovering over full screen buttonfullScreenSelect url sound when clicking on full screen buttonhover url global sound when hovering over a buttononBackgroundMusicEnd loop option loop

loop the background musicstopstop the background music

navigationAlbumHover url sound when hovering over an albumnavigationAlbumSelect url sound when clicking on an albumnavigationAlbumUpHover url sound when hovering over album up buttonnavigationAlbumUpSe-lect

url sound when clicking on album up button

navigationCloseHover url sound when hovering over navigation close buttonnavigationCloseSelect url sound when clicking on navigation close buttonnavigationHover url sound when hovering over navigation button


attribute default type descriptionnavigationItemHover url sound when hovering over an itemnavigationItemSelect url sound when clicking on an itemnavigationNextHover url sound when hovering over navigation next buttonnavigationNextSelect url sound when clicking on navigation next buttonnavigationPreviousH-over

url sound when hovering over previous button

navigationPrevious-Select

url sound when clicking on previous button

navigationSelect url sound when clicking on navigation buttonnextHover url sound when hovering over next buttonnextSelect url sound when clicking on next buttonpauseHover url sound when hovering over pause buttonpauseSelect url sound when clicking on pause buttonplayHover url sound when hovering over play buttonplaySelect url sound when clicking on play buttonpreviousHover url sound when hovering over previous buttonpreviousSelect url sound when clicking on previous buttonselect url global sound when clicking on a buttonthumbnailNavigation-NextHover

url sound when hovering over next button in thumbnail navigation

thumbnailNavigation-NextSelect

url sound when clicking on next button in thumbnail navigation

thumbnailNavigation-PreviousHover

url sound when hovering over previous button in thumbnail navigation

thumbnailNavigation-PreviousSelect

url sound when clicking on previous button in thumbnail navigation


List of available XML nodesBelow is the hierarchy of all XML nodes used in Monoslideshow. Note: you can also create sub albums by placing album nodes in the content node of the parent album.

<album> <configuration> <caption> <description /> <shadow /> <title /> <transition /> </caption> <controller> <scrubBar /> </controller> <mark> <shadow /> </mark> <navigation> <albums> <caption> <description /> <title /> </caption> <shadow /> <transition> <shadow /> </transition> </albums> <caption> <description /> <title /> </caption> <items> <shadow /> <transition> <shadow /> </transition> </items> <pageIndicator /> </navigation> <progress /> <reflection/> <shadow /> <sound /> <thumbnailNavigation> <items> <shadow /> <transition> <shadow /> </transition> </items> <shadow /> </thumbnailNavigation> <transition /> </configuration> <contents> <image> <configuration> <caption> <description /> <shadow /> <title /> <transition /> </caption> <progress /> <transition /> </configuration> </image> <feed> <video> <configuration> <caption> <description /> <shadow /> <title /> <transition /> </caption> <progress /> <transition /> </configuration> </video> </contents> </album>

All contents © 2009 Monokai, all rights reserved. Monoslideshow and the Monoslideshow logo are trademarks of Monokai. All other trademarks, service marks and logos used in this document are the trademarks, service marks or logos of their respective owners.

enjoy!

Documents

mono SLIDESHOW - Urbica · 2010-02-02 · Monoslideshow Manual 4 The basics One .XML file to customize Monoslideshow is a single .SWF file. There’s no need to edit the slideshow