Draw over a movieclip - actionscript-3

I have a paint application. I want to put a layer(movieclip with a square) and I want to draw over it.
Until now I cant paint but when I'm trying to add movieclip child, I cant draw over that movieclip. Which is the way to make something like this?
This is my code:
import flash.display.Sprite;
var myThick=10;
var currentColor = 0X000000;
var myCanvas:Sprite;
init();
function init():void {
drawCanvas();
var clearSwatch:Sprite = new Sprite();
clearSwatch.graphics.beginFill(0xFFFFFF);
clearSwatch.graphics.lineStyle(2, 0x000000);
clearSwatch.graphics.drawCircle(30, 370, 20);
clearSwatch.graphics.endFill();
addChild(clearSwatch);
clearSwatch.buttonMode = true;
clearSwatch.addEventListener(MouseEvent.CLICK, clearCanvas);//clear
}
function drawCanvas():void {
myCanvas = new Sprite();
myCanvas.graphics.beginFill(0xF0F0F0);
myCanvas.graphics.drawRect(60, 20, stage.stageWidth-80, stage.stageHeight+40);
myCanvas.graphics.endFill();
myCanvas.graphics.lineStyle(myThick, currentColor);
addChild(myCanvas);
myCanvas.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
//stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
myCanvas.buttonMode = true;
}
function startDraw(event:MouseEvent):void {
myCanvas.graphics.moveTo(event.localX, event.localY);
myCanvas.addEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}
function stopDraw(event:MouseEvent):void {
myCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}
function paintLine(event:MouseEvent):void {
myCanvas.graphics.lineTo(event.localX, event.localY);
event.updateAfterEvent();
}
function clearCanvas(event:MouseEvent):void {
myCanvas.graphics.clear();
drawCanvas();
}
How can I make it work?
thank you!

Add both listeners to stage, along with mouse move listener, but use graphics commands over myCanvas.
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
function startDraw(event:MouseEvent):void {
myCanvas.graphics.moveTo(event.localX, event.localY);
myCanvas.addEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}
Etc.

Related

draw line inside Moviclip in ActionScript3

I am wondering how to draw line inside movieclip[] array:
movieclip myted
line myshape
for (var i:int = 0; i < myted.numChildren-1; i++) {
if (myted.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {
//drawingLine.transform.colorTransform=pal_color;
}
}
All drawing that you do with a Graphics instance is based on basic drawing with lines and curves. Consequently, all ActionScript drawing must be performed using the same series of steps:
Define line and fill styles
Set the initial drawing position
Draw lines, curves, and shapes (optionally moving the drawing point)
If necessary, finish creating a fill
to define a line and fill styles:
var myShape:Shape = new Shape();
myShape.graphics.lineStyle(2, 0x990000, .75);
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);
movieClipInstanceName.addChild(myShape);
" http://i.stack.imgur.com/ESfzi.png "
Thanks
no understand not working ?
not work raw line inside movieclip!
drawing line inside movieclip S1 .. s27 when mouse move inside teddy
////////////////
var drawingLine:MovieClip = new MovieClip();
s.addChild(drawingLine);
//2.
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
//3.
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
s.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
//4.
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
for (var i:int = 0; i < teddy.numChildren-1; i++) {
if (teddy.getChildByName("s"+i).hitTestPoint(mouseX,mouseY,true)) {
pal_color=teddy.getChildAt(i).transform.colorTransform;
pal_color.color=colors[current_color];
teddy.getChildByName("s"+i).transform.colorTransform=pal_color;
}
}
}
//5.
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
public function on_teddy_click(e:MouseEvent):void {
for (var i:int = 0; i < teddy.numChildren-1; i++) {
if (teddy.getChildByName("s"+i).hitTestPoint(mouseX,mouseY,true)) {
pal_color=teddy.getChildAt(i).transform.colorTransform;
pal_color.color=colors[current_color];
teddy.getChildByName("s"+i).transform.colorTransform=pal_color;
}
}
}
/////////////////////////////////
sample 2:
not Draw line inside movieclip "S"
var drawingLine:MovieClip = new MovieClip();
s.addChild(drawingLine);
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
s.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

AS3: How to make a stamp-like effect [specifically with the coding I am using]?

I am VERY new to Flash and Actionscript. I am having a pretty bad time grasping some elements.
I am currently making a program based on a beginner's tutorial I found online and I have edited it to how I have wanted so far with the exception of making a stamp-like effect.
What happen's so far is simple: it generates a smiley face vector image, if the user clicks on it, it follows the cursor until the user clicks again where it will stay and no longer follow the cursor.
What I am trying to do is modify the click event to somehow not only place down the vector but essentially make a new one that will follow the cursor and allow another one to be places, so on and so forth.
The code I have so far is below:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;
/**
* ...
* #author Lyon's Den Gaming
*/
public class Main extends Sprite
{
public var happyface:Sprite;
public var stampcount:Number = 0;
public var happyfacecursor:Boolean;
public var mouseListener:Object = new Object();
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);
// entry point
happyface = new Sprite();
addChild(happyface);
//This will draw the main circle O
happyface.graphics.beginFill(0xf2f75b);
happyface.graphics.lineStyle(6, 0x000000);
happyface.graphics.drawCircle(800 / 2, 600 / 2, 200);
happyface.graphics.endFill();
//This will draw the eyes ^^
happyface.graphics.lineStyle(8);
happyface.graphics.moveTo(325, 170);
happyface.graphics.lineTo(325, 245);
happyface.graphics.lineStyle(8);
happyface.graphics.moveTo(466, 170);
happyface.graphics.lineTo(466, 245);
//This will draw the mouth :D
happyface.graphics.lineStyle(8);
happyface.graphics.moveTo(275, 340);
happyface.graphics.lineTo(525, 340);
happyface.graphics.lineStyle(8);
happyface.graphics.beginFill(0xdb3d3d);
happyface.graphics.moveTo(275, 340);
happyface.graphics.cubicCurveTo(280, 500, 520, 500, 525, 340);
happyface.graphics.endFill();
//this scales it down and places it where I want
happyface.scaleX = .15;
happyface.scaleY = .15;
happyface.x = 335;
happyface.y = 265;
//This will add mouse input!
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMoveHappyFace);
happyface.addEventListener(MouseEvent.CLICK, SelectHappyFace);
}
public function MouseMoveHappyFace(e:MouseEvent):void
{
if (happyfacecursor)
{
happyface.x = mouseX - happyface.width;
happyface.y = mouseY - happyface.height / (1.4);
} else {
happyfacecursor = false;
addChild(happyface);
}
}
public function SelectHappyFace(e:MouseEvent):void
{
if (happyfacecursor)
happyfacecursor = false;
else
happyfacecursor = true;
}
}
}
why don't you use the drag and drop methods? When you click the happyface end or start the drag:
Edited: you won't need your MouseMoveHappyFace function with this:
Edited 2: here you have a new method that creates a happy face at a time. I haven't tried this but it should work.
public var happyface:Sprite;
public var stampcount:int = 0;
public var happyfacecursor:Boolean;
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);
// entry point
// Create the first stamp
addNewHappyFace();
}
public function addNewHappyFace():void {
// This method creates a new happyFace, adds it and asigns it to
// the global happyface variable
var aux = new Sprite();
this.addChild(aux);
stampcount++;
//This will draw the main circle O
aux.graphics.beginFill(0xf2f75b);
aux.graphics.lineStyle(6, 0x000000);
aux.graphics.drawCircle(800 / 2, 600 / 2, 200);
aux.graphics.endFill();
//This will draw the eyes ^^
aux.graphics.lineStyle(8);
aux.graphics.moveTo(325, 170);
aux.graphics.lineTo(325, 245);
aux.graphics.lineStyle(8);
aux.graphics.moveTo(466, 170);
aux.graphics.lineTo(466, 245);
//This will draw the mouth :D
aux.graphics.lineStyle(8);
aux.graphics.moveTo(275, 340);
aux.graphics.lineTo(525, 340);
aux.graphics.lineStyle(8);
aux.graphics.beginFill(0xdb3d3d);
aux.graphics.moveTo(275, 340);
aux.graphics.cubicCurveTo(280, 500, 520, 500, 525, 340);
aux.graphics.endFill();
//this scales it down and places it where I want
aux.scaleX = .15;
aux.scaleY = .15;
aux.x = 335;
aux.y = 265;
//This will add mouse input!
aux.addEventListener(MouseEvent.CLICK, SelectHappyFace);
happyface = aux;
}
public function SelectHappyFace(e:MouseEvent):void{
if (happyfacecursor) }
happyface.startDrag(); // To make the object follow the mouse
happyfacecursor = false;
} else {
happyface.stopDrag(); // To drop the object where you want
// This will prevent that when clicking on an already placed stam i would
// make the last one created to move
happyface.removeEventListener(MouseEvent.CLICK, SelectHappyFace);
happyfacecursor = true;
// Now create and add a new HappyFace clip here
addNewHappyFace()
}
}

As3 hittesting doesn't really work (nested)

I got a tank.
I got a hero (controllable character).
The tank has a nested movieclip which has a very thin surface area.
Yet, the thing detects a collision when it's not even touching the hero.
public class tank_sight extends MovieClip
{
private var _root:MovieClip;
public function tank_sight()
{
addEventListener(Event.ADDED, beginClass);
}
private function beginClass(event:Event):void
{
_root = MovieClip(root);
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(event:Event):void
{
if(this.hitTestObject(_root.hero.hitbox))
{
this.gotoAndStop(2);
trace("HIT");
fire();
}
else
{
this.gotoAndStop(1);
}
}
private function fire():void
{
var shell:Shell = new Shell(x, y, rotation - 180);
_root.addChild(shell);
}
}
What's wrong? I don't get it.
EDIT: Sight is rotating, so that's probably why. I tried using this code on the player class:
point = _root.tanks.barrel.sight.localToGlobal(new Point());
if(this.hitTestPoint(point.x, point.y, false))
{
trace("HIT");
}
But it doesn't work.. It never traces "HIT", unless I stand in some weird location at certain times.
hitTestObject works with nested objects also (display objects that have different parents), you should check logic of your game, and do some tests.
Simple example:
var squareHolder:Sprite = new Sprite();
var squareInner:Shape = new Shape();
var hitHolder:Sprite = new Sprite();
var hitCircle:Shape = new Shape();
hitCircle.graphics.beginFill(0x990000);
hitCircle.graphics.drawCircle(0, 0, 20);
squareInner.graphics.beginFill(0x009900);
squareInner.graphics.drawRect(0, 0, 40, 40);
addChild(squareHolder);
squareHolder.addChild(squareInner);
squareHolder.x = 200;
squareHolder.y = 100;
squareInner.x = 50;
squareInner.y = 50;
stage.addChild(hitHolder);
hitHolder.addChild(hitCircle);
hitCircle.transform.matrix = new Matrix(1, 0.5, 0.5, 1, 30, 30);
stage.addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent):void {
hitHolder.x = e.stageX;
hitHolder.y = e.stageY;
if (hitCircle.hitTestObject(squareInner)) {
trace("Ding!");
}
});
Whatever you do with hitCircle (visible=false, trasparent fill, transformations) it will still work.

Action Script 3 draw in front of a movie clip?

I'm new flash and action script.
here is the problem.
i have created a simple application. and added just two items to the stage. a movie clip object and a button object. movie clip object has mouse event listeners set to draw on it. but when i draw, the lines are drawn behind the movie clip object (on the stage), i want to draw it on the object.
here is my code
var write: Boolean;
write = false;
board.addEventListener(MouseEvent.MOUSE_DOWN, startWriting);
board.addEventListener(MouseEvent.MOUSE_MOVE, continueWriting);
board.addEventListener(MouseEvent.MOUSE_UP, stopWriting);
board.addEventListener(MouseEvent.MOUSE_OUT, stopWriting);
btnHide.addEventListener(MouseEvent.MOUSE_DOWN, hideBoard);
var g:Graphics = graphics;
g.lineStyle(1, 0x0000ff);
function startWriting(e:MouseEvent):void {
g.moveTo(mouseX, mouseY);
write = true;
}
function continueWriting(e:MouseEvent):void {
if(write) {
g.lineTo(mouseX, mouseY);
}
}
function stopWriting(e:MouseEvent):void {
write = false;
}
function hideBoard(e:MouseEvent):void {
if (board.visible){
board.visible = false;
}
else {
board.visible = true;
}
}
so the question is how do i draw on the movie clip object
Each MovieClip have their own graphics property. The contents you added in are always in front of the current movieclip graphics.
The solution is just add a Shape as child of your MovieClip :
var shape : Shape = new Shape;
addChild( shape );
var g:Graphics = shape .graphics;
g.lineStyle(1, 0x0000ff);
function startWriting(e:MouseEvent):void {
g.moveTo(mouseX, mouseY);
write = true;
}
function continueWriting(e:MouseEvent):void {
if(write) {
g.lineTo(mouseX, mouseY);
}
}

AS3 - How to drag an object in a line that is not vertical or horizontal

I would like to drag an object in one line.
I already know how to do this in a horizontal or vertical line
Here's how I do this
private var handle:Sprite;
private function init():void
{
handle = new Sprite();
handle.mouseChildren = false;
handle.buttonMode = true;
handle.graphics.beginFill(0xFF0000);
handle.graphics.drawCircle(0, 0, 5);
handle.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
handle.addEventListener(MouseEvent.MOUSE_UP, stopMove);
}
private function startMove(evt:MouseEvent):void
{
var bounds:Rectangle = new Rectangle(0, 0, 100, 1);
handle.startDrag(false, bounds);
}
private function stopMove(evt:MouseEvent):void
{
handle.stopDrag();
}
But I want do drag my object in a line that isn't horizontal or vertical.
For example, I would like to drag the object from the top left corner to the bottom right corner, in one straight line.
I tried to rotate the bounds rectangle, but it seems that you can not rotate a Rectangle.
How do I drag an object in a non-vertical (or non-horizontal) line?
Thank you very much!
Vincent
You cannot use startdrag system to do it. You have to use an enterframe event and constraint x/y yourself :
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Test extends Sprite
{
private var handle:Sprite;
public function Test()
{
handle = new Sprite();
addChild(handle);
handle.mouseChildren = false;
handle.buttonMode = true;
handle.graphics.beginFill(0xFF0000);
handle.graphics.drawCircle(0, 0, 5);
handle.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
addEventListener(MouseEvent.MOUSE_UP, stopMove);
}
private function startMove(evt:MouseEvent):void
{
stage.addEventListener(Event.ENTER_FRAME, updateClipPos);
}
private function stopMove(evt:MouseEvent):void
{
stage.removeEventListener(Event.ENTER_FRAME, updateClipPos);
}
private function updateClipPos(e:Event) : void
{
if(mouseX < 100)
{
handle.x = mouseX;
handle.y = handle.x;
}
}
}
}