Jump to content
Search Community

Carl last won the day on December 24 2023

Carl had the most liked content!

Carl

Moderators

  • Posts

    9,824

  • Joined

  • Last visited

  • Days Won

    546

 Content Type 

Posts posted by Carl

    Tween a drag and drop

    in GSAP (Flash)

    Posted

    hello jrojas,

     

    I don't think there is an out of the box greensock solution for this.

     

    Your example shows that the image is not dropped but thrown.

    What is happening theoretically is that the speed of your mouse along the x and y axis is constantly being determined, when you release the mouse that speed is used used to propel the image in the proper direction and friction slows it down.

     

    a partial example of the code involved is available here:

    http://efreedom.com/Question/1-1941989/ ... op-Inertia

     

    the physics2d plugin might come in handy. its a club greensock benefit and you can see its power in the plugin explorer:

    http://www.greensock.com/tweenlite/

     

    regardless of the solution you use, you are going to have to determine the direction and speed of the mouse movement. to determine how hard the object is thrown and in which direction.

    This is often achieved by continuously sampling the current mouse position (on an EnterFrame or MouseMove event) compared to the previous mouse position (both mouseY mouseX).

     

     

    Try googling:

    drag and throw

    smooth drag

    drag and drop easing

    drag and drop inertia

     

    unfortunately it isn't a quick answer.

     

    Carl

    BezierPlugin

    in GSAP (Flash)

    Posted

    hey seasonss,

     

    That is a very intriguing effect you are going for.

    I don't have the best answer, but hopefully this simplified approach might spark some ideas that you can implement.

     

    check this out:

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

     

    This is my first time working with the bezier plugin so I wanted to keep it real simple.

    Basically there is ONE tween in a TimelineMax instance.

    Each button is set up to have the TimelineMax play to 25% intervals along the timeline.

    btn 1 goes to 0%

    btn 2 goes to 25%

    btn 3 goes to 75%

    btn4 goes to 100%

     

    here is the code:

     

    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{
tl.tweenTo(0); //tween to beginning of timeline
}

btn2.addEventListener(MouseEvent.CLICK, goBtn2);
function goBtn2(e:MouseEvent):void{
tl.tweenTo(tl.duration *.25); // tween to 25% the duration of the timeline
}

btn3.addEventListener(MouseEvent.CLICK, goBtn3);
function goBtn3(e:MouseEvent):void{
tl.tweenTo(tl.duration *.5); //
}

btn4.addEventListener(MouseEvent.CLICK, goBtn4);
function goBtn4(e:MouseEvent):void{
tl.tweenTo(tl.duration *.75);
}

btn5.addEventListener(MouseEvent.CLICK, goBtn5);
function goBtn5(e:MouseEvent):void{
tl.tweenTo(tl.duration);
}

     

    Benefits

    once you figure out your bezier control points its really easy to get working. the amount of code is ridiculously insignificant.

     

    Drawbacks

    does not support easing

     

    since there is constant speed, there is a direct 1:1 relationship between amount of time elapsed and amount of distance travelled. this makes it real easy to figure out what point in time each button should tween to.

     

    Another approach might be to make a movie clip with the triangle tweening along a motion guide. you could then add framelabels to the movie clip and use tweenlite to tween to various frames on that timeline. you would gain the ability to use easing.

    your buttons would call functions that would do things like:

    TweenLite.to(nav_mc, 1, {frameLabel:"tutorials", ease:Cubic.easeOut});

    TweenLite.to(nav_mc, 1, {frameLabel:"game", ease:Cubic.easeOut});

     

    hopefully one of these options suits you.

    let us know how it goes.

     

    Carl

    create TimelineLite objects with a for loop

    in GSAP (Flash)

    Posted

    There were a few syntax errors in there. The following code will not throw any errors and if you have movieclips called object1, and object2 on the stage. they will appear to grow once.

     

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

var   timeline1:TimelineLite;
var   timeline2:TimelineLite;
var   timeline3:TimelineLite;
var   timeline4:TimelineLite;
var   timeline5:TimelineLite;
var   timeline6:TimelineLite;
var   timeline7:TimelineLite;
var   timeline8:TimelineLite;

var timelineArray:Array;

timelineArray = new Array(timeline1,timeline2,timeline3,timeline4,timeline5,timeline6,timeline7,timeline8);

for(var i = 0; i myFunction(i);
}

function myFunction(number){
timelineArray[number] = new TimelineLite();
timelineArray[number].insertMultiple([
TweenMax.to(object1,1, {scaleY:2,ease:Back.easeOut}),
TweenMax.to(object2,1,{scaleX:2,ease:Back.easeOut})
], 0, TweenAlign.START, 0.3);
}

     

    What you are doing here is creating 8 timelines that all tell the same 2 objects to change the same property on each clip all at the same time.

     

    here are some of the thing i fixed:

     

    function myFunction(number){

    var number; doesn't do anything

    timelineArray[number]:TimelineLite kill that = new TimelineLite();

    timelineArray[number].insertMultiple([

    TweenMax.to(object1,1{scale there is no scale property, use scaleX and or scaleY :1,ease:Back.easeOut}),

    TweenMax.to(object2,1,{scale:1,ease:Back.easeOut}),

    ] hard bracket ] in the wrong place (see my code), 0, TweenAlign.START, 0.3);

    }

     

    It is a little tricky keeping track of the ()[] when using insertMultiple. But once you do it right a few times it comes natural.

    since you are using a loop, you could probably avoid declaring all the timelines at the top and manually inserting them into your array.

    Perhaps you can explain what you are trying to accomplish and someone can help you optimize your code.

     

    Keep at it.

     

    Carl

    Advanced Animation with TimelineMax

    in GSAP (Flash)

    Posted

    Hey Jamie,

     

    well I just couldn't let this rest...had to give it a shot.

     

    the finished product can be viewed here:

    http://www.snorkl.tv/dev/seriesBackAndForth/

     

    THE CODE:

     

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

//create TimelineMax instance and set to repeat infinitely
var timeline:TimelineMax = new TimelineMax({repeat:-1});

//speed vars
var inOutDuration:Number = .5;
var slideDuration:Number = 3;

//array of all clips 
//note: since clips are named chronologically they don't need to be an array, but its nice:)
//we could just loop through them by name "t" + i
var boxes_arr:Array=new Array(t1,t2,t3,t4,t5,t6);


//loop through each item in the array
for (var key:String in boxes_arr) {
//create reference to each individual clip
var mc:MovieClip=MovieClip(boxes_arr[key]);

//detect clips with index of 0,2,4,6...
//by checking if the current index divided by 2 has a reminder aka modulo operation
if ((Number(key)%2)==0) {
	trace(key + " even");
	//create left -> right sequence
	timeline.append(TweenMax.to(mc, 0, {x:-200, y:12, blurFilter:{blurX:20}}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:20, blurFilter:{blurX:0}, delay:.5}));
	timeline.append(TweenMax.to(mc, slideDuration, {x:440, ease:Linear.easeNone}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:660, blurFilter:{blurX:20}}));
} else {
	//create right -> left sequence
	timeline.append(TweenMax.to(mc, 0, {x:660, y:12, blurFilter:{blurX:20}}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:440, blurFilter:{blurX:0}, delay:.5}));
	timeline.append(TweenMax.to(mc, slideDuration, {x:20, ease:Linear.easeNone}));
	timeline.append(TweenMax.to(mc, inOutDuration, {x:-200, blurFilter:{blurX:20}}));
}

}

     

    Note the first append() in each sequence. I'm using this to initialize all the start values, instead of doing the .from() like you.

    I only took this approach as it allows me to have my movie clips arranged however I want, fully visible off-stage (see image below). Makes it real easy for myself and clients to select and edit symbols without having to have them all on top of each other in separate layers or whatever. No real difference in the way the swf runs.

    screen.png

     

    I axed my idea of making each sequence its own timeline as I didn't see any advantage in that. Perhaps if each sequence needed to yoyo or have callbacks added it would make sense.

     

    If you need any help deciphering the code just let me know. I'm really impressed with your ability to watch my vid and jump right in and try to build something like this. I can make videos til you turn blue, but unless you challenge yourself like this... its pointless. Great job! Honestly, it helped get my brain into gear this morning and revived my love for TimelineMax ! This was an excellent example of showing where TimelineMax really shines. Doing this on the flash timeline would have been a nightmare to setup or make global edits to.

     

    I regret that I'm still not quite seeing your point:

    "

    Well lets change things around a little, say you wanted the boxes to start their animation in a different order rather than starting left to right , you have then a similar problem as me. I suppose using the append method you would just change the order of the actionscript, but once they are in an array (for the sakes of keeping the code clean and only having to change the values once) therein lies the problem."

     

    to change the array I would do one of the following:

    edit the array by hand in code

    programmatically reverse the array : array.reverse()

     

    The array simply lets you dictate the exact order the clips are added to the timeline. Its up to us to put them in their in the desired order. Does this help? If i'm totally misunderstanding, let me know.

     

    I hope my code and examples help.

    I'll attach a zip of the all the source for you and anyone else.

     

    Carl

    Advanced Animation with TimelineMax

    in GSAP (Flash)

    Posted

    Hi Jamie,

     

    I gotta say I really appreciate the clarity of your question and the effort that went in to explaining a fairly complex issue.

    I've looked at your swfs (a huge help) and definitely know the results the solution should produce.

    There are a few ways to tackle this and I'll probably come up with a solution somewhere right between the best and worst;)

     

    I think where I'm headed with this is that each sequence will be converted to a new timeline with the following tweens:

    1:clip slides on screen quickly

    2:clip slides across screen a bit slower

    3:clip zips out

     

    then I will add all these sub timelines, to a main timeline.

     

    most likely I will put all your clips into one array. then i'll loop through the array and all the odd numbered clips will be placed in a timeline that handles left > right movement, and even numbered clips will move right > left.

     

    this is definitely a good exercise for me to get some real-world timelineMax experience!

     

    I'll let you know when this is done. Would love for it to be today, but can't promise.

     

    Best,

     

    Carl

    onComplete and for loops

    in GSAP (Flash)

    Posted

    oh snap. I didn't think of that.

    although by passing in the y property as a string "50", all icons will move 50pixels from where they are, so if you have a clever way of placing them initially 50 pixels away from where they are going too... ahhh probably won't get you away from the loop anyway. hmmm. (i'm just using 50 x pixels as an example).

     

    Well since you have a loop already in place, you can append all your tweens into a TimelineLite/Max instance and then at least when the timeline is done you can fire an onComplete function.

     

    as far as the amount of code needed it will probably be a touch more than your existing loop, but it may get you a few personal neatness points 8-)

    onComplete and for loops

    in GSAP (Flash)

    Posted

    Yeah, if you put all your icons in an array you can use TweenMax.allFrom or TweenMax.allTo like so:

     

    
var icons:Array = new Array(icon1, icon2, icon3);

TweenMax.allTo(icons, 1, {y:"50"}, 0, done);

function done(){
trace("done");
}

//0: delay / stagger between tweens running
//done: name of function to call when all tweens are complete

    Thanks and Quick Question

    in GSAP (Flash)

    Posted

    Hey Alaricoffir,

     

    TimelineMax instances start playing immediately. Since you tl instance has nothing in it is completes instantly.

     

    try this

     

    import com.greensock.TimelineMax;

     

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

    tl.insert(new TweenLite(movieClipInstanceName, 2, {alpha:0}));

     

    tl.play();

     

     

     

    function complete():void {

    trace('completed');

    }

     

    note the paused:true in the constructor. this tells the timeline not to play instantly.

    also note the addition on tweenlite instance and the tl.play() method... that gets it going.

     

    once you experiment with timelinemax a bit you will be in love.

     

    Carl

    some new tweenmax tutorials. hopefully they help you.

    in GSAP (Flash)

    Posted

    Jack,

     

    Wow. I'm totally grateful to you. I had no idea about the promotion / contest. The concept of YOU giving something to ME is difficult to comprehend. TweenMax has saved my butt on soooo many occasions.

     

    Just recently on a project I was dying to get my hands on the customEase classes as I needed something just slightly snappier than a Back.easeOut. I've always been really eager to dig into splitTextfield as well. I made something that works similarly for myself awhile ago but it isn't very flexible and I know it is complete garbage compared to what you have made. I look forward to getting into these premium features.

     

    When I started making Flash tutorials I wanted to focus on things that are easy to comprehend and help beginners add big value to their workflow and end results. Your tweening platform has so many little nuggets to explore that meet that criteria. Whenever I consider what to tutorialize, TweenMax is so much more fun to talk about than generic AS3. I will gladly keep churning them out.

     

    Again, thanks so much for allowing me to post here, your kind comments, and generous reward.

     

    Carl

    some new tweenmax tutorials. hopefully they help you.

    in GSAP (Flash)

    Posted

    Hey Guys and the Exalted Greensock,

     

    I've been using greensock code for quite awhile and wanted to share a few quick video tutorials I've done that highlight some awesome features of the platform.

    Hopefully these videos will get you excited about using this tool and open your eyes to the fact that its much more than just making things move from point A to B.

    I've gained so much from using this platform and from the flash community as a whole. Its time to give a little back:

     

    Random Color Tweens

    http://www.snorkl.tv/2010/08/flash-cs4-actionscript-3-0-and-tweenmax-random-tint-color-tween/

     

    How to Tween A Variable / What the heck is onUpdate for?

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

     

    Random Perpetual Motion with TweenMax

    http://www.snorkl.tv/2010/08/tweenmax-and-actionscript-random-perpetual-motion-tutorial/

     

    Easiest way to pause A Flash timeline for any amount of time without adding tons of frames

    http://www.snorkl.tv/2010/09/how-to-pause-a-flash-timeline-without-adding-frames-or-using-a-clunky-timer/

     

     

     

    Love,

     

    Carl

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