|
|
|
|
|
|
|
|
It is possible to create your own transitions to be used by the WipeTransition component. A transition is simply a Movie Clip in the library that is exported for ActionScript with a linkage identifier. The movie clip is either used as a mask over the image being faded-in, or ActionScript in the movie clip is run to affect the images being displayed. In order to make a Movie Clip useable as a transition for the component, just a little bit of ActionScript needs to be added to the timeline. Here are the steps for making your own transitions, assuming you already have a movie clip in the library that you'd like to use:
1. Right click on the clip name in the library and choose 'Linkage...'.
2. When the 'Linkage Properties' dialog comes up, check the 'Export for ActionScript' button.
3. Enter a new name in the 'Identifier' field or use what shows up. This is the linkage identifier that you would use in the transitionList property and that would show up in the Component Inspector.
4. Click OK.
1. Double-click your movie clip in the library to open it for editing.
2. Create a new layer on the timeline and call it 'code'.
3. On frame 1 of this layer, create a keyframe and add this ActionScript:
// flashextension.net transition
extw = 484; // change extw and exth to fit your transition
exth = 208;
trans_type = "mask";
#include "flextnet/TransitionInclude.as"
NOTE: The first line of comments that says "// flashextension.net transition" must be there as that's how flash recognizes the movie clip as a transition. If you have done this successfully, you will see the linkage identifier of your custom transition in the component inspector UI (under the 'Transition List' tab) the next time you open it.
4. Edit the variables to suit your transition:
extw : If your clip is used as a mask, this is the full width extent (the largest width) that it reaches as it animates.
exth : If your clip is used as a mask, this is the full height extent (the largest height) that it reaches as it animates.
trans_type : Type of transition; can be "mask" or "code".
mask_type : Type of mask; acceptable value is "alpha_wipe" or nothing.
5. On the last frame of your animation, create a keyframe and add the following code:
stop();
controller.onTransitionEnded(this);
This code marks the end of your transition. Of course, transitions purely done in ActionScript can be all in one frame, but this bit of code (with the exception of the stop()) still needs to be called to tell the component that the transition is over. If your transition runs in one frame using ActionScript, you must put the actual transition code inside the doTransition() function in order to be visible by the UI preview in the Component Inspector:
// flashextension.net transition
trans_type = "code";
#include "flextnet/TransitionInclude.as"
doTransition();
function doTransition()
{
// do stuff to images over time
// ...
// are we done?
controller.onTransitionEnded();
}
As soon as an instance of your transition clip is created, it's provided with the following variable by the WipeTransition component:
controller : MovieClip; The actual WipeTransition component instance that is running this transition.
images : Array; The images array is a list of either 1 or 2 images. If it has only 1 image, this means this is the first image being displayed in the component. If it has 2, the first is the last image displayed (the bottom image) and the second is the next image to be displayed (top image). If you are building a simple mask transition, it's unlikely that you would need to access this data.
preview_mode : Boolean; This is set to true if the transition is being displayed in the Components Panel. Alpha-mask wipes do not work correctly in preview mode, so you might use this variable as a way to know whether to create an alternate transition for previewing.
resumeTransition() : Function; If you declare this function, it must return a value of 1. Declare this function to override the default 'play()' command issued on the transition when the user calls playTransition() to resume after pausing.
The following is an example of an ActionScript transition that apha fades the previous image out, and when that fade completes, it alpha fades the next image in:
// flashextension.net transition
trans_type = "code";
#include "flextnet/TransitionInclude.as"
doTransition();
// fade out bottom, then fade in top
function doTransition()
{
var DELTA = 3; // update the alpha value by this amount each frame
// 'images' is an array with either 1 or 2 images, provided by the component
var img = images[0];
// get the 'top' (next) and 'bottom' (previous) images and corresponding alpha's
var bottom_image = img;
var top_image = (images.length == 1) ? img : images[1];
var bottom_image_alpha = bottom_image._alpha;
var top_target_alpha = top_image._alpha;
var t = (images.length == 1) ? DELTA : -DELTA;
top_image._alpha = 0;
// on each new frame, update the alpha value of the top or bottom image
this.onEnterFrame = function()
{
// do nothing if the component is paused
if (controller.isPaused == 1) return;
img._alpha += t;
if (img._alpha <= 0)
{
// now fade in
t = DELTA;
img = images[1];
// restore the bottom
bottom_image._visible = false;
bottom_image._alpha = bottom_image_alpha;
}
else if (img._alpha >= top_target_alpha)
{
// we're done
this.onEnterFrame = undefined;
controller.onTransitionEnded();
}
}
return 1; // indicates to the caller that this function exists
}
For more information on building custom transtions (or any other questions), contact support@flashextension.net.
|
|
|
|
|
|
|
|