AS movement from a to b to c with pause in between?

  • antnoyce
  • Newbie
  • Newbie
  • antnoyce
  • Posts: 5

Post 3+ Months Ago

I am using some actionscript to move a masked movieclip around the stage to a specific position "onrelease" of a button, which all works really well, the code is attached to a movieclip and it starts something like this:

Code: [ Select ]
onClipEvent (load) {
_x = 0;
_y = 0;
div = 5;
}
onClipEvent (enterFrame) {
_x += (endX-_x)/div;
_y += (endY-_y)/div;

_root.home.onRelease = function() {
endX = 0;
endY = 0;
};
_root.works.onRelease = function() {
endX = -250;
endY = 0;
}
  1. onClipEvent (load) {
  2. _x = 0;
  3. _y = 0;
  4. div = 5;
  5. }
  6. onClipEvent (enterFrame) {
  7. _x += (endX-_x)/div;
  8. _y += (endY-_y)/div;
  9. _root.home.onRelease = function() {
  10. endX = 0;
  11. endY = 0;
  12. };
  13. _root.works.onRelease = function() {
  14. endX = -250;
  15. endY = 0;
  16. }


Anyone know how i can achieve this type of movement without a button action ie: after mc loads it will move the movieclip every 5 seconds or so to a specific position (6 in total) with an easing effect.

New to actionscript, so is there an easy way? Iam using MX

Many thanks
Ant
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Sledgehammer
  • Genius
  • User avatar
  • Posts: 13496
  • Loc: Florida

Post 3+ Months Ago

Here's one way,
Code: [ Select ]
/*Easing function, takes param: [{x:#, y:#}, {x:#, y:#}] |param:speed */
MovieClip.prototype.easeXY = function(xy, speed) {
  this.onEnterFrame = function() {
   this.xV = Math.floor(xy.x-this._x);
   this.yV = Math.floor(xy.y-this._y);
   this.xV ? this._x += this.xV/speed : this._x=xy.x;
   this.yV ? this._y += this.yV/speed : this._y=xy.y;
     (!this.xV && !this.yV) ? delete this.onEnterFrame : null;
  }
}

/*Calls the ease function with the next XY obj, then moves that obj to the back of the array for looping.*/
function step(mC){
    var leftFoot = mC.rightFoot.shift();
    mC.easeXY(leftFoot,mC.spd);
    mC.rightFoot.push(leftFoot);
}

/*Function that is applied directly to the MC, steplist is the array of XY objs that the ease prototype requires, seconds before each interval, and easeing speed */
MovieClip.prototype.dance = function(stepList, secs, speed){
    this.rightFoot = stepList;
        this.spd = speed;
    this.danceInt = setInterval(step,secs*1000, this);
}

//Example use
studentMC.dance([{x:10, y:30},{x:55, y:123},{x:182, y:12},{x:29, y:51},{x:173, y:82},{x:94, y:101}], 2, 10);
  1. /*Easing function, takes param: [{x:#, y:#}, {x:#, y:#}] |param:speed */
  2. MovieClip.prototype.easeXY = function(xy, speed) {
  3.   this.onEnterFrame = function() {
  4.    this.xV = Math.floor(xy.x-this._x);
  5.    this.yV = Math.floor(xy.y-this._y);
  6.    this.xV ? this._x += this.xV/speed : this._x=xy.x;
  7.    this.yV ? this._y += this.yV/speed : this._y=xy.y;
  8.      (!this.xV && !this.yV) ? delete this.onEnterFrame : null;
  9.   }
  10. }
  11. /*Calls the ease function with the next XY obj, then moves that obj to the back of the array for looping.*/
  12. function step(mC){
  13.     var leftFoot = mC.rightFoot.shift();
  14.     mC.easeXY(leftFoot,mC.spd);
  15.     mC.rightFoot.push(leftFoot);
  16. }
  17. /*Function that is applied directly to the MC, steplist is the array of XY objs that the ease prototype requires, seconds before each interval, and easeing speed */
  18. MovieClip.prototype.dance = function(stepList, secs, speed){
  19.     this.rightFoot = stepList;
  20.         this.spd = speed;
  21.     this.danceInt = setInterval(step,secs*1000, this);
  22. }
  23. //Example use
  24. studentMC.dance([{x:10, y:30},{x:55, y:123},{x:182, y:12},{x:29, y:51},{x:173, y:82},{x:94, y:101}], 2, 10);
  • antnoyce
  • Newbie
  • Newbie
  • antnoyce
  • Posts: 5

Post 3+ Months Ago

Thanks Joebert,

Would this adapt to repositioning just one move clip to 6 different x y locations?. The movie clip is masked so you only see 1 6th of it at any time.

It is actually 6 circles with text in, 3 across and 2 deep that i want to move to reveal the text, pause, then move to the next one and so on.

Ant
  • joebert
  • Sledgehammer
  • Genius
  • User avatar
  • Posts: 13496
  • Loc: Florida

Post 3+ Months Ago

This can move any number of MCs any number of steps.

calling onRelease could go one of a few ways,
on an MC wrote:
on(release){
mcToMove.dance(....
}

on a timeline wrote:
buttonMC.onRelease = function(){
mcToMove.dance(....
}


It only needs to be called once, the function adjusts the position array & recalls itself every X seconds.

Breaking down the params, if you want 6 different position combinations the first param of that funciton will be an array of 6 x:y: objects.
a position object wrote:
{x:123, y:456}

So for 6 positions that function call will start like so,
Code: [ Select ]
mcToMove.dance([{x:10, y:30}, {x:55, y:123}, {x:182, y:12}, {x:29, y:51}, {x:173, y:82}, {x:94, y:101}].....


The next param is how many seconds to wait before moving to the next position, to have 6 different positions & change them every 5 seconds we have,
Code: [ Select ]
mcToMove.dance([{x:10, y:30}, {x:55, y:123}, {x:182, y:12}, {x:29, y:51}, {x:173, y:82}, {x:94, y:101}], 5.....

The last param is for tweeking the easing speed of the mcToMove, you'll have to play with that. Basically lower numbers for that param will move the mcToMove faster.

It is setup to loop through the position array forever as of now, it uses a position then pushes that position to the end of the list.

If you want it to be a one-runner & only run untill it reaches the end of the position list it will need an adjustment to the step function,
old step wrote:
function step(mC){
var leftFoot = mC.rightFoot.shift();
mC.easeXY(leftFoot,mC.spd);
mC.rightFoot.push(leftFoot);
}

new step wrote:
function step(mC){
var leftFoot = mC.rightFoot.shift();
mC.easeXY(leftFoot,mC.spd);
if(mC.rightFoot.length<1){clearInterval(mC.danceInt);}
}


Now a finished call to the function from a timeline,
Code: [ Select ]
button.onRelease = function(){
 mcToMove.dance([{x:10, y:30}, {x:55, y:123}, {x:182, y:12}, {x:29, y:51}, {x:173, y:82}, {x:94, y:101}], 5, 10);
}
  1. button.onRelease = function(){
  2.  mcToMove.dance([{x:10, y:30}, {x:55, y:123}, {x:182, y:12}, {x:29, y:51}, {x:173, y:82}, {x:94, y:101}], 5, 10);
  3. }
  • antnoyce
  • Newbie
  • Newbie
  • antnoyce
  • Posts: 5

Post 3+ Months Ago

Thanks again Joebert

Think that all makes sense, will give it a try
  • antnoyce
  • Newbie
  • Newbie
  • antnoyce
  • Posts: 5

Post 3+ Months Ago

Sorry said I was new to actionscript.

Where should i attach each part of the script to? Tried and tried but keep getting syntax errors. Should probably just tween the animation and be done with it.

Ant
  • joebert
  • Sledgehammer
  • Genius
  • User avatar
  • Posts: 13496
  • Loc: Florida

Post 3+ Months Ago

Example
Example FLA (mx)
  • antnoyce
  • Newbie
  • Newbie
  • antnoyce
  • Posts: 5

Post 3+ Months Ago

It looks so easy now.

Thank you very much!
  • tlflow
  • Born
  • Born
  • tlflow
  • Posts: 1
  • Loc: Charlotte NC

Post 3+ Months Ago

Im using the code I found in this post for a news ticker Im working on. So far I'm scrolling a movieclip that contains 6 images lined up horizontally (first image called "1" and last one called "6"). Then I duplicate the movie clip so I can run the duplicate through my mask while I reset the position of the original. Everything seems to work fine, but using this code "as is" it resets the ticker instead of doing a "true loop". In other words, instead of easing back to the 1st position, I want it to loop so that you wouldnt be able to tell when the last image (6) ends and the first image (1) begins.

Code: [ Select ]
// Load mask
_root.createEmptyMovieClip("newsmask",2);
loadMovie("test-newsticker-mask.swf", "newsmask");
newsmask._x = 67 ;
newsmask._y = 10 ;

MovieClip.prototype.easeXY = function(xy, speed) {
  this.onEnterFrame = function() {
   this.xV = Math.floor(xy.x-this._x);
   this.yV = Math.floor(xy.y-this._y);
   this.xV ? this._x += this.xV/speed : this._x=xy.x;
   this.yV ? this._y += this.yV/speed : this._y=xy.y;
     (!this.xV && !this.yV) ? delete this.onEnterFrame : null;
  }
}
MovieClip.prototype.dance = function(stepList, secs){
    this.rightFoot = stepList;
    this.danceInt = setInterval(step,secs*1000, this);
}
function step(mC){
    var leftFoot = mC.rightFoot.shift();
    mC.easeXY(leftFoot,10);
    mC.rightFoot.push(leftFoot);
}

// Add Duplicate Movie (menu_mc) for looping purposes

    for (addclip=0; addclip<1; addclip++) {
    duplicateMovieClip ("boxes_mc", "boxes_mc"+addclip, addclip);
    }

// Code for MovieClip

onClipEvent(load){
    
    _y = 82;
    
}

onClipEvent(enterFrame){
    
    // attach duplicated movie to initial movie to move with movie
        _root.boxes_mc0._y = this._y + 190;
        
    // scroll news items    
    this.dance([{x:200, y:82},{x:200, y:50},{x:200, y:18},{x:200, y:-13},{x:200, y:-45},{x:200, y:-77},{x:200, y:-109},{x:200, y:-141},{x:200, y:-173},{x:200, y:-205},{x:200, y:-237}], 4);
}
  1. // Load mask
  2. _root.createEmptyMovieClip("newsmask",2);
  3. loadMovie("test-newsticker-mask.swf", "newsmask");
  4. newsmask._x = 67 ;
  5. newsmask._y = 10 ;
  6. MovieClip.prototype.easeXY = function(xy, speed) {
  7.   this.onEnterFrame = function() {
  8.    this.xV = Math.floor(xy.x-this._x);
  9.    this.yV = Math.floor(xy.y-this._y);
  10.    this.xV ? this._x += this.xV/speed : this._x=xy.x;
  11.    this.yV ? this._y += this.yV/speed : this._y=xy.y;
  12.      (!this.xV && !this.yV) ? delete this.onEnterFrame : null;
  13.   }
  14. }
  15. MovieClip.prototype.dance = function(stepList, secs){
  16.     this.rightFoot = stepList;
  17.     this.danceInt = setInterval(step,secs*1000, this);
  18. }
  19. function step(mC){
  20.     var leftFoot = mC.rightFoot.shift();
  21.     mC.easeXY(leftFoot,10);
  22.     mC.rightFoot.push(leftFoot);
  23. }
  24. // Add Duplicate Movie (menu_mc) for looping purposes
  25.     for (addclip=0; addclip<1; addclip++) {
  26.     duplicateMovieClip ("boxes_mc", "boxes_mc"+addclip, addclip);
  27.     }
  28. // Code for MovieClip
  29. onClipEvent(load){
  30.     
  31.     _y = 82;
  32.     
  33. }
  34. onClipEvent(enterFrame){
  35.     
  36.     // attach duplicated movie to initial movie to move with movie
  37.         _root.boxes_mc0._y = this._y + 190;
  38.         
  39.     // scroll news items    
  40.     this.dance([{x:200, y:82},{x:200, y:50},{x:200, y:18},{x:200, y:-13},{x:200, y:-45},{x:200, y:-77},{x:200, y:-109},{x:200, y:-141},{x:200, y:-173},{x:200, y:-205},{x:200, y:-237}], 4);
  41. }


Any suggestions????

Thanks,

tlflow

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 15 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.