A for 3 D flash animation-like approach

Posted by john
9/8/2007
Related Tags:

  INTRODUCTION Strictly speaking, this is not a tutorial, aimed at the purpose of this article is to have no contact with the flash of Friends of Vector, Vector type recommended by its convenience, simplicity and the power to make it more perfect Animation, in particular to imitate the 3-D animation, when it comes to Vector category, a person must be said - Robert Penner, his "Flash Mx programming and creativity to achieve", a book for it to the life and soul (I am so think) (first statement this is not the show).    This book published a few years ago, and it should be a lot of flash Friends have read, I only know a few months ago and see (a Jingdezhijue, not to make fun of me), when I see the type Vector , a front-indeed, I was a high school physics teacher, a high school physics of Friends all know that flash in high school physics vector in the weight, so I spent about two days, some of them seriously input vector computer times, and a good understanding of its method, try to do a few common animation, I will Wait a minute detail, I will I lose some of the books out paste code for joint research, as I am also a Novice, and many may be opinionated, hope that the readers understanding should not be throwing things, oh. 
  Text readers can look at the first example: http://www.flash8.net/fla/4822.shtml how, it is quite realistic.    Let us look at some of its code: 
  Vector function = (x, y, z) ( 
  This.x = x; 
  This.y = y; 
  This.z = z; 
  ); 
  / / Vector Construction of a vector, which includes three attributes x, y, z 
  Vector.prototype.rotateXYZ = function (a, b, c) ( 
  Math.sin var sa = (a * Math.PI/180), Math.cos ca = (a * Math.PI/180); 
  Var sb = Math.sin (b * Math.PI/180), cb = Math.cos (b * Math.PI/180); 
  Var sc = Math.sin (c * Math.PI/180), cc = Math.cos (c * Math.PI/180); 
  With (this) ( 
  / / X-axis around 
  Var ry y = z * * ca-sa; 
  Var rz sa z = y * * ca; 
  / / Y-axis around 
  Var rx = sb x rz * * cb; 
  Z = x-rz * * sb cb; 
  / / Z-axis around 
  X = rx * cc-ry * sc; 
  Y = rx sc ry * * cc; 
  ) 
  ); 
  / * class Vector method, the method is to vector around x, y, z-axis respectively to a, b, c incremental rotation angle, 3-D animation for the necessary means to refer to the mathematical vector rotation * / 
  Vector.prototype.getSee = function (ViewDist) ( 
  If (ViewDist == undefined) ( 
  ViewDist = 300; 
  ) 
  Return ViewDist / (ViewDist this.z); 
  ); 
  / / Vector perspective of the method with a return value of the z values and the decrease can be found in Perspective 
  Vector.prototype.cast = function (p) ( 
  If (p = undefined) ( 
  P = this.getSee (); 
  ) 
  With (this) ( 
  Return new constructor (x * p, p y *, 0); 
  ) 
  ); 
  / / In accordance with principles of perspective, the vector projection to x, y plane, no real flash 3-D 
  / / These are off-the-shelf, and is not my business, that is to say, just completed the animation effect, I only wrote a few words below the code can be 
  Point = new Vector (10, 0, 100); 
  / / Create a new object, used for "Earth" initial positioning coordinates 
  This.createEmptyMovieClip ( "mc1", 2000); 
  / / Create an empty film clips 
  Mc1.attachMovie ( "mc2," "mc3", 0); 
  / / In the air film clips to insert mc3, that is, "Sun", a depth of 2000 
  OnEnterFrame = function () ( 
  Mc._x = Px * 2.5; 
  Mc._y Py * = 2.5; 
  / / Positioning mc (Earth) the initial coordinates 
  This.mc.swapDepths (2000-Math.round (Point.z * 10)); 
  / * Set up mc depth, and see, if the "sun" at the origin, from the three-dimensional coordinates, z <0 in the back of the sun, the depth should be more than 2000, the contrary is less than 2000 * / 
  Point.rotateXYZ (0.5, 4, 0.1); 
  / / Vector Point for around x, y, z rotation 0.5,4,0.1 
  M = Point.getSee (); 
  / / Get the perspective of Point m 
  Mc._xscale mc._yscale = m * = 40; 
  / / Mc scalable to 40 m * (the value of experience), the farther away from the readers, m smaller mc smaller, resulting in a three-dimensional visual sense 
  P = Point.cast (); 
  / / Vector Point projector to the xy plane, as a moment of the coordinates mc 
  ); We should not be scared by the code from the above explanation I can be seen, many of its own code is not written, it can be said to remember the trip, and play their part, not too complicated algorithm, if conventional the effect of the above methods, I think, trigonometric functions, elliptic equation parameters estimated unavoidable bar. 

  How, feeling it a bit, look at the second example: http://www.flash8.net/fla/4848.shtml.    Three-dimensional sense out of the bar, look at the code first 
  / / Build a category 
  Vector function = (x, y, z) ( 
  This.x = x; 
  This.y = y; 
  This.z = z; 
  ); 
  / / Create a class, that is, the rotation vector approach, check mathematical oh 
  Vector.prototype.rotateXYZ = function (a, b, c) ( 
  Math.sin var sa = (a * Math.PI/180), Math.cos ca = (a * Math.PI/180); 
  Var sb = Math.sin (b * Math.PI/180), cb = Math.cos (b * Math.PI/180); 
  Var sc = Math.sin (c * Math.PI/180), cc = Math.cos (c * Math.PI/180); 
  With (this) ( 
  / / X-axis around 
  Var ry y = z * * ca-sa; 
  Var rz sa z = y * * ca; 
  / / Y-axis around 
  Var rx = sb x rz * * cb; 
  Z = x-rz * * sb cb; 
  / / Z-axis around 
  X = rx * cc-ry * sc; 
  Y = rx sc ry * * cc; 
  ) 
  ); 
  / / Get perspective, a three-dimensional effect 
  Vector.prototype.getSee = function (ViewA4ist) ( 
  If (ViewA4ist == undefined) ( 
  ViewA4ist = 300; 
  ) 
  Return ViewA4ist / (ViewA4ist this.z); 
  ); 
  / / Projection to the xy coordinate plane, z = 0, because there is no real flash 3 d 
  Vector.prototype.cast = function (p) ( 
  If (p = undefined) ( 
  P = this.getSee (); 
  ) 
  With (this) ( 
  Return new constructor (x * p, p y *, 0); 
  ) 
  ); 
  / / I write real code from the beginning of the following 
  / / Initialization side, and one vertex coordinates A1 
  D = 100; 
  A = -50; 
  B = -50; 
  C = -50; 
  / / Initialization cube eight vertex coordinates 
  A1 = new Vector (a, b, c); 
  A2 = new Vector (ad, b, c); 
  A3 = new Vector (ad, bd, c); 
  A4 = new Vector (a, bd, c); 
  A5 = new Vector (a, bd, cd); 
  A6 = new Vector (ad, bd, cd); 
  A7 = new Vector (ad, b, cd); 
  A8 = new Vector (a, b, cd); 
  / * Function definition painted cube, the idea of the 12-cube even out, not the only way, but I drew on the draft several times before drawn oh * / 
  Function draw () ( 
  Clear (); 
  LineStyle (1, 100); 
  MoveTo (A1.x, A1.y, A1.z); 
  LineTo (A2.x, A2.y, A2.z); 
  LineTo (A3.x, A3.y, A3.z); 
  LineTo (A4.x, A4.y, A4.z); 
  LineTo (A5.x, A5.y, A5.z); 
  LineTo (A8.x, A8.y, A8.z); 
  LineTo (A7.x, A7.y, A7.z); 
  LineTo (A6.x, A6.y, A6.z); 
  LineTo (A3.x, A3.y, A3.z); 
  MoveTo (A1.x, A1.y, A1.z); 
  LineTo (A4.x, A4.y, A4.z); 
  MoveTo (A1.x, A1.y, A1.z); 
  LineTo (A8.x, A8.y, A8.z); 
  MoveTo (A7.x, A7.y, A7.z); 
  LineTo (A2.x, A2.y, A2.z); 
  MoveTo (A5.x, A5.y, A5.z); 
  LineTo (A6.x, A6.y, A6.z); 
  ) 
  / / Xyz three randomly generated the direction of rotation 
  E = random (5); 
  F = random (5); 
  G = random (5); 
  / * Function definition, followed by eight vertex angle of rotation after their projection as a new vertex coordinates, 
  Calling painting cube function * / 
  Function mm () ( 
  For (i = 1; i <= 9; i) ( 
  This [ "A" i]. RotateXYZ (e, f, g); 
  This [ "A" i]. Cast (); 
  ) 
  Draw (); 
  ) 
  / * Call a function to draw a cube, not call functions mm, that is, the points are not rotating, it is a square (rotating it really is a call button in the movie clip onEnterFrame event) * / 
  Draw (); 

  (First cup of water), Hey, it felt a bit strong, the same tools in the hands of people play different effect is not the same, I just a rookie has done something to love is disgraceful, and other experts laugh me, and I just want to抛砖引玉up, and 3-D problems can be resolved, it will not be a problem two-dimensional plane, following a more wordy introduction of a simple two-dimensional vector applications. 



pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'


type='application/x-shockwave-flash' width=550 height=400>

  Click here to download the source files 

  Also on the high school physical mapping flash Friends may also recall that this is the vector parallel edges of the visit of the place, the Internet has already been done, Hey, here I just want to try only the power of Vector (who lost the banana peel?) 
  First look at the code 

  _global.Vector = Function (x, y) ( 
  This.x = x; 
  This.y = y; 
  ); 
  Vector.prototype.reset = function (x, y) ( 
  This.constructor (x, y); 
  ); 
  / / Vector sum 
  Vector.prototype.Addition = function (v) ( 
  With (this) ( 
  Return new constructor (x vx, y vy); 
  ) 
  ); 
  / / Vector subtraction 
  Vector.prototype.Subtraction = function (v) ( 
  With (this) ( 
  Return new constructor (xv.x, yv.y); 
  ) 
  ); 
  / / Vector angle 
  Vector.prototype.getAngle = function () ( 
  Return Math.atan2 (this.y, this.x) * 180/Math.PI; 
  ); 
  / / Vector length 
  Vector.prototype.getLength = function () ( 
  With (this) ( 
  Return Math.sqrt (x * y * xy); 
  ) 
  ); 
  / / These are the things Mr. Robert Penner, to rely on themselves Below 
  / / Sets the angle of the vector and its initial value 
  PointA = new Vector (0, 0); 
  F1 = new Vector (150, 10); 
  F2 = new Vector (70, 80); 
  F = F1.Addition (F2); 
  Angle1 = F1.getAngle (); 
  Angle2 = F2.getAngle (); 
  Angle = F.getAngle (); 
  / / Function set the direction of the arrow 
  Function setarrow (mc, angle, v) ( 
  With (mc) ( 
  _rotation = Angle; 
  _x = Vx; 
  _y = Vy; 
  L = v.getLength (); 
  _xscale = L / 5; 
  _yscale = L / 5; 
  ) 
  ) 
  / / Call functions set the direction of the arrow 
  Setarrow (arrow1, angle1, F1); 
  Setarrow (arrow2, angle2, F2); 
  Setarrow (arrow, angle1, F); 
  / / Connect function 
  Function onLine (v1, v2) ( 
  This.lineStyle (2, 100); 
  This.moveTo (v1.x, v1.y); 
  This.lineTo (v2.x, v2.y); 
  ) 
  / / Mapping Functions 
  Function draw () ( 
  This.clear (); 
  OnLine (PointA, F1); 
  OnLine (PointA, F2); 
  OnLine (PointA, F); 
  OnLine (F, F1); 
  OnLine (F, F2); 
  ) 
  Draw (); 
  / / Initialization above, the completion of a state parallelogram 
  This.onMouseMove = function () ( 
  If (a == 1 & & b == 1) ( 
  F1.reset (this._xmouse, this._ymouse); 
  F = F1.Addition (F2); 
  ) Else if (a == 2 & & b == 1) ( 
  F2.reset (this._xmouse, this._ymouse); 
  F = F2.Addition (F1); 
  ) Else if (a == 3 & & b == 1) ( 
  F2.reset (this._xmouse, this._ymouse); 
  F1 = F. Subtraction (F2); 
  ) 
  Angle1 = F1.getAngle (); 
  Angle2 = F2.getAngle (); 
  Angle = F.getAngle (); 
  Setarrow (arrow1, angle1, F1); 
  Setarrow (arrow2, angle2, F2); 
  Setarrow (arrow, angle, F); 
  / / These are the coordinates of the mouse as a variable to join, re-initialization vector and its various angles, which was a button in the assignment 
  Draw (); 
  / / Function calls the painting of a new quadrilateral, the clear () function, the removal of the original quadrilateral 
  UpdateAfterEvent (); 
  ); 
  This.onMouseDown = function () ( 
  B = 1; 
  ); 
  This.onMouseUp = function () ( 
  B = 2; 
  ); Code seems a bit long, but careful observation is not difficult to find, the entire code no complicated algorithm, some simple methods are applied directly. 
  Readers unconsciously wasted so much time, I am sorry, we might look back, and summing up, it is easy to conclude that the method of Vector to a certain extent, to avoid too much of the complex mathematical algorithms, mathematical foundation is not afraid of complex algorithms good part of the Friends of flash may be a good way to help you make beautiful flash works.    Achieve the same effect is not the only way, therefore, the above method is not necessarily the best, the experts, they may be accustomed to the method is the best, see Shanba, Crouching Tiger, Hidden Dragon, and many experts with the general approach, with excellent Basic skills and rich imagination, and made a beautiful pieces of work, is also do not get any. 
  References: "Flash Mx programming and creativity to achieve" 

Related articles:

CSS 101: Handling multiple rules for the same element
  ԭ ģ º http://www.builderau.com.au/program/css/soa/CSS-101-Handling-multiple-rules-for-the-same-element/0, 339028392,339274859,00. Htm    One of the more important details of understanding and using Cascading Style Sheets (CSS) is the cascading aspect of its name. T...
Published how AJAX web site (not the development and installation ASPAJAXExtSetup.msi release ajax website)
  Source of the problem:    Atlas renamed asp.net ajax ago, the installation of the development kits will be in the BIN directory of sites corresponding atlas generated under the dll files so that when it is published, together with all the components will be released dll out, but r...
Produced using simple Flash animation birds
  Some of Flash animation effects can be completely controlled by the code completion and generate images, for example, of this paper is to achieve results is through a section of the code is not complicated of the two into a vibrant segment of the birds.    With a picture, certainly...
Web2.0 established website issue to be resolved.
  Web2.0 mentioned, we need to talk about Web1.0.    Web1.0 is the portal of the world, is characterized by large websites, edit many, a large number of professional editors can guarantee website is updated daily and hundreds of thousands of records, updated fast, has good content, a...
Dreamweaver MX 2004 Video Collection Guide (120)
  120 Set: OUR advertising commitment and the main production area    Curriculum objectives: OUR advertising commitment and the main production area    Curriculum points: the use of Photoshop and Dreamweaver page advertisement production area.    Episode 1: ...