Milan Toth

Milan Toth is the Chief Flash Developer of Jasmin Media Group, he created one of the world's biggest flash media server system. He loves Eclipse and OS X, AS3 and JAVA, sci-fi and horror, metal and electronic.

View all articles by Milan Toth
Okay, our program is nice now, but let's make it more spectacular. We need a bitmap of a soccer ball as our circle, and we want a simple sound playing on every bounce. We also want to drag the ball with the mouse, and throw it to an arbitrary direction.

Download the two attachments of the article, and place them in the root of your Flex project.
MovingCircle.as will look like this:

package
{
    
    import flash.media.Sound;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;
    import flash.display.Bitmap;
        
    public class MovingCircle extends Sprite
    {
        
        // for realistic movement we use gravity    
        
        public static var gravity:Number = 1;
        
        public var xspeed:Number;
        public var yspeed:Number;
        
        // we want to "throw" the ball, that's why we need previous positions
        // to calculate new speed components
        
        private var oldx:Number
        private var oldy:Number;
        
        // gfx will be our "skin"
        // sfx will be our sound
        
        private var gfx:Bitmap;
        private var sfx:Sound;
        
        // that's how we embed external assets
        // we have to define an individual class name for them
        
        [ Embed ( source = "soccerball.gif" ) ] private var soccerGFXClass:Class;
        [ Embed ( source = "pop.mp3" ) ] private var soccerSFXClass:Class;        
        
        public function MovingCircle ( )
        {

            // instantiate embedded assets
            
            gfx = new soccerGFXClass( );
            sfx = new soccerSFXClass( );

              // attaching ball to display list
            
            addChild( gfx );
            
            // skin repositioning to middle to make bouncing more precise
            
            gfx.x = - width / 2;
            gfx.y = - height / 2;
            
        }
        
        // initialization, called after parent addChild
        
        public function init ( ):void                    
        {
            
            // x , y and stage are inherited properties
            // watching our width and height not to cross "wall"
            
            x = width / 2 + Math.random( ) * ( stage.stageWidth - width / 2 );        
            y = height / 2 + Math.random( ) * ( stage.stageHeight - height / 2 );
            
            xspeed = 5 + Math.random( ) * 10;
            yspeed = 5 + Math.random( ) * 10;
            
            // start step triggering based on enterframe event
            
            addEventListener( Event.ENTER_FRAME , step );
            
            // add mouseevents to make ourself draggable
            
            addEventListener( MouseEvent.MOUSE_DOWN , dragCircle );
            addEventListener( MouseEvent.MOUSE_UP , releaseCircle );
            
        }
        
        private function dragCircle ( event:MouseEvent ):void
        {
            
            // when mousedown, we starting to listen to mouse movement of the stage
            // to catch mouse coordinates
        
            stage.addEventListener( MouseEvent.MOUSE_MOVE , moveCircle );
            
            // we stop stepping during dragging
            
            removeEventListener( Event.ENTER_FRAME , step );
            
        }
        
        private function releaseCircle ( event:MouseEvent ):void
        {
            
            // removing stage mousemove listening
        
            stage.removeEventListener( MouseEvent.MOUSE_MOVE , moveCircle );                
            
            // start stepping
            
            addEventListener( Event.ENTER_FRAME , step );
            
        }
        
        private function moveCircle ( event:MouseEvent ):void
        {
            
            // store previous coordinates
            
            oldx = x;
            oldy = y;
            
            x = event.stageX;
            y = event.stageY;
            
            // calculate new speed components
            
            xspeed = x - oldx;
            yspeed = y - oldy;
            
        }
        
        public function step ( event:Event ):void
        {
            
            // sett position
            
            x += xspeed;
            y += yspeed;
            
            // adding gravity to y component
            
            yspeed += gravity;
            
            // rotating for realistic movement
            
            rotation += xspeed;
            
            // bounce ball at stage edges
            
            if ( x + xspeed > stage.stageWidth - width / 2 ) 
            {
            
                xspeed *= -1;    
                sfx.play( );    // playing sound
                
            }
            else if ( x + xspeed < width / 2 ) 
            {
            
                xspeed *= -1;
                sfx.play( );    // playing sound
            
            }
            
            if ( y + yspeed > stage.stageHeight - height / 2 ) 
            {
            
                yspeed *= -1;
                sfx.play( );    // playing sound
            
            }
            else if ( y + yspeed < height / 2 )
            {
                
                yspeed *= -1;
                sfx.play( );    // playind sound    
                
            }
            
        }
        
    }
    
}


Run and try. Drag the ball, and throw it. Hope you like it.