Emanuele Feronato

Talking about Flash.

I was preparing a new tutorial involving a visual from above, with a ball rolling on a tile map, and that’s what I coded first, applied to an object linkaged as “ball” in the first frame:

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power
	}
	
	xspeed *= friction;
	
	this._y += yspeed;
	this._x += xspeed;
};

This code is already explained in this tutorial, and it’s almost the same except it has no gravity since the “camera” is above the objects.

This is the result:

If you play with arrow keys you should be able to have a sphere rolling through the stage.

I wrote that “should” because you… should be able to see the sphererolling… but the only thing you really see is a red circle. I can’t see any sphere.

A sphere should be more… let’s say… spherical… so I played with gradients and that’s what I got:

This is more likely a sphere, but it seems to float in the air. A sphere on a plane should drop a shadow.

I need a shadow.

Very easy, here it is the sphere with the shadow…

Now you should see a rolling sphere. I only see a skating sphere. A very polished sphere, moreover.

Time to add some tricks.

I want to map a texture on the sphere to make it looks like a marble sphere, or wooden sphere, or whatever.

So I need a seamless texture.

Seamless textures are textures that form a continuous texture when you tile the image over and over.

I will explain in a future tutorial how to create seamless textures, at the moment I googled for “samless texture” and I found those free images. Do the same, and be sure you are saving squared seamless textures.

I liked those 3 textures, and scaled down to 188×188 pixels since the circle diameter in my movie is 60 so the circumference is 60*Pi = 188

wooden texture

paper texture

tiger texture

With the tiger texture, I imported it into the movie and linkaged all in this way:

ball: it’s the final ball, combining all objects

ball_itelf: it’s the ball itself, I mean the blue circle

texture: it’s the texture I imported

Now you should have a movie like this one:

The texture moves with the ball.

Next step will be adding a mask

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.texture.setMask(ball.ball_itself);
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power
	}
	
	xspeed *= friction;
	
	this._y += yspeed;
	this._x += xspeed;
};

Line 6: A mask with the shape of ball_itself is assigned to the object texture.e its own mask, for example mc.setMask(mc) . Masking is a very useful technique in Flash. By applying a mask on a movie clip, you can restrict the visible area of the target clip to the mask area. In this case, I restrict the visible area of the texture movieclip according to ball_itself movieclip shape.

This is the result

We have a textured circle (not a sphere yet).

In a real sphere, the texture would roll together with the sphere.

That’s where we need another trick.

With your favourite photo editor you have to open your 188×188 images, double their x and y sizes (376×376) and fill them with old 188×188 texture. You should have an image tiled with 4 of your textures, like in this examples:

wooden texture

paper texture

tiger texture

tiger texture with lines marking the tileset made with the old tiger texture

Now, replace the old texture in the actionscript with this new one, and add those lines:

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.texture.setMask(ball.ball_itself);
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	this._y += yspeed;
	this._x += xspeed;
	this.texture._y += yspeed;
	this.texture._x += xspeed;
	if (this.texture._x>158) {
		this.texture._x -= 188;
	}
	if (this.texture._x<-158) {
		this.texture._x += 188;
	}
	if (this.texture._y>158) {
		this.texture._y -= 188;
	}
	if (this.texture._y<-158) {
		this.texture._y += 188;
	}
};

Lines 24-25: The texture already moves with the ball, but I want it to move twice faster of ball's x and y speeds to simulate the effect of a rolling texture.

Lines 26-37: If the position of the texture relatively to the ball one is more than 158 (texture width/2 - ball radius) then make or less than -158, then adjust texture position shifting it by 188 pixels left, right, up, or down. The player won't realize the texture jumped because it is tiled and seamless.

Now, you should see a rolling sphere. What is see is a moving circle with a smart use of a texture sliding across the object.

In a real sphere, the perspective modifies texture appearance.

To achieve this, we'll need a displacement map. I will cover in a future tutorial.

Meanwhile, look what you can do adding a level with some shadows:

Download all the source codes and give me feedback