Ok, I am developing a game that requires the player to drag an object and place it inside of a jar. I found it to be much easier to designate an x coordinate limitation in order to determine when the object they are dragging should simulate dropping into the jar. The code that I have so far works perfectly. However, the action script that is initiated when the object crosses the x coordinate limit is ignored when the players move the object too fast over the x limit. I think that I can fix this problem by limiting how fast the object can be dragged. Does anyone have any direction on how this can be accomplished?
Here is my code:
jarFront.mouseEnabled = false; jarFront.mouseChildren = false;
// animate buttons in
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.Event;
var objArray:Array = new Array;
objArray.push(obj1);
objArray.push(obj2);
objArray.push(obj3);
var objPosition:Point;
function dragobj(e:Event):void {
e.currentTarget.startDrag();
objPosition = new Point( e.currentTarget.x, e.currentTarget.y);
}
function dragobjStop(e:Event):void {
e.currentTarget.stopDrag();
e.currentTarget.x = e.currentTarget.x;
e.currentTarget.y = objPosition.y;
objPosition = null;
}
for (var i:uint = 0; i < objArray.length; i++) {
objArray[i].addEventListener(MouseEvent.MOUSE_DOWN, dragobj);
objArray[i].addEventListener(MouseEvent.MOUSE_UP, dragobjStop);
}
// Drop in jar
var HighH:int=400;
var HighW:int=400;
var LowH:int=-200; var LowW:int=0;
var HighyH:int=170;
var HighyW:int=170;
var LowyH:int=0; var LowyW:int=0;
this.addEventListener( Event.ENTER_FRAME, goJar)
function goJar( e:Event ):void
{
if (obj1.x > 400 && obj1.x < 440) {
obj1.stopDrag();
//set back or tween position
obj1.x = 83;
obj1.y = -300;
this.setChildIndex(obj1,1)
var ct1_1:Tween = new Tween(obj1, "y", None.easeNone, obj1.y, obj1.y=Math.floor(Math.random()*(1+HighyH-LowyH))+LowyH, .2, true);
var ct1_2:Tween = new Tween(obj1, "rotation", Bounce.easeOut, 0, 180, 1, true);
var ct1_3:Tween = new Tween(obj1, "x", None.easeNone, obj1.x, obj1.x=Math.floor(Math.random()*(1+HighH-LowH))+LowH, .2, true);
} else {
// keep inside jar
if (obj1.x > -330 && obj1.x < -260) {
obj1.stopDrag();
//set back or tween position
obj1.x = 83;
obj1.y = -300;
this.setChildIndex(obj1,1)
var ct1_4:Tween = new Tween(obj1, "y", None.easeNone, obj1.y, obj1.y=Math.floor(Math.random()*(1+HighyH-LowyH))+LowyH, .2, true);
var ct1_5:Tween = new Tween(obj1, "rotation", Bounce.easeOut, 0, 180, 1, true);
var ct1_6:Tween = new Tween(obj1, "x", None.easeNone, obj1.x, obj1.x=Math.floor(Math.random()*(1+HighH-LowH))+LowH, .2, true);
}
}
}
Also, it would be VERY helpful if there was a way to include everything below "//Drop in jar" in the array functions above so that this action script can be automatically applied to obj2 and obj3.
You have no code in there that limits the movement of the dragged object whatsoever. If you want to limit the object position simply pass a Rectangle object to the startDrag method.
Thanks BotMaster, based on your direction I modified my code like so:
var rectangle1:Rectangle = new Rectangle(400, -665, 1156, 1052);
var rectangle2:Rectangle = new Rectangle(-376, -665, 721, 1052);
var candyPosition:Point;
function dragCandy(e:Event):void {
if (e.currentTarget.x > 400) {
e.currentTarget.startDrag(false, rectangle1);
candyPosition = new Point( e.currentTarget.x, e.currentTarget.y);
} else {
e.currentTarget.startDrag(false, rectangle2);
candyPosition = new Point( e.currentTarget.x, e.currentTarget.y);
}
}
Basically, what happens here:
If the object is at an x position greater than 400, then dragging will be constrained to rectangle1
Once the object has been dragged to a specific x position outside of the jar, it will be tweened inside of the jar.
Now that the object is in the jar, its new x position will be less than 400 and dragging will now be constrained to rectangle2.
Now, when the object is dragged up our of the jar and on top of the hitTestObject, it will be tweened back to a random position out side of the jar.
Related
I want to move an Object in Flash from left to right in 1 minute
I tried to do it like this but it is less than 1 minute
addEventListener(Event.ENTER_FRAME, move);
function move(e:Event):void{
this.myObject.x += 1;
}
How can I move myObject in 1 minute and also Stop it when in end of the screen in right?
Try creating a Tween by minimally editing the example given in the documentation:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myObject, "x", None.easeNone, 0, stage.stageWidth, 60, true);
You want to find the starting and end points for the position that suits your needs which are not exactly clear from your question.
var duration_ms:int = 60*1000;
var offset:Number = 100;
var start_time_ms:int = getTimer();
var start_pos_x:int = mc.x;
var end_pos_x:int = mc.x+offset;
addEventListener(Event.ENTER_FRAME, Loop);
function Loop(e:event):void {
var elapsed_ms:int = getTimer() - start_time_ms;
if (elapsed_ms<duration_ms) {
mc.x = start_pos_x + ((end_pos_x-start_pos_x)*(elapsed_ms/duration_ms));
}
}
I am using codes from http://hub.tutsplus.com/tutorials/create-a-drag-and-drop-puzzle-in-actionscript-30--active-2920 to make a drag and drop decoration game. I am trying to make it so that when the dropped object is dragged out of target location (which is an outline of the shape in my case), it goes back to initial location... basically reversing the drag and drop. I've been messing around with really random codes and so far this line is the closest to what I want but I don't think the code is right and also it doesnt return to initial location, it just goes to the side of the stage.
so, I added the else if line to stopDragObject which got the object to be removed from target location, but it randomly goes to the side of the stage, and not initial location:
private function stopDragObject(evt:MouseEvent):void {
if (evt.target.hitTestObject(getChildByName(evt.target.name + "Target"))) {
evt.target.x = getChildByName(evt.target.name + "Target").x;
evt.target.y = getChildByName(evt.target.name + "Target").y;
} else if (evt.target.x = null) {
evt.target.x = xPos;
evt.target.y = yPos;
}
evt.target.stopDrag();
}
Solved
after reading the lesson from below, I ended up with this and it works perfectly! (not exactly the way like the lesson but at least it works...)
private function stopDragObject(evt:MouseEvent):void {
if (evt.target.hitTestObject(getChildByName(evt.target.name + "Target"))) {
evt.target.x = getChildByName(evt.target.name + "Target").x;
evt.target.y = getChildByName(evt.target.name + "Target").y;
} else {
evt.target.x = getChildByName(evt.target.name + "Int").x;
evt.target.y = getChildByName(evt.target.name + "Int").y;
}
evt.target.stopDrag();
}
I added a initial object so the object could only be either at target or initial :)
I will try to teach neither provide code.
Lets draw two rectangles:
var s1:Sprite = new Sprite()
var s2:Sprite = new Sprite()
with (s1)
{
graphics.beginFill(0xfcaaaa, .7)
graphics.drawRect(0, 0, 400, 400)
graphics.endFill()
}
with (s2)
{
graphics.beginFill(0x00aaaa, .7)
graphics.drawRect(0, 0, 30, 30)
graphics.endFill()
}
addChild(s1)
addChild(s2)
Is't that simple? You see that s1 is much bigger than s2 (dimentions: 400, 400 vs 30, 30 ) Now place s2 to the center of our big s1:
s2.x = 200;
s2.y = 200;
We will use s1 for the boundaries of s2 movings.
This code is a simplest solution for dragging our s2 rectangle (Sprite):
s2.addEventListener(MouseEvent.MOUSE_DOWN, onDown)
s2.addEventListener(MouseEvent.MOUSE_UP, onUp)
function onDown(e:MouseEvent):void
{
(e.currentTarget as Sprite).startDrag();
}
function onUp(e:MouseEvent):void
{
(e.currentTarget as Sprite).stopDrag();
}
Now, the basic solution for returning our Sprite to the starting position: hitTestObject will return true, if Sprite s2 is still located in the area of Sprite s1. More helpful functions here. Lets check it. Change onUp function this way:
function onUp(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
s.stopDrag();
if (!s.hitTestObject(s1))
{
s.x = 200;
s.y = 200;
}
}
You see that now s2 gets returned to the starting position if it gets dragged out from the area of s1.
Now the main part:
What to do, if you can't predict the starting position of the object? Now, when we know how to deal with already known coordinates, this is the challange. I assume that there are several implementations of this functionality exist. One of the best way is to set additional parameters e.g. startingX and startingY for the dragging object when starting drag. E.g. in our example when onDown function gets called. I guess you dealing with Sprites or MovieClips and don't have the ability to do this.
Lets go another way and use Dictionary object. Dictionary is some kind of traditional Hash Map with the ability to use objects as keys.
Hash map is kind of storage, where you can put any value mapped by a key, provided by you. In actionscript 3 we have Object as a limited implementation of Hash Map. Why use it? In two words because it's simple and fast. But with Object we can't use other Objects as keys, only strings ints numbers etc..
var sites:Object = new Object();
sites['stackoverflow'] = "http://stackoverflow.com/"
trace(sites.stackoverflow) // outputs-> http://stackoverflow.com/
With Dictionary we can use Objects as keys.
Lets create it:
var startCoordinates:Dictionary = new Dictionary();
To save coordinates, we need x and y property.
FYI: new Object() is equivalent of {}
var capitals:Object = new Object();
capitals['Italy'] = 'Rome';
is equivalent of
var capitals:Object = {Italy: 'Rome'};
To save current position we will use this code:
var s:Sprite = (e.currentTarget as Sprite);
startCoordinates[s] = { x: s.x, y: s.y };
And the whole code in our example will look like this:
var s1:Sprite = new Sprite()
var s2:Sprite = new Sprite()
addChild(s1)
addChild(s2)
with (s1)
{
graphics.beginFill(0xfcaaaa, .7)
graphics.drawRect(0, 0, 400, 400)
graphics.endFill()
}
with (s2)
{
graphics.beginFill(0x00aaaa, .7)
graphics.drawRect(0, 0, 30, 30)
graphics.endFill()
}
s2.x = 200;
s2.y = 200;
s2.addEventListener(MouseEvent.MOUSE_DOWN, onDown)
s2.addEventListener(MouseEvent.MOUSE_UP, onUp)
var startCoordinates:Dictionary = new Dictionary()
function onDown(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
startCoordinates[s] = { x: s.x, y: s.y };
s.startDrag();
}
function onUp(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
s.stopDrag();
if (!s.hitTestObject(s1))
{
s.x = startCoordinates[s].x;
s.y = startCoordinates[s].y;
}
delete startCoordinates[s];
}
This is a script for when i click an object, it opens a small book with some page flip effect.
I'm done with almost everything but i want that when i click in a back button everything desapears and i go back to only seeing the original object. It is not working because its only deleting one of the pages! I tried doing an array but it didnt work either and Im not very good with arrays too. Can anyone help?
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;
import flash.display.Loader;
var cont : DisplayObject;
var cont2 : DisplayObject;
var imgLoader : Loader;
//loads pages
for (var i:int=0; i<=4; i++){
imgLoader = new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.INIT, onLoadJPEG);
imgLoader.load(new URLRequest(""+i+".png"));
}
var imgLoader2 : Loader;
//loads back button
imgLoader2 = new Loader();
imgLoader2.contentLoaderInfo.addEventListener(Event.INIT, onLoadSketch);
imgLoader2.load(new URLRequest("voltaatrassketchbook.png"));
function onLoadJPEG (e : Event) : void {
cont = e.target.loader;
cont.x =250;
cont.y =50;
cont.width = (445-100)/2;
cont.height = (604-100)/2;
addChild(cont);
cont.addEventListener(MouseEvent.MOUSE_UP, FlipPage);
}
function onLoadSketch (e : Event) : void {
cont2 = e.target.loader;
cont2.x =450;
cont2.y =300;
cont2.width = 181/2;
cont2.height = 127/2;
addChild(cont2);
cont2.addEventListener(MouseEvent.MOUSE_UP, volta);
}
function FlipPage(e:MouseEvent):void{
setChildIndex(DisplayObject(e.currentTarget), this.numChildren - 1);
if (e.currentTarget.rotationY == 0) {
var myTween:Tween = new Tween(e.currentTarget, "rotationY",
Regular.easeInOut,0, 180, 1, true);
}
if (e.currentTarget.rotationY == 180) {
var myTween:Tween = new Tween(e.currentTarget, "rotationY",
Regular.easeInOut, 180, 0, 1, true);
}
}
//function to go back
function volta (e: MouseEvent): void {
gotoAndStop(1);
cont.visible=false;
cont2.visible=false;
}
Option 1
You are right that you could use an array. Put this at the top of your code, before you start loading the pages:
var pages:Array = [];
Then put this as the final line inside onLoadJPEG()
pages.push(cont);
That will add each image to the array when it is loaded.
Then in volta() you can loop through the array and make each image invisible
for(var i:int = 0; i < pages.length; i++) {
DisplayObject(pages[i]).visible = false;
}
Option 2
Another approach would be to add all the images to a container Sprite and then all you would have to do is make the container Sprite invisible.
Add this to the top of your code before you load the pages :
var pages:Sprite = new Sprite();
addChild(pages);
Then in onLoadJPEG() add cont as a child of the container
pages.addChild(cont);
Then in volta() :
pages.visible = false;
If you use this approach, don't forget to call setChildIndex() on the container inside of FlipPage() :
pages.setChildIndex(DisplayObject(e.currentTarget), this.numChildren - 1);
Hello
I am in the process of creating a chess board where you can move the pieces. Currently i am working on the rook and the coding is below. I know it is not elegant and probably the most inefficient code out there, but this is day 2 of my actionscript 3.0 life and i am kinda a beginner. Anyway, so the thing is, when you click the piece the code below figures out the possible ways to go. Then green squares appear at those places. You can then press those green squares and then the rook will move there.
Ok, now to the problem. The squares will not go away. I want them all to be deleted when i have clicked on one of them and the rook will move there.
I have tried removeChild(), but since that happens in a different function it does not work. So if you are so kind to look through the code and suggest a solution, your help is much appreciated.
Kind Regards Emile
https://picasaweb.google.com/109156245246626370734/Jun42011?authkey=Gv1sRgCMy4v_b01aikzAE&feat=directlink
import flash.display.Sprite
import flash.events.MouseEvent
import flash.text.TextField;
import flash.geom.Point;
import caurina.transitions.*
myPoint.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
function startMove(evt:MouseEvent) {
var boxNum:int = Math.floor(myPoint.y/100)+1;
for (var i:int = 1; i <boxNum; i++) {
var box:Ball = new Ball();
box.x = myPoint.x;
box.y = myPoint.y - i * box.height;
addChild(box);
Tweener.addTween(box, {alpha:0.5});
box.buttonMode = true;
box.addEventListener(MouseEvent.ROLL_OVER, onOver,
false, 0, true);
box.addEventListener(MouseEvent.ROLL_OUT, onOut,
false, 0, true);
box.addEventListener(MouseEvent.MOUSE_DOWN, onclick);
}
var boxNum1:int = Math.floor((800-myPoint.y)/100)+1;
for (var i:int = 1; i <boxNum1; i++) {
var box1:Ball = new Ball();
box1.x = myPoint.x;
box1.y = myPoint.y + i * box.height;
addChild(box1);
Tweener.addTween(box1, {alpha:0.5});
box1.buttonMode = true;
box1.addEventListener(MouseEvent.ROLL_OVER, onOver,
false, 0, true);
box1.addEventListener(MouseEvent.ROLL_OUT, onOut,
false, 0, true);
box1.addEventListener(MouseEvent.CLICK, onclick);
}
var boxNum2:int = Math.floor(myPoint.x/100)+1;
for (var i:int = 1; i <boxNum2; i++) {
var box2:Ball = new Ball();
box2.x = myPoint.x - i * box.height;
box2.y = myPoint.y;
addChild(box2);
Tweener.addTween(box2, {alpha:0.5});
box2.buttonMode = true;
box2.addEventListener(MouseEvent.ROLL_OVER, onOver,
false, 0, true);
box2.addEventListener(MouseEvent.ROLL_OUT, onOut,
false, 0, true);
box2.addEventListener(MouseEvent.CLICK, onclick);
}
var boxNum3:int = Math.floor((800-myPoint.x)/100)+1;
for (var i:int = 1; i <boxNum3; i++) {
var box3:Ball = new Ball();
box3.x = myPoint.x + i * box.height;
box3.y = myPoint.y;
addChild(box3);
Tweener.addTween(box3, {alpha:0.5});
box3.buttonMode = true;
box3.addEventListener(MouseEvent.ROLL_OVER, onOver, false, 0, true);
box3.addEventListener(MouseEvent.ROLL_OUT, onOut, false, 0, true);
box3.addEventListener(MouseEvent.CLICK, onclick);
}
}
function onOver(evt:Event):void {
var box:MovieClip = MovieClip(evt.target);
addChild(box)
box.scaleX = box.scaleY = 1.1;
}
function onOut(evt:Event):void {
evt.target.scaleX = evt.target.scaleY = 1;
}
function onclick(Event:MouseEvent):void {
var xcod:int = Math.ceil(mouseX/100)*100-50;
var ycod:int = Math.ceil(mouseY/100)*100-50;
Tweener.addTween(myPoint, {x:xcod, y:ycod, time:1, transition:"linear"});
}
alxx's answer is correct, you wouldn't need to keep a special list for them. The other way you could do it, using an Array to save references, would look like this:
var boxes:Array = new Array();
function startMove(evt:MouseEvent):void {
...
var box:Ball = new Ball();
addChild(box);
boxes.push(box);
...
var box1:Ball = new Ball();
addChild(box1);
boxes.push(box1);
...
}
function onClick(evt:MouseEvent):void {
for each (var box:Ball in boxes) {
removeChild(box);
}
boxes = new Array();
}
You can put temporary highlights in separate Sprite. Then your board will looks as follows:
Stage children: base board, highlights, pieces, in that order.
When you need to remove highlights, you can iterate highlights' children with numChildren and getChildAt and call removeChild on each, you don't even need a special list for them.
I'm trying to do some augmented reality projects with flartoolkit . I can now put simple 3d objects on my marker and it works fine , but I wanna give my project some events that the user can interact with . I'm trying to trace the rotation of the marker. there's a container:DisplayObject3D which my application uses to add the 3d objects , I traced this :"trace(container.rotationZ)" but it's just returning 0 . I studied another AR application's source code and it was using the rotation of it's container object without problem .and I think I should mention that I'm using the exercise file of seb lee delisle papervision3d course from lynda.com . anyone has any experience with flartoolkit? the main functions of my my code is as below:
public function AR_AlchemyBase()
{
super(640,480, false);
cameraParams = FLARParam.getDefaultParam(WIDTH * 0.5, HEIGHT * 0.5);
marker = new FLARCode(16, 16);
marker.loadARPattFromFile(new MarkerPattern());
init();
}
public function init():void
{
video = new Video(WIDTH, HEIGHT);
webCam = Camera.getCamera();
webCam.setMode(WIDTH, HEIGHT, 30);
video.attachCamera(webCam);
video.smoothing = true;
camBitmapData = new BitmapData(WIDTH *0.5, HEIGHT * 0.5,false, 0x000000);
camBitmap = new Bitmap(camBitmapData);
camBitmap.scaleX = camBitmap.scaleY = 2;
addChildAt(camBitmap,0);
raster = new FLARRgbRaster(WIDTH *0.5, HEIGHT * 0.5);
detector = new FLARSingleMarkerDetector(cameraParams, marker, 80);
result = new FLARTransMatResult();
viewport.x = -4;
_camera = new FLARCamera3D(cameraParams);
container = new FLARMarkerNode();
scene.addChild(container);
addSceneObjects();
stage.addEventListener(Event.ENTER_FRAME, enterFrame);
}
//the function to put our objects in
public function addSceneObjects() : void
{
var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
wmat.doubleSided = true;
var plane : Plane = new Plane(wmat, 80, 80);
container.addChild(plane);
var light:PointLight3D = new PointLight3D();
light.x = 1000;
light.y = 1000;
light.z = -1000;
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x0);
var cube : Cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
cube.z = -20;
container.addChild(cube);
}
public function enterFrame(e:Event):void
{
var scaleMatrix:Matrix = new Matrix();
scaleMatrix.scale(0.5, 0.5);
camBitmapData.draw(video, scaleMatrix);
raster.setBitmapData(camBitmapData);
counter++;
if(counter == 3) counter = 0;
var imageFound : Boolean = false
currentThreshold = threshold+ (((counter%3)-1)*thresholdVariance);
currentThreshold = (currentThreshold>255) ? 255 : (currentThreshold<0) ? 0 : currentThreshold;
imageFound = (detector.detectMarkerLite(raster, currentThreshold) && detector.getConfidence() > 0.5) ;
if(imageFound)
{
detector.getTransformMatrix(result);
container.setTransformMatrix(result);
container.visible = true;
threshold = currentThreshold;
thresholdVariance = 0;
if(onImageFound!=null) onImageFound();
}
else
{
if(counter==2) thresholdVariance +=2;
if(thresholdVariance>128 ) thresholdVariance = 1;
if(onImageLost!=null) onImageLost();
}
singleRender();
}
I might not be able to help with the main problem but If you want users to interact with the models you need to set their materials to be interactive, otherwise they don't receive mouse events. Regarding the rotation...I might be missing something but it's the instances inside the container thar you're applying the rotation to, not the the container itself?
This helped me with getting a simple PV3D example running:
PV3D Tutorial for basic interactivity