Skin XML

Skin XML:

<!--THIS SKIN HAS BEEN ANNOTATED TO HELP USERS MAKE CHANGES AND AMMENDMENTS-->

<skin>

       <!-- SET PROPERTIES FOR BACKGROUND -->

<!-- THE SECTION OF CODE BELOW CAN BE USED TO CHANGE THE BACKGROUND COLOUR OF THE VCAB -->

       <background>

               <gradientfill type="linear" color="ffffff,DDE2EE,ffffff" alpha="100,100,100" ratio="65,175,255" rotation="75" />

               <draw shape="box" x="0" y="0" width="1.8" height="1.3" />

               <endfill />

       </background>

<!--// LIBRARY ITEMS -->

<!--// create and load in main items such as buttons //-->

<!--// and also set the mouse properties for each //-->

       <library>

               <!--//----------------------------//-->

               <!--//CREATE LIBRARY GRAPHICS--------->

               <!--//----------------------------//-->

<!--THE CODE BELOW CAN BE USED TO ADD A DOWNLOAD PDF BUTTON, OR ANY OTHER BUTTON OF THE USERS CHOICE-->

<!--// Download button //

               <button id="btnDload">

                       <up><image src="http://skins.vcab.com/_clients/SeaTrek/_images/download.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_clients/SeaTrek/_images/download-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Download PDF");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>-->

<!--NOTE--THE SECTION OF CODE BELOW IS WHERE YOU CAN CHANGE THE PATH TO THE PDF WHICH WILL BE DOWNLOADED WHEN THE DOWNLOAD BUTTON IS CLICKED

THE NUMBERS REFER TO YOUR USER PATH, THE FIRST TWO WILL ALWAYS REMAIN THE SAME BUT THE LAST ONE WILL CHANGE FOR EACH VCAB CREATED

YOU WILL ALSO NEED TO CHANGE THE TITLE OF THE PDF, IN THIS CASE I HAVE CHANGED THE NAME TO (Test.pdf)-->

                       <!--onRelease>getURL('http://fs.vcab.com/00000000/00000000/00000000/_uploads/example.pdf','NEW');</onRelease>

               </button>-->

               <!--//Main Left Button //-->

               <button id="left_btn">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/prev.jpg" /></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/prev-over.jpg" /></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Previous Page");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>vcab.turnLeft()</onRelease>

               </button>

               <!--//Main Right Button //-->

               <button id="right_btn">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/next.jpg" /></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/next-over.jpg" /></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Next Page");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>vcab.turnRight()</onRelease>

               </button>

               <button id="enter_btn">

                       <up><image src="_graphics/return_button.png" /></up>

               </button>

               <!--// Contents button //-->

               <button id="btncontents">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/contents.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/contents-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Contents Page");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.skin.contents._visible = true;</onRelease>

               </button>

               <!--// Thumbnails button //-->

               <button id="btnthumbs">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/thumbs.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/thumbs-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("View thumbnails");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>

                               _root.vars.skin.thumbnails._visible = true;

                               _root.vars.skin.thumbnails.wL.thumbs.loadThumbs();

                       </onRelease>

               </button>

               <!--// Search button //-->

               <button id="btnsearch">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/search.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/search-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Text search");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.skin.search2._visible = true;</onRelease>

               </button>

               <!--// Zoom button //-->

               <button id="btnzoom">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/zoom.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/zoom-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Zoom in / out");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.vcab.zoom()</onRelease>

               </button>

               <!--// Goto page button //-->

               <button id="btngotopage">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/goto.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/goto-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Jump to page");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.skin.pageJump._visible = true;</onRelease>

               </button>

               <!--// Help button //-->

               <button id="btnhelp">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/help.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/help-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Help / Instructions");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.vcab.togglehilight() = true;</onRelease>

               </button>

<!--NOTE--THE SECTION OF CODE BELOW IS WHERE THE SEND TO FRIEND BUTTON IS CREATED

I HAVE COMMENTED OUT THIS ENTIRE SECTION SO THE BUTTON DISSAPPEARS, ITS THAT SIMPLE

YOU WILL ALSO NOTICE THAT THE BUTTON IMAGE IS CALLED FROM HERE-->

               <!--// Send to friend button //-->

               <button id="btnsend">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/send.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/send-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Send to a friend");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.skin.sendtofriend._visible = true;</onRelease>

               </button>

               <!--// Print button //-->

               <button id="btnprint">

                       <up><image src="http://skins.vcab.com/_vcab/default/images/print.jpg"/></up>

                       <over><image src="http://skins.vcab.com/_vcab/default/images/print-over.jpg"/></over>

                       <onRollOver>

                               _root.vars.skin.mouseover._visible = true;

                               _root.vars.skin.mouseover.wL.mousemain.setText("Print pages");

                       </onRollOver>

                       <onRollOut>_root.vars.skin.mouseover._visible = false;</onRollOut>

                       <onRelease>_root.vars.skin.print._visible = true;</onRelease>

               </button>

               <!--// Shopping basket button //-->

               <button id="basketBtn">

                       <up>

                               <image src="_graphics/basket.png" />

                               <text id="txtItems" alias="advanced" fontsize="10" x="29px" y="3px" width="68px" height="17px" color="000000" align="left">No items</text>

                               <text id="txtTotal" alias="advanced" fontsize="10" x="75px" y="3px" width="68px" height="17px" color="727272" align="right"></text>

                               <events>

                                       <onBasketChanged>

                                               this._parent._parent._parent._visible = true;

                                               this.txt.txtItems.setText(_root.vars.basket.items.length + " items");

                                               this.txt.txtTotal.setText(_root.vars.basket.total);

                                       </onBasketChanged>

                               </events>

                       </up>

               </button>

               <!--//----------------------------//-->

               <!--//CREATE LIBRARY GRAPHICS--------->

               <!--//----------------------------//-->

               <graphic id="navBack">

                       <image src="http://skins.vcab.com/_vcab/default/images/header-back.jpg" x="0px" y="0px"/>

               </graphic>

               <graphic id="divider">

                       <border size="1" color="CCCCCC" />

                       <draw shape="box" x="0px" width="1px" />

                       <border size="1" color="FFFFFF" />

                       <draw shape="box" x="1px" width="1px" />

               </graphic>

<!--NOTE--THE SECTION OF CODE BELOW IS WHERE THE LOGO IS CREATED

TO SWAP THE VCAB LOGO WITH YOUR LOGO I HAVE SIMPLY CHANGED THE URL PATH SO IT CALLS A DIFFERENT IMAGE

YOU WILL NOTICE THAT ALL THE URLS USED IN THIS XML ARE CURRENTLY LOOKING FOR IMAGES ON THE VCAB SERVERS

IF YOU WANT TO REPLACE ANY OTHER IMAGES IN THE SKIN, YOU CAN SAVE THE IMAGES ON YOUR OWN SERVER AND CHANGE THE URLS TO POINT TO THE CORRECT PLACE-->

               <!--//To go top left -->

               <graphic id="logo">

                       <image src="http://skins.vcab.com/_vcab/default/images/logo.jpg" y="1px" x="12px"/>

                       <drawgraphic id="divider" height="28px" x="46px" y="0px" />

               </graphic>

<!--NOTE--THE SECTION OF CODE BELOW IS WHERE THE VCAB PRODUCT POWERED BY FLEXIPAGE IMAGE IS DRAWN

TO REMOVE IT YOU CAN COMMENTED OUT THE ENTIRE SECTION-->

               <!--//To go bottom right -->

               <graphic id="poweredby" width="218px" height="10px">

                       <image src="http://skins.vcab.com/_vcab/default/images/poweredby.png" y="1px" x="-6px" />

               </graphic>

               <!--//Draw button will load up the buttons we defined at -->

               <!--//the top part of the library -->

               <!--//The graphic IDs will be loaded onto the screen at the Window Interface level-->

               <!--//At this point, the controls still will not display to screen we are merely -->

               <!--//Grouping the buttons and we will use the GRAPHIC ID to display the group -->

<!--NOTE--THE SECTION OF CODE BELOW IS WHERE THE BUTTONS USED IN THE SKIN ARE PLACED ON THE SCREEN

BY EDITING THE X AND Y CORDINATES YOU CAN MOVE THE BUTTONS AROUND THE SCREEN-->

<graphic id="back">

                       <drawbutton id="navBack" x="-40px" y="-6px" />

               </graphic>

               <graphic id="page_controls">

                       <drawbutton id="btncontents" x="20px" y="-4px" />

                       <drawbutton id="btnthumbs" x="70px" y="-4px" />

                       <drawbutton id="btnsearch" x="120px" y="-4px" />

                       <drawbutton id="btngotopage" x="170px" y="-4px" />

                       <drawbutton id="btnzoom" x="220px" y="-4px" />

               </graphic>

               <graphic id="right_buttons" width="220px">

                       <drawbutton id="btnhelp" x="170px" y="-4px" />

                       <drawbutton id="btnsend" x="120px" y="-4px" />

                       <drawbutton id="btnprint" x="70px" y="-4px" />

               </graphic>

               <graphic id="page_lr" width="10px">

                       <drawbutton id="left_btn" x="-50px" y="-4px" />

                       <drawbutton id="right_btn" x="14px" y="-4px" />

               </graphic>

               <graphic id="left_controls">

                       <drawgraphic id="back" />

                       <drawgraphic id="logo" />

<!--THE CODE BELOW POSITIONS THE LEFT HAND CONTROLS, CONTENTS, THUMBS ECT ECT. BY INCREASING THE X CORDINATE YOU WILL MOVE THE

ENTIRE SET OF CONTROLS TO THE RIGHT THIS WILL BE NEEDED IF YOU ARE PLACING A LARGER LOGO INTO THE SKIN-->

                       <drawgraphic id="page_controls" x="40px" />

               </graphic>

               <graphic id="printGraphic" width="280px">

                       <control id="print" src="http://skins.vcab.com/_vcab/default/controls/print.swf" y="50px"  />

               </graphic>

               <graphic id="sendGraphic" width="300px">

                       <control id="send" src="http://skins.vcab.com/_vcab/default/controls/sendToFriend.swf"  y="50px"  />

               </graphic>

       </library>

<!--// USER INTERFACE SECTION -->

<!--// Display the groups of buttons or other buttons onto the screen//-->

<!--// This is where we can use the docking and aligning functions //-->

       <ui topmargin="60px" bottommargin="22px" leftmargin="0px" rightmargin="0px" minwidth="972px">

               <window id="mainbar" style="toolbar" x="0" y="0" width="1" height="50px">

                       <graphic>

                               <drawgraphic id="left_controls" x="0px" y="8px" dock="left" />

                               <drawgraphic id="right_buttons" x="0.762" y="8px" dock="right" />

                       </graphic>

               </window>

               <window id="navbar" style="blank" x="0" y="8px" width="1px" height="43px" align="center" valign="center">

                       <graphic>

                               <drawgraphic id="page_lr"  y="0px" />

                       </graphic>

               </window>

               <window id="pb"  x="0" y="0" width="1" height="20px" dock="bottom">

                       <graphic>

                               <drawgraphic id="poweredby" x="0.762" y="0px" dock="right" />

                       </graphic>

               </window>

               <!--//The interface has been drawn, now we load the SWF file //-->

               <!--//that power the controls and make them all visible ready to view on click (defined at the button level//-->

               <!--//JUMP TO PAGE WINDOW//-->

               <window id="pageJump" style="window_base" x="175px" y="30px" width="170px" height="60px" visible="false">

                       <graphic>

                               <control id="pageJumpCTRL" src="http://skins.vcab.com/_vcab/default/controls/jumptopage.swf" x="2px" y="19px" />

                       </graphic>

               </window>

               <!--//SEARCH BOXES WINDOW//-->

               <window id="search" x="175px" y="53px" width="349px" height="199px" visible="false">

                       <graphic>

                               <control id="search" src="http://skins.vcab.com/_vcab/default/controls/search.swf" x="2px" y="19px" width="346px" height="179px" />

                       </graphic>

               </window>

               <window id="search2" style="window_base" x="150px" y="30px" width="170px" height="60px" visible="false">

                       <graphic>

                               <control id="search2" src="http://skins.vcab.com/_vcab/default/controls/search2.swf" x="2px" y="19px" />

                       </graphic>

               </window>

               <!--//PRINT WINDOW//-->

               <window id="print" style="window_base" height="152px"  visible="false">

                       <graphic>

                               <drawgraphic id="printGraphic" y="20px" width="230px" height="135px" dock="right" />

                       </graphic>

               </window>

               <!--//BASKET ITEM WINDOW//-->

               <window id="basketIcon" x="0.81" y="56px" visible="false">

                       <graphic>

                               <drawbutton id="basketBtn" onRelease="_root.vars.skin.basketWindow._visible = true;" />

                       </graphic>

               </window>

               <window id="basketWindow" style="window_base" x="150px" y="53px" width="458px" height="244px" visible="false">

                       <properties><title>Shopping Basket</title></properties>

                       <graphic>

                               <control id="basket" src="http://skins.vcab.com/_vcab/default/controls/basket.swf" y="17px" />

                               <events>

                                       <onBasketChanged>

                                               this.basket.basketList.updateBasket();

                                       </onBasketChanged>

                               </events>

                       </graphic>

               </window>

               <!--//THUMBNAILS WINDOW//-->

               <window id="thumbnails" x="30px" y="53px" width="680px" height="146px" visible="false">

                       <graphic>

                               <control id="thumbs" src="http://skins.vcab.com/_vcab/default/controls/thumbnails.swf" y="17px" />

                       </graphic>

               </window>

               <!--//SEND TO FRIEND WINDOW//-->

               <window id="sendtofriend" style="window_base" y="48px"  height="249px" visible="false">

                       <properties>

                               <title>Send to a friend</title>

                       </properties>

                       <graphic>

                               <drawgraphic id="sendGraphic"  y="17px" height="179px" dock="right" />

                       </graphic>

               </window>

               <!--//HELP WINDOW WINDOW//-->

               <window id="help" style="blank" x="272px" y="234px" width="350px" height="200px" visible="false" align="center">

                       <graphic>

                               <control id="instructions" src="http://skins.vcab.com/_vcab/default/controls/front-instructions.swf" x="0px" y="0px" width="346px" height="179px" />

                       </graphic>

               </window>

               <!--//CONTENTS DROP DOWN //-->

               <window id="contents" visible="false" x="60px" y="45px">

                       <graphic>

                               <control id="contentList" src="http://skins.vcab.com/_vcab/default/controls/contents.swf"/>

                       </graphic>

               </window>

               <!--//MOUSE OVER TEXT //-->

               <window id="mouseover" visible="false" y="75px">

                       <graphic>

                               <control id="mousemain" src="_controls/tooltip.swf"/>

                       </graphic>

               </window>

       </ui>

</skin>