Creation of realistic spheres in Flash with textures and masking

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:

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
wooden texture

Paper texture
paper texture

Tiger texture
tiger texture

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

Linkage

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

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
wooden texture

Paper texture
paper texture

Tiger texture
tiger 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:

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

  • abhilash

    Very cool!
    the last example was look so cool!

  • Wow, very nice. I always wondered how to mimic 3D textures with movement.
    The last example is cool indeed.

  • Hi Emanuele. Its very nice, i love it!
    If you want some criticism, here it is:

    What i think you should do, to get it look more realistic, is, to zoom the texture in the middle a little bit.
    Thats because when you see a sphere the “texture” will be flatter and flatter, the more closer it is to the circumference.
    //Frederik

  • Virtualism

    What the hell? as soon as i click this i get 10 different exploit warnings about stuff in my temporary internet files, it asked me 3 times to run an active X thingy. are you trying to hack me?

  • Very nice.

  • Monkios

    After seing this, I think it’d be pretty cool to have a tutorial on how to make shadows.

    I guess with some trigonometry I could get it working on this.

  • > the circle diameter in my movie is 60*Pi = 188

    The diameter is 60; the circumference is 188.

  • Pingback: Create a Flash ball game with visual from above tutorial at Emanuele Feronato()

  • lewis

    HELP! Ican’t do the bit before the mapping it goes dodgy HELP!

  • Jerm

    everything works fine except the texture wont be attached to the ball, it might be because I’m using flash MX. if anyone knows how to help, please tell me. Thanks

  • SC@VENGER

    Er, in Flash MX 6.0 the sources don’t open (Unexpected file format). Which version of Flash do I need?

  • ive heard of action script before. and im interested to learn some :)

  • Great tutorial.

    I will make a post about it at http://www.beedigital.net/blog

    Great stuff…

  • Pingback: TutorialsNets » Como hacer una bola realista con Flash()

  • Pingback: Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato()

  • jamie

    great look. i have a seriouse problem with the texture. i dont believe i linkeged the objects correctly and im abit confused about what each symbol consists of.. plz help

  • Croupier

    I couldn’t get thie mask code to work // ball.texture.setMask(ball.ball_itself);
    //

    So I just deleted ball_itself mc, added a mask to layer 1 in ball mc and deleted the code, works nice now.

  • Pingback: Easy Only! Glog » Blog Archive » Ball Physics()

  • Pingback: Create a survival horror game in Flash tutorial - part 1 : Emanuele Feronato - blog of an italian geek()

  • s0d4player

    Virtualism, Emanuele isn’t hacking you. It’s just that Internet Explorer is too secure in the wrong areas. SWFs are probably thought as a threat to IE. Use Firefox if you don’t want these unnecessary security alerts for things like just swfs or harmless javascript.

  • s0d4player

    BUG, you forgot to implement friction on yspeed in some of the examples.

  • Amal

    Hi,
    I liked your turorial its very helpfull.

    Can you help me
    In my flash I am masking an object with a texture which is called dynalically through XML

    Here the texture is get loaded but its not masking the object

    What can I do for this ?

    Thank You for reading this , Hope you will help me in this.

  • joshmandic

    if i wanted to make this into a ball for pong how would i go about this

  • Neil

    how do i make the shadows?? can any1 link a tutorial for it. thanks

  • tommy

    hey i have a quiestion

    i would really know how to do that masking thing im new i have no idea how to mask my ball_itself

    if would be really cool if you can tell me how

    thanks for reading this

  • emanuel

    hi i im making a pong game can u tell me how to use masking with that?

  • Pingback: Understanding Flash displacement map filter : Emanuele Feronato - italian geek and PROgrammer()

  • Raidation

    Hi! Nice tut! I’m having trouble with this. When I’m rolling the ball around, something in the background just makes the ball disappear. Can you help me with this?

  • evandro

    I didn’t see any movement!!!

  • evandro

    Damm iT!!!! now I Saw!!!!!!! Thats great!

  • Im looking to make somthing like a tennis ball, what would the backround texture look like? any ideas?

  • Grex

    Hi Emanuele. I really liked this tutorial but I can’t make the masking working??? When I test the movie the texture moves with the ball but like a square again. Any ideas??? Thanks in advance!!!

  • roboman

    man, this is so cool!

  • bakironnus

    hi Grex , may be you have to make an instane name for both texture and ball_itself movie clips wich are located in ball mc.

  • denzoo

    Hey I used your tutorial to create a game, you can check it out here: http://www.newgrounds.com/portal/view/441888

    Thanks a lot for sharing your ideas.

  • madpassion

    If i wanted to make the letter A move the ball left, what would be the actionscript?

    Left is

    if (Key.isDown(Key.LEFT)) {
    xspeed -= power;
    }

    what would be A?

  • I have never seen this technique before and I have to say it is amazingly clever — so convincing yet so simple! Thank you very much for the inspiration!

  • como eu faso para min gria um jogo

  • Nemesis

    Cool tutorial i got it to work, but it took a few hours, longer than it should have. I think you need to add more details but im just starting out so maybe its not your fault. Anways its all good but i want to add a hitTest to the ball but i cant get it to work. how do i have the ball,the light, texture , and its shadow all stop when it hits a barrier. Thanks in advance.

  • Wow. Very simple solution for a seemingly complex problem. Your tutorials are so useful.

  • Black Dragon

    veryy niceee
    p.s. emanulee you are a king!!

  • Black Dragon

    very nice
    emanuele you are best!!!

  • Tommy

    Hi.. i was wondering if you can turn that into a form of “intro” where you change the skin into a 8-ball and make if roll into the stage without any controls? Just a “movie clip” d:

  • Cool! Try the bounce part of it! I figured that you in some of my games!
    But it’s not as good as having a mask!
    PS I’m 12 years old!

  • Pingback: Creation and animation of realistic spheres | Tutorial Collection()

  • evilkitty75

    WOW thankyou so much sweety u are a genius!!!!

  • cary

    very cool, thx for sharing

  • H├ęctor

    Really COOL!! I was searching for something similar and I tried to do it myself, but now I see it!!

    Thnx for sharing! :)

  • Wolfie453

    Hey guys easy way to put the bitmap onto the ball. Okay go into the movieclip ball
    then click on the color of the ball. Goto the menu Color. Usually at the top right. Then goto type then on the scroll down hit bitmap. then select the picture of your texture (The Bitmap) and it will appear on your ball. Then follow the other steps for a rolling effect.

  • Wolfie453

    Nvm i was wrong

  • Martien

    Thank you, nice effect go immediately exercise (I am a beginner)
    Nice that I may use this

  • Wolfie453

    For Video Tutorial (For the people who cant get it attached to the ball) Heres link: http://www.youtube.com/watch?v=kyzl783-XCo

  • JohnB

    I would like to know if this tutorial is available in AS3? I have been trying to convert it to AS3 for a couple days, and if I were an experienced Actionscript programmer, it would be a bit easier… but I am just starting out and would like to get this same effect in AS3. If it’s possible, please help me out. Thanks.

  • Loren Helgeson

    Very nice. I must try this.

  • Carl

    Hi, great article. I hope you don’t mind. I’ve created a Java example in Greenfoot: http://www.greenfoot.org/scenarios/4885 I will implement a filter soon to complete the ‘3d’ type effect and add a shadow, but for now, it suffices! I would be very interested if you could put the displacement map image somewhere here for download. I’d like to visually look at what it should be; especially as I’m interested in how you get the gradient ‘light source’ spot at the top right of the ball. Thanks and kind regards