So I'm having some issues with ActionScript. I'm creating a project where you are able to click on a penny and drag it to a scratch card, where you then scratch off the coating and text is revealed.
Everything is composed of two layers. The bottom layer is an image of the card with the text on it( I turned it into a bitmap). The top layer is a rectangle (scratch off coating) with a solid fill that I turned into a movie clip with a property name of maskee3. So far I was successful.
Where I ran into problems is when I tried adding another scratch card to the stage. I did the same process, turned the card into a bitmap and the rectangle scratch off coating (top layer) into a movie clip with a property name of maskee4. When I hit preview movie it still only scratches off the initial card. I honestly don't know what to do and how to fix this to make it scratch all of them.
Below is the coding I did, I have just been shooting in the dark at this point. Any help would be appreciated. Thanks!
/* Drag and Drop
Makes the specified symbol instance moveable with drag and drop.
*/
penny.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);
function fl_ClickToDrag(event:MouseEvent):void
{
penny.startDrag();
}
stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
function fl_ReleaseToDrop(event:MouseEvent):void
{
penny.stopDrag();
}
//start code for scratch off//
/*************************
MASKING
**************************/
/*
Initial variables
*/
// Change lineSize to control size of your eraser
var lineSize:Number=4;
// doDraw is true when user's mouse is down
var doDraw:Boolean=false;
// resumeDrawing is true when user drags their mouse off stage while drawing
var resumeDrawing:Boolean=false;
/*
Create a bitmap to act as our image mask
Add it to stage & cache as bitmap
*/
var erasableBitmapData:BitmapData = new BitmapData(400, 400, true, 0xFFFFFFFF);
var erasableBitmap:Bitmap = new Bitmap(erasableBitmapData);
erasableBitmap.cacheAsBitmap = true;
addChild(erasableBitmap);
/*
Set the erasable bitmap as a mask of our image & cache image as bitmap
*/
maskee3.cacheAsBitmap = true;
maskee3.mask = erasableBitmap;
maskee4.cacheAsBitmap = true;
maskee4.mask = erasableBitmap;
/*************************
ERASER
**************************/
/*
Create a sprite for drawing the eraser lines onto
Set its lineStyle, and move the line to the current mouse x,y
*/
var eraserClip:Sprite = new Sprite();
initEraser();
function initEraser():void{
eraserClip.graphics.lineStyle(lineSize,0xff0000);
eraserClip.graphics.moveTo(stage.mouseX,stage.mouseY);
}
/*
Create a bitmap to copy the erased lines to.
This is required to ensure a smooth erase effect (applying eraserClip
directly to erasableBitmapData leaves jaggy edges around alpha areas.
If anyone knows why, I'd love to know!)
*/
var drawnBitmapData:BitmapData = new BitmapData(400, 400, true, 0x00000000);
var drawnBitmap:Bitmap = new Bitmap(drawnBitmapData);
/*************************
MOUSE EVENTS
**************************/
/*
Add event listeners for mouse movements
*/
stage.addEventListener(MouseEvent.MOUSE_MOVE,maskMove);
stage.addEventListener(MouseEvent.ROLL_OUT, maskOut);
stage.addEventListener(MouseEvent.ROLL_OVER,maskOver);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
/*
Mouse down handler
Begin drawing
*/
function startDrawing(e:MouseEvent):void {
eraserClip.graphics.moveTo(stage.mouseX,stage.mouseY);
doDraw=true;
}
/*
Mouse up handler
Stop drawing
*/
function stopDrawing(e:MouseEvent):void {
doDraw=false;
resumeDrawing = false;
}
/*
Mouse out handler
If user was drawing when they moved mouse off stage, we will need
to resume drawing when they move back onto stage.
*/
function maskOut(e:Event):void {
if (doDraw){
resumeDrawing = true;
}
}
/*
Mouse over handler
If user's mouse if still down, continue drawing from the point where
the mouse re-entered the stage.
*/
function maskOver(e:MouseEvent):void {
if (resumeDrawing){
resumeDrawing = false;
eraserClip.graphics.moveTo(stage.mouseX,stage.mouseY);
}
}
/*
Mouse move handler
*/
function maskMove(e:MouseEvent):void {
if (doDraw && !resumeDrawing){
// Draw a line to current mouse position
eraserClip.graphics.lineTo(stage.mouseX,stage.mouseY);
// Clear the drawn bitmap by filling it with a transparent color
drawnBitmapData.fillRect(drawnBitmapData.rect, 0x00000000);
// Copy our eraser drawing into the erasable bitmap
// (This is required to ensure the smooth alpha edges on our eraser are retained)
drawnBitmapData.draw(eraserClip , new Matrix(), null, BlendMode.NORMAL);
// Fill the erasable bitmap with a solid color
erasableBitmapData.fillRect(erasableBitmapData.rect, 0xFFFFFFFF);
// Copy the scribble bitmap to our main bitmap, with blendmode set to ERASE
// This erases the portion of the mask that has been drawn.
erasableBitmapData.draw(drawnBitmap, new Matrix(), null, BlendMode.ERASE);
}
// Update after event to ensure no lag
e.updateAfterEvent();
}
/************************RESET BUTTON
**************************/
reset_btn.addEventListener(MouseEvent.CLICK,reset);
function reset(e:Event):void {
eraserClip.graphics.clear();
initEraser();
erasableBitmapData.fillRect(erasableBitmapData.rect, 0xFFFFFFFF);
}
