{"id":536,"date":"2011-02-22T03:44:23","date_gmt":"2011-02-22T07:44:23","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=536"},"modified":"2011-02-22T06:07:49","modified_gmt":"2011-02-22T10:07:49","slug":"3d-particles-rotation-in-flash","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/3d-particles-rotation-in-flash\/","title":{"rendered":"3D Particles rotation in flash"},"content":{"rendered":"

<\/embed><\/object><\/p>\n

1. Open a new document and set background color as black.<\/p>\n

2. Select Layer-1, Keyframe 1. Press F9 to write the following action script. I have explained the code in the comments.
\nimport fl.motion.easing.Quartic;
\nimport fl.motion.easing.Bounce;
\nimport fl.motion.Animator3D;
\nimport main.submain.loaders.*;
\nimport main.submain.bitmapUtilities.PictureAtomizer;
\nimport main.submain.objects.Particle3D;
\nimport main.submain.geom3D.*;
\nimport main.submain.display.*;
\nvar picURLString:Array; \/\/ var is a variables, picURLString is a type and array is an atrribute
\nvar picLoader:PictureLoader;
\nvar pic:Array;
\nvar atomizer:PictureAtomizer;
\nvar particles:Array;
\nvar blur:BlurFilter;
\nvar darken:ColorTransform;
\nvar board:RotatingParticleBoard;
\nvar boardRect:Rectangle;
\nvar filterPoint:Point;
\nvar p:Particle3D;
\nvar param:Number;<\/p>\n

\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\ninit(); \/\/ function name
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\nfunction init():void {
\npicURLString= [“image\/violet.jpg”]; \/\/path of image
\npicLoader = new PictureLoader();
\nboard = new RotatingParticleBoard(500,340,true, 0x00000000, 500); \/\/set the width and height of rectangle box
\nboard.setDepthDarken(-10,-80,1.5); \/\/ brightens and darken the image
\nboard.makeFrame(1,0xffffff,5); \/\/ stroke and color of rectangle box
\nboard.holder.x = stage.stageWidth\/2 – board.width\/2; \/\/ position of rectangle box in x-axis
\nboard.holder.y = stage.stageHeight\/2 – board.height\/2; \/\/position of rectangle box in y-axis
\n\/\/set the starting rotation:
\nboard.currentQ = new Quaternion(Math.cos(Math.PI\/12), Math.sin(Math.PI\/2)\/Math.sqrt(2),0,-Math.sin(Math.PI\/5)\/Math.sqrt(2));
\n\/\/set the automatic rotation to use while mouse is not dragging:
\nboard.autoQuaternion = new Quaternion(Math.cos(Math.PI\/300),0,Math.sin(Math.PI\/300),0);
\nblur = new BlurFilter(50,50);
\ndarken = new ColorTransform(500,1,1,0.9); \/\/ RGB colors and 0.9 gives the smoke effect
\nboardRect = new Rectangle(0,0,board.width,board.height);
\nfilterPoint = new Point(0,0);
\n\/\/add following code to see arcball silhouette:
\n\/*
\nvar ballOutline:Shape = new Shape();
\nballOutline.graphics.lineStyle(1,0×888888);
\nballOutline.graphics.drawCircle(0,0,board.arcballRad);
\nballOutline.x = board.width\/2;
\nballOutline.y = board.height\/2;
\nboard.holder.addChild(ballOutline);
\n*\/
\npicLoader.addEventListener(PictureLoader.ALL_PICS_LOADED, createParticles);
\npicLoader.loadPics(picURLString);
\n}
\nfunction createTextLabels():void {
\nvar box:TextField = new TextField();
\nvar format:TextFormat = new TextFormat(“Times New Roman”,16,0xffffff);
\nbox.defaultTextFormat = format;
\nbox.text = String(particles.length)+ ” particles.”;
\nbox.x = board.holder.x+1;
\nbox.y = board.holder.y+board.height+5;
\nstage.addChild(box);
\nvar box2:TextField = new TextField();
\nbox2.defaultTextFormat = format;
\nbox2.multiline = false;
\nbox2.autoSize = TextFieldAutoSize.RIGHT;
\nbox2.x = board.holder.x+board.width-5-box2.width;
\nbox2.y = board.holder.y+board.height+5;
\nstage.addChild(box2);
\nvar box3:TextField = new TextField();
\nbox3.defaultTextFormat = format;
\nbox3.multiline = false;
\nbox3.autoSize = TextFieldAutoSize.CENTER;
\nbox3.text = “Drag the mouse to rotate”;
\nbox3.x = board.holder.x+board.width\/2-box3.width\/2;
\nbox3.y = board.holder.y-25;
\nstage.addChild(box3);
\n}
\nfunction createParticles(evt:Event):void {
\npic = picLoader.picArray;
\npicLoader.removeEventListener(PictureLoader.ALL_PICS_LOADED, createParticles);
\natomizer = new PictureAtomizer();
\natomizer.sampling = 1;
\natomizer.spread = 1.50;
\natomizer.sampleFuzzX = 0;
\natomizer.sampleFuzzY = 0;
\natomizer.originX = Math.floor(pic[0].width\/2);
\natomizer.originY = Math.floor(pic[0].height\/2);
\natomizer.addEventListener(PictureAtomizer.PARTICLES_CREATED, go);
\natomizer.createParticles(pic[0]);
\n}
\nfunction go(evt:Event):void {
\nparticles = atomizer.particleArray;
\natomizer.setPositionsByPic(0,0,0); \/\/center position
\nstage.addChild(board.holder);
\ncreateTextLabels();
\nstage.addEventListener(Event.ENTER_FRAME, onEnter);
\n}
\nfunction onEnter(evt:Event):void {
\n\/\/Viewpoint-independent changes to particle positions. Here we present an example of each particle oscillating in the z direction, with amplitude related to the luminance of the particle. \/\/
\nparam = 0.65*Math.min(1.75,Math.max(0,(1-Math.cos(getTimer()*.0003)-0.25*Math.cos(getTimer()*.0006))));
\nfor (var i:Number = 0; i<= particles.length – 1; i++) {
\np = particles[i];
\np.z = param*(p.lum-128);
\n}
\n\/\/apply Filters to effect fade-out of old pixels
\nboard.bitmapData.applyFilter(board.bitmapData, boardRect, filterPoint, blur);
\nboard.bitmapData.colorTransform(boardRect,darken);
\n\/\/draw particles
\nboard.drawParticles(particles);
\n}<\/p>\n

3. Here the path of folder name is very important. So give the proper name to your folder and files and give the same path name in actionscript too. Keep your fla file in separate folder name it as your wish like \u201c3Dparticles\u201d and inside this folder create one folder in the name of \u201cImage\u201d. Place all your required pictures in this folder.<\/p>\n

4. Create one folder inside the \u201c3Dparticles\u201d folder in the name of \u201cmain\u201d. Again create one \u201csubmain\u201d folder within the \u201cmain\u201d.<\/p>\n

5. it\u2019s time to create five folders inside the \u201csubmain\u201d. Name it as bitmapUtilities, display, geom3D, loaders, and objects.<\/p>\n

6. Open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cPictureAtomizer\u201d in \u201cbitmapUtilities\u201d:<\/p>\n

package main.submain.bitmapUtilities {
\nimport flash.display.*;
\nimport flash.events.*;
\nimport main.submain.geom3D.*;
\nimport main.submain.objects.Particle3D;
\npublic class PictureAtomizer extends EventDispatcher {
\npublic static const PARTICLES_CREATED:String=”particlesCreated”;
\npublic var pic:Bitmap;
\npublic var sampling:Number;
\npublic var spread:Number;
\npublic var originX:Number;
\npublic var originY:Number;
\npublic var sampleFuzzX:Number;
\npublic var sampleFuzzY:Number;
\nprivate var _particleArray:Array;
\npublic function PictureAtomizer(inputSampling=1, inputSpread=1, inputOriginX=0, inputOriginY=0, inputFuzzX=0, inputFuzzY=0):void {
\nthis.sampling = inputSampling;
\nthis.spread = inputSpread;
\nthis.originX = inputOriginX;
\nthis.originY = inputOriginY;
\nthis.sampleFuzzX = inputFuzzX;
\nthis.sampleFuzzY = inputFuzzY;
\nthis._particleArray = [];
\n}
\npublic function createParticles(inputPic:Bitmap):void {
\nvar c:uint;
\nvar m:Number;
\nvar num:Number = 0;
\nvar x0:Number;
\nvar y0:Number;
\nthis.pic = inputPic;
\n\/\/separate picture pixels into layers
\nfor (var i:Number=0; i<=pic.width-1; i = i + sampling) {
\nfor (var j:Number=0; j<=pic.height-1; j = j + sampling) {
\n\/\/read pixel (i,j)
\nx0 = i + sampleFuzzX*sampling*(2*Math.random()-1);
\ny0 = j + sampleFuzzY*sampling*(2*Math.random()-1);
\n\/\/create particle
\nc = pic.bitmapData.getPixel32(x0,y0);
\nvar p:Particle3D = new Particle3D(c);
\n\/\/set picture-based coordinates
\np.picX = spread*(x0 – originX);
\np.picY = spread*(y0 – originY);
\n\/\/add to array
\nthis.particleArray.push(p);
\n}
\n}
\ndispatchEvent(new Event(PictureAtomizer.PARTICLES_CREATED));
\n}
\npublic function setProjectionCoords(fLen:Number):void {
\nvar m:Number;
\nvar p:Particle3D;
\nfor (var t=0; t<= _particleArray.length – 1; t++) {
\np = _particleArray[t];
\nm = fLen\/(fLen – p.w);
\np.projX = p.u*m + originX;
\np.projY = p.v*m + originY;
\n}
\n}
\npublic function setPositionsByPic(offsetX:Number, offsetY:Number, z0:Number):void {
\nvar p:Particle3D;
\nfor (var t=0; t<= _particleArray.length – 1; t++) {
\np = _particleArray[t];
\np.x = p.picX + offsetX;
\np.y = p.picY + offsetY;
\np.z = z0;
\n}
\n}
\npublic function setGlobalAlpha(globalAlpha:Number):void {
\nvar c:uint;
\nvar p:Particle3D;
\ntrace(_particleArray.length);
\nfor (var t=0; t<= _particleArray.length – 1; t++) {
\np = _particleArray[t];
\np.setColor((uint(255*globalAlpha) << 24) | (p.color & 0x00FFFFFF));
\n}
\n}<\/p>\n

public function buildDestinationArrays(numDestinations:Number):void {
\nvar p:Particle3D;
\nfor (var t=0; t<= _particleArray.length – 1; t++) {
\np = _particleArray[t];
\nfor (var n:Number = 0; n <= numDestinations-1; n++) {
\nvar thisPoint3D:Point3D = new Point3D();
\np.dest.push(thisPoint3D);
\n}
\n}
\n}
\npublic function get particleArray():Array {
\nreturn _particleArray;
\n}
\n}
\n}<\/p>\n

7. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cParticleBoard\u201d in \u201cdisplay\u201d:
\npackage main.submain.display {
\nimport flash.display.*;
\nimport main.submain.objects.Particle3D;
\nimport main.submain.geom3D.*;
\npublic class ParticleBoard extends Bitmap {
\npublic var zBuffer:Array;
\npublic var fLen:Number;
\npublic var projOriginX:Number;
\npublic var projOriginY:Number;
\n\/\/darkening related variables
\nprivate var useDepthDarken:Boolean;
\nprivate var A:Number;
\nprivate var expRate:Number;
\nprivate var maxBrighten:Number;
\nprivate var bgColor;
\n\/\/Vars used in functions
\nprivate var f:Number;
\nprivate var m:Number;
\nprivate var dColor:uint;
\nprivate var intX:int;
\nprivate var intY:int;
\nprivate var p:Particle3D;
\nprivate var X2:Number;
\nprivate var Y2:Number;
\nprivate var Z2:Number;
\nprivate var wX:Number;
\nprivate var wY:Number;
\nprivate var wZ:Number;
\nprivate var xX:Number;
\nprivate var xY:Number;
\nprivate var xZ:Number;
\nprivate var yY:Number;
\nprivate var yZ:Number;
\nprivate var zZ:Number;
\npublic var frame:Shape;
\npublic var holder:Sprite;
\n\/*
\nframe = new Shape();
\nframe.graphics.lineStyle(2,0×444444);
\nframe.graphics.drawRect(0,0,board.width,board.height);
\nframe.x = 0;
\nframe.y = 0;
\nboardHolder = new Sprite();
\nboardHolder.x = stage.stageWidth\/2 – board.width\/2;
\nboardHolder.y = stage.stageHeight\/2 – board.height\/2;
\nstage.addChild(boardHolder);
\nboardHolder.addChild(board);
\nboardHolder.addChild(frame);
\n*\/
\npublic function ParticleBoard(w, h, transp=true, fillColor = 0x00000000, _fLen=200) {
\nvar thisData:BitmapData = new BitmapData(w, h, transp, fillColor)
\nthis.bitmapData = thisData;
\nthis.zBuffer = [];
\nthis.useDepthDarken = false; \/\/changed to true in setDepthDarken
\nthis.projOriginX = w\/2;
\nthis.projOriginY = h\/2;
\nthis.fLen = _fLen;
\nthis.bgColor = fillColor;
\nthis.holder = new Sprite();
\nthis.holder.addChild(this);
\nthis.x = 0;
\nthis.y = 0;
\n}
\npublic function makeFrame(thick:Number, c:uint, inputAlpha:Number):void {
\nthis.frame = new Shape();
\nthis.frame.graphics.lineStyle(thick, c, inputAlpha);
\nthis.frame.graphics.drawRect(0,0,this.width,this.height);
\nthis.frame.x = 0;
\nthis.frame.y = 0;
\nthis.holder.addChild(frame);
\n}
\npublic function setDepthDarken(unityDepth:Number, halfDepth:Number, _maxBrighten):void {
\nthis.useDepthDarken = true;
\nthis.A = Math.pow(2, unityDepth\/(halfDepth-unityDepth));
\nthis.expRate = Math.LN2\/(unityDepth-halfDepth);
\nthis.maxBrighten = _maxBrighten;
\n}
\npublic function clearBoard(particles:Array):void {
\nfor (var i:Number = 0; i<=particles.length-1; i++) {
\np = particles[i];
\nif (p.onScreen) {
\nintX = int(p.projX);
\nintY = int(p.projY);
\nzBuffer[intX+this.height*intY] = Number.NEGATIVE_INFINITY;
\n\/\/could also insert the code below to erase pixels, but my method has been to use a blur filter and a colorTransform applied to whole bitmap, which creates “ghost” which fades out after a few frames. this.bitmapData.setPixel32(intX, intY, bgColor);
\n}
\n}
\n}\/\/end of clearBoard
\npublic function drawParticles(particles:Array, q:Quaternion):void {
\n\/\/clear the zBuffer
\nclearBoard(particles);
\nfor (var i:Number = 0; i<=particles.length-1; i++) {
\np = particles[i];
\n\/\/viewpoint-relative coordinates found by quaternion rotation. Quaternion has been converted to rotation matrix, using common subexpressions for efficiency. \t\t\t\t\tX2 = 2*q.x;
\nY2 = 2*q.y;
\nZ2 = 2*q.z;
\nwX = q.w*X2;
\nwY = q.w*Y2;
\nwZ = q.w*Z2;
\nxX = q.x*X2;
\nxY = q.x*Y2;
\nxZ = q.x*Z2;
\nyY = q.y*Y2;
\nyZ = q.y*Z2;
\nzZ = q.z*Z2;
\np.u = (1-(yY+zZ))*p.x + (xY-wZ)*p.y + (xZ+wY)*p.z;
\np.v = (xY+wZ)*p.x + (1-(xX+zZ))*p.y + (yZ-wX)*p.z;
\np.w = (xZ-wY)*p.x + (yZ+wX)*p.y + (1-(xX+yY))*p.z;
\n\/\/Projection coordinates
\nm = fLen\/(fLen – p.w);
\np.projX = p.u*m + projOriginX;
\np.projY = p.v*m + projOriginY;
\n\/\/test if particle is in viewable region
\nif ((p.projX > this.width)||(p.projX<0)||(p.projY<0)||(p.projY>this.height)||(p.w>fLen-1)) {
\np.onScreen = false;
\n}
\nelse {
\np.onScreen = true;
\n}
\n\/\/drawing
\nintX = int(p.projX);
\nintY = int(p.projY);
\nif (p.onScreen) {
\nif (!(p.w < zBuffer[intX+this.height*intY])) {
\nif (this.useDepthDarken) {
\n\/\/position-based darkening – exponential
\nf = A*Math.exp(expRate*p.w);
\nif (f>maxBrighten) {
\nf = maxBrighten;
\n}
\ndColor = (0xFF000000) |(Math.min(255,f*p.red) << 16) | (Math.min(255,f*p.green) << 8 ) | (Math.min(255,f*p.blue));
\nthis.bitmapData.setPixel32(intX, intY, dColor);
\n}
\nelse {
\nthis.bitmapData.setPixel32(intX, intY, p.color);
\n}<\/p>\n

this.zBuffer[intX+this.height*intY] = p.w;
\n}
\n}
\n}
\n}\/\/end of drawParticles
\n}\/\/end of class definition
\n}<\/p>\n

8. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cRotatingParticleBoard\u201d in \u201cdisplay\u201d:<\/p>\n

package main.submain.display {
\nimport flash.display.*;
\nimport flash.events.*;
\nimport main.submain.objects.Particle3D;
\nimport main.submain.geom3D.*;
\nimport flash.events.MouseEvent;
\npublic class RotatingParticleBoard extends Bitmap {
\npublic var zBuffer:Array;
\npublic var fLen:Number;
\npublic var projOriginX:Number;
\npublic var projOriginY:Number;
\n\/\/darkening related variables
\nprivate var useDepthDarken:Boolean;
\nprivate var A:Number;
\nprivate var expRate:Number;
\nprivate var maxBrighten:Number;
\nprivate var bgColor;
\n\/\/Vars used in functions
\nprivate var f:Number;
\nprivate var m:Number;
\nprivate var dColor:uint;
\nprivate var intX:int;
\nprivate var intY:int;
\nprivate var p:Particle3D;
\nprivate var X2:Number;
\nprivate var Y2:Number;
\nprivate var Z2:Number;
\nprivate var wX:Number;
\nprivate var wY:Number;
\nprivate var wZ:Number;
\nprivate var xX:Number;
\nprivate var xY:Number;
\nprivate var xZ:Number;
\nprivate var yY:Number;
\nprivate var yZ:Number;
\nprivate var zZ:Number;
\npublic var frame:Shape;
\npublic var holder:Sprite;
\nprivate var v1:Point3D;
\nprivate var v2:Point3D;
\nprivate var rSquare:Number;
\nprivate var invR:Number;
\nprivate var mouseDragging:Boolean;
\nprivate var lastQ:Quaternion;
\nprivate var changeQ:Quaternion;
\nprivate var requestQ:Quaternion;
\nprivate var inside:Boolean;
\nprivate var numRadii:Number;
\npublic var arcballRad:Number;
\npublic var currentQ:Quaternion;
\npublic var autoQuaternion:Quaternion;
\npublic var easingRatio:Number;
\nprivate var s:Number;
\npublic function RotatingParticleBoard(w, h, transp=true, fillColor = 0x00000000, _fLen=200) {
\nvar thisData:BitmapData = new BitmapData(w, h, transp, fillColor)
\nthis.bitmapData = thisData;
\nthis.zBuffer = [];
\nthis.useDepthDarken = false; \/\/changed to true in setDepthDarken
\nthis.projOriginX = w\/2;
\nthis.projOriginY = h\/2;
\nthis.fLen = _fLen;
\nthis.bgColor = fillColor;
\nthis.holder = new Sprite();
\nthis.holder.addChild(this);
\nthis.x = 0;
\nthis.y = 0;
\nthis.arcballRad = 0.5*Math.sqrt(Math.pow(w,2)+Math.pow(h,2));
\nthis.lastQ = new Quaternion();
\nthis.currentQ = new Quaternion(1,0,0,0);
\nthis.autoQuaternion = new Quaternion(1,0,0,0);
\nthis.lastQ = this.currentQ.clone();
\nthis.requestQ = new Quaternion();
\nthis.changeQ = new Quaternion(1,0,0,0);
\nthis.v1 = new Point3D;
\nthis.v2 = new Point3D;
\nthis.mouseDragging = false;
\nthis.easingRatio = 0.4;
\nthis.holder.addEventListener(Event.ADDED_TO_STAGE, addListeners);
\n}
\nprivate function addListeners(evt:Event):void {
\nthis.holder.removeEventListener(Event.ADDED_TO_STAGE, addListeners);
\nthis.holder.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
\nthis.holder.root.addEventListener(MouseEvent.MOUSE_UP, onUp);
\n}
\npublic function makeFrame(thick:Number, c:uint, inputAlpha:Number):void {
\nthis.frame = new Shape();
\nthis.frame.graphics.lineStyle(thick, c, inputAlpha);
\nthis.frame.graphics.drawRect(0,0,this.width,this.height);
\nthis.frame.x = 0;
\nthis.frame.y = 0;
\nthis.holder.addChild(frame);
\n}
\npublic function setDepthDarken(unityDepth:Number, halfDepth:Number, _maxBrighten):void {
\nthis.useDepthDarken = true;
\nthis.A = Math.pow(2, unityDepth\/(halfDepth-unityDepth));
\nthis.expRate = Math.LN2\/(unityDepth-halfDepth);
\nthis.maxBrighten = _maxBrighten;
\n}
\npublic function clearBoard(particles:Array):void {
\nfor (var i:Number = 0; i<=particles.length-1; i++) {
\np = particles[i];
\nif (p.onScreen) {
\nintX = int(p.projX);
\nintY = int(p.projY);
\nzBuffer[intX+this.height*intY] = Number.NEGATIVE_INFINITY;
\n\/\/could also insert the code below to erase pixels, but my method has been to use a blur filter and a colorTransform applied to whole bitmap, which creates “ghost” which fades out after a few frames. this.bitmapData.setPixel32(intX, intY, bgColor);
\n}
\n}
\n}\/\/end of clearBoard
\npublic function drawParticles(particles:Array):void {
\nclearBoard(particles);
\n\/\/\/\/\/\/\/\/\/\/\/
\n\/\/viewpoint change by mouse
\nif (mouseDragging) {
\nv2.x = (holder.mouseX-projOriginX)\/arcballRad;
\nv2.y = (holder.mouseY-projOriginY)\/arcballRad;
\nrSquare = v2.x*v2.x + v2.y*v2.y;
\n\/\/for mouse position outside Arcball perimeter:
\nif (rSquare > 1) {
\ninvR = 1\/Math.sqrt(rSquare);
\nv2.x = v2.x*invR;
\nv2.y = v2.y*invR;
\nv2.z = 0;
\n}
\n\/\/for mouse position inside Arcball perimeter:
\nelse {
\nv2.z = Math.sqrt(1 – rSquare);
\ninside = true;
\n}
\n\/\/interpret mouse movement as request for rotation change
\nrequestQ.w = v1.x*v2.x + v1.y*v2.y + v1.z*v2.z;
\nrequestQ.x = v1.y*v2.z – v2.y*v1.z;
\nrequestQ.y = -v1.x*v2.z + v2.x*v1.z;
\nrequestQ.z = v1.x*v2.y – v2.x*v1.y;
\n\/\/smooth movement is accomplished by rotating only 40% towards the requested rotation in each frame. After about ten frames, the rotation will be within 1% of the requested rotation.
\nchangeQ.w += easingRatio*(requestQ.w – changeQ.w);
\nchangeQ.x += easingRatio*(requestQ.x – changeQ.x);
\nchangeQ.y += easingRatio*(requestQ.y – changeQ.y);
\nchangeQ.z += easingRatio*(requestQ.z – changeQ.z);
\n\/\/ensure that the change quaternion is a unit quaternion:
\ns = 1\/Math.sqrt(changeQ.w*changeQ.w +changeQ.x*changeQ.x+changeQ.y*changeQ.y+changeQ.z*changeQ.z);
\nchangeQ.w *= s;
\nchangeQ.x *= s;
\nchangeQ.y *= s;
\nchangeQ.z *= s;
\n}
\nelse {
\nlastQ = currentQ.clone();
\nchangeQ.w = autoQuaternion.w;
\nchangeQ.x = autoQuaternion.x;
\nchangeQ.y = autoQuaternion.y;
\nchangeQ.z = autoQuaternion.z;
\n}
\n\/\/find current resultant rotation by quaternion multiplication of
\nlastQ and changeQ
\ncurrentQ.w = changeQ.w*lastQ.w – changeQ.x*lastQ.x – changeQ.y*lastQ.y – changeQ.z*lastQ.z;
\ncurrentQ.x = changeQ.w*lastQ.x + lastQ.w*changeQ.x + changeQ.y*lastQ.z – lastQ.y*changeQ.z;
\ncurrentQ.y = changeQ.w*lastQ.y + lastQ.w*changeQ.y – changeQ.x*lastQ.z + lastQ.x*changeQ.z;
\ncurrentQ.z = changeQ.w*lastQ.z + lastQ.w*changeQ.z + changeQ.x*lastQ.y – lastQ.x*changeQ.y;
\n\/\/\/\/\/\/\/\/\/\/\/
\nfor (var i:Number = 0; i<=particles.length-1; i++) {
\np = particles[i];
\n\/\/viewpoint-relative coordinates found by quaternion rotation. Quaternion has been converted to rotation matrix, usingcommon subexpressions for efficiency.
\nX2 = 2*currentQ.x;
\nY2 = 2*currentQ.y;
\nZ2 = 2*currentQ.z;
\nwX = currentQ.w*X2;
\nwY = currentQ.w*Y2;
\nwZ = currentQ.w*Z2;
\nxX = currentQ.x*X2;
\nxY = currentQ.x*Y2;
\nxZ = currentQ.x*Z2;
\nyY = currentQ.y*Y2;
\nyZ = currentQ.y*Z2;
\nzZ = currentQ.z*Z2;
\np.u = (1-(yY+zZ))*p.x + (xY-wZ)*p.y + (xZ+wY)*p.z;
\np.v = (xY+wZ)*p.x + (1-(xX+zZ))*p.y + (yZ-wX)*p.z;
\np.w = (xZ-wY)*p.x + (yZ+wX)*p.y + (1-(xX+yY))*p.z;
\n\/\/Projection coordinates
\nm = fLen\/(fLen – p.w);
\np.projX = p.u*m + projOriginX;
\np.projY = p.v*m + projOriginY;
\n\/\/test if particle is in viewable region
\nif ((p.projX > this.width)||(p.projX<0)||(p.projY<0)||(p.projY>this.height)||(p.w>fLen-1)) {
\np.onScreen = false;
\n}
\nelse {
\np.onScreen = true;
\n}
\n\/\/drawing
\nintX = int(p.projX);
\nintY = int(p.projY);
\nif (p.onScreen) {
\nif (!(p.w < zBuffer[intX+this.height*intY])) {
\nif (this.useDepthDarken) {
\n\/\/position-based darkening – exponential
\nf = A*Math.exp(expRate*p.w);
\nif (f>maxBrighten) {
\nf = maxBrighten;
\n}
\ndColor = (0xFF000000) |(Math.min(255,f*p.red) << 16) | (Math.min(255,f*p.green) << 8) | (Math.min(255,f*p.blue));
\nthis.bitmapData.setPixel32(intX, intY, dColor);
\n}
\nelse {
\nthis.bitmapData.setPixel32(intX, intY, p.color);
\n}
\nthis.zBuffer[intX+this.height*intY] = p.w;
\n}
\n}
\n}
\n}\/\/end of drawParticles
\nprivate function onDown(evt:MouseEvent):void {
\nmouseDragging = true;
\nchangeQ = new Quaternion(1,0,0,0);
\nlastQ = currentQ.clone();
\nv1.x = (holder.mouseX-projOriginX)\/arcballRad;
\nv1.y = (holder.mouseY-projOriginY)\/arcballRad;
\nrSquare = v1.x*v1.x + v1.y*v1.y;
\nif (rSquare > 1) {
\ninvR = 1\/Math.sqrt(rSquare);
\nv1.x = v1.x*invR;
\nv1.y = v1.y*invR;
\nv1.z = 0;
\ninside = false;
\n}
\nelse {
\nv1.z = Math.sqrt(1 – rSquare);
\ninside = true;
\n}
\n}
\nprivate function onUp(evt:MouseEvent):void {
\nmouseDragging = false;
\n}
\n}\/\/end of class definition
\n}<\/p>\n

9. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cPoint3D\u201d in \u201cgeom3D\u201d:<\/p>\n

package main.submain.geom3D {
\npublic class Point3D {
\npublic var x:Number;
\npublic var y:Number;
\npublic var z:Number;
\npublic function Point3D(x1=0,y1=0,z1=0):void {
\nthis.x = x1;
\nthis.y = y1;
\nthis.z = z1;
\n}
\n}
\n}<\/p>\n

10. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cQuaternion\u201d in \u201cgeom3D\u201d:<\/p>\n

package main.submain.geom3D {
\npublic class Quaternion {
\npublic var w;
\npublic var x;
\npublic var y;
\npublic var z;
\npublic function Quaternion(_w=0,_x=0, _y=0, _z=0) {
\nthis.w = _w;
\nthis.x = _x;
\nthis.y = _y;
\nthis.z = _z;
\n}
\npublic function clone():Quaternion {
\nreturn new Quaternion(this.w, this.x, this.y, this.z);
\n}}}<\/p>\n

11. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cIndexedLoader\u201d in \u201cloaders\u201d:<\/p>\n

package main.submain.loaders {
\nimport flash.display.Loader;
\npublic class IndexedLoader extends Loader {
\npublic var which:Number;
\npublic var done:Boolean;
\nfunction IndexedLoader(inputIndex):void {
\nthis.which = inputIndex;
\nthis.done = false;
\n}}}<\/p>\n

12. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cPictureLoader\u201d in \u201cloaders\u201d:<\/p>\n

package main.submain.loaders {
\nimport flash.display.*;
\nimport flash.events.*;
\nimport flash.net.URLRequest;
\nimport main.submain.loaders.IndexedLoader;
\npublic class PictureLoader extends EventDispatcher {
\npublic static const ALL_PICS_LOADED:String=”allPicsLoaded”;
\nprivate function dispatch():void {
\ndispatchEvent(new Event(PictureLoader.ALL_PICS_LOADED));
\n}
\npublic var picURLArray:Array = [];
\nprivate var picLoader:Array = [];
\nprivate var pic:Array=[];
\nprivate var loadCount:Number;
\npublic var failPicSize:Number;
\npublic var useFailPic:Boolean;
\npublic function PictureLoader(_useFailPic = true, _failPicSize = 16) {
\nthis.useFailPic = _useFailPic;
\nthis.failPicSize = _failPicSize;
\n}
\npublic function loadPics(inputURLArray:Array):void {
\npicURLArray = inputURLArray;
\npic = [];
\nloadCount = 0;
\nsetUpLoaders();
\n}
\nprivate function failPic():Sprite {
\nvar thisPic:Sprite = new Sprite();
\nthisPic.graphics.lineStyle(2,0xdddddd);
\nthisPic.graphics.beginFill(0x000000);
\nthisPic.graphics.drawRect(0,0,failPicSize,failPicSize);
\nthisPic.graphics.endFill();
\nthisPic.graphics.lineStyle(2,0xdd0000);
\nthisPic.graphics.moveTo(2,2);
\nthisPic.graphics.lineTo(failPicSize-2,failPicSize-2);
\nthisPic.graphics.moveTo(failPicSize-2,2);
\nthisPic.graphics.lineTo(2,failPicSize-2);
\nreturn thisPic;
\n}
\nprivate function cleanUp():void {
\nvar errorPic:Array = [];
\nfor (var n:Number=0; n<= picURLArray.length-1; n++) {
\nif (pic[n]==null) {
\n\/\/trace(“Picture “+String(n)+” not loaded.”);
\npicLoader[n].contentLoaderInfo.removeEventListener(Event.INIT, initListener);
\npicLoader[n].contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
\nerrorPic.push(n);
\n}
\n}
\nif (useFailPic) {
\n\/\/place fail pic in bad spots
\nif (errorPic.length != 0) {
\nfor (n = 0; n<= errorPic.length – 1; n++) {
\nvar thisBitmapData:BitmapData = new BitmapData(failPicSize, failPicSize);
\nvar thisBitmap:Bitmap = new Bitmap(thisBitmapData);
\nthisBitmapData.draw(failPic());
\npic[errorPic[n]] = thisBitmap;
\n}
\n}
\n}
\nelse {
\n\/\/remove error pics from pic array
\nif (errorPic.length != 0) {
\nfor (n = 0; n<= errorPic.length – 1; n++) {
\npic.splice(errorPic[n],1);
\n}
\n}
\n}
\n}
\nprivate function setUpLoaders():void {
\nvar thisURL:URLRequest; \/\/create a loader for each picture, to load simultaneously.
\nfor (var n:Number=0; n<= picURLArray.length-1; n++) {
\nvar thisLoader:IndexedLoader = new IndexedLoader(n);
\npicLoader.push(thisLoader);
\npicLoader[n].load(new URLRequest(picURLArray[n]));
\npicLoader[n].contentLoaderInfo.addEventListener(Event.INIT, initListener);
\npicLoader[n].contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
\n}
\n}
\nprivate function errorHandler(evt:ErrorEvent):void {
\nloadCount++;
\nif (loadCount == picURLArray.length) {
\ncleanUp();
\ndispatch();
\n}
\n}
\nprivate function initListener(evt:Event):void {
\n\/\/copy loaded picture to pic array
\ntry {
\nvar n:Number = evt.currentTarget.loader.which;
\n\/\/trace(“picture “+String(n)+” loaded.”);
\npic[n] = Bitmap(picLoader[n].content);
\n}
\ncatch (err:Error) {
\n\/\/trace(“picture “+String(n)+” unsuccessful.”);
\n}
\n\/\/remove event listener
\npicLoader[n].contentLoaderInfo.removeEventListener(Event.INIT, initListener);
\nloadCount++;
\nif (loadCount == picURLArray.length) {
\ncleanUp();
\ndispatch();
\n}
\n}
\npublic function get picArray():Array {
\nreturn pic;
\n}
\n}
\n}<\/p>\n

12. Again open actionscript file by press ctrl+n. Copy and paste the following code and save it as \u201cParticle3D\u201d in \u201cobjects\u201d:<\/p>\n

package main.submain.objects {
\nimport flash.display.*;
\nimport main.submain.geom3D.*;
\npublic class Particle3D extends Point3D {
\n\/\/links, for creating linked lists
\npublic var next:Particle3D;
\npublic var prev:Particle3D;
\npublic var onScreen:Boolean;
\n\/\/velocity and acceleration vectors
\npublic var vel:Point3D = new Point3D();
\npublic var accel:Point3D = new Point3D();
\npublic var lastX:Number;
\npublic var lastY:Number;
\npublic var lastZ:Number;
\n\/\/projected coordinates
\npublic var projX:Number;
\npublic var projY:Number;
\n\/\/coords WRT viewpoint axes
\npublic var u:Number;
\npublic var v:Number;
\npublic var w:Number;
\n\/\/location in source picture
\npublic var picX:Number;
\npublic var picY:Number;
\n\/\/destination array
\npublic var dest:Array;
\n\/\/attributes
\npublic var color:uint;
\npublic var red:Number;
\npublic var green:Number;
\npublic var blue:Number;
\npublic var lum:Number;
\npublic var alpha:Number;
\npublic var initColor:uint;
\npublic var initRed:Number;
\npublic var initGreen:Number;
\npublic var initBlue:Number;
\npublic var initLum:Number;
\npublic var destColor:uint;
\npublic var destRed:Number;
\npublic var destGreen:Number;
\npublic var destBlue:Number;
\npublic var destLum:Number;
\npublic var colorChanging:Boolean;
\nfunction Particle3D(thisColor=0xFFFFFFFF):void {
\nthis.dest = [];
\nthis.color = thisColor;
\nthis.red = getRed(thisColor);
\nthis.green = getGreen(thisColor);
\nthis.blue = getBlue(thisColor);
\nthis.alpha = getAlpha(thisColor);
\nthis.lum = 0.2126*this.red + 0.7152*this.green + 0.0722*this.blue;
\nthis.colorChanging = false;
\nthis.onScreen = true;
\n}
\npublic function setColor(thisColor):void {
\nthis.color = thisColor;
\nthis.red = getRed(thisColor);
\nthis.green = getGreen(thisColor);
\nthis.blue = getBlue(thisColor);
\nthis.alpha = getAlpha(thisColor);
\nthis.lum = 0.2126*this.red + 0.7152*this.green + 0.0722*this.blue;
\n}
\npublic function getAlpha(c):Number {
\nreturn Number((c >> 24) & 0xFF);
\n}
\npublic function getRed(c):Number {
\nreturn Number((c >> 16) & 0xFF);
\n}
\npublic function getGreen(c):Number {
\nreturn Number((c >> 8) & 0xFF);
\n}
\npublic function getBlue(c):Number {
\nreturn Number(c & 0xFF);
\n}
\n}
\n}<\/p>\n

Run the program.<\/p>\n","protected":false},"excerpt":{"rendered":"

1. Open a new document and set background color as black. 2. Select Layer-1, Keyframe 1. Press F9 to write the following action script. I have explained the code in the comments. import fl.motion.easing.Quartic; import fl.motion.easing.Bounce; import fl.motion.Animator3D; import main.submain.loaders.*; import main.submain.bitmapUtilities.PictureAtomizer; import main.submain.objects.Particle3D; import main.submain.geom3D.*; import main.submain.display.*; var picURLString:Array; \/\/ var is a variables, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[31],"class_list":["post-536","post","type-post","status-publish","format-standard","hentry","category-flash","tag-3d-flower-twist-in-flash"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=536"}],"version-history":[{"count":20,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/536\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/536\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}