<image src="image.gif" width="140" height="140" align="left" id="image1" />
     

     <button href="myCustomFunction(do something!)" alt="my button"
     up="button/sth_up.png" over="button/sth_over.png" down="button/sth_down.png"
     onClick="onClick()" onDblClick="onDblClick()" onMouseOver="onMouseOver()" onMouseOut="onMouseOut()"
     width="50" height="50" align="left" id="button1">
     
     <!--
         you can set all of the tag settings as attributes or set each of them as seperate nodes as you can see. 
         
         NOTE: nodes priority is higher than the attributes.
         if you present nodes their value will be over written over their attribute value, 
         if you do not present neither of them, their deafult value remains.
         
         NOTE: you must present the necessary settings as attribute or node (necessary settings: href, up, over, down)
     -->
     
         <source>
             <href>myCustomFunction(do something!)</href>    <!--the function that is going to be called on a mouse click, function can have unlimited number of arguments (supported argument types: Object, Array, String). you can also enter an external link to navigate to URL-->
             <alt>my button</alt>                            <!--if present, the text presents the button name. it can be used in any way, for example show a tooltip when the mouse pointer moves over the module-->
         </source>
         
         <face>
             <up>button/sth_up.png</up>                        <!--specifies the URL of an image representing the module skin when the mouse pointer is out of the module-->
             <over>button/sth_up.png</over>                    <!--specifies the URL of an image representing the module skin when the mouse pointer is over the module-->
             <down>button/sth_up.png</down>                    <!--specifies the URL of an image representing the module skin when the module is pressed -->
         </face>
         
         <!--
             if you present events, you can listen to each of them triggered by module to call different functions in your project. 
             
             NOTE: your function MUST have at least one argument, type Object. 
             because the module will pass some values to it for your reference.
             
             NOTE: if your function has more than one argument, you can simply pass them through (supported argument types: Object, Array, String)
         -->
         <events>
             <onClick>onClick()</onClick>                    <!--function will be called on a mouse click-->
             <onDblClick>onDblClick()</onDblClick>            <!--function will be called on a mouse double-click -->
             <onMouseOver>onMouseOver()</onMouseOver>        <!--function will be called when the mouse pointer moves over the module-->
             <onMouseOut>onMouseOut()</onMouseOut>            <!--function will be called when the mouse pointer moves out of the module-->
         </events>
         
     </button>
     

     <banner config="banner/banner.xml" width="200" height="300" align="left" id="banner1" />
     

     <video src="hfcd1Nlpwgs" type="youtube" ratio="ratio" autoplay="autoplay" loop="loop"
     controls="controls" config="videoPlayer/videoPlayer.xml" poster="videoPlayer/01.jpg"
     onPlay="onPlay()" onPause="onPause()" onStop="onStop()" onFullScreen="onFullScreen()" onEnded="onEnded()" 
     onVolumeChange="onVolumeChange()" onSeeking="onSeeking()" width="305" height="200" align="left" id="video1"> 
     
     <!--
         you can set all of the tag settings as attributes or set each of them as seperate nodes as you can see. 
         
         NOTE: nodes priority is higher than the attributes.
         if you present nodes their value will be over written over their attribute value, 
         if you do not present neither of them, their deafult value remains.
         
         NOTE: you must present the necessary settings as attribute or node (necessary settings: src)
     -->
         
         <source> 
             <src>hfcd1Nlpwgs</src>                                <!--the URL of the video (supported formats: MOV, FLV, MP4), if trying to load videos using 3rd party APIs like Youtube, set the video ID here-->
             <type>youtube</type>                                <!--the video type if using 3rd party APIs (supported vaules: youtube), if not there's no need to present 'type' node and 'type' attrubute at all-->
             <ratio>ratio</ratio>                                <!--if present, the video dimensions won't be distorted  (supported vaules: ratio)-->
             <autoplay>autoplay</autoplay>                        <!--if present, then the video will start playing as soon as it is ready (supported vaules: autoplay)-->
             <loop>loop</loop>                                    <!--if present, the video will start over again, every time it is finished (supported vaules: loop)-->
         </source>
         
         <face>
             <controls>controls</controls>                        <!--if present, controls will be displayed, such as a play button (supported vaules: controls)-->
             <config>videoPlayer/videoPlayer.xml</config>        <!--if controls is presented, controls will be displayed. so set the URL of the XML file that contains the module skin settings-->
             <poster>videoPlayer/01.jpg</poster>                    <!--specifies the URL of an image representing the video-->
         </face>
         
         <!--
             if you present events, you can listen to each of them triggered by module to call different functions in your project. 
             
             NOTE: your function MUST have at least one argument, type Object. 
             because the module will pass some values to it for your reference.
             
             NOTE: if your function has more than one argument, you can simply pass them through (supported argument types: Object, Array, String)
         -->
         <events> 
             <onPlay>onPlay()</onPlay>                            <!--function will be called when video is going to start playing-->
             <onPause>onPause()</onPause>                        <!--function will be called when video is paused-->
             <onStop>onStop()</onStop>                            <!--function will be called when video is stopped-->
             <onFullScreen>onFullScreen()</onFullScreen>            <!--function will be called when video full screen button is clicked if it's available-->
             <onEnded>onEnded()</onEnded>                        <!--function will be called when video has reach the end-->
             <onVolumeChange>onVolumeChange()</onVolumeChange>    <!--function will be called when video volume button is clicked if it's available-->
             <onSeeking>onSeeking()</onSeeking>                    <!--function will be called when video seeking has begun-->
         </events>
         
     </video>
     

     <avatar src="avatar/ManChar2.swf" script="I'm a text-in-line 'talking avatar' module."
     api="http://translate.google.com/translate_tts?tl=en" proxy="avatar/proxy.php" proxyGoogle="avatar/proxy_TTS_API.php"
     config="avatar/avatar1.xml"
     onPlay="onPlay()" onPause="onPause()" onStop="onStop()"
     width="200" height="210" align="left" id="avatar1">
     
     <!--
         you can set all of the tag settings as attributes or set each of them as seperate nodes as you can see. 
         
         NOTE: nodes priority is higher than the attributes.
         if you present nodes their value will be over written over their attribute value, 
         if you do not present neither of them, their deafult value remains.
         
         NOTE: you must present the necessary settings as attribute or node (necessary settings: src, script, config)
     -->
     
         <source>
             <src>avatar/ManChar2.swf</src>                                                <!--the URL of the avatar character SWF file-->
             <script>@![CDATA[I'm a text-in-line 'talking avatar' module.]]@</script>    <!--the URL of the voice MP3 file that the avatar is going to speak, or you can also write your text message and use the Google API to convert text to speech-->
             <api>http://translate.google.com/translate_tts?tl=en</api>                    <!--if you have entered text message, here set the URL of the Google text to speech API-->
             <proxy>avatar/proxy.php</proxy>                                                <!--if you have entered an absolute link to your voice MP3 file, here set the URL of the proxy PHP file-->
             <proxyGoogle>avatar/proxy_TTS_API.php</proxyGoogle>                            <!--if you have entered text message, here set the URL of the Google proxy PHP file-->
         </source>
         
         <face>
             <config>avatar/avatar1.xml</config>                                            <!--the URL of the XML file that contains the module skin settings-->
         </face>
         
         <!--
             if you present events, you can listen to each of them triggered by module to call different functions in your project. 
             
             NOTE: your function MUST have at least one argument, type Object. 
             because the module will pass some values to it for your reference.
             
             NOTE: if your function has more than one argument, you can simply pass them through (supported argument types: Object, Array, String)
         -->
         <events>
             <onPlay>onPlay()</onPlay>                                                    <!--function will be called when avatar is going to start playing-->
             <onPause>onPause()</onPause>                                                <!--function will be called when avatar is paused-->
             <onStop>onStop()</onStop>                                                    <!--function will be called when avatar is stopped-->
         </events>
         
     </avatar>
     

     <slideshow controls="controls" config="slideshow/slideshow.xml"
     onPlay="onPlay()" onPause="onPause()" onEnded="onEnded()" onProgress="onProgress()" onLoadedData="onLoadedData()"
     width="300" height="230" align="left" id="slideshow1">
     
     <!--
         you can set all of the tag settings as attributes or set each of them as seperate nodes as you can see. 
         
         NOTE: nodes priority is higher than the attributes.
         if you present nodes their value will be over written over their attribute value, 
         if you do not present neither of them, their deafult value remains.
         
         NOTE: you must present the necessary settings as attribute or node (necessary settings: config)
     -->
     
         <face>
             <controls>controls</controls>                    <!--if present, controls will be displayed, such as a play button (supported vaules: controls)-->
             <config>slideshow/slideshow.xml</config>        <!--the URL of the XML file that contains the module skin settings and each slide settings-->
         </face>
         
         <!--
             if you present events, you can listen to each of them triggered by module to call different functions in your project. 
             
             NOTE: your function MUST have at least one argument, type Object. 
             because the module will pass some values to it for your reference.
             
             NOTE: if your function has more than one argument, you can simply pass them through (supported argument types: Object, Array, String)
         -->
         <events>
             <onPlay>onPlay()</onPlay>                        <!--function will be called when slideshow is going to start playing-->
             <onPause>onPause()</onPause>                    <!--function will be called when slideshow is paused-->
             <onEnded>onEnded()</onEnded>                    <!--function will be called when slideshow has reach the end-->
             <onProgress>onProgress()</onProgress>            <!--function will be called when the image on each slide is loading-->
             <onLoadedData>onLoadedData()</onLoadedData>        <!--function will be called when the image on each slide is loaded-->
         </events>
         
     </slideshow>