<bg_image file=""/>

The background image, in either .jpg or .png format.

This is the lowest layer of media on the screen (i.e., all other media/text will display on top of it – see Layers).

Unless a complete file path beginning with "http://" is specified, the file path from <image_path> in <settings> will be assumed.

CLEAR in place of a file name will clear any previously set background image.

Child of: <drag_drop>, <drag_move>, <node name="">, <press>, <release>, <settings>

Parent of: Nothing

Note: You can also set the background image as a Flash variable in the Flash code on your web page. For more information, see The bg_image Flash Variable in the Working With Variables section of Scripting Your Interactive XML Application.

Examples:

<bg_image file="my_image.jpg"/>

<bg_image file="CLEAR"/>

<click>

Executes the specified actions upon mouse click and release over the button defined by the parent <graphical_button name=""> tag.

Child of: <graphical_button name="">

Parent of: Any child of <node name="">

Example:

<graphical_button name="my_graphical_button">

            ...

<click>

...

</click>

</graphical_button>

<direction>

Determines whether an image fade is a fade in or a fade out.

Accepted values are IN and OUT.

Default value: IN

Child of: <fade>

Parent of: Nothing

Example:

<direction>OUT</direction>

<down_image>

The image to display for a graphical button when the user clicks the button.

Child of: <graphical_button name="">

Parent of: Nothing

Example:

<down_image>down_image.png</down_image>

<down_image library="">

An image from a Flash media library (see <medialibrary_load name="">) to display for a graphical button when the user clicks the button.

Child of: <graphical_button name="">

Parent of: Nothing

Example:

<down_image library="my_media_library">library_image_1_.png</down_image>

<drag_drop>

Executes the specified actions when an image is dropped (mouse button is released) or exceeds the boundaries defined in <edge_detection> while being moved using <drag_info>.

This tag makes the following variables available:

drag_x – the X axis position of the center of the image.

drag_y – the Y axis position of the center of the image.

drag_distance – the distance in pixels between the center of the image and the focal point defined by <focalX> and <focalY>.

drag_name – the name of the image that is being dragged.

Child of: <image name="">

Parent of: <assign name="" expr=""/>, <bg_image file=""/>, <bg_mp3 fadeout=""/>, <bg_mp3 file=""/>, <bg_mp3 toLevel="" seconds=""/>, <clipboard value=""/>, <debug>, <dropdown>, <if cond="">, <images>, <input>, <link>, <media_overlay>, <medias>, <next_node>, <text_banners>, <title>, <voice_rec>, <web_service>

See also: <drag_info>, <drag_move>

Example:

<drag_drop>

            <title>

                        <text>DROPPED: %drag_x%, %drag_y%</text>

                        <width>300</width>

                        <height>50</height>

                        <x>0</x>

                        <y>0</y>

                        <font_size>20</font_size>

                        <font>Arial</font>

                        <text_color>#FFFFFF</text_color>

            </title>
            ...
</drag_drop>

<drag_info>

Initiates, and establishes settings for, image dragging functionality.

Child of: <image name="">

Parent of: <focalX>, <focalY>, <maxMagnification>, <minMagnification>, <maximumDistance>, <edge_detection>

See also: <drag_drop>, <drag_move>

Example:

<drag_info>

            <focalX>150</focalX>

            <focalY>125</focalY>

            <maxMagnification>1</maxMagnification>

            <minMagnification>.25</minMagnification>

            <maximumDistance>100</maximumDistance>

            <edge_detection>50</edge_detection>

</drag_info>

<drag_move>

Executes the specified actions while an image is being moved using <drag_info>.

This tag makes the following variables available:

drag_x – the X axis position of the center of the image being dragged.

drag_y – the Y axis position of the center of the image being dragged.

drag_distance – the distance in pixels between the center of the image and the focal point defined by <focalX> and <focalY>.
drag_name – the name of the image that is being dragged.

Child of: <image name="">

Parent of: <assign name="" expr=""/>, <bg_image file=""/>, <bg_mp3 fadeout=""/>, <bg_mp3 file=""/>, <bg_mp3 toLevel="" seconds=""/>, <clipboard value=""/>, <debug>, <dropdown>, <if cond="">, <images>, <input>, <link>, <media_overlay>, <medias>, <next_node>, <text_banners>, <title>, <voice_rec>, <web_service>
See also: <drag_drop>, <drag_info>

Example:

<drag_move>

            <title>

                        <text>MOVED: %drag_x%, %drag_y%</text>

                        <width>300</width>

                        <height>50</height>

                        <x>0</x>

                        <y>0</y>

                        <font_size>20</font_size>

                        <font>Arial</font>

                        <text_color>#FFFFFF</text_color>

            </title>
            ...
</drag_move>

<edge_detection>

When an image is being dragged using <drag_info>, the percentage of the image that is allowed off the edge of the screen before <drag_drop> is executed.

Note that if the value in <edge_detection> is 100, the entire image will disappear off the edge of the screen and will not be able to be dragged back.

The value in <edge_detection> can be negative. This will cause a buffer to form within the edge of the image where the image cannot be dragged. If the value is -100, the buffer will be the size of the image itself.

Child of: <drag_info>

Parent of: Nothing

See also: <drag_drop>, <drag_move>, <maximumDistance>, <maxMagnification>, <minMagnification>

Example:

<edge_detection>50</edge_detection>

<fade>

Allows an image to be faded in or out rather than appearing or disappearing at once.

<seconds> is the amount of time the fade in or fade out will take, <steps> is the number of steps the image will pass through, and <direction> determines whether it is a fade in or a fade out (accepted values are IN and OUT).

Child of: <image name="">

Parent of: <seconds>, <steps>, <direction>

Example:

<fade>

            <seconds>.5</seconds>

            <steps>25</steps>

            <direction>IN</direction>

</fade>

<file>

An asset defined within a <bar>, <image name="">, <media>, <media_overlay> or <slider> tag, a file to preload within a <preload> tag, or the path to the Flash library file containing the images to load using <medialibrary_load name="">.

When <file> is used within <media>, <media_overlay> or <image name="">: if the specified file is not defined by a full path, the default path defined in <media_path> or <image_path> (if <file> is within <image name="">) will be assumed.

Child of: <bar>, <image name="">, <media>, <media_overlay>, <medialibrary_load name="">, <preload>, <slider>

Parent of: Nothing

See also: <image_path>, <media_path>

Example:

<file>my_video.mp4</file>

Working example: Search for <file></file> in the file trivia_demo.xml.

<file library="">

An image from a Flash media library (see <medialibrary_load name="">) to display within an <image name=""> tag.

Child of: <image name="">

Parent of: Nothing

Example:

<file library="my_media_library">library_image_1_.png</file>

<focalX>

The X axis value of the focal point (vanishing point) of an image that is being moved and resized using <drag_info>.

Child of: <drag_info>

Parent of: Nothing

See also: <focalY>

Example:

<focalX>100</focalX>

<focalY>

The Y axis value of the focal point (vanishing point) of an image that is being moved and resized using <drag_info>.

Child of: <drag_info>

Parent of: Nothing

See also: <focalX>

Example:

<focalY>100</focalY>

<graphical_button name="">

A button defined by images that may have dynamic graphical properties depending on whether the cursor is over the button, away from the button, or clicking down on the button.

Several graphical buttons may be defined within <graphical_buttons> tags.

Child of: <graphical_buttons>

Parent of: <up_image>, <over_image>, <down_image>, <mouse_over>, <mouse_out>, <x>, <y>, <click>

Examples:

<graphical_button name="graphical_button_a">

            <up_image>up_image.png</up_image>

            <over_image>over_image.png</over_image>

            <down_image>down_image.png</down_image>

            <mouse_over>

                        …

            </mouse_over>

            <mouse_out>

                        …

            </mouse_out>

            <x>45</x>

            <y>100</y>

            <click>

                        <link>http://www.my_site.com</link>

                        <assign name="user_clicked_gb_a" expr="'1'"/>   

                        <next_node>node_a</next_node>

</click>

</graphical_button>

To clear a graphical button from the screen, use CLEAR as follows:

<graphical_button name="gb_a">CLEAR</graphical_button>

To clear all graphical buttons at once:

<graphical_buttons>CLEARALL</graphical_buttons>

<graphical_buttons>

Several graphical buttons.

Child of: <node name="">

Parent of: <graphical_button name="">

Example:

           

<graphical_buttons>

<graphical_button name="graphical_button_a">

            <up_image>up_image_a.png</up_image>

            <over_image>over_image_b.png</over_image>

            <down_image>down_image_c.png</down_image>
            <x>45</x>
            <y>100</y>
            <click>

                        ...
            </click>

</graphical_button>

<graphical_button name="graphical_button_b">

            <up_image>up_image_b.png</up_image>

            <over_image>over_image_b.png</over_image>

            <down_image>down_image_b.png</down_image>
            <x>105</x>
            <y>100</y>
            <click>

                        ...
            </click>

</graphical_button>

</graphical_buttons>

To clear a graphical button from the screen, use CLEAR as follows:

<graphical_button name="gb_a">CLEAR</graphical_button>

To clear all graphical buttons at once:

<graphical_buttons>CLEARALL</graphical_buttons>

<hand_cursor>

Determines whether the mouse pointer turns into a hand when positioned over the parent image.

Default value: NO

Child of: <image name="">

Parent of: Nothing

Example:

<hand_cursor>YES</hand_cursor>

<image name="">

An image (.jpg or .png) defined within <images> in a node.

The image will display in the node in which it is called and will remain visible in subsequent nodes until it is explicitly cleared. The value in name="" is the name with which to refer to the image when it is cleared (see <images>).

If <assign name="" expr=""/> is used within <image name="">, the assign will be executed only if the user clicks the link.

Note that an image with no <x>, <y>, <height> and <width> values will not appear, but it will not cause an error.

Child of: <images>

Parent of: <file>, <file library="">, <x>, <y>, <height>, <width>, <scale_content>, <path_over>, <path_down>, <mouse_move>, <mouse_click>, <mouse_down>, <mouse_over>, <mouse_out>, <drag_info>, <drag_move>, <drag_drop>, <hand_cursor>, <fade>, <assign name="" expr=""/>

Examples:

<image name="my_image">

            <file>my_image.jpg</file>

            <x>85</x>

            <y>135</y>

            <height>120</height>

            <width>160</width>

            <scale_content>YES</scale_content>

<path_over>path_over_image.jpg</path_over>

<path_down>path_down_image.jpg</path_down>

<mouse_move>

            ...

</mouse_move>

<mouse_click>

            ...

            <link>http://www.my_site.com</link>

</mouse_click>

<mouse_down>

            ...

</mouse_down>

<mouse_over>

            ...

</mouse_over>

<mouse_out>

            ...

</mouse_out>

<drag_info>

            ...

</drag_info>

<drag_move>

            ...

</drag_move>

<drag_drop>

            ...

</drag_drop>

<hand_cursor>YES</hand_cursor>

<fade>

            ...

</fade>

<assign name="user_clicked_my_image" expr="'1'"/>

</image>

<image name="my_library_image">

            <file library="my_media_library">library_image_1_.png</file>

            ...

</image>

Note: See the definitions for <mouse_move>, <mouse_click>, <mouse_down>, <mouse_over> and <mouse_out> for details about what those tags may contain.

To clear images:

<images>

            <image name="image_1">

                        <file>CLEAR</file>

            </image>

            <image name="image_2">

                        <file>CLEAR</file>

            </image>

</images>

To clear all images at once:

<images>CLEARALL</images>

<image_path>

Specifies the full default path for images (.jpg or .png files).

The URL must end in a slash (/).

Child of: <settings>

Parent of: Nothing

Example:

<image_path>http://www.my_site.com/my_images/</image_path>

Working example: Search for <image_path></image_path> in the file trivia_demo.xml.

<images>

Contains one or more <image name=""> tags to display images in a node.

The attribute act_like_buttons="YES" may optionally be added to the <images> tag (<images act_like_buttons="YES">) so that all images defined within the <images> tag disappear at once when the user clicks one of the images (similar to the behavior of buttons).

There should be no more than one set of <images> tags per node.

Child of: <click>, <drag_drop>, <drag_move>, <node name="">, <press>, <release>

Parent of: <image name="">

Examples:

<images>

            <image name="image_1">

                        ...

            </image>

            <image name="image_2">

                        ...

            </image>

</images>

To clear images:

<images>

            <image name="image_1">

                        <file>CLEAR</file>

            </image>

            <image name="image_2">

                        <file>CLEAR</file>

            </image>

</images>

To clear all images at once:

<images>CLEARALL</images>