I am creating a drag and drop game using AS3. This is the code i used to do the drag and drop. The game will provide a hint for the user where the user has to drag a particular answer out of the three options to the correct position. This coding will allow the user to select all the three options. What i want to do is restrict the user from selecting multiple options. Can someone help me with this?
var myArray:Array = [apple, grapes, gava];
var matchImage:Array = [imgApple, imgGrapes, imgGuava];
var posArray:Array = [ {x:55.3, y:55.6}, {x:100.45, y:100.6}, {x:300.5, y:250.7} ];
var currentClip:MovieClip;
var Xpos:Number;
var Ypos:Number;
for(var i:int = 0; i < wordArray.length; i++) {
myArray[i].buttonMode = true;
myArray[i].addEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
}
function item_onMouseDown(event:MouseEvent):void {
currentClip = MovieClip(event.currentTarget);
Xpos = currentClip.x;
Ypos = currentClip.y;
addChild(currentClip);
currentClip.startDrag();
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
currentClip.stopDrag();
var index:int = myArray.indexOf(thisClip);
var equalClip:MovieClip = MovieClip(matchImage[index]);
if(matchImage.hitTestPoint(thisClip.x, thisClip.y, true)) {
currentClip.x = posArray[index].x;
currentClip.y = posArray[index].y;
currentClip.removeEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
currentClip.buttonMode = false;
}
else
{
currentClip.x = startXposition;
currentClip.y = startYposition;
}
}
Once you detect MouseEvent.MOUSE_DOWN on any of the clips you should remove the listeners on the other clips, this will prevent them from being dragged.
Once your done with the dragging you can add them back to allow the user to start dragging again.
Related
I have this code for a drag and drop game.
How can i check by actionscript 3 if every item of an array had hitTestObject the items of the second array so something else can happens for example show a well done message.
var hitArray:Array = new Array(hitTarget1,hitTarget2,hitTarget3,hitTarget4,hitTarget5);
var dropArray:Array = new Array(drop1,drop2,drop3,drop4,drop5);
var positionsArray:Array = new Array();
for (var i:int = 0; i < dropArray.length; i++) {
dropArray[i].buttonMode = true;
dropArray[i].addEventListener(MouseEvent.MOUSE_DOWN, mdown);
dropArray[i].addEventListener(MouseEvent.MOUSE_UP, mUp);
positionsArray.push({xPos:dropArray[i].x, yPos:dropArray[i].y});
}
function mdown(e:MouseEvent):void {
e.currentTarget.startDrag();
setChildIndex(MovieClip(e.currentTarget), numChildren - 1);
}
function mUp(e:MouseEvent):void {
var dropIndex:int = dropArray.indexOf(e.currentTarget);
var target:MovieClip = e.currentTarget as MovieClip;
target.stopDrag();
if (target.hitTestObject(hitArray[dropIndex])) {
target.x = hitArray[dropIndex].x;
target.y = hitArray[dropIndex].y;
playSound(sosto);
}else{
target.x = positionsArray[dropIndex].xPos;
target.y = positionsArray[dropIndex].yPos;
}
}
reset.addEventListener(MouseEvent.CLICK, backObjects);
function backObjects(e:MouseEvent):void{
for(var i:int = 0; i < dropArray.length; i++){
if(dropArray[i].x == hitArray[i].x && dropArray[i].y == hitArray[i].y){
dropArray[i].x = positionsArray[i].xPos;
dropArray[i].y = positionsArray[i].yPos;
}
}
}
function playSound(SoundName:Class):void{
var sound = new SoundName();
var channel:SoundChannel = sound.play();
}
playSound(sosto);
Let's create a function to tell us if every "hitTarget" and its corresponding "drop" are touching each other.
function allCorrect():Boolean {
//for each item in the hitArray, we repeat the action
//we assume that length of hitArray and dropArray are the same
for (var i=0;i<hitArray.length;i++) {
//if the corresponding target and drop do not hit each other, return false
if (!(hitArray[i].hitTestObject(dropArray[i])) {
return false
//if we return false, this function will continue no further
}
}
//We have cycled through all of the items in the arrays, and none of the
//hitTestObjects have been false, so we return true
return true
}
We want to test if everything is correct when we update the positions of our "drops". So, in your mUp function, add this line to the bottom
if (allCorrect()) {
//display "youz a cool cat, bro"
//remove all of your event listeners to improve performance
}
hope this answers your question!
Try adding this line:
stage.addEventListener(Event.ENTER_FRAME, loop);
Where "loop" is a function that contains the rest of your code, which looks something like...
function loop (e:Event):void
{
//Your Code
}
Good luck!
I have multiple bitmap images added into sprites(each image added into 1 sprite) in a loop, then all the sprites added to 1 _contentHolder(Sprite) then that is added to a viewport.
What the problem is, the multiple sprites that are added inside the loop, everything displays with no problem but only the last sprite added is clickable. None of the sprite added before it is clickable. Wondering what the problem is, they are not overlapping and when i hover the mouse over the top of all the sprites, it turns into the mouse clicker but it just won't click.
Thanks for your time!
My code:
function onImageLoaded(e:Event):void {
loadedArray.push(e.target.content as Bitmap);
for(var i:int = 0; i < loadedArray.length; i++){
var currentY1:int = 200;
var image: Sprite= new Sprite;
e.currentTarget.loader.content.height =200;
e.currentTarget.loader.content.y += currentY1;
image.mouseChildren = true; // ignore children mouseEvents
image.mouseEnabled = true; // enable mouse on the object - normally set to true by default
image.useHandCursor = true; // add hand cursor on mouse over
image.buttonMode = true;
image.addChild(loadedArray[i]);
_contentHolder.addChild(image);
}
newArray.push(image);
var viewport:Viewport = new Viewport();
viewport.y = 0;
viewport.addChild(_contentHolder);
var scroller:TouchScroller = new TouchScroller();
scroller.width = 300;
scroller.height = 265;
scroller.x = 10;
scroller.y = 100;
scroller.viewport = viewport;
addChild(scroller);
image.addEventListener(MouseEvent.CLICK, gotoscene);
}
loadImage();
Edit:
function gotoscene(e: MouseEvent):void{
var index:Number;
index = newArray.indexOf(e.target);
trace(index);
blackBox.graphics.beginFill(0x000000);
blackBox.graphics.drawRect( -1, -1, stage.width, stage.height);
blackBox.alpha = 0.7;
addChild(blackBox);
var originalBitmap : BitmapData = loadedArray[index].bitmapData;
var duplicate:Bitmap = new Bitmap(originalBitmap);
duplicate.width = stage.width;
_contentHolder1.addChild(duplicate);
// Use counter here to only add _contentHolder1 once
//Assuming that `samedata` is a class member (I can't see the rest of your code)
addChild(_contentHolder1);
}
Edit2:
private var image:Array = new Array;
//In the For loop
image[i] = new Sprite();
image[i].addChild(loadedArray[i]);
image[i].addEventListener(MouseEvent.CLICK, gotoscene);
function gotoscene(e:MouseEvent):void{
index = image.indexOf(e.target);
trace(index);
}
You should move image.addEventListener(MouseEvent.CLICK, gotoscene); statement into the loop where you add child sprites. Once you do, the listener will be added to all of the sprites, not just the last one that's currently stored in image variable, and is the only one that responds to your clicks.
for(var i:int = 0; i < loadedArray.length; i++){
var currentY1:int = 200;
var image: Sprite= new Sprite;
e.currentTarget.loader.content.height =200;
e.currentTarget.loader.content.y += currentY1;
image.mouseChildren = true; // ignore children mouseEvents
image.mouseEnabled = true; // enable mouse on the object - normally set to true by default
image.useHandCursor = true; // add hand cursor on mouse over
image.buttonMode = true;
image.addEventListener(MouseEvent.CLICK, gotoscene); // <-- THIS
image.addChild(loadedArray[i]);
_contentHolder.addChild(image);
}
And for all that is holy, learn to indent your code, so that you will be able to visually find the start and end of your loops and see if a certain statement is within the loop or not.
I did work for a few years in AS3 and this was a weird an usual problem. I used to solve it with a function that adds the event to each clip:
function someFunction():void {
for (...) {
var image:Sprite = new Sprite();
addSceneListener(image);
}
}
function addSceneListener(mc:Sprite):void {
mc.addEventListener(MouseEvent.CLICK, gogoscene);
}
i'm creating a drag puzzle game, and i need to resolve an issue, two to be exact:
a) Make a check if all the objects from dragArray variable are in the same place as the ones from matchArray.
b) If so, then display a button and play a sound file. (The button is *play_btn* and it plays a sound file when clicked, but i also need the sound to be played once the puzzle is solved so to speak.)
Would add some visual aid, but the forums says I need reputation.
Looking forward for some assistance.
The game is based on this tutorial.
var dragArray:Array = [p1, p2, p3, p4, p5, p6, p7, p8, p9];
var matchArray:Array = [p1_n, p2_n, p3_n, p4_n, p5_n, p6_n, p7_n, p8_n, p9_n];
var currentClip:MovieClip;
var startX:Number;
var startY:Number;
for(var i:int = 0; i < dragArray.length; i++) {
dragArray[i].buttonMode = true;
dragArray[i].addEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
matchArray[i].alpha = 0.2;
}
function item_onMouseDown(event:MouseEvent):void {
currentClip = MovieClip(event.currentTarget);
startX = currentClip.x;
startY = currentClip.y;
addChild(currentClip); //bring to the front
currentClip.startDrag();
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
currentClip.stopDrag();
var index:int = dragArray.indexOf(currentClip);
var matchClip:MovieClip = MovieClip(matchArray[index]);
if(currentClip.hitTestObject(matchClip)) {
//a match was made! position the clip on the matching clip:
currentClip.x = matchClip.x;
currentClip.y = matchClip.y;
//make it not draggable anymore:
currentClip.removeEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
currentClip.buttonMode = false;
} else {
//match was not made, so send the clip back where it started:
currentClip.x = startX;
currentClip.y = startY;
}
}
var my_sound:Sound = new Sound();
my_sound.load(new URLRequest("sounds/song.mp3"));
var my_channel:SoundChannel = new SoundChannel();
play_btn.addEventListener(MouseEvent.CLICK, playSound);
function playSound(event:MouseEvent):void{
my_channel = my_sound.play();
}
You can use a validate function like this one. It will returns true if all drop items are on their targets, false otherwise
function validate(drags:Array, drops:Array):Boolean {
var found:uint = 0
for (var i:uint = 0;i<drags.length;i++ ) {
var drag:MovieClip = MovieClip(drags[i]);
var drop:MovieClip = MovieClip(drops[i]);
found += (drag.hitTestObject(drop)) ? 1 : 0
}
return found == drop.length
}
Then you can use it to check the global interaction :
var result:Boolean = validate(dragArray,matchArray);
if (result) {
// all ok
// play sound...
} else {
// errors
}
Script problem is that every movieclip dispatch down and up mouse event but mouse move event is not dispatching by some movieclips, which is an unexpected behaviour while I have traced the down event and it trace successfully on every object
also recommend your feedback on my code, thanks.
private function loadPurchasedClip(){
var decorationItem:String;
var lastItemIndex:uint = this.getChildIndex(tree1);
var item:Sprite;
for(var a in purchasedItems){
for(var b in purchasedItems[a]){
if(purchasedItems[a][b].item=='shed'){
item = new shed();
} else {
var ClassDefinition:Class = loadedDecorationItem.purchaseItem(purchasedItems[a][b].item) as Class;
item = new ClassDefinition();
}
item.x = purchasedItems[a][b].posX;
item.y = purchasedItems[a][b].posY;
item.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent){
Mouse.cursor = "hand";
e.target.startDrag(false);
dusbin.visible = true;
item.addEventListener(MouseEvent.MOUSE_MOVE,trashMe);
});
item.addEventListener(MouseEvent.MOUSE_UP,function(e:MouseEvent){
Mouse.cursor = "auto";
e.target.stopDrag();
externalPhpCall(e);
dusbin.visible = false;
if(trashClip){
removeChild(trashClip);
trashClip = null;
}
});
item.mouseChildren = false;
// if item is fence or flowers then move them behind the tree
if(
String(purchasedItems[a][b].item).indexOf('fence')!=-1
||
String(purchasedItems[a][b].item).indexOf('flower')!=-1
){
addChildAt(item,lastItemIndex);
lastItemIndex++;
} else {
addChildAt(item,this.numChildren-2);
}
purchasedNameAr[getChildIndex(item)] = purchasedItems[a][b].item;
}
}
Can't be sure, but I think it's probably that you're expecting a clip to continue to dispatch MouseEvent.MOUSE_MOVE events even once the mouse has left the clip - this won't happen, it's only whilst the local mouse pointer co-ordinates (ie yourClip.mouseX/mouseY) intersect the graphics of the clip itself that it will fire - even when dragging a clip, it can't be guaranteed that it will dispatch a MOVE event.
Let's suppose your clips are all on the root, which means you have access to 'stage' - you could do this:
replace:
item.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
with:
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
...but you should remember to remove that event when necessary (use stage again, in case mouse is not released over the clip):
stage.addEventListener(MouseEvent.MOUSE_UP,endMove);
//Don't use anon function as won't have stage reference:
function endMove(e:MouseEvent):void {
//The rest of your code, then:
stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}
private function loadPurchasedClip(){
var decorationItem:String;
var lastItemIndex:uint = this.getChildIndex(tree1);
var item:Sprite;
var Move:Boolean
for(var a in purchasedItems){
for(var b in purchasedItems[a]){
if(purchasedItems[a][b].item=='shed'){
item = new shed();
} else {
var ClassDefinition:Class = loadedDecorationItem.purchaseItem(purchasedItems[a][b].item) as Class;
item = new ClassDefinition();
}
item.x = purchasedItems[a][b].posX;
item.y = purchasedItems[a][b].posY;
item.addEventListener(e:Event.ENTER_FRAME, onEnterFrame);
item.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent){
Mouse.cursor = "hand";
e.target.startDrag(false);
Move = true
dusbin.visible = true;
});
item.addEventListener(MouseEvent.MOUSE_UP,function(e:MouseEvent){
Mouse.cursor = "auto";
e.target.stopDrag();
externalPhpCall(e);
dusbin.visible = false;
if(trashClip){
removeChild(trashClip);
trashClip = null;
}
});
item.mouseChildren = false;
// if item is fence or flowers then move them behind the tree
if(
String(purchasedItems[a][b].item).indexOf('fence')!=-1
||
String(purchasedItems[a][b].item).indexOf('flower')!=-1
){
addChildAt(item,lastItemIndex);
lastItemIndex++;
} else {
addChildAt(item,this.numChildren-2);
}
purchasedNameAr[getChildIndex(item)] = purchasedItems[a][b].item;
}
function onEnterFrame(e:Event):void{
if(Move){
// what ever here
{
}
I have made a flash application and in this flash application I have included a jigsaw puzzle. The application is wrote on one timeline and certain frames are used as different pages within the application.
The problem is once the jigsaw drag and drop are moved the pieces are displayed on all frames instead of just the one jigsaw puzzle frame I created.
How can I make these drag and drop items not be shown on the other frames?
Here is the code I have used for the jigsaw puzzle.
var hitArray:Array = new Array(Tar1_mc,Tar2_mc,Tar3_mc,Tar4_mc,Tar5_mc,Tar6_mc);
var dropArray:Array = new Array(Piece1_mc,Piece2_mc,Piece3_mc,Piece4_mc,Piece5_mc,Piece6_mc);
var positionsArray:Array = new Array();
for (var i:int = 0; i < dropArray.length; i++)
{
dropArray[i].buttonMode = true;
dropArray[i].addEventListener(MouseEvent.MOUSE_DOWN, mdown);
dropArray[i].addEventListener(MouseEvent.MOUSE_UP, mUp);
positionsArray.push({xPos:dropArray[i].x, yPos:dropArray[i].y});
}
function mdown(e:MouseEvent):void
{
e.currentTarget.startDrag();
setChildIndex(MovieClip(e.currentTarget), numChildren - 1);
}
function mUp(e:MouseEvent):void
{
var dropIndex:int = dropArray.indexOf(e.currentTarget);
var target:MovieClip = e.currentTarget as MovieClip;
target.stopDrag();
if (target.hitTestObject(hitArray[dropIndex]))
{
target.x = hitArray[dropIndex].x;
target.y = hitArray[dropIndex].y;
}
else
{
target.x = positionsArray[dropIndex].xPos;
target.y = positionsArray[dropIndex].yPos;
}
}
reset_btn.addEventListener(MouseEvent.CLICK, backObjects);
function backObjects(e:MouseEvent):void
{ for(var i:int = 0; i < dropArray.length; i++){
if(dropArray[i].x == hitArray[i].x && dropArray[i].y == hitArray[i].y){
dropArray[i].x = positionsArray[i].xPos;
dropArray[i].y = positionsArray[i].yPos;
}
}
}
Thank you in advance for any help provided.
You should really try and use external classes when creating games. But to fix your problem you can remove the pieces from the stage when you go to a certain frame. So in the frame you want them to dissapear you could write the following:
for(var i:int = 0; i < dropArray.length; i++){
if(this != null && this.contains(dropArray[i])){
removeChild(dropArray[i]);
}
}
if you need to come back to this frame however, you could toggle the visiblabilty property of each puzzle piece. you would loop through but would just change the visibilty like so:
dropArray[i].visible = false;