1. Press the New Layer Button 3. Double click names to re-name Ball & Shadow layers 2. Click to change to 12 fps Step 1.

Slides:



Advertisements
Similar presentations
From Paper to Pixels to Vectors Evolution of a Flash cartoon character.
Advertisements

Getting Started with PowerPoint
INTRODUCTION TO ADOBE FLASH CS4
Dawn Pedersen Art Institute. Introduction Prior to Flash CS3, the movement of Illustrator and Photoshop documents into Flash was difficult. At that time,
1. Tuesday: Halloween Shoot due TOMORROW. You must make a contact sheet of your photos and print it from my computer tomorrow. -5 pts for every day I don’t.
By Aaron Proia and Matthew Copenhaver.  For this presentation, we will be walking you through two processes that are commonly used in Photoshop.  These.
Flash Raining Text. Open Project Create Project – Action Script 3 Select Text Tool Type in some text – From the Properties Menu – Choose Font, Font Size,
Animating Web Graphics Using Adobe Edge. 1. Setting up your project Create a new folder on your desktop Call it [YOURNAME]infographic INSIDE THAT FOLDER,
Go through this show in OpenOffice Impress by using the right scrollbar or clicking individual slide thumbnails on the left side. This hands-on demo is.

Microsoft PowerPoint ® 2003 Carl B. Struck Presentation Graphics n Educational, business, sales and other presentations (slide shows) n Combination of.
ABC’s of PowerPoint (Office 2007) Part 1: Basic Vocabulary Part 2: Cursors Part 3: Insert Your Text Part 4: Insert Your Pictures Part 5: Basic Tools &
Roentgen photo effect. This detailed, thoroughly explained lesson will show you how to create very attractive roentgen photo effect. You can use this.
DIGITAL GRAPHICS & ANIMATION
CIS 205—Web Design & Development Flash Chapter 4 Creating Animations.
Mastering Your Word Processing Skills
Chapter 3 Working with Symbols and Interactivity.
Click your mouse for next slide Flash – Introduction and Startup Many times on websites you will see animations of various sorts Many of these are created.
PowerPoint. Basic Vocabulary Slide - Presentation - Slide layout – ► ► ► ► a single page in PowerPoint all the slides for a speech all the slides for.
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Working with iMovie: The Basics Created by MJ. Importing Video Footage attach your camera to your computer and set to VTR mode move the camera button.
Adobe Photoshop Tutorial PhotoShop is a pixel-based program for editing photographs, painting, and creating digital art In this tutorial, you will learn:
Color Correct and Remove Keystoning A minimalist approach to photographing your art By Paul Marley.
Adobe Flash Professional CS5 Provides a comprehensive authoring environment for creating digital animation and interactive Web sites. Used to create engaging.
Chapter 4 Creating Animations.
Learning PowerPoint Part Two: Working With Images Directions: Click the slide icon in the section at the right to move on to the next slide.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Working with Symbols and Interactivity
Filters and Blend Modes. Filters Filters are a method that processes the pixels of a graphic object to produce a specific visual effect Filters can only.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
Introduction to Flash. Topics What is Flash? What can you do with it? Simple animation Complex interactive web application, such as an online store. Starting.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
© 2011 Delmar, Cengage Learning Chapter 1 Getting to Know Illustrator.
DIAMOND SHINE EFFECT. IN THIS STEP BY STEP LESSON, I WILL SHOW YOU HOW TO CREATE VERY ATTRACTIVE DIAMOND SHINE EFFECT USING SOME SPECIAL FLASH TIPS AND.
EYEGLASSES SHINE EFFECT. IN THIS LESSON, YOU WILL SEE HOW TO APPLY SHINE EFFECT ON EYEGLASSES ON THE PICTURE USING THE COLOR MIXER PANEL AND MASK.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
© 2011 Delmar, Cengage Learning Chapter 4 Creating Animations.
Chapter 4 Creating Animations. Chapter 4 Lessons 1.Create motion tween animations 2.Create classic tween animations 3.Create frame-by-frame animations.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
The Basics of Photoshop A Tutorial. First we need some images to play with. I’ve already found a couple of images that we can use – a monster and a photograph.
Flash CS 5 Interface BY NSCHEWCZYK | ©2012. MENU BAR A bar at the top of the window. It lists menu options including: File, Edit, View, Insert, Modify,
PowerPoint Practice Exercise 1 1.Save this file in your AV-TECH Folder as PowerPoint Practice Exercise 1. 2.Open this file in PowerPoint. 3.Edit each slide.
Quick Flash Tips Learn how to use flash the easier way!
Creating a Silhouette in Illustrator. Go File>Place and place the photo on the artboard. Select the photo and click Live Trace (its on the tool bar right.
Learning PowerPoint Presenting your ideas as a slide show… …on the computer!
Chapter2 Create animation. Objectives Import image Use the blank keyframe Add sound Publish the movie as an SWF file Use a motion tween animation.
Creating an Animated Map – Lesson 91 Creating an Animated Map Lesson 9.
Using A Photo As It’s Own Background. The Original Image.
FLASH!!!!!!!!!!!!!!!!!!!!!!!!! A TUTORIAL BY BRITTANY HESS AND MARGARET DENTON.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Open a new Flash File Action Script 2.0. Create a button like you did last lesson and name it Click to Play.
Click your mouse for next slide Flash – Fades and Alphas One useful thing you can so is to do a fade in of a picture or an image This is done by controlling.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Animation Fall Semester Exam Review James Martin High School Career and Technical Education.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Forms Go to Right click on image and copy.
How to swap faces in Photoshop? This simple Photoshop tutorial will show you the basics on how to swap faces in Photoshop. One of the most common uses.
To play, start slide show and click on circle Lesson 3 Lesson 3 Lesson 3 Lesson 4 Lesson Lesson 4.
PROPERTY OF PIMA COUNTY JTED, 2011
Learn Animations in Fireworks
Flash Interface, Commands and Functions
Animation Part III: Interactive Multimedia Authoring with Flash
INTRODUCTION TO ADOBE FLASH CS4
INTRODUCTION TO FLASH ANIMATION
Working with Symbols and Interactivity
Introduction to PowerPoint
Flash Concepts and Demos - Overview
Presentation transcript:

1. Press the New Layer Button 3. Double click names to re-name Ball & Shadow layers 2. Click to change to 12 fps Step 1

1. Oval Tool 2. Choose your Fill and Stroke colors for your bouncing ball 3. Choose your Stroke Width Step 2

Step 3 2. Press and hold Shift while clicking and dragging to create a perfect circle. 1. Make sure you have the Ball layer selected before you create your circle.

Step 4 1. Use the selection tool and click+drag to select the entire circle

Step 5 1. Right click the selected ball. 2. Click “Convert to Symbol...” Note: A symbol is a reusable image, animation, graphic, movie clip, sound file, font or button that resides in the library.

Step 6 1. Name the Symbol “SYM_Ball” Note: You want to start using indicators like “SYM” for symbol so that it’s easier to search for Symbols within Flash. Note: Use underscores “_” instead of spaces when naming; some features of Flash won’t work with spaces in names. 2. Make sure the Type is set to “Movie Clip” and that the Registration is set in the middle. (The little black square) The new symbol will have a blue box surrounding it when it’s selected. 3. Press OK

Step 7 1. Now select the “Shadow” layer 1. Select the Oval tool again.

Step 8 1. Choose a Black Fill 2. You can select no stroke by clicking the square with the red line through it.

Step 9 1. Draw a shadow below the ball. 2. Right Click and select “Convert to Symbol…”

Step Copy these settings for the Shadow symbol

Step Make sure you have the shadow selected in your workspace. Alpha 2. Look at the properties tab on the right side of the screen. 3. Go to the “Color Effect” menu and select Style: “Alpha”

Step 12 In computer graphics “Alpha” is the quality of Opacity, it’s used in every digital arts program. At 100% Alpha the shadow is completely opaque - not able to bee seen through - Set the Alpha to 20% so that the shadow is now transparent – able to bee seen through – We will be animating the Alpha so that the shadow gets darker as the ball falls.

Step Select the first frame on the “Shadow” layer timeline. 2. Press F5 12 times to create 13 total frames. Note: These 13 frames don’t have any animation yet, we just want to make sure that the Shadow is visible when we start animating the Ball.

Step Click the dot below the Lock icon on the Shadow Layer. Locking Layers in Flash is important so that you don’t accidently move something in the wrong layer. 1. Your scene should look something like this, but your ball and shadow may be different colors or sized slightly differently.

Step Add 12 more Frames in the Ball layer using F5 just like in the Shadow layer.

Step Select the 7 th frame on the ball timeline. Note: This number tells you which frame you have selected. 2. Press F6 once to change the frame into a “Key Frame”

Step Select the 13 th frame and press F6 once to change the 13 th frame into a “Key Frame”

Step 18 Note: “Key Frames” are the points in the animation in which something changes. You can consider them the “Extremes” of the movement. We’re eventually going to tell Flash to fill in the frames in-between each of the Key Frames so that we only have to worry about the big movements. Ball’s starting point. The highest point in this air Ball hitting the ground Ball’s highest point in the air again.

Step 19 1.Keep the middle key frame selected. 2. Hold the Shift key and drag the ball straight down to the middle of the shadow Note: The if you hold the Shift key while moving objects in Flash, Photoshop, and Illustrator, they will move perfectly straight.

Step Right click the first frame of the Ball animation and select “Create Classic Tween” Note: You can see the “Classic Tween” is working if the frames have turned light purple, and there is a arrow going through all of them.

Step Right Click on the middle key frame and create another “Classic Tween” Your frames should now look like the frames below.

Step In the Control menu, make sure “Loop Playback” has a check mark next to it. If you have your timeline selected and press Enter your animation will automatically play in the editor. You can’t edit anything while it’s playing, so you have to press Enter again to stop it.

Step Select the first frame in the Ball layer. 2. Looking in the Properties menu on the right side of the screen. Click the pencil under the “TWEENING” sub-menu.

Step 24 This is the custom Ease in/Ease Out window. 1. Un-Check the box “Use one setting for all properties.” 2. Make sure it’s set to the Property: Position

Step 25 Because we have the first key frame selected(slide 23), this chart shows the movement of the ball in those frames

Step This point is the Ball’s Position in the first frame. When the ball starts the fall. 1. Because we selected the Position property 3. This point is the Ball’s Position in the 7 th Frame. When the ball hits the ground.

Step 27 This line shows the journey the ball takes between the first and 7 th Frame

Step The right side of the graph shows the % of the distance the ball is at from the 1 st and 7 th frames. 2. The 4 th frame is directly between the 1 st and the 7 th frames, and the ball is traveling at an even speed, so it is half-way between it’s starting Position, and the Position it hits the ground.

Step If you click the point at the 1 st frame it will reveal a little handle you can use to adjust the curve of the line. Tiny handle

Step Click and drag the handle to bend the curve

Step Select the end point, and move it’s handle the same way.

Step 32 The ball will now begin moving slowly, and gain acceleration as it falls. Now the ball won’t hit the half-way point (50%) until between the 6 th and 7 th Frames. Increasing Acceleration

Step 33 Now press OK and then test out your animation. Feel free to come back and adjust the curve as you like.

Step Only the first part of the animation has the acceleration we want, so lets select the middle frame to edit the movement of the ball after it hits the ground. 2. Then click the pencil in the TWEENING sub-menu inside the Properties tab.

Step Unclick the box 2. Now make the curve match closely to what I have below.

Step 36 We want this type of curve, because when the ball hits the ground it’s going to bounce back very quickly, but as it continues through the air it’s going to decrease in acceleration before it starts falling back to the ground. Decreasing Acceleration

Step 37 Now press OK and then test out your animation. Feel free to come back and adjust the curve as you like.

Step We’re going to have the ball squish when it hits the ground, to do so we have to select the middle frame, the moment the ball hits the ground. 2. Select the Free Transform Tool (Q) 3. The ball should now have a little square with handles surrounding it.

Step Grab the top handle and hold the Alt or Option key and squish the top of the ball down. 2. The ball looks smaller, we only want it to look squished, so we’re going to pull the side handle to make it a little bigger. Note: Don’t hold the option key for this one.

Step If you test your animation, you’ll notice a problem. The ball starts to squish long before it hits the ground. Will fix this with the Ease in/Ease out pan curve again. 2. Select the first frame again. 3. Click on the pencil in the TWEENING sub-menu again.

Step Switch the property tab to “Scale” Assignment: 1.Adjust the curve so that the ball doesn’t start to change it’s Scale (Squish) until just before it hits the ground in the 7 th frame. 2.Don’t forget that there’s a second part of the animation, after the ball hits the ground and flies back up into the air. Fix the squishing animation for those frames too!

Step 42 Assignment 3. Remember the Shadow of the ball? Animate the shadow so that it scales smaller as the ball gets closer to the ground. EXTRA CREDIT: Animate the Alpha of the shadow so that it gets darker as the ball gets closer to the ground.