Download - Maths and RIA
![Page 2: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/2.jpg)
1. Smooth animation theory
![Page 3: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/3.jpg)
12 basic principles of animation It was introduced by the Disney animators
in 1981
The main purpose was to produce an illusion of characters adhering to the basic laws of physics
but they also dealt with more abstract issues, such as emotional timing and character appeal.
![Page 4: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/4.jpg)
12 basic principles of animation Squash and stretch Anticipation Staging Straight ahead action and pose to pose Follow through and overlapping action Slow in and slow out Arcs Secondary action Timing Exaggeration Solid drawing Appeal
Reference: http://en.wikipedia.org/wiki/12_basic_principles_of_animation
![Page 5: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/5.jpg)
12 basic principles of animation
許誠毅 and Shrek
![Page 6: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/6.jpg)
Some short videos
Short videos by Pixar:
http://www.youtube.com/watch?v=ZMmVXOWe5o0
http://www.youtube.com/watch?v=Xt9Fmsh2bk4&feature=related
![Page 7: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/7.jpg)
Slow in and slow out
The movement of the human body, and most other objects, needs time to accelerate and slow down
![Page 8: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/8.jpg)
Easingd
t
d
t
![Page 9: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/9.jpg)
Arcs
Most objects’ actions occur along an arched trajectory
![Page 10: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/10.jpg)
2. Applying easing in code
![Page 11: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/11.jpg)
Traditional Easing method
The traditional easing formula:
myMc.x += (targetX – myMc.x) / FACTOR;
A smaller value of “FACTOR” makes the easing faster
Demo: 1_traditional_easing
![Page 12: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/12.jpg)
Traditional Easing method Some drawbacks of this easing method:
Time of the easing is difficult to control Need a lot of programming effort for
optimization
private function handleEnterFrame() { myMc.x += (targetX – myMc.x) / FACTOR;
if (Math.abs(targetX – myMc.x) < 1) { myMc.x = targetX; delete this.onEnterFrame; }}
![Page 13: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/13.jpg)
The current easing method Robert Penner introduced a set of easing
formulae
Reference: http://www.robertpenner.com/
By providing the easing time and target value, the easing formulae will interpolate the middle values for you
demo: http://www.robertpenner.com/easing/easing_demo.html
![Page 14: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/14.jpg)
![Page 15: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/15.jpg)
Common Tweening Libraries Some famous tweening libraries
Tweener TweenLite Boostworthy Animation System FuseKit Go KitchenSync
A comparison of these tweening libraries can be found at:http://dispatchevent.org/wp-content/uploads/2008/04/Tween-Engine-Comparisons.pdf
![Page 16: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/16.jpg)
Tweener pros and consPros: Syntax is simple, easy to learn and use Can modify any properties of an object, not just MCs Small file size ~10KB Able to switch to time-based or frame-based mode Support for AS2 and AS3 Well documentation and support
Cons No sequencing supported
![Page 17: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/17.jpg)
Tweener syntaxHere is a code sample:
Tweener.addTween(myMc, { _x: 100, _y: 100, time: 2, delay: 1, transition: “easeOutExpo”, onStart: Delegate.create(this,this.handleOnStart), onUpdate: Delegate.create(this,this.handleOnUpdate), onComplete: Delegate.create(this,this.handleOnComplete)});
![Page 18: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/18.jpg)
Application of Tweener Tween every numeric properties of
movieclips x y width height scaleX scaleY alpha
![Page 19: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/19.jpg)
Application of Tweener Numeric variables can also be tweened
Possible application can be: Tween sound volume Tween blur filter value Create number counter Tween camera position in 3D engine
Demo: 2_tweener_counter
![Page 20: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/20.jpg)
Adv. of using Tweener No delay for time-based animation
Make animation continuous
Less timeline, smaller movieClip hierarchy Demo: 3_continuous_animation
Movieclip visible on stage, easy to be found
Animation sequence can be applied within one functionDemo: 4_animation_sequence
![Page 21: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/21.jpg)
Use Tweener all the time? Using too much “Tweener.addTween” will
lead to large amount of computation
For example, tweening a lot of movieclips when mouse scroll
So what is the solution?
Demo: 5_tweener_not_suitable
![Page 22: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/22.jpg)
Some more tricks about Tweener
Combination of different easing on different properties
Demo: 6_tweener_easing_combination
Create smooth feeling
![Page 23: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/23.jpg)
3. Forming Curve and Surface
![Page 24: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/24.jpg)
Forming Curve and Surface
Curves and Surfaces can be formed easily using the parametric equations
![Page 25: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/25.jpg)
Forming Curve and Surface Parametric equations means to express the
x, y and z co-ordinate into general formula
For example, equation of parabola:
y = ax2
can be parameterized by using a free parameter t, and setting:
x = t, y = at2
![Page 26: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/26.jpg)
Some common formulae Parabola
x = t, y = at2, where a is constant
Sine wavex = t, y = a sin(t), where a is constant
Circlex = a cos(t), y = a sin(t), where a is constant
![Page 27: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/27.jpg)
Some common formulae (cont) Cylinder
x = a cos(t), y = a sin(t), z = buwhere a and b are constant
Helixx = a cos(t), y = a sin(t), z = btwhere a and b are constant
Spherex = R cos(A) sin(B)y = R sin(A) sin(B)z = R cos (B)where R is constant
![Page 28: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/28.jpg)
Demo Time!
Demo: 7_curve_surface_forming
![Page 29: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/29.jpg)
Let’s go further from the basic
1. How to formulate Ellipsoid?2. How to formulate Hemisphere?3. How to formulate Cone?
![Page 30: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/30.jpg)
Playing with the formulae
Mac Fisheye effect concept
Demo: 8_mac_fisheye
Tweener with formula
Demo:9_tweener_and_formula
![Page 31: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/31.jpg)
4. Introduction to vector
A
B
Length = |AB|
a
![Page 32: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/32.jpg)
Addition of vector
![Page 33: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/33.jpg)
Subtraction of vector
![Page 34: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/34.jpg)
Scaling vector
![Page 35: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/35.jpg)
Normalizing vector
A normal vector means its length is equal to 1
![Page 36: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/36.jpg)
Dot product a · b = ||a|| ||b|| cosθ
Special case: a · b = cos θ, where a and b are normal vectors
a bθ
![Page 37: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/37.jpg)
ECFF’s vector class Two classes: Vector2D and Vector3D Some useful functions:
var a:Vector2D = new Vector2D(3,4); var b:Vector2D = a.clone(); a.normalize(); var len:Number = a.getLength(); var dist:Number = a.getDistance(b); var c:Vector2D = a.plus(b); c = a.subtract(b); c = a.scale(100); var dotProduct:Number = a.dot(c);
![Page 38: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/38.jpg)
Application of vector Can generalize geometry problems,
similar concept for 1D, 2D or 3D problems
Useful for collision detection and collision response
Good tutorial on using vector:http://www.tonypa.pri.ee/vectors/start.html
![Page 39: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/39.jpg)
Vector usage example 1: Finding the angle from pt. B to pt. A
The most straight forward solution isto use Math.tan() forthe 4 quad
troublesome as there will be many cases to be considered
![Page 40: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/40.jpg)
Vector usage example 1 (cont):var v:Vector2D = new Vector2D(b.x – a.x, b.y – a.y);
v.normalize();
var dotProduct:Number = v.y;//Actually it is doing dot product with the vector [0,1]//var dotProduct:Number = v.dot(new Vector(0,1));
var angle:Number = Math.acos(dotProduct);
angle = (a.x < 0) ? –angle : angle;
![Page 41: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/41.jpg)
Vector usage example 2:
Create the explosion effect for 100 particles
The particles will finally lies on a ring with radius 100
![Page 42: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/42.jpg)
Vector usage example 2 (cont):Foreach particles p
var v:Vector2D = new Vector2D(p._x,p._y);
v.normalize();
v.scale(100);
Tweener.addTween(p, { _x: v.x, _y: v.y, time: 0.5});
The same concept for 3D problem too!!!
![Page 43: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/43.jpg)
Interesting site to share http://spectra.msnbc.com/
http://www.etsy.com/time_machine.php
http://ecodazoo.com/
http://seraf.mediabox.fr/wow-engine/as3-3d-physics-engine-wow-engine/
http://box2dflash.sourceforge.net/
![Page 44: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/44.jpg)
You can also create cool RIA!!!
![Page 45: Maths and RIA](https://reader036.vdocument.in/reader036/viewer/2022062703/554d2c08b4c905ca208b532d/html5/thumbnails/45.jpg)