I'm learning AS3.0 currently. I am trying to design a simple two body planet simulation. I need to show the paths of the planets on the screen. So my question is, once I have the updated x and y coordinates for the planets at each Timer interval, how do I change the color of the pixel (x,y) of the stage so that it shows the path of the planets? Is there some command of the form stage.x = color?
Thanks!
I recommend using BitmapData's draw() method to render your planets as pixels each time you update them. It basically works like a 'screenshot' of the display object you pass it as n argument. If you pass the objects transformation, the position/rotation/scale will be visible (as opposed to drawing from 0,0). This way, you will only be updating pixels instead of continuously creating new display objects.
Here's a basic commented example:
import flash.display.Sprite;
import flash.events.Event;
var trails:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);//create a transparent bitmap to draw the trails into
var trailsFade:ColorTransform = new ColorTransform(1,1,1,0.025,0,0,0,1);//color transform: keep rgb the same(1,1,1), set alpha to 0.025 out of 1.0
var background:Bitmap = addChild(new Bitmap(trails,PixelSnapping.AUTO,true)) as Bitmap;//add the trails pixels/bitmap data into a Bitmap/display object at the bottom of the display list
var dot:Sprite = addChild(new Sprite()) as Sprite;
dot.graphics.lineStyle(3);
dot.graphics.drawCircle(-4, -4, 8);
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
dot.x = mouseX;
dot.y = mouseY;
//draw trails of the dot
trails.draw(dot,dot.transform.concatenatedMatrix,trailsFade);//draw the dot into the bitmap data using the dot's transformation (x,y, rotation, scale)
}
Notice the trails when you move the mouse and how they are affected by the (update) speed.
Here's a longer example using multiple objects:
import flash.display.*;
import flash.events.Event;
import flash.geom.ColorTransform;
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
var trails:BitmapData = new BitmapData(w,h,true,0x00000000);//create a transparent bitmap to draw the trails into
var trailsFade:ColorTransform = new ColorTransform(1,1,1,0.025,0,0,0,0.1);//color transform: keep rgb the same(1,1,1), set alpha to 0.025 out of 1.0
var background:Bitmap = addChild(new Bitmap(trails,PixelSnapping.AUTO,true)) as Bitmap;//add the trails pixels/bitmap data into a Bitmap/display object at the bottom of the display list
var spheres:Sprite = addChild(new Sprite()) as Sprite;//add a container for all the spheres (planets/moons/sun/etc.)
var mercuryPivot:Sprite = spheres.addChild(new Sprite()) as Sprite;
var venusPivot:Sprite = spheres.addChild(new Sprite()) as Sprite;
var earthPivot:Sprite = spheres.addChild(new Sprite()) as Sprite;
var sun:Sprite = spheres.addChild(getCircleSprite(69.5500 /4,0xFF9900)) as Sprite;
var mercury:Sprite = mercuryPivot.addChild(getCircleSprite(24.40 / 4,0xCECECE)) as Sprite;
var venus:Sprite = venusPivot.addChild(getCircleSprite(60.52 / 4,0xFF2200)) as Sprite;
var earth:Sprite = earthPivot.addChild(getCircleSprite(60.52 / 4,0x2233FE)) as Sprite;
mercury.x = 5791 / 40;
venus.x = 10820 / 40;
earth.x = 14960 / 40;
spheres.x = (w-spheres.width) * 0.5;
spheres.y = (h-spheres.height) * 0.5;
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
mercuryPivot.rotation += 0.5;
venusPivot.rotation += 0.25;
earthPivot.rotation += 0.12;
//draw trails
trails.draw(spheres,spheres.transform.concatenatedMatrix,trailsFade);
}
function getCircleSprite(radius:Number,color:int):Sprite{
var circle:Sprite = new Sprite();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(-radius * .5,-radius * .5,radius);//draw from centre
circle.graphics.endFill();
return circle;
}
Notice we call trails.draw(spheres,spheres.transform.concatenatedMatrix,trailsFade);
but it could be trails.draw(earth,earth.transform.concatenatedMatrix,trailsFade); if you only want to draw the trails of earth.
In the example above I'm just nesting sprites and using the rotation property to keep things simple. You might want to use a bit of trigonometry to update positions because planets will probably not have perfectly circular orbits and pass through the exact location every single time.
Update
Thinking about this more, using the old school Graphics API might be handy for you if you get started and haven't got used to playing with pixels yet.
It's easy to get started with: objects that can be displayed in flash player can have a graphics property (see the Shape/Sprite/MovieClip classes). (You can have display object that you can't draw into whether you can nest elements into (DisplayObjectContainer) or not(DisplayObject), but that's a whole other thing for you too look into).
This graphics property Sprites and MovieClip has allows you to draw programmatically using simply commands such as: setting a stroke(lineStyle()), a fill (beginFill()/endFill()), moving an imaginary 'pen' without drawing (moveTo), drawing a line (lineTo), a circle, a rectangle, a rounded rectangle, etc. It's all there.
So, a minimal drawing program would look a bit like this:
import flash.events.MouseEvent;
import flash.events.Event;
var mousePressed:Boolean = false;//keep track if the mouse is pressed or not
graphics.lineStyle(1);//set the stroke to have a thickness of 1 (and the other parameters are defaults(color: black, transparency: 100% / 1.0, etc.))
stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseEventHandler);//listend for mouse down
stage.addEventListener(MouseEvent.MOUSE_UP,mouseEventHandler);//...and mouse up changes
stage.addEventListener(Event.ENTER_FRAME,update);//update continuously
function mouseEventHandler(e:MouseEvent):void{
mousePressed = (e.type == MouseEvent.MOUSE_DOWN);
graphics.moveTo(mouseX,mouseY);//place the graphics 'pen' at this new location
}
function update(e:Event):void{
if(mousePressed) graphics.lineTo(mouseX,mouseY);//if the mouse is pressed, keep drawing a line to the current mouse location
}
or a more complex version where you use the speed of the mouse movement to influence the stroke thickness and transparency:
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Point;
var prevPos:Point = new Point();//previous mouse position
var currPos:Point = new Point();//current mouse position
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
var mousePressed:Boolean = false;//keep track if the mouse is pressed or not
graphics.lineStyle(1);//set the stroke to have a thickness of 1 (and the other parameters are defaults(color: black, transparency: 100% / 1.0, etc.))
stage.doubleClickEnabled = true;
stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseEventHandler);//listend for mouse down
stage.addEventListener(MouseEvent.MOUSE_UP,mouseEventHandler);//...and mouse up changes
stage.addEventListener(MouseEvent.DOUBLE_CLICK,function(e:MouseEvent):void{graphics.clear()});//double click to clear
stage.addEventListener(Event.ENTER_FRAME,update);//update continuously
function mouseEventHandler(e:MouseEvent):void{
mousePressed = (e.type == MouseEvent.MOUSE_DOWN);
graphics.moveTo(mouseX,mouseY);
}
function update(e:Event):void{
//currPos.setTo(mouseX,mouseY);//this works for flash player 11 and above instead of setting x,y separately
currPos.x = mouseX;
currPos.y = mouseY;
var mappedValue: Number = Point.distance(currPos,prevPos) / (w+h);//map the distance between points
//prevPos.copyFrom(currPos);//this works for flash player 11 and above instead of setting x,y separately
prevPos.x = mouseX;
prevPos.y = mouseY;
graphics.lineStyle(mappedValue * 100,0,1.0-(0.25+mappedValue));
if(mousePressed) graphics.lineTo(mouseX,mouseY);//if the mouse is pressed, keep drawing a line to the current mouse location
}
So going back to the tracing of a planet path, using the graphics api, my previous example would look like so:
import flash.display.*;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.geom.Point;
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
var hasMoved:Boolean = false;//has the graphics 'pen' been moved ?
var spheres:Sprite = addChild(new Sprite()) as Sprite;//add a container for all the spheres (planets/moons/sun/etc.)
var earthPivot:Sprite = spheres.addChild(new Sprite()) as Sprite;
var sun:Sprite = spheres.addChild(getCircleSprite(69.5500 /4,0xFF9900)) as Sprite;
var earth:Sprite = earthPivot.addChild(getCircleSprite(60.52 / 4,0x2233FE)) as Sprite;
earth.x = 14960 / 40;
spheres.x = (w-spheres.width) * 0.5;
spheres.y = (h-spheres.height) * 0.5;
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
earthPivot.rotation += 0.12;
//draw trails
drawTrail(earth,0x0000FF);
}
function drawTrail(s:Sprite,color:int) {
var globalPos:Point = s.localToGlobal(new Point());//convert the local position of the sprite (it might have been nested several times) to the global/stage coordinate system
if(!hasMoved){//if the graphics 'pen' wasn't moved (is still at 0,0), this will happen only once: the 1st time you draw the mouse position
graphics.moveTo(globalPos.x,globalPos.y);//move it to where we're about to draw first
hasMoved = true;//and make sure we've marked that the above was done
}
graphics.lineStyle(1,color);
graphics.lineTo(globalPos.x,globalPos.y);
}
function getCircleSprite(radius:Number,color:int):Sprite{
var circle:Sprite = new Sprite();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(-radius * .5,-radius * .5,radius);//draw from centre
circle.graphics.endFill();
return circle;
}
From my experience, using this older drawing API can get slow if you have a lot of lines on stage. I say older because it might actually be 15 years old now. Flash Player 10 introduced a newer drawing API. You can read on it on the Adobe Devnet but I warmly recommend Senocular's Flash Player 10 Drawing API Tutorial and his slides and example code from Flash Camp
Back to pixels: it's not that hard. You use the BitmapData class to manipulate pixels and use a Bitmap instance so you can add those pixels on stage. Here's a minimal drawing program:
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0xFFFFFF);//setup pixels
addChild(new Bitmap(canvas));//add them to the stage
addEventListener(Event.ENTER_FRAME,update);//setup continuous updates
function update(e:Event):void{
canvas.setPixel(int(mouseX),int(mouseY),0x990000);//pretty easy, right ?
}
want to make trippy patterns, sure thing, have a play:
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0xFFFFFF);//setup pixels
addChild(new Bitmap(canvas));//add them to the stage
addEventListener(Event.ENTER_FRAME,update);//setup continuous updates
function update(e:Event):void{
canvas.lock();//when updating multiple pixels or making multiple pixel operations
canvas.perlinNoise(mouseX,mouseY,mouseX/stage.stageWidth * 8,getTimer(),false,true);
canvas.unlock();//when you're done changing pixels, commit the changes
}
So, back to the trails example:
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
var canvas:BitmapData = new BitmapData(w,h,false,0xFFFFFF);
addChild(new Bitmap(canvas));
var spheres:Sprite = addChild(new Sprite()) as Sprite;//add a container for all the spheres (planets/moons/sun/etc.)
var earthPivot:Sprite = spheres.addChild(new Sprite()) as Sprite;
var sun:Sprite = spheres.addChild(getCircleSprite(69.5500 /4,0xFF9900)) as Sprite;
var earth:Sprite = earthPivot.addChild(getCircleSprite(60.52 / 4,0x2233FE)) as Sprite;
earth.x = 14960 / 40;
spheres.x = (w-spheres.width) * 0.5;
spheres.y = (h-spheres.height) * 0.5;
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
earthPivot.rotation += 0.12;
//draw trails
drawTrail(earth,0x0000FF,canvas);
}
function drawTrail(s:Sprite,color:int,image:BitmapData) {
var globalPos:Point = s.localToGlobal(new Point());//convert the local position of the sprite (it might have been nested several times) to the global/stage coordinate system
image.setPixel(int(globalPos.x),int(globalPos.y),color);//colour a pixel at a set position
}
function getCircleSprite(radius:Number,color:int):Sprite{
var circle:Sprite = new Sprite();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(-radius * .5,-radius * .5,radius);//draw from centre
circle.graphics.endFill();
return circle;
}
Which looks like this:
Not sure if it's what you want though, but pixels are fun to use and pretty fast too.
With a bit of math you can do some minimal 3D as well.
Also, for your inspiration on drawing in actionscript, you can have a look at some of Keith Peters', Erik Natzke, Joshua Davis, etc.
No, there isn't such a command, but you can always create a very simple Sprite object and add it to the stage at the corresponding position. Something like:
var dot:Sprite = new Sprite();
dot.graphics.beginFill(0xCCCCCC);
dot.graphics.drawRect(-1, -1, 2, 2);
dot.graphics.endFill();
dot.x = x;
dot.y = y;
addChild(dot);
I have an example of very simple shooter. But it on AS2. Here the source:
speed = 4;
depth = 0;
nose = 50;
_root.onMouseMove = function() {
updateAfterEvent();
xdiff = _root._xmouse-spaceShip._x;
ydiff = _root._ymouse-spaceShip._y;
angle = Math.atan2(ydiff, xdiff);
angle = angle*180/Math.PI;
spaceShip._rotation = angle;
};
_root.onMouseDown = function() {
angle = spaceShip._rotation;
angle = angle*Math.PI/180;
++depth;
name = "projectile"+depth;
_root.attachMovie("projectile", name, depth);
//projectile - it is bullet
_root[name]._x = spaceShip._x+nose*Math.cos(angle);
_root[name]._y = spaceShip._y+nose*Math.sin(angle);
_root[name].xmov = speed*Math.cos(angle);
_root[name].ymov = speed*Math.sin(angle);
_root[name].onEnterFrame = function() {
this._x += this.xmov;
this._y += this.ymov;
};
};
I want to do the same, but in as3.
I tried to convert. Here is what I have: PS - I'm newbie, please, don't get angry of the code below :)
var nose=55;
var angle;
var acc=1;
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, cursor);
function cursor(e:MouseEvent):void {
cross.x=mouseX;
cross.y=mouseY;
}
stage.addEventListener(Event.ENTER_FRAME, rotation2);
function rotation2(event:Event):void {
var xdiff=mouseX-spaceShip.x;
var ydiff=mouseY-spaceShip.y;
angle=Math.atan2(ydiff,xdiff);
angle=angle*180/Math.PI;
spaceShip.rotation=angle;
}
stage.addEventListener(MouseEvent.CLICK, shoot);
function shoot(event:MouseEvent):void {
angle = spaceShip.rotation;
angle = angle*Math.PI/180;
bullet.x=spaceShip.x+nose*Math.cos(angle);
bullet.y=spaceShip.y+nose*Math.sin(angle);
var xmov=acc*Math.cos(angle);
var ymov=acc*Math.sin(angle);
stage.addEventListener(Event.ENTER_FRAME, action);
function action(event:Event):void {
bullet.x+=xmov;
bullet.y+=xmov;
}
}
bullet appears, but only once, and did not move on the right path.
how to do that would be a lot of bullets, as in the example above?
attachMovie() is not the same as addChild().
MovieClip.attachMovie() creates a new symbol and add it to the MovieClip
DisplayObjectContainer.addChild() adds the specified DisplayObject to the container
Instead of calling (in AS2):
_root.attachMovie("projectile", name, depth);
You should use something like this (in AS3):
var proj:DisplayObject = new projectile();
proj.name = "projectile" + depth;
stage.addChild(proj);
Please note that there is no depth in AS3.
You could trick this by using addChildAt().
Thanks for the fast replying. I solve the problem this way:
I added this:
var bullet1:Bullet = new Bullet ();
addChild (bullet1);
And changed all "bullet" below on "bullet1".
Program is working now correctly.
I have a ball that will be kicked by the player, it is a movieclip and I want it to get smaller little by little as it gets away from the original spot, a AS3 tween perhaps? This is the code moving the ball:
speed=10;
var ease:int = 100;
var gravity:Number = 0.5;
function moveBall()
{
var targetX:Number = mouseX;
var targetY:Number = mouseY;
var angle = Math.atan2(targetY,targetX);
bola.x = mouseX + Math.cos(angle);
bola.y = mouseY + Math.sin(angle) ;
ballRotation = true;
stage.removeEventListener(MouseEvent.CLICK, kick);
Thanks a lot for your patience and help!
If you have tweenlite/tweenmax, you can get a pretty realistic ball getting kicked with this code:
import com.greensock.*;
import com.greensock.plugins.*;
import flash.events.MouseEvent;
TweenPlugin.activate([BezierPlugin]);
ball.addEventListener(MouseEvent.CLICK, kickBall);
function kickBall(e:MouseEvent):void
{
TweenMax.to(ball,2,{scaleX:0,scaleY:0,bezier:[{x:400, y:-250}, {x:315, y:200}]});
}
Obviously you can tweak those values as you please.
example: http://ronnieswietek.com/_random/ball.swf
I'm using a class which applies a visual reflection-effect to defined movieclips.
I use a reflection-class from here:
link to source.
It works like a charm except when I apply a rotation to the movieclip.
In my case the reflection is still visible but only a part of it.
What am I doing wrong? How could I pass/include the rotation to the Reflection-Class ?
Thanks in advance!
This is how you apply the Reflection Class to your movieclip:
var ref_mc:MovieClip = new MoviClip();
addChild(ref_mc);
var r1:Reflect = new Reflect({mc:ref_mc, alpha:50, ratio:50,distance:0, updateTime:0,reflectionDropoff:1});
Now I apply a rotation to my movieclip:
ref_mc.rotationY = 30;
And Here the Reflect-Class:
package com.pixelfumes.reflect{
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.utils.setInterval;
import flash.utils.clearInterval;
public class Reflect extends MovieClip{
//Created By Ben Pritchard of Pixelfumes 2007
//Thanks to Mim, Jasper, Jason Merrill and all the others who
//have contributed to the improvement of this class
//static var for the version of this class
private static var VERSION:String = "4.0";
//reference to the movie clip we are reflecting
private var mc:MovieClip;
//the BitmapData object that will hold a visual copy of the mc
private var mcBMP:BitmapData;
//the BitmapData object that will hold the reflected image
private var reflectionBMP:Bitmap;
//the clip that will act as out gradient mask
private var gradientMask_mc:MovieClip;
//how often the reflection should update (if it is video or animated)
private var updateInt:Number;
//the size the reflection is allowed to reflect within
private var bounds:Object;
//the distance the reflection is vertically from the mc
private var distance:Number = 0;
function Reflect(args:Object){
/*the args object passes in the following variables
/we set the values of our internal vars to math the args*/
//the clip being reflected
mc = args.mc;
//the alpha level of the reflection clip
var alpha:Number = args.alpha/100;
//the ratio opaque color used in the gradient mask
var ratio:Number = args.ratio;
//update time interval
var updateTime:Number = args.updateTime;
//the distance at which the reflection visually drops off at
var reflectionDropoff:Number = args.reflectionDropoff;
//the distance the reflection starts from the bottom of the mc
var distance:Number = args.distance;
//store width and height of the clip
var mcHeight = mc.height;
var mcWidth = mc.width;
//store the bounds of the reflection
bounds = new Object();
bounds.width = mcWidth;
bounds.height = mcHeight;
//create the BitmapData that will hold a snapshot of the movie clip
mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
mcBMP.draw(mc);
//create the BitmapData the will hold the reflection
reflectionBMP = new Bitmap(mcBMP);
//flip the reflection upside down
reflectionBMP.scaleY = -1;
//move the reflection to the bottom of the movie clip
reflectionBMP.y = (bounds.height*2) + distance;
//add the reflection to the movie clip's Display Stack
var reflectionBMPRef:DisplayObject = mc.addChild(reflectionBMP);
reflectionBMPRef.name = "reflectionBMP";
//add a blank movie clip to hold our gradient mask
var gradientMaskRef:DisplayObject = mc.addChild(new MovieClip());
gradientMaskRef.name = "gradientMask_mc";
//get a reference to the movie clip - cast the DisplayObject that is returned as a MovieClip
gradientMask_mc = mc.getChildByName("gradientMask_mc") as MovieClip;
//set the values for the gradient fill
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [alpha, 0];
var ratios:Array = [0, ratio];
var spreadMethod:String = SpreadMethod.PAD;
//create the Matrix and create the gradient box
var matr:Matrix = new Matrix();
//set the height of the Matrix used for the gradient mask
var matrixHeight:Number;
if (reflectionDropoff<=0) {
matrixHeight = bounds.height;
} else {
matrixHeight = bounds.height/reflectionDropoff;
}
matr.createGradientBox(bounds.width, matrixHeight, (90/180)*Math.PI, 0, 0);
//create the gradient fill
gradientMask_mc.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
gradientMask_mc.graphics.drawRect(0,0,bounds.width,bounds.height);
//position the mask over the reflection clip
gradientMask_mc.y = mc.getChildByName("reflectionBMP").y - mc.getChildByName("reflectionBMP").height;
//cache clip as a bitmap so that the gradient mask will function
gradientMask_mc.cacheAsBitmap = true;
mc.getChildByName("reflectionBMP").cacheAsBitmap = true;
//set the mask for the reflection as the gradient mask
mc.getChildByName("reflectionBMP").mask = gradientMask_mc;
//if we are updating the reflection for a video or animation do so here
if(updateTime > -1){
updateInt = setInterval(update, updateTime, mc);
}
}
public function setBounds(w:Number,h:Number):void{
//allows the user to set the area that the reflection is allowed
//this is useful for clips that move within themselves
bounds.width = w;
bounds.height = h;
gradientMask_mc.width = bounds.width;
redrawBMP(mc);
}
public function redrawBMP(mc:MovieClip):void {
// redraws the bitmap reflection - Mim Gamiet [2006]
mcBMP.dispose();
mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
mcBMP.draw(mc);
}
private function update(mc):void {
//updates the reflection to visually match the movie clip
mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
mcBMP.draw(mc);
reflectionBMP.bitmapData = mcBMP;
}
public function destroy():void{
//provides a method to remove the reflection
mc.removeChild(mc.getChildByName("reflectionBMP"));
reflectionBMP = null;
mcBMP.dispose();
clearInterval(updateInt);
mc.removeChild(mc.getChildByName("gradientMask_mc"));
}
}
}
If you have set the height and the width of your bitmapData to the same width and height of the movieclip your reflecting, you will get 'cut off'
When you rotate your movieclip, it does effectively become wider... and taller - of course at this point you've already made the bitmapData canvas area at a set width -
What you need to do it collect the real width and height of the rotating movieclip and when you redraw the bitmapData, use the new values.
I cheated when I made the same thing and just made my bitmapData 1.5 (bounds.width * 1.5) times the size of the movieclip. But thats a hack and I' a bad person for doing it.
I got it, I have to reset the bounds of the reflect Class:
myReflectClass.setBounds(newWidth,newHeight);
this.createEmptyMovieClip('mask_mc',0);
bg_mc.setMask(mask_mc);
var contor:Number=0;
// function drawCircle draws a circle on mask_mc MovieClip of radius r and having center to mouse coordinates
function drawCircle(mask_mc:MovieClip):Void{
var r:Number = 20;
var xcenter:Number = _xmouse;
var ycenter:Number = _ymouse;
var A:Number = Math.tan(22.5 * Math.PI/180);
var endx:Number;
var endy:Number;
var cx:Number;
var cy:Number;
mask_mc.beginFill(0x000000, 100);
mask_mc.moveTo(xcenter+r, ycenter);
for (var angle:Number = Math.PI/4; angle<=2*Math.PI; angle += Math.PI/4) {
xend = r*Math.cos(angle);
yend = r*Math.sin(angle);
xbegin =xend + r* A *Math.cos((angle-Math.PI/2));
ybegin =yend + r* A *Math.sin((angle-Math.PI/2));
mask_mc.curveTo(xbegin+xcenter, ybegin+ycenter, xend+xcenter, yend+ycenter);
}
mask_mc.endFill();
}
// contor variable is used to hold if the mouse is pressed (contor is 1) or not (contor is 0)
this.onMouseDown=function(){
drawCircle(mask_mc);
contor=1;
}
// if the mouse is hold and moved then we draw a circle on the mask_mc
this.onMouseMove=this.onEnterFrame=function(){
if (contor==1){
drawCircle(mask_mc);
}
}
this.onMouseUp=function(){
contor=0;
}
var mask_mc:MovieClip = new MovieClip();
bg_mc.setMask(mask_mc);
var contor:Number=0;
// function drawCircle draws a circle on mask_mc MovieClip of radius r and having center to mouse coordinates
function drawCircle(mask_mc:MovieClip):void{
var r:Number = 20;
var xcenter:Number = mouseX;
var ycenter:Number = mouseY;
var A:Number = Math.tan(22.5 * Math.PI/180);
var endx:Number;
var endy:Number;
var cx:Number;
var cy:Number;
mask_mc.graphics.beginFill(0x000000, 100);
mask_mc.graphics.moveTo(xcenter+r, ycenter);
for (var angle:Number = Math.PI/4; angle<=2*Math.PI; angle += Math.PI/4) {
xend = r*Math.cos(angle);
yend = r*Math.sin(angle);
xbegin =xend + r* A *Math.cos((angle-Math.PI/2));
ybegin =yend + r* A *Math.sin((angle-Math.PI/2));
mask_mc.graphics.curveTo(xbegin+xcenter, ybegin+ycenter, xend+xcenter, yend+ycenter);
}
mask_mc.graphics.endFill();
}
// contor variable is used to hold if the mouse is pressed (contor is 1) or not (contor is 0)
addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
addEventListener(MouseEvent.MOUSE_MOVE, mouseMoved);
addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function mouseDown(e:MouseEvent):void{
drawCircle(mask_mc);
contor=1;
}
function mouseMoved(e:MouseEvent):void{
if (contor==1){
drawCircle(mask_mc);
}
}
function mouseUp(e:MouseEvent):void{
contor=0;
}
see how simple it was to translate? You should try to translate it yourself first and post your attempt.
This is just a direct translation of your snippet. You will have to remove the event listeners or there will be a memory leak.
These links might be useful for you:
AS2 to AS3 Migration Cheatsheet
ActionScript Migration Cookbook
Well sometimes the best way to get started with something like is just try to compile it as AS-3 and see where it blows up. Some of the code will work and then you can type the errors into google (or if you get stuck post specific questions to SO). That will be a lot easier than just trying to "translate" it if you don't know AS very well and understand the differences.
put it in flex builder
try to compile
if you get some errors, fix them
if you don't know how to fix them, google or ask the pleps