My account
Shopping cart
Knowledge base
Support


JC Thumb Viewer - XML Description



Overview | Properties | Methods | Events | XML | ActionScript 3.0 usage | User Manual

The Configuration XML Structure

The configuration XML contains two nodes that represent the list of values for the component properties and the list of FlashEff2 filters and button effect patterns applied on the items.

<config>
   <params>
      ...
   </params>
   <patterns>
      ...
   </patterns>
</config>

The property values are specified as XML nodes having the same name as the component properties you want to set (<autoPlay>, <navigationType>, <scaleMode>, <toggle> and so on). Each property node has two more nodes: one node (<type>) specifies the type of the property (Boolean, String, Number, int or uint) and the other node (<value>) specifies the value for the component property. You cannot set Array or XML type of properties or read-only properties and you should only specify those component properties you want to set from the configuration XML.

<autoPlay>
   <type>Boolean</type>
   <value>true</value>
</autoPlay>
or <navigationType>
   <type>String</type>
   <value>scrollBar</value>
</navigationType>

The patterns node contains the list of filters applied over each item (like the reflection filter) and also button effect patterns that allow different up, over, down and selected states for the items.

The best way to get the XML structure of a list of patterns is to apply the filters and button effects using the JCThumbViewer Panel. Then, using the Copy button, copy the generated XML into the clipboard and paste it into a text editor. From that XML, simply select the <patterns> node with all of its contents and use it in your own configuration XML.

The source XML structure

The source XML contains a list of item nodes, each item node having extra child nodes representing the URL for their contents, text for the labels, any other extra parameters the user might need and also a set or parameters for the display object (for example a LoaderProV3AS3, JCLoader or JCPlayer component) specified at the _targetInstanceName property (this display object could load a larger version of the content - image, audio/video or another Flash animation).

<source>
   <item>
      <source>image1.jpg</source>
      <label>Image 1</label>
      <someOtherProperty>someValue</someOtherProperty>
      <data>
         <source>large_image1.jpg</source>
      </data>
      <actions>
         <gotoFrame>
            <frame>23</frame>
         </gotoFrame>
         <callFunction>
            <function>myCallFunction(param1, param2, param3)</function>
         </callFunction>
      </actions>
   </item>
   <ite>
      <source>image2.jpg</source>
      <label>Image 2</label>
      <action>
         <navigateToURL>
            <url>http://www.jumpeyecomponents.com</url>
            <target>_blank</target>
         </navigateToURL>
      </action>
   </item>
      ...
   <item>
      <source>image10.jpg</source>
      <label>Image 10</label>
      <data>
         <source>flashAnimation.swf</source>
      </data>
   </item>
</source>

The <item> node
The <item> node contains all the information regarding each item displayed by the component.

<source>
This node contains the URL of the image or .swf file that will be loaded into the items as thumbnails. If it is not specified, the item will be displayed without any content inside it.

<label>
This node contains the text displayed for the items - below the items if direction is set to "horizontal" or in the right side of the items if direction is set to "vertical". If it is not specified, the item will not display a label if the showLabels property of the JCThumbViewerScroller component is set to true.

<actions>
This node contains one or more nodes representing the actions that should be executed when the corresponding item from the list is selected. Possible actions are open a specified URL, move the playhead to a specific frame number and execute a specified function.

Open a URL
For this, you need to add the <navigateToURL> node to the <actions> node where you will specify, using the <url> node, the URL that will be opened and, using the <target> node, the window into which it will be opened (possible values for <target> are _blank, _self, _parent, _top or the name of an HTML frame):

<navigateToURL>
   <url>http://www.jumpeyecomponents.com</url>
   <target>_blank</target>
</navigateToURL>


Navigate to a specific frame in the timeline
This action actually calls the gotoAndPlay() method and moves the playhead to the specified frame number on the timeline. You can only specify frame numbers and not frame labels:

<gotoFrame>
   <frame>5</frame>
</gotoFrame>


Execute a specified function
In this case a user function will be executed by the component. The function must already be declared by the time the corresponding item is selected. You can also specify parameters for the declared function and you can use parameters of different type (String, Boolean, Number):

<callFunction>
   <function>myCallFunction(param1, param2)</function>
</callFunction>


<data>
This node contains other properties that will be set to the display object specified with _targetInstanceName. For example, in case you would use the JCLoader component to load larger images, you could specify the URL of the large image for the source property of the JCLoader instance. Also, you could specify a new size for that loader and maybe a new scale mode:

<data>
   <sourc>myLargeImage.jpg</source>
   <width>400</width>
   <height>300</height>
   <scaleMode>scaleCrop</scaleMode>
</data>


Besides these nodes, you can also specify other nodes representing extra properties for the items in the list, like extra descriptions for images (in which case you could use label as titles), prices displayed over the large images if the list would represent items from an online store or simply some other information you could use to execute different actions in your Flash application.

<item>
   <source>myThumbnailImage1.jpg</source>
   <label>My photo</label>
   <description>This is some description of the image</description>
   <type>image</type>
   <largeImage>myLargeImage.jpg</largeImage>
</item>
<item>
   <source>myThumbnailImage2.jpg</source>
   <label>My video</label>
   <description>This is some description of the video</description>
   <type>video</type>
   <videoSource>myVideo.flv</videoSource>
</item>


These extra nodes will be then added as properties to the items and you can then retrieve their values: myScroller.selectedItem.description or myScroller.selectedItem.type.

This way, by verifying the value of the node <type> (actually by checking the type property added to the item), you could load the larger image or video into a different loader component: load the image into a simple loader and the video into a video player component, showing or hiding the appropriate component, according to the value of the type property.

Overview | Properties | Methods | Events | XML | ActionScript 3.0 usage | User Manual

Thumbnail navigation component with scroller and dock views. The pack contains the .mxp install file, the documentation files and the sample files.
Thumbnail scroller and thumbnail dock views
Button mode effects (powered by FlashEff 2.0)
Filters (powered by FlashEff 2.0)
API for code manipulation
FlashEff-like configuration panel utility