SKILL LEVEL: INTERMEDIATE

DOWNLOAD THE CODE
• You need to have a basic grasp of calling functions and loading movies using ActionScript

So without further ado, let's get started.

Tutorial

flare[x] has three parts to it. First, there is the flarex-code.swf. This file contains all the tricky mathematical calculations, as well as many basic functions, such as the scripting which allows you to load lensFlares and alphaMods. Underneath flarex-code is your collection of lensFlares. The method to go about creating a lensFlare is documented here. Finally, there are alphaMods. alphaMods are SWF files that can control the alpha of a lensFlare mathematically, via actionScript. Both lensFlares and alphaMods need to be stored in a folder on your webserver called flarex. The flarex-code.swf file may be stored wherever you please. The following diagram gives you an illustrative idea of the way flare[x] is structured:

Part I - Loading the flare[x] code
There are three main things you need to do, in order to get flare[x] to work with your site. Step one is to load the code, step two is to tell it which flare and/or alphaMod you want to use, and step three is to put in a flareDrag object which is used to position the flare. So let's get started.

flare[x] relies on being a targeted load. To achieve this, first make a new movieClip, using the small plus button in the Library window. Go back to the main timeline, and drop this new movieClip from your Library to your stage. Align the point to (0, 0), using the Info panel's transform tools. Finally, name the instance of the movieClip something like flareX. This movieClip will act as the positional load point for flare[x].

Next we need to tell your project to actually load the flare[x] code. You may place the following code on any frame, although I would recommend a frame near the beginning.

// Load flareX
loadMovie ("flarex-code.swf", "flareX");

Now, to assist you with the streaming of your site, flare[x] returns a variable, flareXloaded, to the level above its target. This variable contains True once flare[x] has loaded.
Optionally, although highly recommended, you may add a frame which has the following code attached:

// Check for flare loading
// if (flareXloaded == True) {
delete flareXloaded;
gotoAndPlay ("noFlare");
}

This code will removed the variable flareXloaded via the delete action. If you want to use this code, then on the frame after it put a simple gotoAndPlay statement that jumps back to the frame that contains the checking code. As flare[x] is under 3kb in size, then you may choose to not include this feature if you believe it will load fast enough.

Finally we need to set up some variables. To frame 1, attach:

// ***** Initialise Variables
movieWidth = 512;
movieHeight = 384;

Unfortunately I was unable to get Flash to accurately grab the movie height / width, so make sure that they correspond to your movie here. For example, if your movie is 550x400, then movieWidth = 550 and movieHeight = 400.

Part II - Loading a lensFlare / alphaMod
Now that we have put in place the code to load flare[x], we need to tell it to load in a particular flare. On either a blank keyframe in the timeline, or attached to an event of a button, use the code:

flareX:loadFlare("aFlareFileName", False, "www.virtual-fx.net");

Let's dissect this statement:
• flareX is the target point to which flare[x] is loaded.
• loadFlare() is a function contained within flare[x] to deal with loading a flare.
• "aFlareFileName" is the flare you wish to load. Important: All flares and alphamods must be stored in a folder called 'flarex' on your server. This folder must be one level above the root folder. Even though all flares begin with f- and end with .swf, the loadFlare() function appends these automatically. So for example, you want to load flarex/f-zoom-100.swf, all you need to write is zoom-100.
• False is merely a boolean True / False statement. If you pass True, then flare[x] will not display the flare until an alphamod has also been loaded. The use of this is demonstrated by the helix button in the tester that is distributed with flare[x].
• "www.virtual-fx.net" is required to be passed, as otherwise the flare will not load. flare[x] does not in any way require communication with the virtual-fx servers. It is merely used to verify that flare[x] has distributed by virtual-fx, in the same way that people will often password protect a ZIP file with their website address, to stop people from stealing hyperlinks.

Loading in an alphaMod is optional. You can also control a flare's alpha channel from within your movie if you so desire, and the latter will be discussed later. To load an alphamod, use the following code:

flareX:loadAlpha("alphaInput");

In the same way that the loadFlare function adds flarex/f-[filename].swf, loadAlpha adds flarex/a-[filename].swf

Part III - Dressing up a drag
The final part to flare[x] is to add the flareDrag movieClip which is used to control the positioning / animation of your lensFlare.

To do this, once again, press the little + icon in the Library window and create a new movieClip. In this movieClip, you will need to have two keyframes on frames 1 and 2 respectively. On frame 1 (label the frame drag), attach the following code:

// Calls the updateDrag() function
_parent.flareX:updateDrag();

This calls the updateDrag function within flare[x]. updateDrag calculates new positional information for the lensFlare, based on the location of the flareDrag movieClip. On frame 2, add:

// Jump
gotoAndPlay ("drag");

This code merely jumps back to frame 1. Now, return to your main timeline and drag a copy of this new movieClip on to the stage and name the instance flareDrag.

And that's all there is to it.

Part IV - If you are having problems
• Check that all your names are correct. flare[x] needs to be able to call to its _parent to access the flareDrag object. Make sure that the flareDrag is in the same level / group as your load point.

• Make sure you have the correct quotations around your strings that you are passing. If you do not add " " around your filename when you call the loadFlare or loadAlpha functions, you will run in to problems. If you are passing it a variable which contains the file name, then you do not need the quotation marks.

• Make sure you have correctly changed the screen height / width variables to match the dimensions of your movie.

• If you are still having troubles, then post your question on the flare[x] message boards here at virtual-fx. Please note that we cannot offer individual support via email. If you email us for support, we will refer you to the message board. The same applies to improvement suggestions and general flare[x] enquiries.

We hope you enjoy flare[x], and use it for the greater good!

You may also wish to learn how to create your own lensFlares and alphaMods.