dcsimg
A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: Create fluent motion (CS3 & AS3)

  1. #1
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15

    Create fluent motion (CS3 & AS3)

    First of all, this is my first time working with flash, so I'm a beginner at flash. Today I created my first flash file, located here http://flash.knobbout.com/brick/

    As you can see, the motion of the ball and the slider is a bit jaggy, this is because I am increasing the x and y values by 8. If I lower this value the ball and slider will move too slow. How can I create a fluent motion (which is very common in flash movies) in my movie? Here is the source code (fps of movie is set to 30):

    Code:
    // Variables
    var slider_speed:int;
    var ball_speed:int;
    var ball_direction:Number;
    
    // Events
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keypressHandler);
    stage.addEventListener(Event.ENTER_FRAME, updateBall);
    
    // Reset the game once
    resetGame();
    
    function resetGame():void {
    	// Default ball properties
    	ball_speed = 8;
    	ball_direction = Math.PI * -7/9;
    
    	ball_mc.x = 40;
    	ball_mc.y = 80;
    	ball_mc.width = 20;
    	ball_mc.height = 20;
    	
    	// Default slider properties
    	slider_speed = 8;
    	
    	slider_mc.x = 80;
    	slider_mc.y = 380;
    	slider_mc.width = 120;
    	slider_mc.height = 10;
    }
    
    function updateBall(handler:Event):void {
    	var newX = ball_mc.x + ball_speed * Math.sin(ball_direction);
    	var newY = ball_mc.y + ball_speed * Math.cos(ball_direction);
    	
    	// Prevent ball from exiting stage
    	if ((newX < 0) || (newX + ball_mc.width > stage.stageWidth)) {
    		ball_direction *= -1;
    	}
    
    	if (newY < 0) {
    		ball_direction = (ball_direction < 0 ? -1 : 1) * (Math.PI - Math.abs(ball_direction));
    	}
    	
    	if (newY + ball_mc.height > slider_mc.y) {
    		// Check if user has bounced the ball
    		if ((newX > slider_mc.x) && (newX < slider_mc.x + slider_mc.width)) {
    			ball_direction = (ball_direction < 0 ? -1 : 1) * (Math.PI - Math.abs(ball_direction));
    		}
    		else {
    			// Game Over
    			resetGame();
    			return;
    		}
    	}
    	
    	// Set new X and Y	
    	ball_mc.x = newX;
    	ball_mc.y = newY;
    	
    }
    function keypressHandler(handler:KeyboardEvent):void {
    	// Move slider either left or right
    	if (handler.keyCode == 37) {// LEFT
    		slider_mc.x -= slider_speed;
    	}
    	if (handler.keyCode == 39) {// RIGHT
    		slider_mc.x += slider_speed;
    	}
    	// Prevent slider from going off-screen
    	if (slider_mc.x < 0) {
    		slider_mc.x = 0;
    	}
    	if (slider_mc.x > stage.stageWidth - slider_mc.width) {
    		slider_mc.x = stage.stageWidth - slider_mc.width;
    	}
    	
    }

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    You should try to set cacheAsBitmap to true for both the ball and the slider, since the actual appearance of each is static. This should improve performance if it was limited by redrawing the vector graphics. Which may or may not be the case.

  3. #3
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15
    That didnt help. Often when I am playing flash games made by others, everything moves so fluent... am I missing something or is AS3 really slower?

  4. #4
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15
    For anybody who got any suggestions, here is the source code http://flash.knobbout.com/brick/brick.zip

  5. #5
    Amazed and Amused Mazoonist's Avatar
    Join Date
    Mar 2006
    Location
    Northern California
    Posts
    201
    Hey, QuickStep,

    First off, don't be too quick to blame AS3... there's nothing wrong with it. I'm in the process of learning it myself, and so far I'm very impressed. And I'm determined to learn it fluently.

    I worked your file over quite a bit. Now you've got the fluid motion that you were wanting. There's still some issues with the slider moving erratically sometimes. I think it has to do with the reset function that you have in there, as I didn't touch that, and I think it resets the slider's position when it probably shouldn't.

    I could go into a long-winded explanation of what I did to make it better, but maybe it'd be best if you just studied the code. I think I'll let it speak for itself, but if you have any questions I'd be glad to help.
    Attached Files Attached Files

  6. #6
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15
    Thank you. I see you added a 20 ms timer that updates the whole flash movie, and force this update with updateAfterEvent(). The key presses are done with booleans which either are true or false depending on the key pressed. This actually works a lot better, thank you!

    Do you also know why the previous movie ran so slow? Is it because the on ENTER_FRAME event only triggers an X amount of times per second?
    Last edited by QuickStep; 07-21-2007 at 07:19 AM.

  7. #7
    Amazed and Amused Mazoonist's Avatar
    Join Date
    Mar 2006
    Location
    Northern California
    Posts
    201
    Yes, using a Timer gives you a finer control over how often the function is called, and it's event object includes an updateAfterEvent method that forces the display to update independent of the framerate. You can experiment with different speeds and probably find a mix of ball, slider, and interval speeds that works best. You'll find that you can decrease the ball and slider speeds a bit as you increase the interval. But I'll bet you're already trying that.

    Another issue with AS3 is that there is no more Key class, and no more Key.isDown() method. But you can do what I did, and create variables for whatever keys you're interested in, to keep track of whether a particular key is being pressed or not. Or you can look around for Senocular's Key class which is easy to implement and mimics the old Key.isDown() quite well. Just make one call to it to initialize the stage and you're good to go.

    A key down event is different than a mouse down, because the key down event keeps on firing as you hold down the key, and the mouse down event only happens once and doesn't keep firing as you hold down the mouse button. Keys are different because of the key repeat rate that's built into the OS. That's why is better to remove the slider actions from being directly manipulated by the keydown event, and instead set variables to keep track of whether certain keys have been pressed or released. You'll notice in the old version that there's a little lag before the slider moves when you press a key. I think that's because that's the moment it takes for the key repeat to kick in. In any case, it's way better to not rely on the key repeat rate to govern the action. That made moving the slider actions to the inside of the updateBall function necessary.

    I'm still learning myself, especially the event model of AS3, so helping you helps me. So, no problem whatsoever.

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