Flare Button documentation
 
Quick Start

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

  • flare_button.fla
  • flare_button.swf
  • /caurina/ folder
  • folders
    /com/
      /patrickjansendesign/
       /flarebutton/ button.as
      /particleemitter/ particleemitter.as
  • Readme.htm

Do the following steps to start using Flare Button;

  1. Unzip the .zip file.
  2. Copy the /caurina/ and /com/ folder to the folder of your .fla
  3. Open Flash CS3 (or higher).
  4. Open flare_button.fla and your own .fla
  5. Copy the Library clips to your own .fla's Library (see also tip)
  6. Drag an instance of the button to stage of your .fla (or copy-paste from original .fla stage to your .fla)
  7. Select the Flare Button component on stage and open [Component Inspector].
  8. Set parameter "buttontext" to the text which the button should show.
  9. Set other parameters to your liking (see Configuring)
  10. How to add actions to your buttons? Check the button FAQ on my website's forum.


> TOP <

 
Configuring

When you place the Flare Button component on stage, you will have a number of parameters you can modify to suit the visual to your needs.

Button settings in folder file / com / patrickjansendesign / flarebutton / button.as
Here you see a number of settings, see their comments, among them are;

- glowcolor

Separate button settings for Mouse hover (OVER/OUT) and for Mouse click:
- tween flare duration and delays
- tween flare scaling
- tween flare transparencies

Text settings for Mouse hover (OVER/OUT):
- tween duration
- tween scale
- tween positions X/Y

- Right after line init = true; you can configure the specific details of the particle glow and text glow filters.

MovieClip "tween particles" in .fla Library
In this MovieClip, you can define the path which the particles will play when the mouse goes over the button. The path is done with a guide layer to move instance "positioner" along a path. In layer "particle" there is an instance of the component "particle emitter" on stage. When selecting it on stage and opening the Component Inspector you can configure dozens of settings for the particles, including movement distance, durations (iow "speed"), particle colors, alpha, scaling and so on. The last parameter "positioner" is the guided instance and the particle component will generate particles at the spot of where the "positioner" is currently moving along its guided layer.

MovieClip "shine object" and accompanying Library folder "shine object types"
Contain the 3 different colors for the flares (red/green/blue) and you only need to "swap" the object in "shine object" on stage for one of the other 2 flares and all the buttons you use will update automatically.

> TOP <

 
 
Tips

Some tips to keep in mind when working with Flare Button;

  • Text anti-aliasing type
    You can experiment with the antialiasing of the font. Instead of default "anti-alias for Readability" you could also try "anti-alias for Animation", which can smooth the effect but may slightly affect the readability.

  • Copying Library items between flas
    You can open multiple Library Panels and "pin" them to copy between Libraries with the 2 icons on the top right of the Library panel

  • Double flare
    Notice that the flare effect is actually created from 2 flares which because of their transparency visualize as one single flare. That's also why in the button.as file you can configure settings for both flares, since their durations and scaling and alpha tweenings are different. In simple words what they more or less do is the following... one tweens in while the other one simultaneously tweens out. Meaning when one scales from its specific full size down to 0, the other scales up from 0 to its specific full size. And same for transparency.

  • Double glow
    Notice that the glow of the text and particles is actually a double glow filter effect. Once applied "inner" with white color and on top of that another "outer" glow with the customizable glow color. Both merge together into a more joint glow effect.

> TOP <