dcsimg
A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Almost there, now I'm stuck: Drawing and unfolding box

  1. #1
    Flash for kids
    Join Date
    Jul 2002
    Location
    Netherlands
    Posts
    225

    Drawing and unfolding box

    I'm trying to find out how people do that certain effect, like on
    http://www.cruciallimit.com/chapterOne/index.html

    You know it, a box unfolds, with elasticity on one side.

    Now, I'm almost there, on my own .
    I have to two fla's, both holding one of the effects, working good.
    However, if I try to combine the two something goes wrong and I can't find out why. So now I do need some help.

    here's the unfolding box, in good working order:

    the code below, but without the bold parts.

    So, I tried to put the elasticity in, the bold parts were added:

    Code:
    nhndlp = 4 // How many handelpoints ont the stage ?
    boxwidth = 300
    boxheight = 300
    speed = 10
    Xstarthndlp1 = 100; Ystarthndlp1 = 100;
    Xstarthndlp2 = 100; Ystarthndlp2 = 100;
    Xstarthndlp3 = 100; Ystarthndlp3 = 100;
    Xstarthndlp4 = 100; Ystarthndlp4 = 100;
    Xstartctlp1 = 100; Ystartctlp1 = 100;
    
    var acceleration = 10;
    var friction = 0.95;
    var targetX = 400
    var targetY = 400
    
    
    
    // put drawpoints on the stage
    drawpoint = function () {
    for (M=1; M<=nhndlp; M++) {
    		_root.attachMovie("htlp", "hndlp"+M, M+50);
    		_root.attachMovie("ctlp", "ctlp1", 100 );
    		} 
    		hndlp1._x= Xstarthndlp1; hndlp1._y= Ystarthndlp1;
    		hndlp2._x= Xstarthndlp2; hndlp2._y= Ystarthndlp2;
    		hndlp3._x= Xstarthndlp3; hndlp3._y= Ystarthndlp3;
    		hndlp4._x= Xstarthndlp4; hndlp4._y= Ystarthndlp4;
    		ctlp1._x = Xstartctlp1; ctlp1._y = Ystartctlp1;
    		clearInterval(firstdrawpointsID);
    		
    }
    
    firstdrawpointsID = setInterval(drawpoint, 50);
    
    _root.createEmptyMovieClip("box", 1);
    
    drawbox = function (){
    	box.clear();
    	box.lineStyle(2, 0xFFF2F2);
    	box.moveTo(hndlp1._x, hndlp1._y);
    	box.lineTo(hndlp2._x, hndlp2._y);
    	box.lineTo(hndlp3._x, hndlp3._y);
    	box.curveTo(ctlp1._x, ctlp1._y, hndlp4._x, hndlp4._y);
    	//  box.lineTo(hndlp4._x, hndlp4._y);
    	box.lineTo(hndlp1._x, hndlp1._y);
    	clearInterval(firstdrawboxID);
    }
    firstdrawboxID = setInterval(drawbox, 50);
    
    
    unfold1 = function (){
    	if (hndlp2._x <= Xstarthndlp1 + boxwidth){
    	hndlp2._x += speed
    	hndlp3._x += speed
    	ctlp1._x += speed/2
    	drawbox();
    	}
    }
    unfold2 = function (){
    	if (hndlp2._x > Xstarthndlp1 + boxwidth -1){
    		if (hndlp3._y <= Ystarthndlp1 + boxheight){
    			hndlp3._y += speed
    			hndlp4._y += speed
    			elastic(ctlp1);
    			drawbox();
    			}
    		clearInterval(unfold1ID);
    		}
    		if (hndlp4._x > Ystarthndlp4 + boxheight -1){
    		clearInterval(unfold2ID);
    		}
    }
    
    elastic = function(clip) {
    	var xdif = targetX-clip._x;
    	var ydif = targetY-clip._y;
    	clip.xspeed += xdif/clip._parent.acceleration;
    	clip.yspeed += ydif/clip._parent.acceleration; <<<<<<<<<<<
    	clip.xspeed *= clip._parent.friction;
    	clip.yspeed *= clip._parent.friction;
    	clip._x += clip.xspeed;
    	clip._y += clip.yspeed;
    	checkDistance(clip);
    };
    
    checkDistance = function(clip) {
    	if (Math.abs(targetX-clip._x)<0.2 && Math.abs(targetY-clip._y)<0.2) {
    		clip._x = targetX;
    		clip._y = targetY;
    		delete elastic;
    		trace ("stopped")
    	}
    };
    
    unfold1ID = setInterval(unfold1, 10);
    unfold2ID = setInterval(unfold2, 10);
    However, the control point doesn't move. But, the bold part of the code works perfectly on it's own.
    I've narrowed the problem down to:
    - see the <<<<<<< ? if I take away the + the ctlp (controlpoint) does move, but offcourse without the acceleration. If I leave the + in it the controlpoint won't move at all.

    I have tried many options, but this is as far as I can get.

    If you see the problem, please !!

    I've attached the file, to make helping easier (and other newbies might find it interesting)
    (it is in MX2004-format)
    box05.fla: combined, now it doesn't work.

    BTW, I'm also interested if I followed the right path, if this is how people make this effect. If there is an another (easier) way, I'd love to hear of it.

    Thanks !!
    Attached Files Attached Files
    Last edited by Papermouse; 01-23-2004 at 05:35 PM.
    Your help is as always received in great gratitude :-D. Without the help of you guys here I couldn't do these projects !

    ICQ: 4542402 (put "flash" in auth. request) Newbies: let's help eachother out and create a "ICQ-ring" for those quick and easy-to-answer "why isn't this working, I thoughed I did it right?"

  2. #2
    I'm very interested in this effect as well if anyone can help out...
    |Chris
    |chris@ascendvisual.com

  3. #3
    ActionScript Insomniac
    Join Date
    Jan 2003
    Location
    43d03.21'N, 89d23.65'W
    Posts
    1,173

    Initialization

    In the elastic function, you need to initialize yspeed to 0.

    Cool effect!


  4. #4
    Flash for kids
    Join Date
    Jul 2002
    Location
    Netherlands
    Posts
    225
    me dumn, me dunno understand ?

    (Jarjar for: Please explain?)

    Papermouse
    Your help is as always received in great gratitude :-D. Without the help of you guys here I couldn't do these projects !

    ICQ: 4542402 (put "flash" in auth. request) Newbies: let's help eachother out and create a "ICQ-ring" for those quick and easy-to-answer "why isn't this working, I thoughed I did it right?"

  5. #5
    ActionScript Insomniac
    Join Date
    Jan 2003
    Location
    43d03.21'N, 89d23.65'W
    Posts
    1,173
    In the function elastic, your line
    Code:
    clip.yspeed += ydif/clip._parent.acceleration;
    doesn't work, because clip.yspeed has never been given a value. Hence adding something to it ( which is what += does ) doesn't produce a number. You need to "initialize" this variable (i.e., give it an initial value).

    The function elastic() seems to be called on clip ctlp1.

    Try inserting the line
    Code:
    ctlp1.yspeed = 0;
    right after you attach the movie clip ctlp1.

    I'm not sure the result will be exactly what you are after. You may still need to mess with friction and acceleration. Also, reexamine the checkDistance() function where you delete the eleastic function. You probably want to wait until the control point has stopped bouncing around before you do this.

  6. #6
    ActionScript Insomniac
    Join Date
    Jan 2003
    Location
    43d03.21'N, 89d23.65'W
    Posts
    1,173
    Actually, I see now that checkDistance isn't really the issue. You need to look at when you use clearInterval to stop doing unfold2. You need to wait long enough for the control point to reach its final position.

  7. #7
    Flash for kids
    Join Date
    Jul 2002
    Location
    Netherlands
    Posts
    225
    Thanks mkantor,

    You have put me close enough to the solution to find it.
    besides the 'yspeed=0 thing' the placing of the elastic-funtion inside unfold2 appeared to be the main problem.

    So now it is fixed, or at least almost.

    wrting this down, I got an idea to solve the last problem, which is now solved. Hehe.

    For anyone reading this: I did this project as a tutorial for myself, and because I couldn't stand the fact I couldn't find an example anywhere.
    So here is for everyone to enjoy it. If you can improve this (and I bet there are better ways of doing this ), in any way, share it with us and reply to this thread.

    Enjoy,

    Papermouse

    (the code is in the fla )
    MX2004 version:
    Attached Files Attached Files
    Last edited by Papermouse; 01-23-2004 at 05:34 PM.

  8. #8
    Flash for kids
    Join Date
    Jul 2002
    Location
    Netherlands
    Posts
    225
    MX version:
    Attached Files Attached Files

  9. #9
    ActionScript Insomniac
    Join Date
    Jan 2003
    Location
    43d03.21'N, 89d23.65'W
    Posts
    1,173
    Very nice. As I said before, a cool effect.

    There's still a problem with the code at the end of unfold2, which does clearinterval to stop repeating unfold2. In your current version, this never executes, due to an accidental interchange of ._x and ._y.

    I think that the correct criterion to stop has to be that the control point (a) is at its final position, and (b) has velocity zero. Otherwise, fixing the x/y error will cause your animation to cut off before the box reaches its final shape.

  10. #10
    Flash for kids
    Join Date
    Jul 2002
    Location
    Netherlands
    Posts
    225
    Hi Mkantor,

    Like I said:

    If you can improve this (and I bet there are better ways of doing this ), in any way, share it with us and reply to this thread.


    Papermouse

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center