1 Correct answer
Hi again.
I tried your approach but all the circles just kept moving in the same direction while shaking a bit.
Also, for better performance:
- Use vectors instead of arrays;
- Randomize the position of the object itself not the drawing parameters because it will be much harder for you to check for collisions, position the objects precisely, and so on;
- Try to always use only one enterFrame event for the sake of maintenance and performance;
- You used the new keyword when creating the circ object so
...
16
Replies
Hi.
It's because you are setting random x and y values at every tick for the movement. You have to predefine this values before you start moving your shapes.
I have a suggestion for you where I made some tweaks that I think that will greatly improve performance and achieve the result you want.
You only need to create an extra ActionScript class outside of your FLA. I did this because I wanted every circle to be a Shape, which is lighter than a Sprite. But Shapes are static classes, so we can't add properties to it dynamically. That's why I created a class called Circ to extend Shape but being able to receive dynamic properties.
Main code:
import flash.display.Shape;
import flash.display.DisplayObjectContainer;
var circles:Vector.<Circ> = new Vector.<Circ>();
function generateCircles(total:uint, container:DisplayObjectContainer):void
{
for (var i:uint = 0; i < total; i++)
{
var circ:Circ = new Circ();
circ.graphics.lineStyle(1);
circ.graphics.beginFill(0xffffff * Math.random(), 0xffffff * Math.random());
circ.graphics.drawCircle(0, 0, 20);
circ.graphics.endFill();
circ.x = stage.stageWidth * Math.random();
circ.y = stage.stageHeight;
circ.moveX = -5 + Math.random() * 10;
circ.moveY = -5 + Math.random() * 10;
container.addChild(circ);
circles.push(circ);
}
}
function enterFrameHandler(event:Event):void
{
for (var i:uint = 0, total:uint = circles.length; i < total; i++)
{
var circ:Circ = circles;
if (circ.x < -circ.width * 0.5)
circ.x = stage.stageWidth + circ.width * 0.5;
else if (circ.x > stage.stageWidth + circ.width * 0.5)
circ.x = -circ.width * 0.5;
if (circ.y < -circ.height * 0.5)
circ.y = stage.stageHeight + circ.height * 0.5;
else if (circ.y > stage.stageHeight + circ.height * 0.5)
circ.y = -circ.height * 0.5;
circ.x += circ.moveX;
circ.y += circ.moveY;
}
}
generateCircles(25, this);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
Circle.as:
package
{
import flash.display.Shape;
public dynamic class Circ extends Shape
{
public function Circ()
{
}
}
}
Preview:
I hope it helps.
Regards,
JC
Hi again.
I tried your approach but all the circles just kept moving in the same direction while shaking a bit.
Also, for better performance:
- Use vectors instead of arrays;
- Randomize the position of the object itself not the drawing parameters because it will be much harder for you to check for collisions, position the objects precisely, and so on;
- Try to always use only one enterFrame event for the sake of maintenance and performance;
- You used the new keyword when creating the circ object so there's no need to use it again when pushing this object to the array.
Here is an updated code.
The shapes now move based on their rotation values. At every 2 seconds each shape change its direction. Notice that you can uncomment three lines and change the object to the arrow I used below.
Main code:
import flash.display.DisplayObjectContainer;
import flash.utils.setInterval;
//var objs:Vector.<Arrow> = new Vector.<Arrow>();
var objs:Vector.<Circ> = new Vector.<Circ>();
var interval:uint;
const DEGREES:Number = Math.PI / 180;
function generateObjects(total:uint, container:DisplayObjectContainer):void
{
for (var i:uint = 0; i < total; i++)
{
//var obj:Arrow = new Arrow();
var obj:Circ = new Circ();
obj.x = stage.stageWidth * Math.random();
obj.y = stage.stageHeight;
obj.rotation = -180 + Math.random() * 180;
obj.direction = obj.rotation;
obj.speedX = 2 + Math.random() * 3;
obj.speedY = 2 + Math.random() * 3;
obj.friction = 0.85;
container.addChild(obj);
objs.push(obj);
}
}
function enterFrameHandler(event:Event):void
{
for (var i:uint = 0, total:uint = objs.length; i < total; i++)
{
//var obj:Arrow = objs;
var obj:Circ = objs;
if (obj.x < -obj.width * 0.5)
obj.x = stage.stageWidth + obj.width * 0.5;
else if (obj.x > stage.stageWidth + obj.width * 0.5)
obj.x = -obj.width * 0.5;
if (obj.y < -obj.height * 0.5)
obj.y = stage.stageHeight + obj.height * 0.5;
else if (obj.y > stage.stageHeight + obj.height * 0.5)
obj.y = -obj.height * 0.5;
obj.rotation = lerp(obj.rotation, obj.direction, obj.friction);
obj.x = obj.x + obj.speedX * Math.cos(obj.rotation * DEGREES);
obj.y = obj.y + obj.speedY * Math.sin(obj.rotation * DEGREES);
}
}
function changeDirection():void
{
for (var i:uint = 0, total:uint = objs.length; i < total; i++)
objs.direction = -180 + Math.random() * 180;
}
function lerp(v1:Number, v2:Number, f:Number):Number
{
return f * v1 + (1 - f) * v2;
}
generateObjects(25, this);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
interval = setInterval(changeDirection, 2000);
Circ.as code:
package
{
import flash.display.Sprite;
public dynamic class Circ extends Sprite
{
public function Circ()
{
graphics.lineStyle(1);
graphics.beginFill(0xffffff * Math.random(), 0xffffff * Math.random());
graphics.drawCircle(0, 0, 20);
graphics.endFill();
}
}
}
Preview:
(The preview is just a GIF. Please ignore the framerate.)
FLA download: animate_cc_as3_move_shapes.zip - Google Drive .
Please don't hesitate to ask if you have any further questions.
Regards,
JC
Hi João,
I know this is an old thread but I was just wondering if there is any way to bounce the object when it hits the edge of the screen so that it keeps moving around the screen?
Something like this gif.
Hi.
You need to select the Movie Clip you want to use in the Library, right-click it, go to Properties... and check Export for ActionScript. The name in the Class field is the one you're gonna use in the code. So you would replace Circ in the code for Rec, for example.
I've applied some changes to the code in some places so now it uses a symbol called Rec that lives in the Library and I've also applied the mouse click interaction.
AS3 code:
import flash.display.DisplayObjectContainer;
import flash.events.MouseEvent;
const TOTAL:uint = 1000;
var container:DisplayObjectContainer = this;
var objs:Vector.<Rec> = new Vector.<Rec>();
var remove:Boolean = true;
function generateObject():void
{
var obj:Rec = new Rec();
obj.x = obj.width * 0.5 + Math.random() * (stage.stageWidth - obj.width);
obj.y = obj.height * 0.5 + Math.random() * (stage.stageHeight - obj.height);
obj.speedX = -5 + Math.random() * 5;
obj.speedY = -5 + Math.random() * 5;
obj.alpha = 0.2 + Math.random() * 0.8;
container.addChild(obj);
objs.push(obj);
}
function enterFrameHandler(event:Event):void
{
if (objs.length < TOTAL)
generateObject();
for (var i:int = objs.length -1; i >= 0; i--)
{
var obj:Rec = objs[i];
var left:Number = obj.width * 0.5;
var right:Number = stage.stageWidth - obj.width * 0.5;
var top:Number = obj.height * 0.5;
var bottom:Number = stage.stageHeight - obj.height * 0.5;
if (obj.x < left)
{
obj.speedX = -obj.speedX;
obj.x = left;
}
else if (obj.x > right)
{
obj.speedX = -obj.speedX;
obj.x = right;
}
else if (obj.y < top)
{
obj.speedY = -obj.speedY;
obj.y = top;
}
else if (obj.y > bottom)
{
obj.speedY = -obj.speedY;
obj.y = bottom;
}
obj.x += obj.speedX;
obj.y += obj.speedY;
}
}
function restart(e:MouseEvent):void
{
if (remove)
{
container.removeChildren();
objs.splice(0, objs.length);
stage.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
else
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
remove = !remove;
}
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(MouseEvent.CLICK, restart);
As for putting the speed value between certain numbers, I think that already happens here:
obj.speedX = -5 + Math.random() * 5; // number from -5 to 5
obj.speedY = -5 + Math.random() * 5; // number from -5 to 5
Please let me know.
AdChoices