Flare Button documentation
 
Quick Start TRIAL

This is the trial version of "Flare Buttons". It is a variation of the "Flare Buttons XML standalone" which is available for buyers of "Flare Buttons". This trial version has only lowercase letters and is limited to fonts "Times" (1), "Arial" (2) and "Tahoma" (3) . All full versions have no limitations. Full versions include the .FLA file, the trial does not

Do the following steps to start using Flare Button;

  1. Unzip the .zip file.
  2. Open XML_loader_samplepage_trial.htm into a text/webpage editor and change the canvas size ("800", "400") to your needs
  3. Set the flash file's position to your needs (left:0 ; top: 0)
  4. Open file contents_flarebutton.xml and configure as many buttons as you need. The xml already has examples of how to set nodes but you can read all the options below in the FULL version part

OBS: File "loader_trial.swf" is implemented into webpage XML_loader_samplepage_trial.htm using SWFobject (loader_trial.swf loads file flare_button_xml_trial.swf). You'll need to upload all the files in the zip to your own server for it to work.

The Quick Start FULL below explains what the full version you purchase will contain and how it will work. The default will be drag&drop buttons, but the full version XML variation will also be made available seperately for you so you can edit font choices.


> TOP <

Quick Start FULL

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 <

You can Change different parameters in the particle effect. The ones most probably you'll need are listed below (although the engine has a large number of other parameters to finetune visual behavour)

mindups   Minimum number of particles generated every time you move over the button.
maxdups   Maximum number of particles generated every time you move over the button.
objcolor   Array of possible color(s) which the particles can become.
mindur   Minimum particle move duration (in frames).
maxdur   Maximum particle move duration (in frames).
minXmove   Minimum horizontal movement of the particles.
maxXmove   Maximum horizontal movement of the particles.
minYmove   Minimum vertical movement of the particles.
maxYmove   Maximum vertical movement of the particles.
minswingXmove   Minimum parabolic (horizontal) swing movement of the particles.
maxswingXmove   Maximum parabolic (horizontal) swing movement of the particles.
minswingYmove   Minimum parabolic (vertical) swing movement of the particles.
maxswingYmove   Maximum parabolic (vertical) swing movement of the particles.
minscale   Minimum scale of the particles.
maxscale   Maximum scale of the particles.
minalpha   Minimum alpha transparency of the particles.
maxalpha   Maximum alpha transparency of the particles.


To finetune the durations, scaling and alpha transparencies of a flare, or to finetune the particle or text glow, you can also override the values by setting any parameter of the ones below for each individual button as an XML node. They show the default values after the "=", you can change a value for a button for example like this

<Hover_flare2_time> 2 </Hover_flare2_time>

// BUTTON MOUSE OVER / OUT SETTINGS
// duration and delay of the 2 flares

Hover_flare1_delay = 0
Hover_flare1_time = 0.7
Hover_flare2_delay = 0
Hover_flare2_time = 1

// start and end scale X / Y of the 2 flares

Hover_flare1_start_scaleX = 4
Hover_flare1_start_scaleY = 8
Hover_flare1_end_scaleX = 0
Hover_flare1_end_scaleY = 0

Hover_flare2_start_scaleX = 0
Hover_flare2_start_scaleY = 0
Hover_flare2_end_scaleX = 1
Hover_flare2_end_scaleY = 2

// start and end alpha of the 2 flares

Hover_flare1_start_alpha = 0.0
Hover_flare2_start_alpha = 1
Hover_flare1_end_alpha = 0.5
Hover_flare2_end_alpha = 0

//---------------------------------

// BUTTON MOUSE CLICK SETTINGS
// duration and delay of the 2 flares

Click_flare1_delay = 0.2
Click_flare1_time = 1.2
Click_flare2_delay = 0.05
Click_flare2_time = 1.6

// start and end scale X / Y of the 2 flares

Click_flare1_start_scaleX = 6
Click_flare1_start_scaleY = 8
Click_flare1_end_scaleX = 0.5
Click_flare1_end_scaleY = 0

Click_flare2_start_scaleX = 0
Click_flare2_start_scaleY = 0
Click_flare2_end_scaleX = 6
Click_flare2_end_scaleY = 8

// start and end alpha of the 2 flares

Click_flare1_start_alpha = 0
Click_flare2_start_alpha = 1
Click_flare1_end_alpha = 1
Click_flare2_end_alpha = 0

//---------------------------------

// text mouse over scale, position and duration

Hover_text_scale = 1.1
Hover_text_x = 6
Hover_text_y = 2
Hover_text_time = 0.4

// text and particle glow strenghts

particle_glow_alpha = 0.5
particle_glow_sub_alpha = 0.5
particle_glow_blurX = 4
particle_glow_sub_blurX = 4
particle_glow_blurY = 4
particle_glow_sub_blurY = 4

text_glow_Over_alpha = 0.5
text_glow_Over_sub_alpha = 0.75
text_glow_Over_blurX = 20
text_glow_Over_sub_blurX = 8
text_glow_Over_blurY = 20
text_glow_Over_sub_blurY = 8

text_glow_Out_alpha = 0
text_glow_Out_sub_alpha = 0
text_glow_Out_blurX = 50
text_glow_Out_sub_blurX = 50
text_glow_Out_blurY = 50
text_glow_Out_sub_blurY = 50



> 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 <