mono
SLIDESHOW
User Manual
v1.32, rev1
MonoSlideshow User Manual
Contents
Introduction 1
Some features 1
How does it work?
1
So what’s an .XML-le? 1
Let’s set things up!
3
Prepare folder structure 3
Create .XML-le
3
Put MonoSlideshow on your site!
3
Extra’s 4
Disable startup logo 4
Disable version info
4
Load a custom .XML-le
5
Start with a specied image
5
Loading Flickr RSS Feeds
5
Loading Monoslideshow inside another .SWF-le
6
Loading custom fonts
7
Attributes 9
Global attributes
9
Main attributes 9
Sounds
9
Attributes for images 10
Main attributes 10
The image Info object 1
2
Attributes for Albums 13
Main attributes 13
The thumbnail window object 1
4
The album window object 1
5
The controls object 1
6
The loading icon object 1
7
The mark object 1
7
MonoSlideshow User Manual 1
Introduction
MonoSlideshow is a Flash® slideshow to view your images in a web page. It can be placed
on every website, in whatever size you want and lled with whatever content you like. It’s
designed for maximum exibility, whether you want to have a professional looking portfolio,
or just an image rotator on your website.
Some features
- Resize and position everything to suit your needs
- Color every object you see
- Attach links to images
- Supports sound and music
- Caching and preloading images
How does it work?
Monoslideshow is a single .SWF-le. There’s no need to edit the slideshow in the Flash® IDE
itself. Instead, all its information is directly read from a .XML-le. 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 exible and easily integrated in your existing
site.
Tip: use the demo page on www.monoslideshow.com to automatically create .XML-les!
So what’s an .XML-file?
MonoSlideshow reads all its information from a single textle called monoslideshow.xml. To
put images in your slideshow, you have to edit this le. This could easily be done by using a
simple text-editor such as Notepad or TextEdit.
What exactly is an .XML-le? Well, basically it’s just a plain text le. But .XML-les differ
from ordinary les 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-les, content in .XML-les is
placed inside tags. Let’s take a look at an example to illustrate how all this works.
<?xml version="1.0" encoding="utf-8"?>
<slideshow>
<album thumbnail= "album1.jpg" imagePath="album1">
<img src="photo1.jpg" thumbnail="thumb1.jpg" />
<img src="photo2.jpg" thumbnail="thumb2.jpg" />
<img src="photo3.jpg" thumbnail="thumb3.jpg" />
</album>
</slideshow>
The rst line says that this textle is a le which uses the XML-language. You always have to
include this line. The second line is an opening tag called <slideshow>. 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.
At the third line starts another opening tag. The tag is called album and its corresponding
MonoSlideshow User Manual 2
closing tag is located four lines further. Inside the opening tag are two attributes, called
thumbnail and imagePath. Attributes are always contained inside a tag. The value of an
attribute (in this case album1.jpg and album1, respectively) must always be enclosed
between quotes (" or '). They are to be used to specify something about the tag they are
contained in. In this case, the thumbnail of the album is album1.jpg and the path to all its
images is images.
The three next <img> tags are the actual image les. They all contain two attributes, called
src and thumbnail. The attribute src species the link to the image inside the folder
imagePath. The link to the thumbnail is specied by the attribute thumbnail. As you’ve
perhaps noticed, these tags lack a regular closing tag. Instead of writing <img src="photo1.
jpg"></img>, you could also write <img src="photo1.jpg" />. These type of tags are
called self closing tags. We use them here because the <img> 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-le. You only have to
know which attribute names MonoSlideshow uses to customize the slideshow. They are all
summed up a few pages further. Let’s rst take a look at another example:
<?xml version="1.0" encoding="utf-8"?>
<slideshow>
<preferences
imageTransition="bubblesBlend"
controlAutoHide="false"
/>
<album thumbnail="album1.jpg" imagePath="album1">
<img src="photo1.jpg" thumbnail="thumb1.jpg" />
<img src="photo2.jpg" thumbnail="thumb2.jpg" />
<img src="photo3.jpg" thumbnail="thumb3.jpg" />
</album>
<album thumbnail="album2.jpg" imagePath="album2" thumbnailPath="thumbs">
<img src="photo1.jpg" />
<img src="photo2.jpg" />
<img src="photo3.jpg" />
<img src="photo4.jpg" />
<img src="photo5.jpg" />
<img src="photo6.jpg" />
</album>
</slideshow>
This slideshow consists of two albums. Also, a new attribute called thumbnailPath is
introduced in the second album tag. This attribute denes the path to all the images. Now, if
an <img> tag doesn’t contain a thumbnail attribute, it looks for a thumbnail in this folder for
a le with the exact same name as in the src attribute. This way, you could easily set up two
folders: One for all the images, and one for all the thumbnails.
Another new tag is introduced here: the <preferences> tag. The tag is self-closing and
consists only of attributes. Here you would insert the attributes which you’d like to change
for the entire slideshow. For example, imageTransition is an attribute for the <image>
tag, but could also be inserted in the <album> tag (to affect all images in it), or even in the
<preference> tag (to affect all images in all albums). So, attributes inserted at a lower level
override those at a higher level.
MonoSlideshow User Manual 3
Let’s set things up!
1. Prepare folder structure.
2. Create .XML-le.
3. Put MonoSlideshow on your site.
Prepare folder structure
The 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-file
Put all references to all images in your .XML-le. Use the examples above to see
how the .XML-le is structured. If you’re stuck, you could get help in the forums on
www.monoslideshow.com.
Note: Be sure to correctly implement your links. For example, if Monoslideshow can't nd
your mark le or your sound les, Monoslideshow will not run.
Put MonoSlideshow on your site!
To put monoslideshow.swf on your site, you have to embed it in your webpages.
Nowadays, Flash® content is mostly placed in websites via Javascript. A good technique
for this is using Deconcept’s SWFObject. You can nd instructions of how to use it here:
http://blog.deconcept.com/swfobject/
