Program: SWiSH Max / SWiSH Guide
Build Date: 2006.06.29 / 2007.02.01
Introduction
This tutorial will walk you through the basics of customizing a sample SWiSH Guide template. You can edit colors, fonts, and the design layout.
File Directory Structure In order for your custom templates to be recognized by SWiSH Guide, you need to have files in a specific directory structure. Your SWiSH Guide program folder has a sub-folder named Templates. Inside that folder are more folders that identify the names of each template, such as Glass, Silver, and Steel. You will need to make a folder to name your template.
C:\Program Files\SWiSH Guide\Templates\MyGuideTheme
Inside that folder should be two more folders, and a frameset.html page. There is a 'content' folder - which contains the SWF files, a couple of necessary javascript files, and the individual frame HTML pages (that go inside the main frameset page). The other folder is called 'preview', and it contains preview images for your template and an XML file 'templateparam.xml'.
For now, you can simply copy the included "MyGuideTheme" folder into the Templates folder (typically, C:\Program Files\SWiSH Guide\Templates). We'll change the files as we go through this tutorial.
Dynamic Components
It is important to note that there are several dynamic components in the SWiSH Guide control sets. These items are automatically scaled to fit either the width or height of the browser (or both, in some cases). The importance of this, is that these objects are scaled (stretched) in a way that can distort certain designs. For example, if you use a rounded rectangle in one of these components, the corners will stretch and appear quite differently than intended.
The items that are automatically scaled, are: The background for the top frame (width); the scrollbars in the main menu (height); the menu background (height and width); the 'mid bar' that appears in the Index and Search sections (width); the 'frame divider' (height); and, the 'load mask' (height and width).
Top Bar
The top menu bar sits in the top HTML frame, and it contains the section buttons (Content/Index/Search) and the directional buttons (Prev/Next).
Open the "myguidetheme_top.swi" file. You can edit the appearance of each button inside each 'btn' Sprite. The "btnContents" Sprite (for example) contains a text field that you can edit as well as the different button states.
You can easily edit the colors of each button object.
You can also delete those button objects and add your own. You can use shapes or images, etc. You will need to leave the "hotSpot" object in place, though. That is the actual button and contains the necessary scripting to function properly. If you change the size of a button or add your own buttons - you will need to resize the hotSpot object to fit under your buttons. You can then repeat these changes in the other 'btn' Sprites as well as the 'directionBttns' Sprite (Next/Prev buttons).
Instead of using a 'button' object for up/down/over animations, these buttons are set up within the Sprite. The Sprite is sent to a certain frame label where the animation occurs (up/down/over/active). You can change/edit the animation at each of these frame labels.
The 'topBar' Sprite contains the background for this section, and as I mentioned previously, it will scale to fit the width of the browser. You can edit the style/color of this background.
The directional buttons are positioned dynamically according to the width of the browser. They stay positioned at the right side of the browser window and should not overlap the main menu buttons if the browser size is reduced. You can change the padding between these buttons by editing a variable in the _root.
Unless you are comfortable with actionscript, the rest of the code should be left alone. It is important to the functionality of the controls.
Main Menu
This is the main menu section and has the most content in it. I'll try to break it down into separate sections. Open the file "myguidetheme.swi" to follow along.
Loading Screen
We'll start with this, since it is the first item visible. There is an object named "loadMask". You can simply change the color of this object on the Shape panel. Due to the way the controls load and initialize content, this loading mask is necessary to hide the objects underneath it.
Dynamic Text
Select the 'localisation' Sprite. If you open the Script panel, you can edit the text displayed in certain situations. These are variables hard-coded into the scripting of the control set, such as the number of search results returned, instructions for entering keywords, etc.
Middle Bar, Frame Divider, and Main Back
These objects are scaled dynamically. You can change the color or layout, but remember that they will be scaled to fit the width (midBar) and height (frameDivider) of the browser. The 'mainBack' object will scale both vertically and horizontally (height/width).
Contents Section
This section is the main table of contents for the help file. It is populated dynamically with content from an external configuration file. You can change the button animation (highlighting), font, and 'book' animation sequence from within the 'contents' Sprite.
The text object needs to remain as a Dynamic text object, but you can change the color, font, and size on the Text panel. This single "bN" Sprite will be duplicated for each separate entry in the table of contents.
The "book" icon and animation sequence can be edited as well. The objects are animated by using basic text effects (place/remove) along with some scripting (_xscale, _yscale). You can change the animation completely if you wish, but you need to leave the Frame Labels in tact.
The 'hotSpot' object needs to be left alone. It contains the actual scripting for the button; although, you may need to resize this object to match your button's size.
Index and Index Results
Both of these are fairly simple to edit. The Index Sprite contains two text fields - one that displays the 'Keyword' instructions, and another is an Input text object. You can change the font, color, and size of both text objects.
The indexResults Sprite is the part that will actually display the results after the keywords are typed by the user. You can change the 'title' text fields's font, color, and size. You can also edit the "resultButton" animation states.
If you decide to create your own button object, you need to first copy the scripting on the current button - then paste it onto your new button. Your button NEEDS to be named "resultButton" and it needs to be set as a Target on the Shape panel. The index results will not display properly otherwise.
Search and Search Results
The same rules apply to this section as they did for the Index section.
Scrollbars
There are three separate scrollbars - one for each section (Contents/Index/Search). All of these scrollbars are identical in design; although, you could make design each differently if you wanted to do so. For now, I'll simply describe what I think is the easiest method for making them all look the same. There is actionscript on each of the scrollbar sprites: contentScroll; indexScroll; and searchScroll. This code is unique to that particular scrollbar and needs to remain in tact. The code attached to the components inside the scrollbar is global.
Open the sprite "contentScroll". There are four main parts to the scrollbar component: upScroll; downScroll; scrollBar (slider); and, scrollTrack. Each of these pieces has contain that makes the scrollbar work. The code is attached to the: "bttnBack" objects (inside the upScroll and downScroll); the "sliderBack" object (inside scrollBar/slider); and, to the "scrollTrack" object. If you replace these objects with your own designs, please copy the code first - then paste onto your own objects. Remember that the "scrollTrack" objects NEEDS to be named exactly the same and needs to be set as a Target on the Shape panel.
If you want all three of the scrollbars to have the same appearance, then the next step is easy. When you are finished changing colors or modifying the design of the contentScroll, highlight all of the objects inside that Sprite and copy them:
Next, go into the searchScroll Sprite ... select all of the objects inside it and delete them:
Finally, right-click on the searchScroll Sprite and select 'Paste in Place':
Which should leave you with this:
You can repeat the process of deleting and pasting those objects inside the indexScroll Sprite. HTML Frameset
There are three files in the HTML frameset that you will need to edit. The HTML code used in these framesets is important to the functionality of the controls, so it is recommended that you only change the parts mentioned below.
You can open the file "frameset.html" in any text editor (such as Windows Notepad). Find these lines of code:
<frameset rows="44,*" cols="*"
<frame src="myguidetheme_top.html" name="topFrame" id="topFrame"
If you change "44", it will change the height of the top frame - set this number to match the height of your top SWF file (myguidetheme_top.swf). You will also need to change the 'src' parameter if you rename your HTML pages.
DO NOT change the 'name' or 'id' parameters. Doing so will cause the Javascript used in the controls to fail. Find these lines of code:
<frameset cols="275,1*" framespacing=2 border=0 frameborder=0>
<frame name="navFrame" src="myguidetheme.html" id="navFrame">
You can change "275" to match the initial width of your main SWF file (myguidetheme.swf). Again, leave the 'name' and 'id' parameters as they are.
Next, you'll need to other two HTML frames to point to the correct SWF file. Inside the 'content' folder are two HTML files matching the name of your template (they should match the names you used in the frameset.html code).
Open the file "myguidetheme.html", and find these bits of code:
<param name="movie" value="myguidetheme.swf" />
src="myguidetheme.swf"
The 'value' and 'src' should both point to the main .SWF file. Nothing else in the code needs to be changed; in fact, the code: id="nav" and name="nav" NEED to be in the HTML.
Finally, open the file "myguidetheme_top.html", and find these bits of code:
<param name="movie" value="myguidetheme_top.swf">
name="top" src="myguidetheme_top.swf"
The 'value' and 'src' parameters should once again point to the correct SWF file for the top frame (myguidetheme_top.swf).
Preview Images
Inside the 'preview' folder, are four images: "0.bmp", "1.bmp", "2.bmp", and "3.bmp". These image files represent the different button options and how it will affect the appearance of your template. This is an optional step. These images are displayed within SWiSH Guide when enable or disable "Index" or "Search" in the Control options:
You can update these image files if you feel like it.
Publishing and Testing
When you've finished making all the graphical changes you want, you can export your .SWF files from SWiSH Max into the 'content' folder in your SWiSH Guide template (in this case, that would typically be C:\Program Files\SWiSH Guide\Templates\MyGuideTheme\content)
Just remember to name them according to what is used in the HTML code.
If you have any problems building your own custom control sets, please post your questions (and source SWI files, if possible) in our user support forums:
http://forums.swishzone.com/index.php?showforum=141
|
