there is something similar for AC3 like fadeIn, fadeOut from jQuery?
Now I use visible=false but I want to animate this, from opacity 0 to opacity 1
You can achiev this with the tween class,this would be a fadein
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var myTween = new Tween(mc, "alpha", Strong.easeIn, mc.alpha, 1, 3, true);
And here the "naked" one for all Properties:
var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
Reference Here
Also not the the Standard tweening class is not the best to use. It has a lot of problems with simultanious tweens. Best to use Tweenlite/max which can be found here: http://greensock.com/tweenlite
Reagarding comment, its been a long since i done as3 and currently have no method of testing it but this should work or atleast give you enough to fuigure it out. Import point to remeber is that the object must be alpha=0 but NOT visible=false; :
myObject.addEventListener(MouseEvent.MOUSE_OVER,overMouse);
myObject.addEventListener(MouseEvent.MOUSE_OUT,outMouse);
function overMouse(e:MouseEvent):void {
var myTweenIn = new Tween(myObject, "alpha", Strong.easeIn, myObject.alpha, 1, 3, true);
}
function outMouse(e:MouseEvent):void {
var myTweenOut = new Tween(myObject, "alpha", Strong.easeIn, myObject.alpha, 0, 3, true);
}
Related
I'm new to ActionScript 3 and I'm having a basic problem. I'm trying to fade one of my variables in and out but it's just fading in. It's tween3. Can you help?
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.TimerEvent;
import fl.transitions.TweenEvent;
var timer:Timer = new Timer(3000);
timer.start();
var tween2:Tween = new Tween(main, "x", Strong.easeOut, main.x, 0, 2, true);
var tween1:Tween = new Tween(his, "alpha", None.easeOut, 1, 0, 1, true);
var tween3:Tween = new Tween(her, "alpha", Strong.easeInOut, 0, 1, 2, true);
var tween4:Tween = new Tween(gilt, "alpha", Strong.easeIn, 0, 1, 2, true);
tween1.stop();
tween2.stop();
tween3.stop();
tween4.stop();
timer.addEventListener(TimerEvent.TIMER, startTween);
function startTween(event:TimerEvent):void {
tween1.start();
tween2.start();
tween3.start();
tween4.start();
}
timer.addEventListener(TimerEvent.TIMER, stopTimer);
function stopTimer(event:TimerEvent):void {
timer.stop();
}
Here's an example of some code that does, more or less, what you're trying to do. I'm sure that you can learn from it and adapt this to your code.
To test my code make three MovieClips and put 'em on stage with instance names 'boxA', 'boxR' and 'blackbtn' Clicking on the button will start your timer and tweens. In my case the 'boxes' are in an array amd the tweens are created in a 'for' loop, but of course, they don't have to be.
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.TimerEvent;
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, timerListener);
blackbtn.addEventListener(MouseEvent.CLICK, startit)
var A:Array = new Array();
A.push(boxB); A.push(boxR);
function timerListener(e)
{
for(var i:int = 0; i < A.length; i++)
{
new Tween(A[i], "alpha", Regular.easeOut, 1, 0, 1, true);
}
}
function startit(e)
{
timer.start();
}
You can use TweenMax framework instead of tween3 because Tweenmax has lots of feature (sometimes is better than Flash Timeline) also here is your solution:
var t:TweenMax = new TweenMax(main,1,{ x: 100, delay:1,ease: Strong.easeOut });
t.start();
stage.addEventListener(MouseEvent.CLICK, onClickedStage);
function onClickedStage(event:MouseEvent):void
{
t.stop();
}
In a frame script I have an event listener that should call the 'onFinish' function when the tween motion is finished. (See pertinent parts in red below.) I never see that 'done tweening' output. It fails silently. I've tried the addEventListener in different places.. to no avail. What am I missing?
Thanks!
import fl.transitions.*;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
var currentFrameMC = animImg;
var scaleXTween:Tween=new Tween(animImg,"scaleX",Bounce.easeOut, 1,2,2.4,true);
var scaleYTween:Tween=new Tween(animImg,"scaleY",Bounce.easeOut, 1,2,2.4,true);
var alphaTween:Tween = new Tween(animImg, "alpha", Strong.easeOut, .5, 1, 11, true);
//Put a listener on the MC so I can tell when it's done tweening the scale.
currentFrameMC.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
//This is another event listner put on a button:
//(The button, when clicked, will trigger the shrinking of the animImg MC)
reverseTween1.addEventListener(MouseEvent.CLICK,shrinkFrameMC);
//Shrink/scale down the anImg by tweening
function shrinkFrameMC(e:MouseEvent) //This scales down the playing movie clip
{
scaleXTween=new Tween(currentFrameMC,"scaleX",None.easeNone, currentFrameMC.scaleX,1,3,true);
scaleYTween=new Tween(currentFrameMC,"scaleY",None.easeNone, currentFrameMC.scaleY,1,3,true);
//Tween the alpha state of the movie clip again, this time in reverse
alphaTween=new Tween(currentFrameMC, "alpha", Strong.easeOut, 1, .5, 11, true);
}
function onFinish(e:TweenEvent):void //This does an action when the frame MC is done tweening
{
trace ("done tweening" );
//NEVER SEE THIS OUTPUT
}
You need to assign the Tween event listener to the Tween, not the object being tweened.
its working:
import fl.transitions.*;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
var scaleXTween:Tween=new Tween(animImg,"scaleX",Bounce.easeOut, 1,2,2.4,true);
var scaleYTween:Tween=new Tween(animImg,"scaleY",Bounce.easeOut, 1,2,2.4,true);
var alphaTween:Tween = new Tween(animImg, "alpha", Strong.easeOut, .5, 1, 11, true);
//Put a listener on the MC so I can tell when it's done tweening the scale.
scaleXTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
//This is another event listner put on a button:
//(The button, when clicked, will trigger the shrinking of the animImg MC)
reverseTween1.addEventListener(MouseEvent.CLICK,shrinkFrameMC);
//Shrink/scale down the anImg by tweening
function shrinkFrameMC(e:MouseEvent) //This scales down the playing movie clip
{
scaleXTween=new Tween(currentFrameMC,"scaleX",None.easeNone, currentFrameMC.scaleX,1,3,true);
scaleYTween=new Tween(currentFrameMC,"scaleY",None.easeNone, currentFrameMC.scaleY,1,3,true);
//Tween the alpha state of the movie clip again, this time in reverse
alphaTween=new Tween(currentFrameMC, "alpha", Strong.easeOut, 1, .5, 11, true);
}
function onFinish(e:TweenEvent):void //This does an action when the frame MC is done tweening
{
trace ("done tweening" );
//NEVER SEE THIS OUTPUT
}
I have created a flash website that navigates by labels on key frames.
How can I have my pages fade in and out when navigating?
This is not an animation question it's an actionscript 3 question.
the navigation code looks like this:
aboutbtn.addEventListener(MouseEvent.CLICK, gotohome);
function gotohome(event:MouseEvent):void
{gotoAndStop("home");}
With entire pages on a single frame over 3 layers. I have 5 main pages and 2 sub-pages within these.
So how can I play a fade out animation before the page changes?
Help would be much appreciated!!
Thanks.
Create a white background movieclip fade_Mc. Place it over the stage.
So, the code would look like this:
aboutbtn.addEventListener(MouseEvent.CLICK, gotohome);
function gotohome(event:MouseEvent):void
{
gotoAndStop("home");
fade_Mc.visible = true
addEventListener(Event.ENTER_FRAME, fadeOut)
}
function fadeOut(e:Event)
{
fade_Mc.alpha -= 0.5 // change this value as per the speed of fade required
if ( fade_Mc.alpha <=0 )
{
fade_Mc.visible = false
fade_Mc.alpha = 1 ;
removeEventListener(Event.ENTER_FRAME, fadeOut)
}
}
try:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
function gotohome(event:MouseEvent):void{
var mytween:Tween = new Tween(stage, "alpha", Strong.easeOut, 1, 0, 1, true);
mytween.addEventListener(TweenEvent.MOTION_FINISH, showHome);
}
function showHome(event:TweenEvent):void{
new Tween(stage, "alpha", Strong.easeOut, 0, 1, 1, true);
gotoAndStop("home");
}
I'm trying to remove a tween object after it has complete so the memory can be freed by garbage collection.
In this example I'm passing the fadeIn function a UILoader object that is cast as a sprite so that it fades in when it is finished loading. When the tween finishes animating, I want to remove the tween object. I've included the compiler errors as comments.
function fadeIn(e:Sprite):void
{
var myTween:Tween = new Tween(e, "alpha", None.easeNone, 0.0, 1.0, 0.2, true);
myTween.addEventListener(Event.COMPLETE, deallocateObject, false, 0, true);
}
function deallocateObject(e:Event):void
{
//delete(e.currentTarget); //Warning: 3600: The declared property currentTarget cannot be deleted. To free associated memory, set its value to null.
e.currentTarget = null; //1059:Property is read-only.
}
First of all, you want to use a TweenEvent to handle the completion of the tween. The currentTarget property of Event is read-only, so you need to "get" the current target from the event and cast it as a tween, then remove your event and set it to null:
// assuming MC on stage with instance name "test"
import fl.transitions.*;
import fl.transitions.easing.*;
function fadeIn(e:Sprite):void
{
var myTween:Tween = new Tween(e, "alpha", None.easeNone, 0.0, 1.0, 1, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, deallocateObject, false, 0, true);
}
function deallocateObject(e:TweenEvent):void
{
var myTween:Tween = e.currentTarget as Tween;
// -- I always remove even when using weak listeners
myTween.removeEventListener(TweenEvent.MOTION_FINISH, deallocateObject);
myTween = null;
}
fadeIn(test);
Watch out when using local Tweens inside a function. Often they will get garbage collected before the tween completes. You'll have to declare the tween as a class property instead if that happens. I recommend saving yourself some headache and using Tweener, gTween, et al. The Tween class sucks.
function fadeIn(e:Sprite):void
{
var myTween:Tween = new Tween(e, "alpha", None.easeNone, 0.0, 1.0, 0.2, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, deallocateObject);
}
function deallocateObject(e:Event):void
{
delete(e.currentTarget as Tween);
}
This works.
I have a simple function going here.
import fl.transitions.Tween;
import fl.transitions.easing.*;
function goBack (e:MouseEvent):void{
var backAlpha:Tween = new Tween(MovieClip(parent).blueOverlay, "alpha", Strong.easeOut, 1, 0, 2, true);
MovieClip(parent).gotoAndStop("home");
}
btnBack.addEventListener(MouseEvent.CLICK, goBack);
What it is doing right now is: it is going to the "home" label as soon as btnBack is clicked, which means it is completely disregarding the alpha part.
What I need it to do is: do the alpha part first, then right after it's finished that, do the second part where it jumps to the "home" frame.
Thanks,
Wade
Look at the documentation for fl.transtions.Tween
Specifically, look at the motionFinish event.
Basically, what you want to do is something like this:
import fl.transitions.Tween;
import fl.transitions.easing.*;
function goBackStart (e:MouseEvent):void{
var backAlpha:Tween = new Tween(this.parent.blueOverlay, "alpha", Strong.easeOut, 1, 0, 2, true);
backAlpha.addEventListener("motionFinish", goBackFinish);
}
function goBackFinish(e:Event) {
removeEventListener(e.target.obj, goBackFinish);
this.parent.gotoAndStop("home");
}
btnBack.addEventListener(MouseEvent.CLICK, goBackStart);
I am not a fan of how the built-in Tweening class works, so I use either of these:
TweenLite - My new favorite
Tweener - My goto library of years past
Both of these libraries have similar APIs and use an onComplete property to handle completion.
Using Tweener you could do:
import com.caurina.transitions.Tweener;
btnBack.addEventListener(MouseEvent.CLICK, goBack);
function goBack(e:MouseEvent):void {
Tweener.addTween(this.parent.blueOverlay, {alpha:0, time:2.0, transition:"easeOutQuad", onComplete:function() {this.parent.gotoAndStop("home")}});
}