Controling Cross-Fades with Buttons
Dear FashKit Users
I need a button initiated cross-fade.
I found the snippet below on an AS forum. I applied two of my own images to it and I've used it here:
http://www.ksqdesign.com/signature/F...o/trantwo.html
The code being [my needs are explained below the code]:
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
var bg1Tween:Tween = new Tween (beforeD1, "alpha", None.easeInOut, 0 , 1 , 1 , true );
bg1Tween.stop();
bg1Tween.addEventListener(TweenEvent.MOTION_FINISH ,fadeOutbg);
var bg2Tween:Tween = new Tween (beforeD1, "alpha", None.easeInOut, 0 , 1 , 1 , true );
bg2Tween.stop();
var bg3Tween:Tween = new Tween (afterD1, "alpha", None.easeInOut, 0 , 1 , 1 , true);
bg3Tween.stop();
beforeD1.nextTween = bg2Tween;
beforeD1.nextTween = bg3Tween;
afterD1.nextTween = bg1Tween;
setTimeout (bg1Tween.start, 1000);
function fadeOutbg(event:TweenEvent) {
event.target.removeEventListener(TweenEvent.MOTION _FINISH, fadeOutbg);
event.target.addEventListener(TweenEvent.MOTION_FI NISH, startNextbg);
event.target.begin = 1;
event.target.finish = 0;
setTimeout (event.target.start, 6000);
}
function startNextbg(event:TweenEvent) {
event.target.removeEventListener(TweenEvent.MOTION _FINISH, startNextbg);
event.target.obj.nextTween.addEventListener(TweenE vent.MOTION_FINISH, fadeOutbg);
event.target.obj.nextTween.begin = 0;
event.target.obj.nextTween.finish = 1;
setTimeout (event.target.obj.nextTween.start, 1000);
}
I would like users who go to the above link to be able to initiate the cross-fade between the before and after images by clicking on the "before" and "after" buttons. I've named the button stage instances "before" and "after". I want the page to load with the boy sitting alone [the "before" state]. And for users to be able to click between "before" and "after".
Whilst I'm passionate about getting my AS3 skills to this level, they're not there yet. Could you, or any readers, please edit the above code so that it works as a button initiated cross-fade between two images?
Due to image sizes, I'm going to apply a pre-loader. Is it kosher to use a simple AS2 pre-loader in conjunction with this, or should I stick to AS3 for the pre-loader as well? And if so, a link to a robust, simple AS3 pre-loader would also be very gratefully appreciated.
Many grateful thanks for your help, oh wise AS ones! Hoping to catch up with your superior knowledge soon. I'm eager to learn. I've been using Flash for years and am at last taking the brave steps away from timeline based laziness.
Thanks again.
QP