log in / join

Dottoro Flash Slideshow Documentation

A flash portfolio showcase tool integrated into the Dottoro Theme.
Introduction Quick Start Basics general tag showcase tag Adding pictures - the <slide> tag Transition effects between slides - the <transition> tag How to set the flash movie in the HTML document? The config XML file <general> <base> <autoplay> <prev button>, <next button> <description> <transition> <showcase> <slide> <transition> Tweens

1. Introduction

The Dottoro Flash Slideshow is a flash portfolio showcase tool, which is part of the Dottoro Theme. It enables you to display photos in a sequence with different 3D transitions. Its use is quite simple; you only need pictures, and an XML file to make your site unique.
The Flash Slideshow gives you:
Requirements:

2. Quick Start

  1. Download the Dottoro Flash Slideshow and extract it on your computer.
  2. Open the example.htm file with your favorite browser (usually double click on it) and you can see the slideshow immediately.
  3. Copy your pictures into the images folder. The pictures have to be the same dimensions.
  4. Open the config.xml file with your favorite editor and set the URL of your pictures. The Adding pictures section helps you how to do this.
  5. Open the example.htm file with your editor, and set the width and height properties of the object and embed tags, according to the dimensions of your pictures.
  6. Refresh the browser window (F5) that displays the previously opened example.htm file.

2.1. Basics

The Dottoro Flash Slideshow only uses a config XML file and pictures to play a slideshow. With the config file, you can specify the location and the display order of the pictures, the transition effects, etc.
The config XML file has two main sections:

2.1.1 <general> tag

You can use the <general> tag to set every basic settings of the Flash application, so you do not need to set them for each and every slide and transition.
These basic settings are for example:
For example, if you want to use a black background, than you can set it like this:
<base>
    <defaults tint="0x000000" />
</base>

For further details about the <general> tag, please see the config XML file section.

2.1.2 <showcase> tag

In the showcase tag, you can set the displayable pictures, their descriptions, and furthermore, the unique settings for transitions and user interface elements, which is different from those settings described in the general section.
Tags which can be used:

Slides specify the image, the description and the visual appearance, and the transitions specify a slide changing effect.

The slide and transition tags may be placed after each other, repeatedly but only under the following rules:
  1. The first tag must be a slide tag.
  2. A transition tag between two slide tags determines the transition effect between the slides.
  3. The transition tag following the last slide tag determines the transition effect between the last and the first slide.
  4. If no transition tag is specified between two slides, the default transition (see general tag) will be used.

Tags are parsed in source order, so the order of slide tags determine the order they appear. Default slide settings specified in the general tag can be overridden for any slide. Default transition settings specified in the general tag can be overridden for any transition.

2.2 Adding pictures - the <slide> tag

The images in the Flash application have to be the same dimensions.
You have to set the width and height properties of the object and embed tags in the HTML file, according to the size of your images. For further instructions, please see the How to set the flash movie in the HTML document section.

If the Dottoro Flash Slideshow does not fit the dimensions of the images, the width and height attributes of the defaults tag must also be set:
<general>
    <base>
        <defaults width="600" height="300" />
    </base>
</general>
The URL of the pictures can be set in the showcase tag:
<showcase>
    <slide>
        <url>images/slide_1.jpg</url>
    </slide>
</showcase>
If you would like to add more slides:
<showcase>
    <slide>
        <url>images/slide_1.jpg</url>
    </slide>
    <slide>
        <url>images/slide_2.jpg</url>
    </slide>
</showcase>
If you would like that clicking on an image would open a page, specify a link tag with the URL of the website:
<slide>
    <url>images/slide_1.jpg</url>
    <link target="_blank">http://tools.dottoro.com</link>
</slide>

For further details about the <link> tag and its available properties, please see the <showcase> / <slide> / <link> tag.

If you would like to add description to a slide:
<slide>
    <url>images/slide_1.jpg</url>
    <link target="_blank">http://tools.dottoro.com</link>
    <description>
        <link target="_blank">http://tools.dottoro.com</k>
        <heading>My Image Heading</heading>
        <paragraph>The description</paragraph>
    </description>
</slide>

The link tag specifies the URL of the document that should be opened when the user clicks on the description. The heading and the paragraph set the title and body of the description.

For example, if you want to change the font type and the style of the descriptions:
<slide>
    <url>images/slide_1.jpg</url>
    <link target="_blank">http://tools.dottoro.com</link>
    <description>
        <link target="_blank">http://tools.dottoro.com</link>
        <heading font="Trebuchet MS" italic="yes" size="10">My Image Heading</heading>
        <paragraph>The description</paragraph>
        <tweenIn width="440" x="80" alpha="0.8" rotation="0"/>
    </description>
</slide>

For further details about the link tag and its available properties, please see the <showcase> / <slide> / <description> tag.

The user interface elements, such as the prev and next buttons can be described in the general tag, but these settings can be overwritten at each slide.

For example, if you want to add a unique "next button" to a slide:
<slide>
    <url>images/slide_1.jpg</url>
    <next_button>
        <defaults round_corners="5,5,5,5"/>			
        <tweenOver tint="0x00ff00"  scaleX="1.1" scaleY="1.1"/>
        <tweenOut tint="0x00ff00" />
        <tweenIn tint="0x00ff00" />
    </next_button>
</slide>

For further details about the settings of user interface elements, please see the <general> / <prev_button>, <next_button> tags.

2.3. Transition effects between slides - the <transition> tag

A transition tag specifies the transition effect between two slides. The transition tag following the last slide tag determines the transition effect between the last and the first slide. It is quite useful to set the default settings of transitions in the general <transition> tag, so you only need to set the ones for each showcase that are different from the default ones.
For example, if you want to change the type and duration of the effect for a transition:
<transition type="flip" delay="0.05" />
If you want to change the direction of the animations and the number of pieces:
<transition direction="left" rows="3" cols="5" />
If you want to speed up the animation and you want to change the offset on the Z axis:
<transition acceleration="strong" z_multiplier="5" />

For further details, please check the <general> / <transition> and <showcase> / <transition> tags.

2.4. How to set the flash movie in the HTML document?

Setting the flash movie in the HTML document can be done by numerous ways. We prefer the way recommended by Adobe, so we are going to introduce that one here. 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="400" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
    <param name="movie" value="dottoro_showcase.swf" />
    <!-- Optional params -->
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <!-- END Optional -->
    <param name="flashvars" value="xmlpath=http://example.com/config.xml">
    <embed src="dottoro_showcase.swf" width="800" height="400" play="true" loop="true" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" flashvars="xmlpath=http://example.com/config.xml" /> 
</object>

The URL of the config XML file can be set with the FlashVars parameter (absolute paths are recommended). It is useful if you would like to display different slideshows on different pages. 

...
<param name="FlashVars" value="xmlpath=http://tools.dottoro.com/config.xml" />
...

and

<embed ... FlashVars="xmlpath= http://tools.dottoro.com/config.xml" ... />

3. The config XML file

The pictures you want to display do not require any particular change, just create a config XML file. The Dottoro Flash Slideshow only uses your pictures and this file to play the slideshow. With the help of this file, you can specify the location and the display order of pictures, the transition effects, etc.
The construction of the config XML file:
Main sections:
<?xml version="1.0" encoding="utf-8" ?>
<dottoro>
    <general>
        <base>
            <defaults width="840" height="330"/>
        </base>

        <autoplay>
            <defaults interval="5000"/>
        </autoplay>

        <description>
            <defaults round_corners="10, 10, 10, 10"/>
            <heading font="Trebuchet MS" size="13" letterspacing="10" margin="10, 25, 5, 25"/>
            <paragraph size="13"/>
            <tweenin width="620" x="80" alpha="1" tint="0x121212"/>
            <tweenout width="620" x="80" alpha="1" tint="0x121212"/>
        </description>

        <prev_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenover tint="0xFFFFFF" scalex="1.1" scaley="1.1"/>
            <tweenout tint="0xFFFFFF"/>
            <symbol>
                <tweenover tint="0x000000"/>
            </symbol>
        </prev_button>

        <next_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenover tint="0xFFFFFF" scalex="1.1" scaley="1.1"/>
            <tweenout tint="0xFFFFFF"/>
            <symbol>
                <tweenover tint="0x000000"/>
            </symbol>
        </next_button>
    </general>
    
    <showcase>
        
        <slide>
            <url>http://example.com/image_1.jpg</url>
            <link target="_blank">http://example.com</link>
            <description>
                <link target="_blank">http://example.com</link>
                <heading>First Slide heading</heading>
                <paragraph>first slide description ...</paragraph>
            </description>
        </slide>
        
        <transition direction="top" rows="3" cols="3" duration="3" delay="0.2" acceleration="back" easing="out" start_origin="bottomtop" type="x-cuber" z_multiplier="1"/>
    
        <slide>
            <url>http://example.com/image_2.jpg</url>
            <description>
                <link>http://example.com</link>
                <heading>Second slide title</heading>
                <paragraph>second slide description ...</paragraph>
            </description>
        </slide>

        <transition direction="bottom" duration="3" type="cuber" delay="0.05" cols="5" z_multiplier="0.2" acceleration="bounce"/>
    
        <slide>
            <url>http://example.com/image_3.jpg</url>
        </slide>

        <transition direction="left" rows="3" cols="1" duration="3" delay="0.2" acceleration="back" easing="out" start_origin="bottomtop" type="cuber" z_multiplier="0.8"/>
        
        <slide>
            <url>http://example.com/image_4.jpg</url>
        </slide>
    
        <transition direction="top" rows="3" cols="2" type="blend" acceleration="regular" z_multiplier="2"/>
    
    </showcase>
</dottoro>

3.1. <general> tag:

You can use the general tag to set every basic settings of the flash movie, so you need not to set them for each and every slide or transition.
Tags to use, for example:

3.1.1. <general> / <base>

You can attribute the basic flash details in this tag.
Possible tag:
The possible attributes of the defaults tag:

The images in the Flash application have to be the same dimensions.
You have to set the width and height properties of the object and embed tags in the HTML file, according to the size of your images.

For further instructions, please see the How to set the flash movie in the HTML document section.

If the Dottoro Flash Slideshow does not fit the dimensions of the images, the width and height attributes of the defaults tag must also be set:
<base>
    <defaults width="600" height="300" tint="0x000000" />
</base>
Defaults:
tint 0x000000
width no default
height no default

3.1.2 <general> / <autoplay>

The autoplay tag gives the possibility to determine how often the transitions should take place, and can be used to modify the timer, which displays the remaining time until the next transition.
Possible tags:
3.1.2.1. <general> / <autoplay> / <defaults>
Possible attributes of the defaults tag:
For example, if we would like to change the slides after 5 seconds:
<autoplay>
    <defaults interval="5" />
</autoplay>
3.1.2.2. <general> / <autoplay> / <tweenIn>, <tweenOut>, <tweenOver>
During the slideshow the timer indicates the remaining time before the start of the next transition. The fading and mouse over animation of the timer can be set by the tweens, just like any other user interface elements.
Example - modifying the background of the timer:
<autoplay>
    <defaults interval="5" />
    <tweenOver tint="0x00ffff"/>
    <tweenOut tint="0xffff00" />
    <tweenIn tint="0x00ff00" />
</autoplay>

For further instructions, please visit the tweens section.

3.1.3. <general> / <prev button>, <next button>

The previous and next buttons gives the opportunity for the user to change the slide immediately, instead of waiting for the remaining time that was defined in the <autoplay> tag. By clicking on these buttons, the transition effect starts immediately after the user interface elements are disabled.
The appearance of the buttons can be set by the next tags:
3.1.3.1. <general> / <prev_button>, <next_button> / <defaults>
The <defaults> tag contains those settings which cannot be changed at the tweenIn, tweenOut, and tweenOver tag.
Possible attributes:
Round_corners Sets the corner radius of buttons, in pixels (in the following order, separated by commas: top-left, top-right, bottom-left, bottom-right).
Example:
<next_button>
    <defaults round_corners="5,5,5,5" />
</next_button>
3.1.3.2. <general> / <prev_button>, <next_button> / <tweenIn>, <tweenOut>, <tweenOver>
These tags specify the appearance of the buttons while fading in and out and mouse over animation.

For further instructions, please visit the tweens section.

3.1.3.3. <general> / <prev_button>, <next_button> / <symbol>
The property of the arrows can be defined in the <symbol> tag.
Tags which can be used in the symbol tag:
3.1.3.3.1. <general> / <prev_button>, <next_button> / <symbol> / <defaults>
Possible attributes:
type specifies the appearance of the arrow
Example
<next_button>
    <symbol>
        <defaults type="1" />
    <symbol>
</next_button>
(kepek a lehetseges symbol-okrol !!!)
3.1.3.3.2. <general> / <prev_button>, <next_button> / <symbol> / <tweenIn>, <tweenOut>, <tweenOver>
Specifies the appearance of the arrows while fading in and out and mouse over animation.

For further instructions, please visit the tweens section.

3.1.4. <general> / <description>

Gives the possibility to set the description settings of the slides. The displayed text is made of two main components; the heading and the paragraph. The heading contains the title, and the paragraph contains the body of the description.
Tags which can be used in the description tag:
3.1.4.1. <general> / <description> / <defaults>
The <defaults> tag contains those settings which cannot be changed at the tweenIn, tweenOut, and tweenOver tag.
Possible attributes:
round_corners Sets the corner radius of buttons, in pixels (in the following order, separated by commas: top-left, top-right, bottom-left, bottom-right).
height Determines whether the height of the description box should be set according to the displayed text, or it should be the value set in the tweenIn tag. Possible values: "auto" or "user".
3.1.4.2. <general> / <description> / <heading>, <paragraph>
The descriptions title can be adjusted with the <heading> tag (of course, this could be modified in each slide). The type and color of the font, and the character space can also be set.

With the help of the paragraph tag a longer description text and its visual appearance can be defined.

Available properties of the <paragraph> tag:
font Specifies the type of the font.
align Specifies the alignment of the text. (left | center | right)
color Specifies the color of the paragraph text (color code, example 0x000000).
leading An integer that marks the vertical space between the paragraph lines.
letterSpacing An integer, which represents the space between each characters.
margin A comma-separated list of four integers that specify the left, top, right and bottom margins in this order.
size Specifies the size of the text.
bold Specifies whether the text should be displayed as bold, or not. (true | false)
italic Specifies whether the text should be displayed as italic, or not. (true | false)
underline Specifies whether the text should be underlined, or not. (true | false)

It is recommended to use a font type that commonly be found in all computers. Provided one that is not available on the user's computer, it will be transformed automatically to Times New Roman, or its alternative (times).

Example:
<general>
    <description>
        <heading font="Arial" bold ="yes" size="12" />
        <paragraph font="Arial" bold ="no" size="10" />
    </description>
<general>
3.1.4.3. <general> / <description> /<tweenIn>, <tweenOut>, <tweenOver>
Specifies the appearance of the description box while fading in and out and mouse over animation.

For further instructions, please visit the tweens section.

3.1.5. <general> / <transition>

The Dottoro Flash Slideshow supports different 3D transition effects. Transition settings can also be set in both general and showcase sections. In the general section, you can set the default transition settings that can be overridden for each transition in the showcase section. It is quite useful to set the default settings of transitions in the general <transition> tag, so you only need to set the ones for each showcase that are different from the default ones.
The four main types of animations are:
Every transition effect supports the option to split the image into multiple parts which are placed in different groups and can be animated separately.
Flip
The current and the next image is painted to the two sides of a card - during the transition the card turns horizontally or vertically along its center line, and its back side becomes visible.
Blind
The next slide is visible under the currently active slide. During the transition, the parts of the image are rotating on its plane by its center point and fading out.
Cuber
This type of effect rotates cubes, or rectangulars with bitmap faces in 3D. The current image is placed on the front side, and the next image is placed on the side which will be in front after the rotation. The transition rotates the cube with 90 degree on its horizontal or vertical center line. If the image is split into multiple parts, these parts are rotating in the same direction.
X-Cuber
It works as the same as the cuber, but if the image is split into multiple parts, the parts are rotating in random directions.
Possible attributes:
type Specifies the type of the desired transition. Possible values: flip | blend | cuber | x-cuber
rows Specifies the number of rows. In other words, sets into how many parts the whole image has to be split horizontally
cols Specifies the number of rows. In other words, sets into how many parts the whole image has to be split vertically
direction Specifies the direction of rotation. Possible values: top | left | right | bottom
start_origin If the image is split into multiple parts and the delay is set, then the start_origin attribute specifies where the effect should start. Possible values: topleft | topright | bottomright | bottomleft
duration Specifies the duration of the effect, in seconds.
delay Specifies the delay between the start time of group effects, in seconds.
acceleration Specifies the type of the motion.
Possible values:
  1. Regular: the motion speed will gradually increase or decrease in speed as specified by the easing method.
  2. Bounce: the motion will bounce back a few steps when it reaches the end position before settling at it.
  3. Back: the motion will go beyond the end position before bouncing back into it.
  4. Elastic: a mixture of Bounce and Back effects combined.
  5. Strong: a more emphasized Regular effect.
  6. None: no easing, the motion will not speed up.
easing Determine at which part of the tween the effect shall be applied.
Possible values:
  1. easeIn: - The tween effect is applied at the start of the animation.
  2. easeOut: - The tween effect is applied at the end of the animation.
  3. easeInOut: - the tween effect is applied at the start and at the end of the animation.
  4. easeNone: - no tweening effect is applied, to be used with the None tween function.
tint Specifies the default color of the cube. It takes effect only at cuber, and x-cuber animations.
z_multiplier Specifies the offset on the Z axis, compared to the rotation value. In other words, how far the element should be pushed back during the animation. It does not affect the Blind animation.
These settings can be used in both general and showcase tags.

3.2. <showcase> tag

Here you can set the images, the corresponding descriptions, and the user interface elements and transitions that may differ from the default settings.
The showcase tag may contain any number of the following two tags:
The slide tag specifies an image description pair, and the transition tag specifies a transition between two slides.
The slide and transition tags can follow each other repeatedly, but only if they are in accordance with the following rules:
  1. The first tag must be a slide tag.
  2. A transition tag between two slide tags determines the transition effect between the slides.
  3. The transition tag following the last slide tag determines the transition effect between the last and the first slide.
  4. If no transition tag is specified between two slides, the default transition (see general tag) will be used.

Tags are parsed in source order, so the order of slide tags determine the order they appear. Default slide settings specified in the general tag can be overridden for any slide. Default transition settings specified in the general tag can be overridden for any transition.

3.2.1. <showcase> / <slide>

You can define in the slide tag the image URL, the description, the user interface elements and the link to open by clicking on it as well.
Tags which can be used:
3.2.1.1. <showcase> / <slide> / <url>
Specifies the path of the image. Absolute and relative paths are also allowed, but the use of absolute paths is recommended.
Example:
<url>images/slide.jpg</url> If you would like that clicking on an image would open a page, specify a link tag with the URL of the website.
Possible attributes:
Target Specifies the target window or frame where the document is to be opened.
possible values:
  • "_self": Indicates the frame containing the source link.
  • "_blank": Indicates a new window.
  • "_parent": Indicates the parent frame.
  • "_top": Indicates the topmost window.
Example:
<link target="_blank">http://tools.dottoro.com</link>
3.2.1.3. <showcase> / <slide> / <description>
Set the visual appearance and the contents of the description.
The default style for all descriptions can be set in the <description> tag in the general section, but all settings can be overridden for each slide.
Example:
<description>
    <link target="_blank">http://tools.dottoro.com</link>
    <heading>Put your heading here!</heading>
    <paragraph>Paragraph text</paragraph>
</description>
For further details, please see the <description> tag in the general section.
3.2.1.4. <showcase> / <slide> / <autoplay>, <prev_button>, <next_button>
It is the same as in the general sections <autoplay>, <prev_button> and <next_button> tag description, but while the general section settings affect all of the slides, the description in the slide tag only affects that slide tag.

3.2.2. <showcase> / <transition>

You can use transition tags between slide tags. A transition tag specifies the transition effect between two slides. Default transition settings specified in the general tag can be overridden for any transition.

3.3. Tweens (<tweenIn>, <tweenOut>, <tweenOver>)

The tween tags allow setting the appearance and the effects used to display the user interface elements such as the prev and next buttons, description and the clock. These tags specify the end-state values of properties. The tweenIn tag controls how the visible element should be displayed, and the tweenOut tag contains the values of the invisible elements settings. For example, if the width is set to 0 in the tweenOut tag, and to 50 in the tweenIn tag, the application will animate the element width to 50px from 0px on appearing and to 0px from 50px on disappearing.
TweenIn:
Specifies how long it should take to display the element, and the properties of the completely displayed elements.
tweenOut:
Specifies how long it should take to vanish the element, and the properties of the completely vanished elements.
tweenOver:
Specifies the element property when the mouse is over the element, and the time it takes to reach this state, while the mouse gets over the element. In other words, it tells what kind of changes should take place when the user moves the mouse over the element.
If you would like to have the element displayed progressively and faded, set the alpha value to 1 in the tweenln tag, and to 0 in the tweenOut tag. At the beginning, every element is going to be created according to the tweenOut state. It changes from this state to the tweenIns state on visualization, and it changes back to the tweenOuts state on disappearance. If the user hovers the mouse over an element where the tweenIn animation has already been done, but the tweenOut hasn't started yet, the tweenOver animation starts.
Tween attributes:
Duration specifies the effect duration, in second
Start Specifies the delay before the effect starts, in seconds. Basically, when a slide transition ends, user interface elements' tween-in effects start. You can delay this process with the start property of the tweenIn tag.
User interface elements disappear before slide transitions start. The animation duration can be defined in the duration property. If the start property is not defined in the tweenOut, the fading animation will end just about at the beginning of the next transition. If you would like to modify this, you need to set the start property of the tweenOut tag.
Both in the tweenIn and tweenOut tags, the value of the start property is relative to the end time of the last transition. In the tweenOver tag, the start property specifies when the tweenOvers animation should start after the user hovers the mouse over the element. At the beginning, this value is set to 0.
x specifies the element X coordinate, in pixels
y specifies the element Y coordinate, in pixels
width specifies the element width, in pixels
height specifies the elements height, in pixels
rotation specifies the rotation of the element, in degrees
tint specifies the element color ( in 0xRRGGBB format )
alpha specifies the transparency (floating-point number 0-1 , 0 - full transparency)
scaleX specifies the X scaling
scaleY specifies the Y scaling

Simple examples:

Creating a moving effect:
<tweenIn y="200" />
<tweenOut y="400" >
<tweenOver y="200" />

If the y coordinate is altering in the tweenIn and in the tweenOut, it will result a vertical movement, both at the appearing and at vanishing, - Moving, Coloring, Blending 

<tweenIn y="200" alpha="0.8" tint="0x000000"/>
<tweenOut y="400" alpha="0" tint="0xffffff" />
<tweenOver y="200" alpha="1" tint="0xff0000" />

When the elements start to appear, transparency cumulates to 200px from 400px at horizontal, the transparency will change to 0.8 from 0, and the color changes to black from white. It is the same at the element vanishing, but backwards. If the cursor is over the element, the transparency disappears and the background will be red.

Membership
My account My Skins My Status Pricing Privacy Policy Terms of Use
Help & Support
Faq Support Forum Contact Us Video Tutorials Dottoro Theme Doc Theme Editor Doc
Dottoro
About Us Dottoro.com Web Reference Services Theme Editor
© 2012 Dottoro.com. All rights reserved.