Jump to content
Search Community

Carl last won the day on December 24 2023

Carl had the most liked content!

Carl

Moderators

  • Posts

    9,825

  • Joined

  • Last visited

  • Days Won

    546

 Content Type 

Posts posted by Carl

    fade in thumbnails using TweenMax

    in GSAP (Flash)

    Posted

    fixed fla attached

     

    here is the code

     

    import flash.display.MovieClip;

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.TweenMax;
import flash.events.MouseEvent;
import fl.transitions.*;
import fl.transitions.easing.*;




var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();

var numClips:int=6;
var columns:int=2;

xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml=XML(event.target.data);
xmlList=xml.children();
for (var i:int = 0; i 
	imageLoader = new Loader();
	imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
	imageLoader.x = 6 +( i % columns )*600;
	imageLoader.y = 6 +(Math.floor(i/columns)*106);
	imageLoader.name=xmlList[i].attribute("source");



	imageLoader.addEventListener(MouseEvent.CLICK, showPicture);


	//Carl did this:
	imageLoader.alpha=0;
	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener)
	//addChild(imageLoader);
}


}





function showPicture(event:MouseEvent):void {

imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));


imageLoader.x=165
imageLoader.y=6;


       //Carl did this
imageLoader.alpha=0;
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener)
//addChild(imageLoader);



}

//this is where the fade happens
function startListener(e:Event):void{
trace("loaded"+ e.target);
var thisClip = e.target.loader;
addChild(thisClip);
TweenMax.to(thisClip, 1, {alpha:1})
}

     

     

    each imageLoader now has the ON_COMPLETE listener added to its contentLoaderInfo.

     

    one thing to watch out for in the future... you are literally re-creating A NEW loader over and over each time you click on a thumbnail and adding it to the stage.

    if you click the first thumb 10 times... the large image will load 10 times and you will have 10 instances of that image on the stage. in a larger gallery this could become problematic.

     

    for now, it works

     

    Carl

    fade in thumbnails using TweenMax

    in GSAP (Flash)

    Posted

    hello kbat,

     

    In order for TweenLite/Max to work in your gallery you are missing a very important component and that is an eventListener that will run when the images complete loading.

    You can read about event.COMPLETE here: http://www.republicofcode.com/tutorials ... as3loader/

     

    if you tween the imageLoader before the content loads, it won't work very well. So you will need to add an evenListener to each imageLoader.

     

    I'm reluctant to provide a complete code solution as it isn't possible for me to test your existing code.

    If you post a zip of your gallery working I can take a look at it. Please try to keep it small with just a few images.

     

    Carl

    How can I create a lettersArray as mentioned in the example?

    in GSAP (Flash)

    Posted

    an array in its simplest terms allows you to create a list of items.

     

    see: http://www.republicofcode.com/tutorials ... as3arrays/

     

    the code you gave implies that you have an array that stores the names of all the movie clips you want to animate.

     

    so you would do something like this:

     

    var lettersArray:Array = new Array(a_mc, b_mc, c_mc, d_mc);

     

    you would also have to have movie clips on the stage with instance names a_mc, b_mc, c_mc

     

    now when you call

     

    timeline.insertMultiple( TweenMax.allFrom(lettersArray, 1, {y:"-30", alpha:0, ease:Elastic.easeOut}, 0.04), 1.4);

     

    each movie clip that is referenced in lettersArray will tween

     

    you could literally tween 100s of movie clips in this fashion

    Check Tweening

    in GSAP (Flash)

    Posted

    TweenMax has an isTweening() method that can check if an object is tweening or not.

     

     

    in the example below, the roll over listener checks the isTweening value of box_mc.

    If isTweening = true, the tween will not restart

     

    box_mc.addEventListener(MouseEvent.ROLL_OVER, boxOver);

function boxOver(e:MouseEvent) {
     if (!TweenMax.isTweening(box_mc)) {
	TweenMax.fromTo(box_mc, 5, {scaleX:1}, {scaleX:5});
}

}

    Simple rotation tween on Y axis with objects on the Z axis

    in GSAP (Flash)

    Posted

    yeah, i'm a little lost in the explanation, but i think the problem is that you are mistaking how flash handles 3D. (not your fault)

    It isn't true 3d, its a pseudo 3d. when you do z-axis transformations it scales and moves objects so that they appear to be farther or closer, but it doesn't handle the layering of foreground and background elements.

     

     

    if in your flipper you have your back and front cards positioned on top of each other, try doing a 3d rotationX/Y rotation on the timeline with a motion tween... you'll see that the front card is always on front... there really is no back regardless of the z settings or even if they are in different layers, there is no top card or bottom card. I imagine you were trying to account for this by toggling the visibility.

    what you were hoping to have happen definitely makes sense in the real world... but not the flash ide :(

     

    what you want to do is have both front and back in your flipper clip with the instance names font and back.

     

    do a series of tweens like this

     

    import com.greensock.*;
import com.greensock.easing.*;

//hide the back
flipper.back.alpha=0;
//flip the font 90
TweenMax.to(flipper.front, .5, {rotationY:90, ease:Linear.easeNone});
//hide the front when it reaches 90
TweenMax.to(flipper.front, 0, {alpha:0, delay:.5});
//show the back as the front hides
TweenMax.to(flipper.back, 0, {alpha:1, delay:.5});
//flip the back from 90 to 180
TweenMax.fromTo(flipper.back, 1, {rotationY:90}, {rotationY:180, ease:Linear.easeNone, delay:.5})

     

    there are probably more elegant ways of doing this with timelinemax and callback functions or listeners, but this simple approach will do the trick.

     

     

    Carl

    • Move from point to point, with random snake movement?

    in GSAP (Flash)

    Posted

    ok, so if you want to tween back and forth along the x and also want a specific destination x you can put your bubbles in a container. zig zag them in the container, and then tell the container exactly where it should end.

     

    image in you create a movie clip in flash called box_mc. inside of it create motion tween of a ball moving back and forth.

    on the stage create a tween of the box_mc moving up and down. it will give you wormy, snake like action.

     

    with timelinemax you can do the same thing.

    take a look here:

    http://www.snorkl.tv/dev/bubbles/dimitri-bubbles.html

     

    each bubble is placed in a bubble holder. the bubble moves back and forth (random wiggle amount) as the holder is told a specific x/y ending position. in my example the end point is random... but it is specific.

     

    function createBubble() {
//create a bubble (attach symbol in library with Class Bubble)
var bubbleHolder:MovieClip = new MovieClip();
var bubble:Bubble = new Bubble();
bubbleHolder.y=20;
bubbleHolder.x=20;
bubbleHolder.alpha=0;
bubbleHolder.visible=false;
addChild(bubbleHolder);
bubbleHolder.addChild(bubble);
//create timeline for each bubble
var nestedTl:TimelineMax = new TimelineMax();

//how much wiggling / zig zagging
var wiggle:Number=randomRange(10,100);


//how fast and big
var speed:Number=2.5;
//fade and grow
nestedTl.insert(TweenMax.to(bubbleHolder, .5, {autoAlpha:randomRange(.5,1), scaleX:speed, scaleY:speed}));
//go up
nestedTl.insert(TweenMax.to(bubbleHolder, speed, {y:350, x:randomRange(250, 500), ease:Quad.easeIn}));
//zig zag
nestedTl.insert(TweenMax.to(bubble, speed*.15, {x:String(wiggle), repeat:5, yoyo:true, ease:Linear.easeNone}));

//append new timeline very close to when the previous one started
//don't even ask about the offset...k?
var offset:Number = -speed*.5 	trace(offset)
tl.append(nestedTl, offset)


}

     

    while playing around with a few parameters (having each bubble follow the same wiggle and speed parameters but starting just slightly after the previous... you get something that LOOKS LIKE A SNAKE! :o

     

    http://www.snorkl.tv/dev/bubbles/dimitri-snake.html

     

    I've zipped up the files if you want to mess with them.

     

    I think if you threw in a custom ease like jack suggested, you could get some interesting effects

     

    Carl

    • Move from point to point, with random snake movement?

    in GSAP (Flash)

    Posted

    Hello Dimitri,

     

    I don't think I have a solution for a snake, but your bubbles style of animation got me thinking.

     

    To create a bubble going up and zig zagging back and forth you create a tween along the y axis going from high number to a low number.

    Let's assume your bubbles start at the bottom of the stage.

     

    TweenMax.to(bubble_mc, 2, {y:-20}); // moves bubble from bottom to top in 2 seconds

     

    While it's going up it also has to zig and zag along the x axis

     

    so add a tween like so

    TweenMax.to(bubble_mc, 2, {x:"10"});

     

    now that will only move 10 pixels to the right of where it started once over 2 seconds

     

    using a few greensock bells and whistles make it go back and forth by editing the x tween like this:

     

    TweenMax.to(bubble_mc, .5, {x:"10", repeat:2, yoyo:true});

     

    so now as it is moving up, it it goes start > right : right > start : start > right

     

    with each zig and zag taking .5 seconds you are zig-zagging for 1.5 seconds while the bubble rises for 2 seconds.

     

    Now assuming you have your bachelor's degree in timelinemax :D

     

    take a look here:

    http://www.snorkl.tv/dev/bubbles/bubbles.html

     

    What's happening there is:

      500 bubbles are being created
      Each bubble is placed in a timelinemax with a tween for vertical movement and a tween for horizontal movement
      The parameters of both tweens are randomized a few different ways.
      Each bubble's timelinemax container is then nested inside a main timelinemax

     

    This allows you to create a particle system that can:

      have its speed adjusted on the fly
      be played in reverse
      be repeated any number of times
      and more.

     

    I wrote this code very late at night and was experimenting and learning a lot along the way. It's my first time doing anything like this so it is pretty ugly

     

    import com.greensock.*;
import com.greensock.easing.*;

var tl:TimelineMax=new TimelineMax({paused:true, onComplete:done});


function createBubble() {
//create a bubble (attach symbol in library with Class Bubble)
var bubble:Bubble = new Bubble();
bubble.y=380;
bubble.x=randomRange(25,610);
bubble.alpha=0;
bubble.visible=false;

addChild(bubble);


//how much wiggling / zig zagging
var wiggle:Number=randomRange(25,50);
//zig or zag?
wiggle = randomRange(0,1) > .5 ? -wiggle : wiggle;
//how fast and big
var speed:Number=randomRange(.2,3);

       //create timeline for each bubble
var nestedTl:TimelineMax = new TimelineMax();
//fade and grow
nestedTl.insert(TweenMax.to(bubble, .5, {autoAlpha:randomRange(.5,1), scaleX:speed, scaleY:speed}));
//go up
nestedTl.insert(TweenMax.to(bubble,speed, {y:-40, ease:Quad.easeIn}));
//zig zag by making duration of zig 25% of vertical speed and repeating random number of times between 1 and 3.. i think
nestedTl.insert(TweenMax.to(bubble, speed*.25, {x:String(wiggle), repeat:Math.floor(randomRange(1,4)), yoyo:true, ease:Linear.easeNone}));

//append new timeline very close to when the previous one started
tl.append(nestedTl, -speed*.95);


}

stage.addEventListener(MouseEvent.CLICK, go);

function go(e:MouseEvent):void {
//click to begin
TweenMax.to(clicker, .5, {alpha:0});
tl.currentProgress=0;
tl.play();
}


function done() {
trace("done");
TweenMax.to(clicker, .5, {alpha:1});
}

function randomRange(min:Number, max:Number):Number {
return min + (Math.random() * (max - min));
}


for (var count:Number = 0; count	createBubble();
}

     

    I have attached CS4 source files if you want to play around with it

     

    I will most likely do an intro to particle systems with timelinemax on snorkl.tv soon with a much simpler example, thanks for the inspiration.

     

     

    Carl

    allTo - Getting attributes from the currently Tweened Obj

    in GSAP (Flash)

    Posted

    Hello Neuralism,

     

    Take a look at this:

     

    import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.TweenEvent;


var flashLetters:Array = new Array(
						  f_mc,
						  l_mc,
						  a_mc,
						  s_mc,
						  h_mc
						 );

TweenMax.allTo(flashLetters, 1, {rotationX:90,  onCompleteListener:myListener}, .05);

function myListener(event:TweenEvent):void {
   trace("completed tween of " + event.target.target.name);
TweenMax.to(event.target.target, 0, {alpha:0});


}

     

    So the allTo starts the staggered rotation of each mc.

    When each one completes, myListener knows exactly who each clip is via event.target.target.

    Right now each mc is getting its alpha set to 0 when its tween is done.

    You can grab any property of the currently tweened clip you want when that event fires.

     

    You can also use onStartListener, and onUpdateListener and others http://www.greensock.com/as/docs/tween/ ... enMax.html

     

    also, be sure to import com.greensock.events.TweenEvent as shown above.

    BezierPlugin

    in GSAP (Flash)

    Posted

    YO Seasonss,

     

    Good news. I just read another thread in this board and Jack had a great tip on easing a segment of a TimelineMax.

     

    You can use my technique AND use easing!

     

    import com.greensock.*; 
import com.greensock.easing.*;

var tl:TimelineMax = new TimelineMax({paused:true});

tl.insert(TweenMax.to(floater_mc, 2, {bezierThrough:[{x:400, y:300}, {x:700, y:150}], orientToBezier:true, ease:Linear.easeNone}))

btn1.addEventListener(MouseEvent.CLICK, goBtn1);
function goBtn1(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:0, ease:Bounce.easeOut});
}

btn2.addEventListener(MouseEvent.CLICK, goBtn2);
function goBtn2(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.25, ease:Bounce.easeOut});
}

btn3.addEventListener(MouseEvent.CLICK, goBtn3);
function goBtn3(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.5, ease:Bounce.easeOut});
}

btn4.addEventListener(MouseEvent.CLICK, goBtn4);
function goBtn4(e:MouseEvent):void{
TweenLite.to(tl, 2, {currentTime:tl.duration*.75, ease:Bounce.easeOut});
}

btn5.addEventListener(MouseEvent.CLICK, goBtn5);
function goBtn5(e:MouseEvent):void{
//tl.tweenTo(tl.duration);
TweenLite.to(tl, 2, {currentTime:tl.duration, ease:Bounce.easeOut});
}

     

    New example:

    http://snorkl.tv/dev/bezier/bezierExample2.html

    How can I reverse same action?

    in GSAP (Flash)

    Posted

    reverse() will play the tween backwards from where ever the tween is currently as demonstrated by my previous example.

    I am not so sure what

     

    myTween.reverse(TweenPoint);

     

    is expected to do.

     

    did you try just myTween.reverse() ?

     

     

     

    reverse is only equipped to accept a boolean argument of forceResume, as per the documentation:

     

    reverse () method

    public function reverse(forceResume:Boolean = true):void

    Reverses smoothly, adjusting the startTime to avoid any skipping. After being reversed, it will play backwards, exactly opposite from its forward orientation, meaning that, for example, a tween's easing equation will appear reversed as well. If a tween/timeline plays for 2 seconds and gets reversed, it will play for another 2 seconds to return to the beginning.

     

    Parameters

    forceResume:Boolean (default = true) — If true, it will resume() immediately upon reversing. Otherwise its paused state will remain unchanged.

     

    I also see that whether or not the tween plays is dependent on the boolean value of Dir. if the tween has not yet played, I don't think reverse is going to do anything.

    It seems the most recent code example is a bit more advanced than the original question, so I apologize if I'm not totally equipped to give a real good answer.

     

     

    as for your second question, I believe that once a tween is built, it is built. If you want it to do something different you will have to re-create it.

    I could be wrong.

     

    In general, if you want to have more control over tweens, look into TimelineLite/Max. There are an abundance of methods for controlling complex animation.

     

    Being that it appears that you want to control a tween between various points on a bezier curve, the answer and example that I provided in this discussion: viewtopic.php?f=1&t=3969#p15718

    may be of some tangential use.

     

    I truly hope this may be of some help and you are able to find a solution that suits your needs.

     

    Carl

    How can I reverse same action?

    in GSAP (Flash)

    Posted

    reverse() will play a tween backwards.

     

    var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410});

someButton.addEventListener(MouseEvent.CLICK, reverseIt)

function reverseIt(e:MouseEvent):void{
FooterTween.reverse();
}

     

    i imagine you could also call an onComplete function that uses reverse as well... but that would give you the same things as yoyo, no?

    How can I bring external swf file on form ater 1 minute?

    in GSAP (Flash)

    Posted

    There is a lot of information available on loading external assets.

     

    after reading the link I suggested above, please read and watch:

    http://www.greensock.com/loadermax-tips/

    http://www.greensock.com/loadermax-video/

     

    http://www.greensock.com/as/docs/tween/ ... oader.html

    (see the section AS3 Code Example)

     

    loaderMax is well suited to load a series of external assets, pause the loading of those assets and unLoad the assets when they are no longer needed.

    I would start with understanding how to load a single asset with swfLoader, then experiment with loaderMax and creating a queue.

     

    Once you have a queue that loads a series of assets successfully, you could have a onChildComplete function that pauses the queue, waits 30 seconds, and then resumes the queue.

     

    The resources above are a great place to start.

     

    Once you get you attempt to get a loaderMax queue, you may find some additional invaluable resources in the loaderMax forum: viewforum.php?f=6

     

    Carl

    Calculating a property of a always changing one.

    in GSAP (Flash)

    Posted

    your code:

     

    TweenLite.to(myMC,1,{x:500,rotation:myMc.x * 0.5});

     

    is basing its END rotation off of the x valye of myMC when the tween starts.

    Let's say you are starting at an x of 0, your end rotation will be 0*0.5 which will be 0.

     

    I would suggest 2 things to try:

     

    1: since you know the end x value is going to be 500 just use that value when you provide the end rotation:

    TweenLite.to(myMC,1,{x:500,rotation:500 * 0.5});

     

    2: you can apply your rotation calculation every time the tween is updated

    TweenLite.to(myMC,1,{x:500, onUpdate:calculateRotation});

function calculateRotation(){
myMc.rotation = myMyc.x *.5;
}

     

    both methods will most likely give you the same end result.

    How can I bring external swf file on form ater 1 minute?

    in GSAP (Flash)

    Posted

    assuming the problem is with waiting a minute and not loading the swf, you can use TweenLite.delayedCall()

     

    delayed call allows you to set a delay in seconds and also specify what function to run.

     

    you could use it like this:

    TweenLite.delayedCall(60, loadSwf)

function loadSwf(){
trace("time to load the swf");
//add loaderMax code here to load swf
}

     

    if you need to learn about loading external content read this: http://www.greensock.com/loadermax/

    tween by round values

    in GSAP (Flash)

    Posted

    Yeah, that can be done. But just to clarify for others, you are going to be tweening a numeric variable / property that will displayed in a textfield.

     

    here is some sample code that will do that for you:

     

    
import com.greensock.*;
import com.greensock.easing.*;

var score:Number = 0; //start value
var targetScore:Number = 20; //end value

TweenLite.to(this, 1, {score:targetScore, onUpdate:showScore, ease:Linear.easeNone});

function showScore(){
trace(score);
score_mc.score_txt.text = int(score); //you could also use Math.round()
}

     

     

     

    basically you can tween any property, in this case score just like you would tween the alpha of a movieclip.

    In order to visualize the change in value of the score property, you use an onUpdate callback to round your number and then place it in a textfield.

     

    here is a video and source files for more explanation:

    http://www.snorkl.tv/2010/09/how-to-tween-a-variable-with-flash-and-tweenlite/

     

    here is a good reference for rounding to certain decimal places if you ever need it:

    http://kb2.adobe.com/cps/155/tn_15542.html

     

    Once you understand the basic concept check out the roundProps plugin for tweenlite/max in the plugin explorer:

    http://www.greensock.com/tweenmax/

    if using tweenMax, the code above could look like this:

    TweenMax.to(this, 1, {score:targetScore, roundProps:["score"], onUpdate:showScore, ease:Linear.easeNone });

     

    AND you wouldn't have to use int() or round() in the onUpdate function.

    If using TweenLite, the roundProps plugin would have to be activated

     

    import com.greensock.plugins.*;
TweenPlugin.activate([RoundPropsPlugin]);

387
388
389
Page 388 of 389  
×
×
  • Create New...