Jump to content
Search Community

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

dimitri_c test
Moderator Tag

Recommended Posts

Hello -

 

I was wondering if it was possible (with TweenMax or TweenLite) to move a MClip from a defined "point A" to a defined "point B" (precisely), but this with a "snake/bubble" movement.

If yes… Simple question -> How? :oops:

NB. I'll have to do that for approximatively 75 MClips!

 

Thank you, have a nice evening…

 

 

 

 

- Dimitri

Link to comment
Share on other sites

Hello "greensock" -

 

Thank so much for your reply.

Now the effect (that I saw via the link) is a bit really "sharp".

Is there any way to smoothen the the movement?

 

Speaking about "bubbles"… They go upwards in a slow swinging motion. A bubble "never" goes down, it only goes up…

Can we change the parameters to achieve such a movement?

 

If yes, I'll for sure make a donation via Paypal®… :-)

 

 

Have a nice day…

 

 

 

 

 

- Dimitri

Link to comment
Share on other sites

Hello Greensock -

 

I downloaded and installed "customease", but your previous effect was a better result, I just need some smoothness (roundness) in the movement…

Is it possible with "roughease"?

 

NB. I make a donation :-)

 

 

Thank you…

 

 

 

 

- Dimitri

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Good evening Carl -

 

Waouwww… Thank you so much…

Now, sorryyyy… I still have one question:

Could we give a final destiny (x,y) for each bubbles? I mean final precise coordinates for each bubble (and that they stay on their place (it's the "point B" on my attachment, at the beginning of this topic).

 

 

Thank you again, have a nice day…

 

 

 

 

- Dimitri

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...