Rubber Template documentation version 1.0
 
UPDATE

The help documentation will be updated and improved with customer feedback.

* Before starting, check to see if you should download the latest Readme.htm file from the server and replace this one (version on right top)
* Check the latest FAQ, tips and help topics on the FORUM

> TOP <

 
Quick Start

When you receive the product you will receive a .zip file. The zip file will contain the following files

  • rubbermenu_as3_var1.fla
    rubbermenu_as3_var1.swf
    rubbermenu_as3_var2.fla
    rubbermenu_as3_var2.swf
    rubbermenu_as3_var3.fla
    rubbermenu_as3_var3.swf
  • Readme.htm
  • /images/
    folder containing normal and thumbnail images for the image carousel.
  • /bgimages/
    folder containing images for the website background
  • contents.xml
  • index_as3_var1.htm
    index_as3_var2.htm
    index_as3_var3.htm
  • preview.htm
    preview.swf
  • style.css
  • AC_RunActiveContent.js

Do the following steps to start using Rubber ;

  1. Unzip the .zip file.
  2. Download and Install the free fonts from 04b_09.zip and supertext_pc.zip
  3. Open Flash CS3 (or higher).
  4. Open Rubber_as3.fla.
  5. Adjust the required component parameters to your needs, check them below.

Extra steps you probably will want to do with next;

  1. Choose either thumbnail yes/no use for the portfolio Carousel. Open MC "carousel" in Library folder [carousel clips] and in actions layer you can change the usethumbs = true parameter.
    You can also see a lot of customizable parameters. All safely customizable variables are preceded by comment line
    // ^^^ customizable ^^^
  2. Adjust the Carousel items to your own, editable by XML file contents.xml. Within MC "carousel" in Library folder /carousel clips/ you can find the actionscript code where you can make visual changes (read the comment lines).
  3. Choose either "drag accelerated" or not for the scolling contents. You can change the component parameter to do that. This way you can have contents scroll instantly directly according to drag bar or accelarate/decelarate to new positions giving a smoother visual.
    By default "Home" and "About us" have accelated scroll, but "Staff Members" (and "News" an xml driven) uses not-accelated scroll, so you can see the difference.
  4. Adjust the NEWS items to your own, editable by XML file contents.xml


> TOP <

 
Component Parameters.
 

These are the component parameters you can change to set the visual to your liking.

Ycurving   Base "roundness" of the elastic cords between menu items
Ycurvingfr   Factor (0-100) making cords less elastic (hanging lower) for menu items with larger vertical distance between them
bottom   drop down point of a clicked menu item
dobevel   do bevel on the elastic cords
movedur   Falling down duration (and snap back last menu item duration)
bouncedur   Extra bounce duration after falling down
bouncedis   Vertical bounce distance when reaching bottom after being clicked
bouncespeed   Speed with which an menu item bounces up and down when reaching bottom after being clicked
swingXdis   Horizontal maximum swing distance
swingXstep   Horizontal swing speed
swingYdis   Vertical maximum swing distance
swingYstep   Vertical swing speed
dodrag   Allow menu items being dragged (after letting go they'll be considered 'clicked')
linethickness   Thickness of the elastic cords
fixeddown   Make all menu items go to one specific horizontal point when being clicked
fixeddownXpos   Horizontal position/point (if fixeddown = true)
fixeddownbump   Do the movement only when having dropped down first (if fixeddown = true)
fixedshadow   Have all menu items have the same distance for their shadow -> will give a more 3D perspective
shadowYdis   Shadow distance for the menu items
shadowtohorizon   Rescale shadow distances towards a virtual horizon line at Y = 0 (if fixedshadow = true)
shadowtohorizonYdisAt   Rescale 100% at this Y position
resettostage   Allow menu items to reposition themselves to the complete browser width if being resized (including fullscreen toggle)
resetfixeddownXpos   Only nessesary if you use "containercontent" as in template mode. Will reposition the content position on browser resize. For this feature, check out the tempate mode instructions.
contentXpos   Horizontal position to load content slides. Will recalculate on browser resize
contentYpos   Vertical position to load content slides. Will recalculate on browser resize
contentresettostageX   Allow slides to reposition themselves horizontally if being resized (including fullscreen toggle)
contentresettostageX   Allow slides to reposition themselves vertically if being resized (including fullscreen toggle)
contentresetcenterY   Use vertical start position contentYpos as base and recalculate to center if resized more then original canvas size
startitem   First menu item and slide to open at start

In the actionscript of the you'll also find two variables which you need to adjust to your endresult;.

mouseovertweenframes   The frame at which each menu item is stopped on mouse over.
dups   The number of menu items in your menu

The scroll component parameter.

target   The instance name of the MC being scrolled
mask target   The instance name of the MC being used as mask
mask height   The height of the mask area
scroll down button distance   The distance of the scroll down button (and accordingly the clickable scroll drag area)
drag button height The height of the drag scroll bar
drag accelerated   Make scrolling move accelerated/decellerated instead of instantly
acceleration   The speed of the content scrolling content movement (if drag accelerated to 'true')
speed   The speed of scrolling when clicking the button up or down
roundoff   Round off scrolling to non decimal values (for pixelfont support)

> TOP <
Tips


Some tips to keep in mind when working with Rubber ;

  • menu item 0 and "dups+1" should not be removed.
    They are the small round balls hooking up the first and last menu item in the to the ceiling. Don't remove them
  • Copy-paste content-items
    If you want to copy-paste certain scrollable-contents to create new content pages, do these steps (step example for content 1);
    - In Library folder [scrollable contents] duplicate MC "sub content 1"
    - In Library folder [_ slide clips] duplicate MC "scroll content 1"
    Open the "sub content 1"-duplicate and select the content in layer 'sub content 1', in Properties panel click {swap...} and select the new "scroll content 1"-duplicate
    Replicate the automated content scrollers
    By default the "Home", "About us" and "Staff Members" (and "News" an xml driven) contain simple automatic MC scrollers, which scroll an entire MovieClip. This way you can use larger contents within an item. You can copy-paste-substitute items to use one in any item you like.
  • The News and Portfolio are xml driven
    Keep it in mind when planning your own changes.
  • You can direct link from within items to other items
    See the links on the small pictures in scroll content of item 1 "Home"

> TOP <