A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Rolling ball effect in AS3.0

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

    Rolling ball effect in AS3.0

    Tutorial here: http://www.emanueleferonato.com/2007...s-and-masking/

    Now I want to do this in AS3.0, but the problem is I don't even know how to apply a texture to an object, because the texture method (seen in AS2.0) seems to be removed. Any help?
    Arigato.

  2. #2
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15
    Nvm, found the answer myself by trying. You have to add the bitmap as a child, mask it in the ball circle, and move the bitmap (child moves relative to the parent).
    Arigato.

  3. #3
    Junior Member
    Join Date
    Oct 2008
    Posts
    1

    Rolling Ball effect AS3

    I need the same as QuickStep. My company needs essentially the exact same as the tutorial except in AS3. The difference from QuickStep is that I am a TOTAL AS3 newbie (in fact, I'm normally a photo/video guy - but my company is expanding horizons and as I am labeled a "digital designer" -- I'm expected to know Flash ). So if either QuickStep sees this, or if anyone else has working script that they could post that I could learn from it is VERY much appreciated.

    Thank you once again,
    cfeldmann

  4. #4
    FLash Beginner
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    15
    Quote Originally Posted by cfeldmann
    I need the same as QuickStep. My company needs essentially the exact same as the tutorial except in AS3. The difference from QuickStep is that I am a TOTAL AS3 newbie (in fact, I'm normally a photo/video guy - but my company is expanding horizons and as I am labeled a "digital designer" -- I'm expected to know Flash ). So if either QuickStep sees this, or if anyone else has working script that they could post that I could learn from it is VERY much appreciated.

    Thank you once again,
    cfeldmann
    My post was from over a year ago and I just recently found out you replied to this post. When I was still learning AS3, I made a class file for the ball. This is the contents (put them in a new file called Bal.as):
    Code:
    /*
    	Rolling Ball Class
    	(C) 2007 QuickStep
    */
    
    package {
    
    	import flash.display.MovieClip;
    	import flash.display.Bitmap;
    	import flash.display.BitmapData;
    	import flash.display.Shape;
    	// Effects:
    	import flash.filters.GradientGlowFilter;
    	import flash.filters.DropShadowFilter;
    	
    	public class Ball extends MovieClip {
    
    		private var minTexture:Number;
    		private var maxTexture:Number;
    		private var shiftTexture:Number;
    		private var bgTexture:Bitmap;
    
    		public function Ball(texture:BitmapData, radius:Number) {
    			if ((texture.width != texture.height) || (texture.width % 2 != 0)) {
    				throw new ArgumentError("Texture must be a square 2x2 tile.");
    			}
    			if ((radius < 1) || (radius >= texture.width/4)) {
    				throw new ArgumentError("Radius must be greater or equal than 1 and smaller than one fourth of the texture width.");
    			}			
    			
    			// Create mask
    			var circleMask:Shape = new Shape();
    			circleMask.graphics.beginFill(0);
    			circleMask.graphics.drawCircle(0,0,radius);
    			addChild(circleMask);// Add it as a child
    
    			// Convert it to a bitmap
    			var bmp:Bitmap = new Bitmap(texture);
    
    			// Set mask
    			bmp.mask = circleMask;
    
    			// Store bitmap in class
    			bgTexture = bmp;
    
    			// Add it as child
    			addChild(bmp);
    
    			// Center texture
    			shiftTexture = texture.width/2;
    			bgTexture.x = bgTexture.y  = -shiftTexture;
    			
    			// Set values when to switch the texture
    			minTexture = radius - texture.width;
    			maxTexture = -radius;
    			
    			// Apply effects
       			var innerShadow:GradientGlowFilter =
    				new GradientGlowFilter(0, 45, [0, 0], [0.4, 0.1], [220, 255], radius*2, radius*2, 2.5, 2);
    			var objectShadow:DropShadowFilter = new DropShadowFilter(4.0,96.0,0,0.5);
    			
    			this.filters = [innerShadow, objectShadow];
    			
    			cacheAsBitmap = true;
    		}
    		public function rollX(inc:Number) {
    			this.x += inc;
    			bgTexture.x += inc;
    			addjustTexture();
    		}
    		public function rollY(inc:Number) {
    			this.y += inc;
    			bgTexture.y += inc;
    			addjustTexture();
    		}
    		
    		private function addjustTexture():void {
    			if (bgTexture.x <= minTexture) {
    				bgTexture.x += shiftTexture;
    			}
    			if (bgTexture.x >= maxTexture) {
    				bgTexture.x -= shiftTexture;
    			}
    			if (bgTexture.y <= minTexture) {
    				bgTexture.y += shiftTexture;
    			}
    			if (bgTexture.y >= maxTexture) {
    				bgTexture.y -= shiftTexture;
    			}
    		}
    	}
    }
    To use it in your code, do something like this (for example):
    Code:
    var leftDown:Boolean  = false;
    var upDown:Boolean    = false;
    var rightDown:Boolean = false;
    var downDown:Boolean  = false;
    
    var power:Number = 2;
    var yspeed:Number = 0;
    var xspeed:Number = 0;
    var friction:Number = 0.50;
    
    // Apply texture
    var b:Ball = new Ball(<TEXTURE FROM LIBRARY>, 10);
    b.x = 100;
    b.y = 100;
    addChild(b);
    
    b.addEventListener(Event.ENTER_FRAME, update_ball);
    stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
    stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
    
    function update_ball(handler:Event):void {
    	if (leftDown) {
    		xspeed -= power;
    	}
    	if (rightDown) {
    		xspeed += power;
    	}
    	if (upDown) {
    		yspeed -= power;
    	}
    	if (downDown) {
    		yspeed += power;
    	}
    	yspeed  *= friction;
    	xspeed *= friction;
    
    	b.rollY(yspeed);
    	b.rollX(xspeed);
    
    	
    }
    
    function key_down(handler:KeyboardEvent):void {
    	if (handler.keyCode == Keyboard.LEFT) {
    		leftDown  = true;
    	}
    	if (handler.keyCode == Keyboard.RIGHT) {
    		rightDown = true;
    	}
    	if (handler.keyCode == Keyboard.UP) {
    		upDown    = true;
    	}
    	if (handler.keyCode == Keyboard.DOWN) {
    		downDown  = true;
    	}
    }
    
    function key_up(handler:KeyboardEvent):void {
    	if (handler.keyCode == Keyboard.LEFT) {
    		leftDown  = false;
    	}
    	if (handler.keyCode == Keyboard.RIGHT) {
    		rightDown = false;
    	}
    	if (handler.keyCode == Keyboard.UP) {
    		upDown    = false;
    	}
    	if (handler.keyCode == Keyboard.DOWN) {
    		downDown  = false;
    	}
    }
    I guess you know your basic object-oriented programming language, so this shouldn't be too hard to grasp.
    Arigato.

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