Illustrate and Animate a Bouncing Ball: Part 1. Part 1 of this tutorial will take Flash novices through the fundamental principles behind drawing and animating vectors in Flash. We'll be drawing and animating a bouncing beach ball.
Adobe Photoshop Cs3 Free Download And InstallPrior knowledge of Flash will of course help, but the following techniques should be accessible to everyone and with most software versions. Part 2 coming soon.. Final Image Preview. Below is the final animation we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month. Step 1: New Document. Let's begin by opening a new document (File > New..). Just a Flash File (Action. Script 2. 0) document is fine; the Actionscript version isn't relevant as we won't be using any. Step 2: Document Settings. Use the Properties Inspector at the bottom of your screen to enter the Document Properties, click the dimensions button. First, give your document a title, then give the Stage (the area of your document which will be visible when published) dimensions of 6. The background color we'll leave white, but change the Frame Rate to 2. Frames Per Second). Step 3: Layer. Organization is key when working with Flash, so before we start drawing our ball, let's name the layer it's going to sit on. Double click Layer 1 and call it "Ball."Step 4: Ball. Select the Oval Tool, define a stroke and a fill color, such as those shown. Next draw a uniform circle (by holding Shift and dragging the mouse). Also, use the Properties Inspector to give the Stroke a 3px weight. Step 5: Symbol Creation. By creating symbols in Flash you can use multiple instances of the same objects within one file. Symbols are all accessible from the Library palette (Window > Library). By changing a symbol, all instances of that symbol within the file will be changed. We're going to turn our circle into a symbol which will become our ball. Select the whole circle and press F8. Name it "mc_ball," choose to turn it into a Movie Clip symbol and click OK. Step 6: Shadow. Add a second layer underneath the "Ball" layer and call it "Shadow." Within the first frame of this layer draw an ellipse to form a shadow under the ball. Remove the stroke and color it #E2. E0. E5. Turn it into a symbol just as you did before with the ball, then name it "mc_shadow."Step 7: Position. Adobe Flash Cs3 TrialPosition the two symbols at roughly the correct height to suggest that the ball is sitting on the ground. In the Align palette (Window > Align) check To Stage and center the two symbols horizontally. Step 8: Add Keyframes. We've created our symbols in their most basic form, now let's begin to animate them. Hold Shift and click on frame 2. Timeline. Go to Modify > Timeline > Convert to Keyframes or press F6 to turn these frames into Keyframes. Keyframes represent points along the timeline where something happens. This point on the Timeline will be the end of the animation; in other words the ball will have bounced up from the ground, reached it's apex and returned to this starting position. ![]() The same applies to our shadow: it will have faded as the ball rose and returned to this starting state at frame 2. Step 9: High Point. Now let's add the point at which the ball is at it's highest. Select frame 1. 0 on both layers and press F6 to turn them into Keyframes. Step 1. 0: Move it! With the Slider still at frame 1. Stage. Select the Free Transform Tool and make the instance of the "shadow_main" symbol wider. Managing multiple balls collisions with Flash. Adobe Flash CS3- AS3 and AS2 game tutorials roundup. to omit the sound of a ball bouncing on glass. ยท First go to import and click open external library and open your ball as shown before before and drag it to the library window. Now drag it. Flash CS5 Bouncing Ball Animation - Flash Bouncing Ball Animation http:// ADOBE WEB STANDARD CS3 - ADOBE FLASH CS3 PROFESSIONAL. Finally, with the shadow selected, go to Color on the Properties Inspector and change it to an Alpha value of 3. Step 1. 1: Tweening. Tweening is the process by which Flash automatically generates all the stages between an objects or shapes two states. We're going to tween the frames between our first frame and halfway along the animation at frame 1. Select any frame between 1 and 1. Properties Inspector. Choose Motion from the Tween select and you'll see the resultant frames turn purple. Step 1. 2: Easy Tiger. Move the Slider back and forth along the timeline with your mouse and you'll see the ball and shadow nicely animated. The speed of this movement is however completely uniform. We need the ball to decelerate as it reaches it's apex and we can do this with ease (ha ha). Again, with one frame of each layer selected (within the tweened area) refer to the Properties Inspector. Change the Tweening to Ease out with a value of 1. This will slow down our climbing ball. Step 1. 3: Back Down to Earth. Having successfully animated the rising of the ball, repeat the tweening steps for frames 1. This time ease the motion tween in - 1. Step 1. 4: Check it! Press Command + Enter to view your animated ball so far. It should look like the animation shown below. Step 1. 5: Extra Touch of Realism. Assuming our ball is made of something a little more flexible than diamond it's going to change form slightly upon impact with the ground. Let's add one last Keyframe where the ball flattens momentarily. Select frame 2. 1 on both layers and press F6 to turn them into Keyframes. Then use the Free Transform Tool to squash the "ball" symbol from the top edge (hold Alt as you do so to keep the bottom edge where it is). Step 1. 6: Attention to Detail. Our bouncing movement is complete. Now we need to add further detail and movement to our ball. Double- click the "ball" symbol on any of the keyframes to enter the timeline of that symbol. You'll see your current location underneath the timeline - you should be within "Scene 1, mc_ball."Step 1. Layer 2. Click the Insert Layer icon to create a second Layer above the current one. Copy and Paste the circle in place from Layer 1 to Layer 2 (Command + C, Command + Shift + V). Now name the bottom layer "Ball Spinning" and the top one "Shade." Finally, lock the "Ball Spinning" layer. Step 1. 8: Chop Shop. Draw a large circle somewhere on the stage, making sure it has a different color to the existing circle. Position the larger circle so that what can still be seen of the yellow circle is about the right shape for shading on the ball. Release all objects. Now select the larger circle once again and press Delete. By laying un- grouped or non- symbolized forms over one another you combine them in the same way that you do with pixels in paint applications. By now removing the larger circle you're left with just the small crescent which will become the shading on the ball. Select and remove the remaining stroke and color the crescent #E2. E0. E5. Step 1. 9: Shadow Opacity. As this crescent acts as shading on our ball it would be nice to give it a Multiply Opacity. In order to do this we have to convert it into a Movie Clip Symbol (you should be used to this action now). Press F8 and name it "mc_ball_shading" (these names are getting dodgy). Refer to the Property Inspector and change it's Blend to Multiply. Perfect! Step 2. 0: Check it! Press Command + Enter again to view your animated ball so far. It should look like the animation below. Step 2. 1: Further Vector Manipulation. Having dealt with the shading you can now lock the layer "Shade" (perhaps even make it invisible to make working easier) and unlock "Ball Spinning." We're going to add a pattern to give our circle to give it that beach ball look. Use the Oval Tool to draw a large oval on the stage. It needs a stroke of 1px and #FFFFFF, but no fill color. Step 2. 2: Remove Excess. Place the stroke as shown in the image below and release. Now select the portion of the stroke which is outside the ball by simply clicking on it. As with making the shading crescent earlier, all the vectors on this layer have merged together, forming separate regions. Delete the outer portion of the stroke. Step 2. 3: Rinse and Repeat. Draw a couple of other ovals and place them on top of the circle so that they conjoin at the top somewhere. Then remove the excess from outside the circle. The ovals don't all have to be of equal size or proportions, just try to recreate something a little like the image below.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |