Dreamweaver Extensions

Working with XML content

Open the gallery.xml file in Dreamweaver (File -> Open), to change the content of your gallery. Also, you can open the XML content file through FlashDevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Presentation). After that, in the category of 'General', click the 'Edit' button near the 'Source' field.

The following example shows the basic structure of the content XML file:

<?xml version="1.0" encoding="utf-8"?> 
<banner>
    <back>
        <caption position_x="10" position_y="25">
            <content><![CDATA[<p class="static">any text</p>]]></content>
        </caption>
    </back>
    <slides>
        <slide sound="sounds/sound01.mp3" link="empty" target="_blank">
            <caption position_x="300" position_y="30">
               <content><![CDATA[<p class="headline">any text</p>]]></content>
               <show>
                   <transition type="Fly" direction="IN" duration="1" method="Strong.easeOut" start_point="4" />
               </show>
               <hide>
                   <transition type="Fly" direction="OUT" duration="1" method="Strong.easeOut" start_point="6" />
               </hide>
           </caption>
           <image src="photos/photo01.jpg" position_x="125" position_y="30">
               <show>
                   <transition type="Fly" direction="IN" duration="1" method="Strong.easeOut" start_point="4" />
                   <transition type="Zoom" direction="IN" duration="1" method="Strong.easeOut" />
                   <transition type="Iris" direction="IN" duration="1" method="Strong.easeOut" start_point="7" shape="Circle" />
                   <transition type="Rotate" direction="IN" duration="1" method="Strong.easeOut" ccw="false" degrees="120" />
               </show>
               <hide>
                   <transition type="Fly" direction="OUT" duration="1" method="Strong.easeOut" start_point="6" />
               </hide>
           </image>
        </slide>
    </slides>
</banner>

Each slide consists of text and graphic elements: tags <caption> and <image>. There could be any number of such elements. Tag which is situated above will be situated at the foreground, and tag which is below at background. Each of the elements <caption> and <image> has tags <show> and <hide>. The first tag contains the description of the transitions for slide show. The second tag contains the description of the transitions for slide hide. You can use any number of the combinations <transition> to make unique effects of slides appear and hide.

Tag <back> hasn't tags <show> and <hide>. The content of this tag is static and it is remain visible through the presentation show.

<banner>

Description
Main tag and contains the description of the presentation (banner).

<back>

Description
Contains static captions on the background. The content of this tag appears only once and it is remain visible through the presentation show.

<slides>

Description
Contains slides.

<slide>

Description
Contains the description of the slide. Slide contains tags <caption> and <image> and can contain any number of these tags.

Attributes

  • sound, The absolute or relative URL of the sound file (MP3). A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.
  • link, The URL from which to obtain the document.
  • target, Specifies the window or HTML frame into which the document should load. You can enter the name of a specific window or select from the following reserved target names:
    • _self specifies the current frame in the current window.
    • _blank specifies a new window.
    • _parent specifies the parent of the current frame.
    • _top specifies the top-level frame in the current window.

<caption>

Description
The tag of the caption description. Consists of tags <content>, <show> and <hide>.

Attributes

  • position_x, The position of the caption on an axis X, in pixels.
  • position_y, The position of the caption on an axis Y, in pixels.

<image>

Description
The tag of the image description. Consists of tags <show> and <hide>.

Attributes

  • src, The absolute or relative URL of the image file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.
  • position_x, The position of the image on an axis X, in pixels.
  • position_y, The position of the image on an axis Y, in pixels.

<content>

Description
Contains text content of the caption. You can use HTML in this tag.

Example use
<![CDATA[<p class="headline">My caption</p>]]>

<show>

Description
Contains the description of the transitions for slide show. Ttransition slide is a combination of tags <transition>.

<hide>

Description
Contains the description of the transitions for slide hide. Transition slide is a combination of tags <transition>.

<transition>

Description
The description of the transition slide.

Attributes

  • type, type transition effect class. See the table of transitions effects (Table #1).
  • direction, direction of transition. The available value is in or out.
  • duration, duration of a transition in seconds.
  • method, transition easing method. It consists of two parts. The first defines a transition easing class, and the second a easing method. For example: Strong.easeOut. See the table of transitions easing methods (Table #2, Table #3).

Table #1

Effects Description
Blinds

Reveals the object by using appearing or disappearing rectangles.
Additional attributes:

  • num_strips The number of masking strips in the Blinds effect. The recommended range is 1 to 50.
  • dimension An integer that indicates that the Blinds strips are to be vertical (0) or horizontal (1).
Fly

Slides the object in from a specified direction.
Additional attributes:

  • start_point An integer that indicates a starting position; the range is 1 to 9: Top Left, 1; Top Center, 2; Top Right, 3; Left Center, 4; Center, 5; Right Center, 6; Bottom Left, 7; Bottom Center, 8; Bottom Right, 9.
Iris

Reveals or hides the object by using an animated mask of a square shape or a circle shape that zooms in or out.
Additional attributes:

  • start_point An integer indicating a starting position; the range is 1 to 9: Top Left, 1; Top Center: 2, Top Right, 3; Left Center, 4; Center, 5; Right Center, 6; Bottom Left, 7; Bottom Center, 8, Bottom Right, 9.
  • shape A mask shape of either Square or Circle.
PixelDissolve

Reveals or hides the object by using randomly appearing or disappearing rectangles in a checkerboard pattern.
Additional attributes:

  • x_sections An integer that indicates the number of masking rectangle sections along the horizontal axis. The recommended range is 1 to 50.
  • y_sections An integer that indicates the number of masking rectangle sections along the vertical axis. The recommended range is 1 to 50.
Rotate

Rotates the object.
Additional attributes:

  • ccw A Boolean value: false for clockwise rotation; true for counter-clockwise rotation.
  • degrees An integer that indicates the number of degrees the object is to be rotated. The recommended range is 1 to 9999.
Squeeze

Scales the object horizontally or vertically.
Additional attributes:

  • dimension An integer that indicates the Squeeze effect should be horizontal (0) or vertical (1).
Wipe

Reveals or hides the object by using an animated mask of a shape that moves horizontally.
Additional attributes:

  • start_point An integer that indicates a starting position. Range of 1 to 4 and 6 to 9: Top Left, 1; Top Center, 2; Top Right, 3; Left Center, 4; Right Center, 6; Bottom Left, 7; Bottom Center, 8; Bottom Right, 9.
Zoom Zooms the object in or out by scaling it in proportion.

The tag <transition> should contain a type attribute that indicates the transition effect class to apply, followed by direction, duration, and method attributes. In addition, you must include any attributes that are required by the specified transition effect class. For example, the Iris transition effect class requires additional start_point and shape attributes. So, in addition to the type, duration, and method attributes that every transition requires, you should also add the start_point and shape attributes that the Iris effect requires. The following code adds start_point and shape attributes to the Iris effect:

<transition type="Iris" direction="IN" duration="1" method="Strong.easeOut" start_point="7" shape="Circle" />

Table #2

Class Description
Back Extends the animation beyond the transition range at one or both ends once to resemble an overflow effect.
Elastic Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
Regular Adds slower movement at one or both ends. This feature lets you add a speeding up effect, a slowing down effect, or both.
Strong Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
None Adds an equal movement from start to end without effects, slowing down, or speeding up. This transition is also
called a linear transition.

These five easing classes each have three easing methods, which are described in the following table:

Table #2

Method Description
easeIn Provides the easing effect at the beginning of the transition.
easeOut Provides the easing effect at the end of the transition.
easeInOut Provides the easing effect at the beginning and end of the transition.