Scientific Visualization February 1, 2006 Courtesy of the Career Center Open internship – Curt Manns  URTV will be Asheville`s first public access television.

Slides:



Advertisements
Similar presentations
Animation = Interpolations. 2 Interpolations/Régularisations Functions de bases –X(u) = B 0 (u) X 0 + B 1 (u) X 1 + B 2 (u) X 2 + … X0X0 X1X1 X2X2 X3X3.
Advertisements

INTRODUCTION TO ADOBE FLASH CS4
Animatio n CPSC 533 c Fall 2005 Ying Zhang. Agenda Animation: can it facilitate? (Barbara Tversky) Principles of Tranditional Animation Applied to 3D.
Principles of Animation Computer Animation SS2008.
Dr. Midori Kitagawa University of Texas at Dallas Arts and Technology Program.
Flash animation For beginners. Lesson objectives To understand how to animate a ball To understand how to loop animations To learn how to use animation.
Animation: Interpolations. 2 Interpolations/Régularisations Functions de bases –X(u) = B 0 (u) X 0 + B 1 (u) X 1 + B 2 (u) X 2 + … X0X0 X1X1 X2X2 X3X3.
12 Principle of Animation. Series of pictures of objects/characters in motion Displayed at some rate –film 24 fps –video 30 fps What is animation?
12 Concepts to Animation Frank Thomas and Ollie Johnston in their book “The Illusion of Life” Principles in action - link
Graphics Sound Video created by:gaurav shrivastava
CA0932a Multimedia Development Lecture 11 Animation Techniques Principles in Flash.
Graphics Korea University Computer Animation Computer Graphics.
Visual Narrative Week 14. Contemporary Developments Computers –Production is cheaper –More animation –Independent production The Internet - distribution.
Macromedia Flash MX 2004 – Design Professional Animations CREATING.
1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.
Prinsip Dasar Gerak Pertemuan 4 Matakuliah: U0636/DKV II Animasi Tahun: 2008.
ITBIS351 Multimedia Systems and Hypermedia
The Fundamental Principles
Nine Old Men Disney’s Nine Old Men were the main animators that created Disney’s most famous animated films from Snow White to The Rescuers. They were.
The 12 Principles of Animation Digital Media 1 Mr. Nicholas Goble.
History, Principles & More. History: Pioneers of Animation J. Stuart Blackton ( ) Winsor McCay ( ) John Bray ( ) Max Fleischer.
Chapter 3 Working with Symbols and Interactivity.
John Lasseter 1987 PRINCIPLES OF TRADITIONAL ANIMATION APPLIED TO 3D COMPUTER ANIMATION.
Dm11 – Flash Creating Animations Animations CREATING.
Case Study: Using Macromedia Director
Scientific Visualization February 15, 2006 Career Center sponsored Summer Jobs and Internship Fair; Tuesday, February 21, 2006, 12:00 - 3:00 PM; Highsmith.
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
CDM105 Session 9 Macromedia FLASH MX 2004 Part 2 : Animation with Motion Tweening and Shape Tweening.
Chapter Lessons Create frame-by-frame animations
CSC418 Computer Graphics n Animation Principles n Keyframe Animation.
Jehee Lee Seoul National University
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Working with Symbols and Interactivity
CSC 361/661 Digital Media Spring 2010 Professor Burg.
Adobe Flash CS3 Revealed
How to build a web site in 37 easy steps. Step One – Turn your page orientation to landscape and create a table to provide a framework for your page In.
Agenda – Week 8, Day 2 Tuesday Intro to Flash Animation process Computer animation Lesson 1 – Overview Lesson 2 – Drawing Lesson 4 – Layers Lesson 8 –
Animation Basics. A) Animation In animation we attempt to make things that aren’t really there appear as though they could actually exist and move in.
© 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.
Module Code: CU1025NI 3D Modelling and Animation Basics Week – 2 - Extra.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
Motion Graphic Design Week 1. Motion Graphic Design :: Week 1 :: Calendar.
Honors Scholars Freshman Seminar Computer Animation: Special (And Not So Special) Effects Fall 2007 TR 11:00 AM - 12:15 PM Engineering Building.
12 Principles Of Animation (1)Squash and Stretch (2)Anticipation (3)Staging (4)Straight Ahead Action and Pose to Pose (5)Follow Through and Overlapping.
Presented By:- Amit Kapoor MCA Deptt. MAIMT. Contents Introduction to Animation  Introduction to Animation  Why Do We See Images As Moving ?  Effects.
UNC Chapel Hill M. C. Lin Basics of Motion Generation let X i = position,orient. of O i at t k = t 0,  i END = false while (not END) do display O i, 
Flash animation For beginners. homework Your homework is over two weeks so please write in each week of your planner for the next two weeks For homework.
Lecture 9 Razia Nisar Noorani. 2 TWO DIFFERENT FORMS:  2-D evolved from traditional animation techniques.  3-D exploited capabilities unique to the.
Flash Concepts and Demos - Overview Recap Unit 2 –Buttons (Simple Text and Animated Button) –Gradient Tool –ActionScript (stop, getURL) –Embed Flash Movie.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Presented By: V. Jagadeesh (59) Animation The word “animation” is a form of “animate,” which means to bring to life to object. Thus when a multimedia.
Scientific Visualization January 25, 2006 Open position Computer Technician  in-store and on-site services  represent the company in a professional manner.
Creating Special Animations
Flash Interface, Commands and Functions
The Basics of Creating a Simple Flash Animation
Agenda 1 - Flash continued -
Agenda 1 - Practice Files > Must be checked off today
Unit Lessons Create frame animations Create motion-tweened animation
INTRODUCTION TO ADOBE FLASH CS4
Basics of Motion Generation
Flash animation For beginners.
INTRODUCTION TO FLASH ANIMATION
What is Animation? 'To animate' literally means to give life to. Animating is moving something that cannot move on it's own. Animation adds to graphics.
Flash Concepts and Demos - Overview
Presentation transcript:

Scientific Visualization February 1, 2006 Courtesy of the Career Center Open internship – Curt Manns  URTV will be Asheville`s first public access television station. URTV, Inc., a nonprofit organization, is currently preparing to launch Channel 20Looking for interns in production, marketing, business and IT. Part time  E. Ennalls Berl II is trying to find a highly competent and reliable person to complete his web site. The site is for a service to Senior Citizens business. Thinking of Grad School??? If you’re thinking of studying Computer Science you will probably need to take the GRE. You can take a practice test Saturday February 18, 2006 in the Highsmith Union and will begin promptly at 10:00 am. Because space is limited, register early at KAP-TEST or online at

Agenda Quiz Review Homework - due tonight  Your animatic.  Class comments  What artwork do you need? Class Material (keyframe animation, using an external library, principles of animation) Next week’s assignment

Using External Libraries in Flash Create a new Flash file.  File / New Set document properties so that the stage size is 706x566 pixels.  Modify / Document Set the background to some color other than white (so the clouds show). Use library from shared.fla found in the directory  File / Import / Open External Library

Tweening In flash tweening refers to generating inbetween frames between keyframes.  Motion tweens refer to the animation needed to show moving (translating) a symbol from one location to another.  Strangely enough a motion tween can also include scaling (resizing) and rotation.  Throughout the remainder of this class (and in 2D and 3D graphics packages) we will continue to refer to the standard transformations of translation, scaling and rotation.

Create a Motion Tween Open Flash Create a square on the stage. Select the square. Modify / Convert to Symbol Name the symbol square and make it a movie. Select the square on stage and make sure it is an instance of square. Name the instance mySquare. Select keyframe 30 in the Timeline. Insert / Timeline / Keyframe

Motion Tween (2) (With frame 30 still selected,) move the instance of mySquare to a different location on the Stage. Select a frame between the keyframes in Frame 1 and Frame 30. In the property inspector, select Tween and from the drop down menu, select Motion Tween.

Motion Tween (3) Save Control / Test Movie - your square should move across the stage. From the property inspector add a rotate by selecting a direction like CW and 1 for 1 full rotation. From the menu at the bottom of the timeline select onion skinning (the 2nd icon to the right of the trash) to verify that your square is rotating one full rotation.

Shape Tween Generates in-between frames between different shapes (not symbol instances) Using symbols encourages reuse so use symbols, then Modify / Break Apart the instances. Once you have the broken apart graphics in your beginning and ending frames. Create a shape tween between the two.

John Lasseter 1987 PRINCIPLES OF TRADITIONAL ANIMATION APPLIED TO 3D COMPUTER ANIMATION

Introduction Three Little Pigs Academy Award Winner Oscar for “Who’s afraid of the Big Bad Wolfe?”

Principles of Animation - Introduction 1920s and 1930s animation was popular. Disney noticed no lifelike movement for animal or human figure. Disney established drawing classes at Chouinard art in LA. From these classes the following principles were established.

Principles of Animation 1. Squash and stretch -- defining the rigidity and mass of an object by distorting its shape during an action. 2. Timing -- spacing actions to define the weight and size of objects and the personality of characters. 3. Anticipation -- preparation for an action. 4. Staging -- Presenting an idea so that it is unmistakably clear.

Principles of Animation 5. Follow through and overlapping action -- the termination of an action and establishing its relationship to the next action. 6. Straight ahead action and pose-to-pose action -- the two contrasting approaches to the creation of movement. 7. Slow in and out -- the spacing of the in-between frames to achieve subtlety of timing and movement. 8. Arcs -- the visual path of action for natural movement.

Principles of Animation 9. Exaggeration -- accentuating the essence of an idea via the design and the action. 10. Secondary action -- the action of an object resulting from another action, 11. Appeal - creating a design or an action that the audience enjoys watching.

SQUASH AND STRETCH

TIMING NO inbetweens The Character has been hit by a tremendous force. His head is nearly snapped off. ONE inbetweens The Character has been hit by a brick, rolling pin, frying pan. TWO inbetweens The Character has a nervous tic, a muscle spasm, an uncontrollable twitch. THREE inbetweens..... The Character is dodging a brick, rolling pin, frying pan.

TIMING FOUR inbetweens The Character is giving a crisp order, "Get going!" "Move it!" FIVE inbetweens The Character is more friendly, "Over here.""Come on-hurry!" SIX inbetweens The Character sees a good looking girl, or the sports car he has always wanted. SEVEN inbetweens The Character tries to get a better look at something.

TIMING EIGHT inbetweens The Charaeter searches for the peanut butter on the kitchen shelf. NINE inbetweens The Character appraises, considering thoughtfully. TEN inbetweens The Character stretches a sore muscle.

ANTICIPATION

STAGING In Luxo, Jr. all action was staged to the side for clarity.

STAGING Andre’s scratch was staged to the side for clarity.

FOLLOW THROUGH Follow through of Wally B’s feet.

OVERLAPPING ACTION Overlapping action of Wally B’s feet.

Walt Disney Definition of Overlapping Action It is not necessary for an animator to take a character to one point, complete that action completely, and then turn to the following action as if he had never given it a thought until after completing the first action. When a character knows what his is going to do he doesn't have to stop before each individual action and think to do it. He has planned in advance in his mind.

Walt Disney Example of Overlapping Action The mind thinks, "I'll close the door - lock it - then I'm going to undress and go to bed."  Well, you walk over to the door  before the walk is finished you're reaching for the door before the door is closed you reach for the key  before the door is locked you're turning away - while you're walking away you undo your tie  and before you reach the bureau you have your tie off. In other words, before you know it you're undressed - and you've done it in one thought, "I'm going to bed."

STRAIGHT AHEAD ACTION OR POSE-TO-POSE Pose to pose (Keyframes).  Animator creates keyframes. Straight ahead.  Characterized by zany action.  Animator makes one drawing after another.

SLOW IN AND OUT The spacing of the inbetween drawings between the extreme poses.

SLOW IN AND OUT

ARCS

EXAGGERATION

SECONDARY ACTION

APPEAL

PERSONALITY “When character animation is successful and the audience is thoroughly entertained, it is because the characters and the story have become more important and apparent than the technique that went into the animation.” “…the success of character animation lies in the personality of the characters.”

CONCLUSION “… the first goal of the animator is to entertain.” The animator must have two things:  a clear concept of exactly what will entertain the audience;  and the tools and skills to put those ideas across clearly and unambiguously

personal.umich.edu/~mejn/election/ personal.umich.edu/~mejn/election/ More Cartograms

Homework Read chapters 5 & 6 in Tufte. Using your animatic as a starting point, create a 20 second animation of your module. Incorporate the feedback from tonight’s class into the animation.  Use the external library from WhatIsHaze?  Post on the mmas server

Homework Class Work  Meet as a group.  Divide up the new artwork production.  Figure out a plan for the week. How will you distribute new artwork to the members of your group? Will you need to meet as a group or will communication suffice?

Homework  Individual homework assignment due next week: create first draft animations. Publish the flash file in HTML and SWF.  File / Publish Settings Select the Formats tab. Check Flash and set the file name to the exact name required by your module which can be found as the link in 1.htm or in the Jim Fox’s haze cast storyboard which is linked from Select Publish. Sftp the SWF file to your Sites directory (folder) on the mmas server. Test your link at htm. htm

Module Names "WhatIsHaze1Overview.swf"; "whatIsHaze2CloserLook.swf"; “WhatIsHaze3Cough.swf"; "whatIsHaze4AcidRain.swf"; "WhatCausesHaze1MobileStationary.swf"; "WhatCausesHaze2Components.swf"; "WhatCausesHaze3Details.swf"; "WhatCausesHaze4WeatherImpact.swf";

Module Names "WhatCausesHaze5NationalVariations.swf"; "WhatCausesHaze6Inversions.swf"; "HowMeasureHaze1Overview.swf"; "HowMeasureHaze2Instruments.swf"; "HowMeasureHaze3Visual.swf"; "WhatHazeForecast1AQIOverview.swf"; "WhatHazeForecast2AQIMap.swf"; "WhatHazeForecast3Calculate.swf";

Module Names "HowImprove1Mobile.swf"; "HowImprove2StationaryIndustrial.swf"; "HowImprove3StationaryHome.swf"; "HowImprove4AlternateEnergy.swf"; "HowImprove5Wind.swf"; "HowImprove6Solar.swf";