Particle Path Button documentation
 
Quick Start

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

  • particle_path_button.fla (+ swf)
  • /classes/ folder
  • /caurina/ folder
  • Readme.htm

Do the following steps to start using Particle Path Button;

  1. Unzip the .zip file.
  2. Open Flash CS3 (or higher).
  3. Open particle_path_button.fla.

The way the Particle Path Button works is as follows;

- One layer ("button triggers") containing blank buttons (Library item "button trigger") to which actionscripts eventListeners are added.
- One layer ("button hovers") containing MovieClips in which the particle emitter is following a "positioner" movieclip which moves along a predefined path.
- One layer ("button shapes") containing the visibile shapes of the buttons in individual MovieClips.

By default/initiating all the "hover" MC's stop() at frame 1 which do not contain an instance of the particle emitter. The particle emitter in MC's "hover" start from frame 2 and onward. The layer "actions" contains event listeners which will trigger two things

1) tween the "shapes" MC's to scale up and down on mouse over
2) trigger the "hover" MC's to play from frame 2. At frame 2 and onward the particle emitter will show.

The "hover" MC's work as follows;

- A layer "placer" which is merely so you see the position in the main timeline, it does not do anything else
- A layer "positioner" which contains a square movieclip moving around on stage (through Guide layer)
- A layer "Guide positioner" which contains one or more motion paths along which "positioner" MC will move
- A layer "particle" which contains the particle emitter. The particle emitter will follow the postions of MC "positioner".

When you select the particle emitter instance, you can change parameters in the Component Inspector. Those change the shape, movements, scaling, rotation etc etc of the emitter, see details below. Notice that it also has set "postioner" as last parameter in the list (parameter "target name"), this makes the emitter follow "postioner" movements.

The actions layer trigger the emitter to emit or not emit. By default it's set to not emit on mouse down, mouse up or area hover... the actions layer takes over the start and stopping of the emitting function.


> TOP <

 
Component Parameters.
When you place the Particle Emitter component on stage in the "hover" MCs, you will have a number of parameters you can modify to suit the visual to your needs. Below are detailed explanations about what every parameter does or customizes.
stop frame   The frame where particle MovieClips "particle color part" and "particle normal part" will stop. This chooses the shape.
total duration   Optional limited times of the particle emition. If left to 0 it will emit infinitely, otherwise it will emit this amount of times.
min. particle duplicates   Minimum number of particles generated every time you move over the button.
max. particle duplicates   Maximum number of particles generated every time you move over the button.
particle color(s)   Array of possible color(s) which the particles can become.
acceleration   Acceleration of the particles movement. 0 = continuous speed, 1 = decelarating, 2 = accelerating.
min. delay   Minimum delay of particle start moving
max. delay   Maximum delay of particle start moving
min. move duration   Minimum particle move duration (in frames).
max. move duration   Maximum particle move duration (in frames).
min. hor. position   ( OPTIONAL ) Minimum horizontal position of the particles (start) position, will orverride the automatically calculated area.
max. hor. position   ( OPTIONAL ) Maximum horizontal position of the particles (start) position, will orverride the automatically calculated area.
min. ver. position   Minimum vertical position of the particles (start) position.
max. ver. position   Maximum vertical position of the particles (start) position.
min. hor. move   Minimum horizontal movement of the particles.
max. hor. move   Maximum horizontal movement of the particles.
min. ver. move   Minimum vertical movement of the particles.
max. ver. move   Maximum vertical movement of the particles.
min. hor. swing move   Minimum parabolic (horizontal) swing movement of the particles.
max. hor. swing move   Maximum parabolic (horizontal) swing movement of the particles.
min. ver. swing move   Minimum parabolic (vertical) swing movement of the particles.
max. ver. swing move   Maximum parabolic (vertical) swing movement of the particles.
min. swing speed   Minimum speed of the swing movement.
max. swing speed   Maximum speed of the swing movement.
min. scale   Minimum scale of the particles.
max. scale   Maximum scale of the particles.
min. alpha   Minimum alpha transparency of the particles.
max. alpha   Maximum alpha transparency of the particles.
min. rotation   Minimum rotation of the particles.
max. rotation   Maximum rotation of the particles.
swing in both directions   Allow swing direction to start to both left and right at random.
scale down factor   Scale down percentage factor of the particles
scale parabolic factor   Parabolic scale factor of the particles. This is the "middle" point of the movement. E.g. setting it to '2' will make it scale from its start scale to double its sizes and then to the end scale (recalculating min/max and scale down factor)
alpha down factor   Alpha transparency decrease percentage factor of the particles.
min. interval   Minimum interval between emitting particles
max. interval   Maximum interval between emitting particles
emit on mouse up   Emit particles when mouse is 'up', triggered by /.stage/ if not using hover area
emit on mouse down   Emit particles when mouse is 'down', triggered by /.stage/ if not using hover area
use hover area   Use a limited area for mouse detection to trigger particle emitting
hover width   Hover area width
hover height   Hover area height
mouse follow   Create a mouse trail
chase factor   Distance factor to the mouse
emit on mouse move only   If using mouse follow, only emit particles if the mouse moves
snap to a target   Use a target in the parent treelevel to attach the emitter to
target name   The instance name of the parent target object to attach to

> TOP <
 
Tips


Some tips to keep in mind when working with Particle Path Button;

  • Creating New shapes
    You do that in MovieClips "particle color part" and "particle normal part". ALWAYS you'll need to edit both!!
    Make sure you place your new items appropriately. Both of the 2 movieclips will be told to go to the frame you choose in the parameter. So if you're using an object not made from a 'color' part (which you place in MovieClip "particle color part" ), and place it in a newly created keyframe in MovieClip "particle normal part", at least you'll need to create a blank keyframe in MovieClip "particle color part". And vice versa.
    If you don't, you'll risk mixing different shapes from the color and not-color movieclips in the final visual.
  • Don't REMOVE contents from the movieclips.
    All items of the contents are targeted with Action Script and removing them will lead to scripting errors. If you want to 'hide' something, either use component parameters where possible or set alpha transparency for those items to "0".
  • Every instance of the Particle Path Button component can be configured individually
    Rememember that you can create different visuals at the same time for different buttons. If you want to make exact same looking visual, it's reckomended to first create the visual on one instance and then copy-paste it for the remaining instances.

* xxx depends on the specific component you obtained

> TOP <