[ Sample HTML Code ]
[ Sample .js Code ]
[ View guys and sounds ]



Allwebco Design Corporation


Some Flash Help Guys included in this download

image
book-1.jpg
image
bulb.jpg
image
cd-1.jpg
image
cellphone-2.jpg
image
cellphone-3.jpg
image
chart.jpg
image
clock.jpg
image
coffee.jpg
image
e-mail-at.jpg
image
envelope-2.jpg
image
envelope-3.jpg
image
floppy-2.jpg
image
flower-1.jpg
image
mouse-3.jpg
image
pencil-1.jpg
image
question.jpg
image
sun-1.jpg


View all guys

Flash Help Guys Add-On Setup:
 This script is intended to be added to Allwebco templates or html websites. Click here for current info and options for this add-on.

Outline: (Steps on this page)
#1. Unzip and place files.
#2. Add Flash code to a .js file or HTML page.
#3. Set options.


STEP #1 Place Files: | More Details
Unzip the "Flash Guys" zip file and copy or move the "flash_help_guys" folder in this zip file folder into your main template folder. This should be the same folder with your index.html and about.htm and should create a "flash_help_guys" folder in this folder. Click here to view folder structure.

TEST: You can copy over the "samples-HTML.htm" from this download into your main template folder and open this page in your browser. You should see 2 working Flash Guys on this page. A white and a black background version. If not, copy over the "flash_help_guys" folders and subfolders again and be sure all the files inside these folders copy over.


STEP #2 Option "A" Add Globally: (Add Flash code to a .js file)
The add-on can be added to any .js file, however, it is recommended that you add this to your "sidebar.js" or "menu.js". If you plan to use the floating DIV option this can also be added to your "header.js". Click here for the .js code.

Options for where to paste the code:
  1. In a header.js: If you plan to use the floating DIV code you can paste this into your "header.js" so the Flash Guys will show on all your HTML pages. Paste the code at the bottom of the "header.js". Use the code from the "sample-for-JS-files.htm".
  2. In a sidebar.js: Add the code from the "sample-for-JS-files.htm" in this attached zip file to your sidebar.js. You can add this code in any blank area. One option would be to add this just before the "SMALL PICTURE AREA" note. Make a copy of your sidebar.js for backup and try pasting in the code and test your pages in a web browser.
  3. In a menu.js: If you have a vertical menu style you can probably add this to your menu.js. Make a backup of your menu.js. Open the menu.js and try pasting the code from the "sample-for-JS-files.htm" near the bottom of that file. Most likely you will add this just before some </td></tr></table> or </div> code. This may not work in some template models see the step below for HTML page options instead.

STEP #2 Option B: (Add the Flash code to an HTML page)
Another option if you do not have the above .js files or you want to add this to an HTML page: Copy the code from the sample-HTML-page.htm and paste this into any one of your HTML pages. In most cases you will paste this code into your "MAIN TABLE" or "CONTENT TABLE" area. Perhaps just at the end of your page text. The HTML code includes many options including float the guys with a DIV or not float this on the page. See "options below for more details."


STEP #3 Set Options:
Test your template pages in a web browser. The Flash Help Guys should now be working. If not, see troubleshooting below. Now you can set options in the "FlashGuys.xml", and also in the "flash_guys.js" or "flash_guys_dark.js" files. These files will be in the "flash_help_guys" folder. Edit these files in a plain text editor like Notepad. It's best to "drag" this file into your editor. See all your options below for details.


STEP #4 Move Extras Folder:
IMPORTANT: Once you have set options in step #3 you will want to move the "extras" folder out of the "flash_help_guys" folder because this folder contains the BMP and TIF files. These are very large files and may cause problems when you upload to your hosting area. You will not want to upload these files.



OPTIONS:

EDIT THE FLASH GUY LINK:
In the "flash_help_guys" folder edit the "FlashGuys.xml" or "FlashGuys_dark.xml" (dark page version) in Notepad or a plain text editor. The link is now set for the help-flash_guys.html. Find and edit this line:

<link>help-flash_guys.html</link>

You can also link to another website. Edit the code as follows:

<link>http://yahoo.com</link>

The above "Yahoo" link may only work once you upload to your hosting area and not on your computer hard drive.

To link into a subfolder:

<link>your-folder/your-page.htm</link>

To link "up" a folder:

<link>../your-page.htm</link>


EDIT THE TEXT THE FLASH GUY IS SAYING:
The default setup has the Flash Guy saying "help" 3 times. You can change all the phrases but they must be very short phrases. Edit the "FlashGuys.xml" or "FlashGuys_dark.xml" (dark page version) in Notepad or a plain text editor. Edit this code:

<line1>Help!</line1>
<line2>Help!</line2>
<line3>Help!</line3>


Examples of other phrases to use might be "Info", "Details", "Books", "PDFs", or "Home". Five letters is about the most that will fit unless the word has letters like "i" and "l" because with skinny letters you can fit more text.


CHANGE THE FLASH GUY IMAGE: | More Details
The default setup shows the cd-2.jpg from the "guys" folder inside the "flash_help_guys" folder. This is a 50 x 50 pixel standard .jpg image. Click here to see other choices. You will change the image to call in the "FlashGuys.xml" or "FlashGuys_dark.xml" (dark page version) in Notepad or a plain text editor. Edit this code:

<image>flash_help_guys/guys/cd-2.jpg</image>

Notice the full folder path in the above code. Only edit the "cd-2.jpg" code. Click here for more image options for this add-on or to use your own .jpg image.


CHANGE THE FLASH GUY SOUND:
To change the mouseover sound the Flash Guy makes: Delete or rename the "sound.mp3" that is in the "flash_help_guys" folder. Place your .mp3 file in this folder and name it "sound.mp3" all lowercase. You will find some extra sounds in the "extras" folder inside the "flash_help_guys" folder. Click here to see other sound choices. A file called "sound_silent.mp3" is also included. Use this for a no sound Flash Guy.


SIZE OPTIONS:
The Flash Guys are set to be 90 x 50 pixels. It is not recommended that you change this size.


BACKGROUND COLOR: | More Details
You may want to have the Flash Guy blend into your exact webpage background color. This will be in 3 or 4 steps.
  1. Select code for a light background or a dark background from the HTML page code or the .js code.
  2. Add the code to your HTML page or .js file.
  3. If you are using HTML page code, edit the variable "var FGflashcolor" in the "flash_guys.js". If you are using the .js code edit the "var FGflashcolor" variable in the .js file you edited. Not in the XML file.
  4. Now you can either re-color the included Flash Guys or use your own .jpg image. Click here for help with this.

ABOUT THE DARK VERSION:
The only difference between the light and dark versions of the Flash Help Guys is the color of the text. If you are unable to match your website color you may want to use the border options included in the code. This will be the "var FGLborder" in the "flash_guys.js" or in the .js file you edited.


BORDER COLOR:
The Flash Guys border color is the "var FGLborder" variable in the "flash_guys.js" or in the .js file you edited. Edit the "FFFFFF" or "000000" in the .js code to use a different color border. Click here for color help.


FLOATING DIV HTML CODE: | Click to see how a floating div works
All the code in this add-on includes variables to turn on the floating DIV. This floating code will allow you to move the Flash Guys around on any HTML page. The default has this set to "no". To turn this on change the "var floatFG" variable in the "flash_guys.js" or .js file you added code to into a "yes". Right below this variable there are 4 location variables to move the Flash Guys left, right and up and down on your website pages.


NON-FLOATING HTML CODE:
If you leave the "var floatFG" variable set to "no" this will place the Flash Guys wherever you paste this code in an HTML page or in a .js file. You may want to add 2 or 3 <br> before and after your code for spacing. In most cases paste this after a paragraph of text. In some cases you may need to "center" the Flash code. Add a <center> just before the flash code and a </center> just after the Flash code to center the Flash Guys.


THE PSD, BMP and TIF FILES:
In the "extras" folder inside the "flash_help_guys" folder are three files. These files are "non anti aliased" full sized Flash Guys to be used for re-coloring or if you need bigger versions of the Flash guy. Click here for re-coloring help.



MULTIPLE DIFFERENT FLASH GUYS:
Please see the Flash Guys Support page for details.



TROUBLESHOOTING: | More Details
If you do the steps above and the Flash Guys are not working:
  1. Try doing the above steps again from the start.
  2. Your .jpg images may be saved incorrectly. Click for help and see "My Flash Guys images are not working".
  3. Perhaps your "flash_help_guys" or "guys" folder inside your template folder does not exist or is named incorrectly. Check these folders and rename them to all lowercase letters, or create them if needed.
  4. You are testing the wrong HTML page that you added the Flash Guys code to.
  5. You are editing on-line files instead of files on your hard drive.
  6. You have not used ALL the code from the sample pages in this download. Redo step #2.
  7. You have an error in the sidebar.js or menu.js file. Click for help.
  8. If you have uploaded: Remember that hosting areas are case sensitive. Be sure all file, folder names and link names match exactly.
  9. NOTE: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.
  10. Click here for more troubleshooting help.

IF THE XML FILE STOPS WORKING:
If you make a mistake in the "FlashGuys.xml" or "FlashGuys_dark.xml" and it stops working. Click here to download a new XML file.





COPYRIGHT 2006 © Allwebco Design Corporation
Unauthorized use or sale of this script or these images is strictly prohibited by law.
By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use.