Flash jumping ball

In this flash tutorial it will be explain in detail how to create a ball that jumps when the user click on a certain area.

Let's begin!

1. First create a new flash document having dimensions 500x400 pixels. Set frame rate to 30 fps. Create three new layers and rename the layers from top to bottom as it follows: actions, ball, hit and background.

2. In the first frame of the background layer import a picture (File >> Import >> Import to Stage) or draw something nice in flash, as you wish. If you have no inspiration take the picture below:

3. Now in the first frame of the hit layer draw a rectangle like the one from my example, having the width on your stage and height about 25. For this select the Rectangle tool (R) from the Tools panel, go then to the Properties panel and select a blue color for Fill and none for Stroke and then draw the rectangle. Click the rectangle you just drew and convert it to a MovieClip (choose Modify >> Convert to Symbol or F8 and from the window that appears select MovieClip as Type, center for registration point and give it a name of hitMC). While the MovieClip is still selected go to the Properties panel and give it an instance name of hit_mc.

4. Great job! Now let's create the movie. Select the Oval Tool (O) from tools panel, go to the Properties panel and choose a blue for Fill color and none for Stroke and then draw a ball about 25x25 (hold Shift key pressed for drawing a perfect ball). Select it and choose Modify >> Convert to Symbol (F8) and from the Convert to Symbol window that appears select MovieClip as Type, put it a name of ballMC and assure yourself the registration point is set to center, then press OK button. While the ball is still selected go to the Properties panel and give it an instance name of ball_mc.

5. Now double-click the ball or right-click >> Edit in Place, you should be now in editing mode for ball_mc. Select the circle you find here and convert it to a MovieClip with the name ball2MC (see the step before). After this place the ball right above the hit_mc (see the next picture).

6. Click on the first frame of Layer 1, go to the Properties panel and choose Tween: Motion. Then go to frame 30 and insert a new keyframe (right-click >> Insert Keyframe or F6). In this frame move on the ball right above the top of the Stage and try to not modify the horizontal of the ball. While you are still on frame 30 open the Actions panel (F9) and put the ActionScript code stop(); in. Go back to Scene 1 now.

7. Go to the first frame of the actions layer and open the Actions panel (F9). Put the next ActionScript code in:

var i:Number=0;
ball_mc._visible=false;
hit_mc.onRelease=function(){
i+=1;
ball_mc.duplicateMovieClip("ball"+i, _root.getNextHighestDepth());
_root["ball"+i]._x=_xmouse;
}


Now test the movie (Ctrl+Enter).

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by SPIRI , September 24, 2007

Try clicking very fast left and right on the purple bar, really cool effect.

written by s.krishnanrajakumar , October 05, 2007

sir this script in the is useful for me. and it is easy to learn. please send some of the tutorials like this . so that i could learn

written by Abubakar , October 07, 2007

Dear
I want to Learn Flash 8

written by petrus , October 25, 2007

i want to enhance my website but i dont have the flash software is it possiblew to use online services

written by kiran kumar. v , November 01, 2007

sir,

Thank you sir, this scripting is eszy to my learning stage. So Please send me some of ex... for my email address.

Thanking you sir

Kiran kumar. v

written by cathy , November 03, 2007

there are 2 "balls" that seem to stay at the top of the background for me. How can I not have this problem?

written by atul singh , November 07, 2007

sir,
scripting is a very tuf.easy way learn scripting.please send me some example for my email address.

thanking you sir



atul singh

written by bhimsing rajmun , November 13, 2007

how to put a button in a movie that allow you to go directly to the end of a movie. my movie is divided into two main parts. first part is like an introduction. after the intro i want to have a button which will allow me to go at the very end of my second part is the main part of the movie? please help me. hope to hear from you soon

written by anand vora , December 20, 2007

plz help me to make mouse trail event in flash? if posiible give me a tutorial of mouse trail.

written by Binod Pradhan , January 02, 2008

Dear sir
I want to Learn Flash 8
Thank you sir, this scripting is eszy to my learning stage. So Please send me some of ex... for my email address

written by Atanu Roy , January 07, 2008

Dear Sir,
I m interested in Flash based cartoon animation..and i have Flash5..Pls advice me how i creat a animation in Flash5 & give me such example in my email address..Thank u Sir

written by WizardSal , March 21, 2008

Cool tutorial!!!!
WizardSal

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (12)