Hi i'm looking to make a movieclip rotates depending on the angle from mouse. I have this code that seems fine according to what i search on net, but it's not working for me.
Btw, this movieclip has it's own class (Player.as) which is a child of the doc class.
I already put the movieclip on the stage.
public class Player extends MovieClip
{
private var player:MovieClip;
public function Player()
{
this.addEventListener(Event.ADDED_TO_STAGE,onStage);
}
private function onStage(e:Event)
{
stage.addEventListener(KeyboardEvent.KEY_DOWN, on_key_down);
stage.addEventListener(KeyboardEvent.KEY_UP, on_key_up);
this.addEventListener(Event.ENTER_FRAME,on_enter_frame);
removeEventListener(Event.ADDED_TO_STAGE,onStage);
}
private function on_enter_frame(e:Event)
{
var dist_Y:Number =mouseY -this.y ;
var dist_X:Number =mouseX -this.x ;
var angle:Number = Math.atan2(dist_Y,dist_X);
var degrees:Number = angle * 180/ Math.PI;
this.rotation = degrees;
}
}
The movieclip rotates when i move the mouse, but not accordingly. I can't find the problem with this, hope anyone could help. Thanks.
mouseX and mouseY should be stage.mouseX and stage.mouseY because you want to calculate positions in global space not in player`s local space.
Related
I need to add a MovieClip to stage, the limitation being that it should only be added to an empty area on the stage. The stage itself either contains complex shapes or is manipulable by the user i.e. he can drag/move objects to change the empty area. The hitTest and hitTestObject methods need DisplayObject already available on the stage. What is the right way to go - the only solution I can imagine is having added my object on the stage and then repeatedly doing hit tests?
[Imagine it to something like adding sprites in a video game - they must spawn in empty regions; if they pop out from inside of each other, then it'll look really odd.]
Well, when you create a new class, just turn it off with a variable and set the visibility to false, then loop until there is no hitTest.
A silly example:
public class someClass extends Sprite
{
private var objectsOnStage:Array;
public function someClass(objectsArray:Array) {
objectsOnStage = objectsArray;
visible = false;
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event){
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.ENTER_FRAME, SEARCH);
}
private function SEARCH(e:Event) {
var doesHit:Boolean = false;
x = Math.round(Math.random() * (550 - 0)) + 0;
y = Math.round(Math.random() * (400 - 0)) + 0;
for (var i:int = 0; i < objectsOnStage; i++) {
if (doesHit) break;
if (this.hitTestObject(objectsOnStage[i])) {
doesHit = true;
}
}
if (doesHit) return;
placedInit();
}
private function placedInit() {
visible = true;
removeEventListener(Event.ENTER_FRAME, SEARCH);
//now init the stuff you want.
}
}
You just check if bounding boxes of both clips overlaps. Like this:
import flash.geom.Rectangle;
import flash.display.MovieClip;
// create simple movie clips that has a rectangle shape inside
var sym1 : MovieClip = new Sym1();
var sym2 : MovieClip = new Sym2();
// get a rectanle of both clipt
var boundingBox1 : Rectangle = sym1.getBounds(this);
var boundingBox2 : Rectangle = sym2.getBounds(this);
// check if bounding boxes of both movie clips overlaps
// so it works like hitTestObject() method
trace( boundingBox1.intersects( boundingBox2) )
I know this post is super old, but in case it helps anybody --
If you need to do a hit test on a movieclip that isn't on the stage. A workaround is to rasterize it to a bitmap first.
var bitmapData:BitmapData = new BitmapData(mc.width, mc.height, true, 0x0000000);
bitmapData.draw(mc);
if (bitmapData.getPixel32(x, y) > 0) {
// Hit true.
}
This functionality exists in desktop programs such as Adobe Illustrator or Painter.
You can select a brush that is a pattern of images. Starting to paint on canvas displays a line (or any pattern) created from a set of images of different sizes and rotations. Approximately how I portrayed in the picture (the red line is a path of the brush motion).
Is there already a library for this effect, or how it can best be implemented?
Listen for MouseEvent.MOUSE_DOWN on your drawing canvas and once it fires, add a Event.ENTER_FRAME to begin drawing. The drawing itself is pretty straightforward - on every frame you take the mouseX and mouseY values and add the PNG image on the canvas in the exact place with any transformations (scaling, rotation, alpha) for that particular image. Here's a simple example:
private var PatternPNG:Class;
private var canvas:Sprite;
private function init() {
canvas = new Sprite();
addChild(canvas);
canvas.graphics.beginFill(0xFFFFFF);
canvas.graphics.drawRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
canvas.graphics.endFill();
canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onMouseDown(e:Event):void
{
canvas.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
canvas.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onMouseUp(e:Event):void
{
canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
canvas.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(e:Event):void
{
var patternPiece:DisplayObject = new PatternPNG();
patternPiece.rotation = Math.random() * 360;
patternPiece.alpha = Math.random();
patternPiece.scaleX = patternPiece.scaleY = 0.2 + Math.random() * 0.8;
patternPiece.x = mouseX;
patternPiece.y = mouseY;
canvas.addChild(patternPiece);
}
I'm writing a game and it has enemies and bullets. When a bullet hits an enemy, I want to destroy the enemy and the bullet. I'm using the hitTestPoint() method to test if a bullet has hit an enemy. Here's the code in my game loop:
for each(var bullet:Bullet in this.bullets) {
for each(var enemy:Enemy in this.enemies) {
if(enemy.hitTestPoint(bullet.x, bullet.y)) {
trace("hit");
}
}
bullet.update();
}
this.bullets and this.enemies are both arrays containing objects for bullets and enemies. Here's those two classes:
package com {
import flash.display.MovieClip;
import flash.display.Stage;
public class Bullet extends MovieClip {
private var stageRef:Stage;
public var speed:Number = 10;
public function Bullet(stage:Stage) {
this.stageRef = stage;
}
public function update() {
this.x += Math.sin((Math.PI / 180) * (360 - this.rotation)) * this.speed;
this.y += Math.cos((Math.PI / 180) * (360 - this.rotation)) * this.speed;
}
}
}
--
package com {
import flash.display.MovieClip;
import flash.display.Stage;
public class Enemy extends MovieClip {
public var speed:Number = 4;
private var stageRef:Stage;
public function Enemy(stage:Stage) {
this.stageRef = stage;
this.x = this.stageRef.stageWidth / 3;
this.y = this.stageRef.stageHeight / 2;
}
public function update() {
}
}
}
The problem is, hitTestPoint only returns true if both the x and y values of bullet and enemy are the same, rather than if the two movie clips overlap. This leads to bullets going right through enemies but it not registering as a hit. Perhaps I'm missing a bounding box?
Is there a way I can make hitTestPoint return true if the bullet hits the enemy at all rather than only if the bullet and enemy co-ordinates are the same?
Thank you!
You want hitTestObject(), not hitTestPoint()
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#hitTestObject%28%29
Yes, if yours movieclips are too small the frame x will be just right to the object and the next frame it will be pass it, you may want to make a "hitbox" bigger, like doing the movieclip bigger with alpha rectangles.
I need to develop my own drag function in AS3 (instead of using startDrag) because I'm resizing a MovieClip.
I'm doing this:
public class resizeBR extends MovieClip {
var initialScaleX, initialScaleY;
public function resizeBR() {
this.addEventListener(MouseEvent.MOUSE_DOWN, initResize);
this.addEventListener(MouseEvent.MOUSE_UP, stopResize);
}
public function initResize(e:MouseEvent):void
{
initialScaleX = e.target.scaleX;
initialScaleY = e.target.scaleY;
e.target.addEventListener(MouseEvent.MOUSE_MOVE, startResize);
}
public function startResize(e:MouseEvent):void
{
e.target.x += e.localX;
e.target.y += e.localY;
e.target.parent.parent.width += mouseX;
e.target.parent.parent.height += mouseY;
// Keep its own scale
e.target.scaleX = initialScaleX;
e.target.scaleY = initialScaleY;
}
public function stopResize(e:MouseEvent):void
{
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, startResize);
}
}
But the drag feature is not working fluently. I mean, when I drag a MovieClip from class resizeBR I need to move slowly my mouse cursor or it's not going to work propertly.
resizeBR is a MovieClip as a child of another MovieClip; the second one is which I have to resize.
What am I doing wrong?
Thanks!
Thanks all for your answers, but I found a great classes to do what I want.
http://www.senocular.com/index.php?id=1.372
http://www.quietless.com/kitchen/transform-tool-drag-scale-and-rotate-at-runtime/
I'm not really sure if I completely understand what you mean. But I think your problem lies with your MOUSE_MOVE handler.
In your current example you're resizing your target only when moving your mouse over the target. When you're moving your mouse fast enough it's possible your mouse leaves the target, casuing it to stop resizing. When I'm writing my own drag handlers I usually set the MOUSE_MOVE and MOUSE_UP listeners to the stage.
Your class would end up looking something like this:
public class resizeBR extends MovieClip
{
var initialScaleX, initialScaleY;
public function resizeBR()
{
addEventListener(MouseEvent.MOUSE_DOWN, initResize);
addEventListener(MouseEvent.MOUSE_UP, stopResize);
}
public function initResize(e:MouseEvent):void
{
initialScaleX = scaleX;
initialScaleY = scaleY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, startResize);
}
public function startResize(e:MouseEvent):void
{
x += e.localX;
y += e.localY;
parent.parent.width += mouseX;
parent.parent.height += mouseY;
// Keep its own scale
scaleX = initialScaleX;
scaleY = initialScaleY;
}
public function stopResize(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, startResize);
}
}
There are a couple reasons the resizing is jumpy. First, like rvmook points out, you'll need to make sure you support the mouse rolling off of the clip while its being resized. Since there is not an onReleaseOutside type of event in AS3, you have to set listeners to the stage, or some other parent clip. If you have access to the stage, that is best. If not, you can use the root property of your resizable clip, which will reference the highest level display object you have security access to. Setting mouse events to the root is a little wonky, because for them to fire, the mouse needs to be on one of the root's child assets - whereas the stage can fire mouse events when the mouse is over nothing but the stage itself.
Another reason you might be seeing some strange resizing behavior is because of using the localX/Y properties. These values reflect the mouseX/mouseY coordinates to the object being rolled over - which might not necessarily be your clip's direct parent.
I tend to avoid having classes access their parent chain. You might want to consider placing the resizing logic in the clip you want resized, and not in one of its children. Here is simple self resizing example:
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
public class ResizableBox extends MovieClip {
public function ResizableBox() {
addEventListener(MouseEvent.MOUSE_DOWN, startResize);
}
private function startResize(evt:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, handleResize);
stage.addEventListener(MouseEvent.MOUSE_UP, stopResize);
}
private function stopResize(evt:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleResize);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopResize);
}
private function handleResize(evt:MouseEvent):void {
this.scaleX = this.scaleY = 1;
this.width = this.mouseX;
this.height = this.mouseY;
}
}
}
ResizableBox is set as the base class of a MC in the library.
I'm new to AS3 and have been working on an XML driven navigation system written in AS3.
At present, I've imported the contents of an XML file and plotted it inside a containing MovieClip created at root level dynamically on the stage. This MovieClip is called 'container'.
What I want to accomplish is a smooth, accelerating / decelerating effect which animates the container movieclip along the X axis depending on where the mouse cursor is in relation to the middle of the stage.
My code can be found here: http://pastie.org/521432
Line 87 onwards is the code I'm using right now to make the movieclip scroll left & right.
What I have does work but is clunky but does work - I just want it to be a little more polished and have drawn a blank with Google. Because I want the MovieClip to continue to scroll at the current relative speed even when the mouse stops moving, I used an instance of the Timer class.
Can anyone suggest improvements? Thanks in advance.
You should separate out you calculations and your drawing methods. So have it do all the calculations in an onMouseMove handler, but actually draw the changes in an onEnterFrame handler.
Also I think your algorithm could be much simpler and nobody would notice. I made a quick example of how you might do it. paste this code into an AS3 file called Main.as and make it the document class of a new FLA.
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Main extends Sprite
{
private const boxCount:int = 10;
private const boxWidth:int = 45;
private const boxMargin:int = 5;
private const startPoint:int = 150;
private const boxesWidth:int = boxCount * (boxWidth + boxMargin);
private const endPoint:int = boxesWidth + startPoint;
private const zeroPoint:int = boxesWidth / 2 + startPoint;
private var container:MovieClip;
private var targetX:Number;
private var speed:Number = 0;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
container = new MovieClip();
addChild(container);
container.x = 150;
container.y = 300;
for (var i:int = 0; i < boxCount; i++)
{
container.graphics.beginFill(Math.random() * 0xFFFFFF);
container.graphics.drawRect(i*(boxWidth+boxMargin), 0, boxWidth, boxWidth);
}
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
private function mouseMoveHandler(e:MouseEvent):void
{
var distanceFromCenter:int = stage.mouseX - zeroPoint;
speed = distanceFromCenter * -0.01; // Bring number into a good range, and invert it.
}
private function enterFrameHandler(e:Event):void
{
container.x += speed;
}
}
}