AS3.0 DEEL 1: Roteer, verschaal en verplaats vanuit punt.
Dit is deel 1 van een aantal tutorials voor ActionScript 3.0. Ik zal stap voor stap uitleggen hoe een aantal handige basis classes op te stellen. Het doel van deze classes is het sneller en makkelijker ontwikkelen van AS3.0 Projecten.
We beginnen met een een tweetal classes om de basis te leggen voor de rest. Ten eerste zorgen we ervoor dat er altijd vanuit ieder punt gedraaid, verschaald en verplaatst kan worden. Als je met AS3.0 een intantie van een sprite maakt, wordt het referentiepunt automatisch links boven geplaatst. Dit is lang niet altijd wenselijk, en moet in de basis worden ondervangen door een mogelijkheid voor een tweede referentiepunt te geven, welke op iedere gewenste positie gezet kan worden. Daarnaast beginnen we met een class om eenvoudig vormen te tekenen, de echte kracht hiervan zal in latere delen pas duidelijk worden.
In deze serie ga ik niet in op de absolute basis van OOP of AS3.0, daar zijn genoeg andere tut’s voor te vinden.
Welke editor?
Zelf maak ik graag gebruik van Flex om mijn AS3.0 projecten te maken, maar het maakt voor deze tutorial's niet uit. We gebruiken puur as3.0, dus gebruik wat je fijn vindt om mee te werken.
DynamicCenter
Deze class maakt het mogelijk vanuit een willekeurig punt te verplaatsen, verschalen en roteren.
Ok, stap voor stap:
package com.core
{
import flash.display.Sprite;
public class DynamicCenter extends Sprite
{
//-- PARAMETERS -------------------------------------------------------------
//-- / PARAMETERS - CONSTRUCTOR -------------------------------------------------------------
public function DynamicCenter(width:Number, height:Number, shape:Sprite):void
{
//Constructor
}
//-- / CONTSTRUCTOR - GETTERS AND SETTERS -----------------------------------------------------
//-- / GETTERS AND SETTERS - PUBLIC -------------------------------------------------------------
//-- / PUBLIC - PRIVATE -------------------------------------------------------------
//-- / PRIVATE -------------------------------------------------------------
} //END CLASS
} //END PACKAGE
Maak een package, en verwijs naar de locatie com.core. importeer de Sprite class en maak de DynamicCenter class en de constructor function. Meestal verdeel ik mijn classes in logische blokken code, om het me in latere stadia makkelijker te maken.
package com.core
{
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.geom.Point;
public class DynamicCenter extends Sprite
{
//-- PARAMETERS -------------------------------------------------------------
private var _x :Number;
private var _y :Number;
private var _posX :Number;
private var _posY :Number;
private var m :Matrix;
private var p :Point;
//-- / PARAMETERS - CONSTRUCTOR -------------------------------------------------------------
public function DynamicCenter(width:Number, height:Number, shape:Sprite):void
{
//Constructor
m = shape.transform.matrix;
p = new Point();
}
//-- / CONTSTRUCTOR - GETTERS AND SETTERS -----------------------------------------------------
public function set dX(newX:Number):void
{
_x = newX;
p.x = _x;
}
public function get dX():Number
{
return _x;
}
public function set dY(newY:Number):void
{
_y = newY;
p.y = _y;
}
public function get dY():Number
{
return _y;
}
public function set pX(posX:Number):void
{
_posX = posX;
}
public function get pX():Number
{
return _posX;
}
public function set pY(posY:Number):void
{
_posY = posY;
}
//-- / GETTERS AND SETTERS - PUBLIC -------------------------------------------------------------
//-- / PUBLIC - PRIVATE -------------------------------------------------------------
//-- / PRIVATE -------------------------------------------------------------
} //END CLASS
} //END PACKAGE
Importeer de Matrix en Point classes. Deze hebben we nodig om de transformaties te maken. Daarna maken we een aantal private variabelen, die we via getters en setters van waarde kunnen veranderen. En we wijzen de matrix van de shape toe aan variabele m. Zodat we die staks aan kunnen passen en weer toe kunnen passen.
package com.core
{
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.geom.Point;
public class DynamicCenter extends Sprite
{
//-- PARAMETERS -------------------------------------------------------------
private var _x :Number;
private var _y :Number;
private var _posX :Number;
private var _posY :Number;
private var m :Matrix;
private var p :Point;
//-- / PARAMETERS - CONSTRUCTOR -------------------------------------------------------------
public function DynamicCenter(width:Number, height:Number, shape:Sprite):void
{
//Constructor
m = shape.transform.matrix;
p = new Point();
}
//-- / CONTSTRUCTOR - GETTERS AND SETTERS -----------------------------------------------------
public function set dX(newX:Number):void
{
_x = newX;
p.x = _x;
}
public function get dX():Number
{
return _x;
}
public function set dY(newY:Number):void
{
_y = newY;
p.y = _y;
}
public function get dY():Number
{
return _y;
}
public function set pX(posX:Number):void
{
_posX = posX;
move();
}
public function get pX():Number
{
return _posX;
}
public function set pY(posY:Number):void
{
_posY = posY;
move();
}
//-- / GETTERS AND SETTERS - PUBLIC -------------------------------------------------------------
//-- / PUBLIC - PRIVATE -------------------------------------------------------------
private function move():void
{
this.m.transformPoint(this.p);
this.x = _posX - this.p.x;
this.y = _posY - this.p.y;
}
//-- / PRIVATE -------------------------------------------------------------
} //END CLASS
} //END PACKAGE
Maak de private function move() en roep deze aan bij pX en pY, deze functies veranderen de positie van het object t.o.v het dynamische referentiepunt.
package com.core
{
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.geom.Point;
public class DynamicCenter extends Sprite
{
//-- PARAMETERS -------------------------------------------------------------
private var _x :Number;
private var _y :Number;
private var _posX :Number;
private var _posY :Number;
private var m :Matrix;
private var p :Point;
//-- / PARAMETERS - CONSTRUCTOR -------------------------------------------------------------
public function DynamicCenter(width:Number, height:Number, shape:Sprite):void
{
//Constructor
m = shape.transform.matrix;
p = new Point();
}
//-- / CONTSTRUCTOR - GETTERS AND SETTERS -----------------------------------------------------
public function set dX(newX:Number):void
{
_x = newX;
p.x = _x;
}
public function get dX():Number
{
return _x;
}
public function set dY(newY:Number):void
{
_y = newY;
p.y = _y;
}
public function get dY():Number
{
return _y;
}
public function set pX(posX:Number):void
{
_posX = posX;
move();
}
public function get pX():Number
{
return _posX;
}
public function set pY(posY:Number):void
{
_posY = posY;
move();
}
//-- / GETTERS AND SETTERS - PUBLIC -------------------------------------------------------------
public function rotate(angleDegrees:Number):void
{
this.m.transformPoint(this.p);
this.m.translate(-p.x, -p.y);
this.m.rotate(angleDegrees * (Math.PI / 180));
this.m.translate(_posX, _posY);
this.transform.matrix = this.m;
}
public function scale(amount:Number):void
{
this.m.transformPoint(this.p);
this.m.translate(-p.x, -p.y);
this.m.scale(amount, amount);
this.m.translate(_posX, _posY);
this.transform.matrix = this.m;
}
//-- / PUBLIC - PRIVATE -------------------------------------------------------------
private function move():void
{
this.m.transformPoint(this.p);
this.x = _posX - this.p.x;
this.y = _posY - this.p.y;
}
//-- / PRIVATE -------------------------------------------------------------
} //END CLASS
} //END PACKAGE
Om de class af te maken maken we nog een scale en rotate function.
Asset class
Nu maken we de basis voor de Asset class, in latere delen breiden we deze class uit, om meer vormen te kunnen tekenen, maar ook om externe graphics in te kunnen laden, of als tekst veld te dienen.
package com.graphics
{
import com.core.DynamicCenter;
public final class Asset extends DynamicCenter
{
public static const RECT :String = 'rectangle';
public static const CIRC :String = 'circle';
private var shapeWidth :Number;
private var shapeHeight :Number;
private var shapeColor :uint;
private var shapeAlpha :Number;
public function Asset(shape:String, w:Number, h:Number, c:uint = 0xFFFFFF, a:Number = 1):void
{
//Constructor
shapeWidth = w;
shapeHeight = h;
shapeColor = c;
shapeAlpha = a;
super(shapeWidth, shapeHeight, this);
if(shape == RECT)
{
rect();
}
else if(shape == CIRC)
{
circ();
}
}
private function rect():void
{
this.graphics.beginFill(shapeColor, shapeAlpha);
this.graphics.drawRect(0, 0, shapeWidth, shapeHeight);
this.graphics.endFill();
}
private function circ():void
{
this.graphics.beginFill(shapeColor, shapeAlpha);
this.graphics.drawEllipse(0, 0, shapeWidth, shapeHeight);
this.graphics.endFill();
}
}
}
Dit is een final class geplaatsd in com.graphics, wat betekend dat deze class niet meer kan worden over geërfd. Hier definieren we eerst een tweetal public static constant's, om de vorm in de constructor zonder typefouten aan te kunnen geven. Daarna hebben we een aantal private var's nodig, waarvan de waarden via de constructor worden geven.
Via super geven we een aantal variabelen door aan de contstructor van DynamicCenter en we bepalen wat er moet worden getekend.
Test
Eens testen of het allemaal werkt.
package {
//Flex specifiek
[SWF(width="300", height="300", frameRate="30", backgroundColor="#FFFFFF")]
import com.graphics.Asset;
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
public final class Gamework extends Sprite
{
private var background:Asset;
private var asset:Asset;
public function Gamework()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//Maak een instance van Asset.
asset = new Asset(Asset.CIRC, 50, 100, 0xFF0000);
//stel de dynamische X en Y in op het midden.
asset.dX = asset.width / 2;
asset.dY = asset.height / 2;
//Verplaats het object op de stage vanuit het dynamische punt.
asset.pX = 100;
asset.pY = 100;
//Test de rotatie en scale functies.
asset.rotate(30);
asset.scale(1.5);
//En plaats de asset op de stage.
addChild(asset);
}
}
}
Commentaar op mijn eerste tutorial zal erg worden gewaardeerd! Tips worden verwerkt in verdere delen! Thanx!
Hallo!
Mijn naam is Dion Snoeijen en ik programmeer en ontwerp websites, flash app’s en maak 3D visualisaties.
Recente Tweet
19-02 17:36
New updated CoronaSDK Autocomplete for SublimeText2 from http://t.co/CHJEszHs #CoronaSDK #Ansca #Lua #st2 @lano78
This webstie makes things hella easy.
Door Bayle op 16 11 2011