I am creating a photo editor app where, at some point, the photo you edit is supposed to be dropped between two layers of DisplayObjects (a background image and an image mask.)
There is a problem, though. When the image you are editing is dropped between the background and the image mask layers, it becomes unclickable, and therefore gets stuck there, with no chance of dragging it again. (The photo editor uses TransformManager library.)
I am looking for a way to allow you to select the image you are editing no matter if there is another DisplayObject on top of it. And that probably means finding some way to click through the image mask.
Is there a way to do that?
I tried setting mouseChildren = false on imageMask, but that didn't have the desired effect.
Many thanks.
I had similar problems and I managed to solve it by using both
displayobject.mouseChildren = false;
and
displayobject.mouseEnabled = false;
on the object that you want to click through.
How about this?
mask.mouseEnabled = false;
You can always attach a Mouse Click listener to the container, and then either use GetObjectsUnderPoint and check for your object or do a hit test and see if the mouse position is over your intended object.
The hit test would look something like this !this.YourPhoto.hitTestPoint(stage.mouseX, stage.mouseY, false)
b
If I understand your problem, this handy class should solve it:
http://www.mosessupposes.com/utilities/InteractivePNG.html
Take a look at what senocular does here, specifically in the handleUpdate method. Basically: getting a list of everything under the mousePoint to find your object.
I think I stumbled upon similar problem, although in as2.
In flash when you position movie clip over movie clip, and the movie clip on the top has any mouse events implemented, it captures all mouse events so they never reach occluded movie clip.
The solution is not to have any mouse events for the top movie clip and have the movie clip positioned at the bottom capture mouse event and redirect some of them to the top movie clip (you can check mouse position with hitTest to determine if they should be redirected).
i had a strange bug i used;
movieClip.mouseEnabled = false;
but wasn't working for some reason.. was driving me crazy!! as i have used it so many times before. tried lots of different things nothing worked then i deleted the MovieClip and the created a new one and worked.. so the MovieClip's contents must have been corrupt or something as it had a old dynamic Text Area box embedded within the MovieClip.
hope this helps someone out there..
Related
I've gathered all game pages on different frames of movieclip called game. in that game movieclip there are 4 different frames. on third frame I have some drag & drop functionality. When I drag one item, I want it to be on the front, I mean all other objects on that frame must not block the view of current dragging object. I used this.setChildIndex(currentDraggingObject,this.numChildren-1); but the problem is whenever I drag objects, when I change the frame, those objects are shown on that frames as well.
In short description: When I set an object's Index in MovieClip(game) , that object is seen in each frame of MovieClip(game) , how can I fix this?
I've searched the result online but couldn't find a solution.
Thank you
-Ozan
Instead of this:
this.setChildIndex(currentDraggingObject,this.numChildren-1);
You can simply use this:
this.addChild(currentDraggingObject); //shorter and clearer
If you have some object on a frame and you actually add it again, it indeed stays there in the other frames (I found this out too). The best/fastest solution would be to simple remove them before you are going to change the frame with this.removeChild(object)
I know this question has been asked before but as a noob i did not understand the answer so im hoping someone can explain a little more for me.
I have an arrow animated along a path using a motion tween I want when a button is clicked for an endless stream of arrows to follow the path, this would be easy if you could put more than one object on a motion tween but you cant? Can anyone help with the code id need to make this happen.
Is there a way to repeat the movieclip again before its finished to give this effect?
Do you have any code, or example of exactly what you're trying to accomplish?
You can use multiple instances of the same movie clip... So (for the sake of explanation) you could animate your arrow once, make sure it's its own movieClip, put it on the stage, and test your movie...It will loop over and over. You can drag as many instances of this movie on to the stage and they will all play, over and over until it's told to stop.
If you need ALL of the arrows to be one movie clip, as to be one addressable object, you can simply select all of your positioned arrows, and convert those into one movieClip (right click, convert to Symbol)
Of course all of this can be controlled precisely through code, but need to know a bit more about what you're trying to do. hope this helps a little...
The function play() will loop your movie forever, unless you have a stop() function somewhere.
yourMovie.play();
If you want to "repeat" / "reset" a MovieClip at any time, use gotoAndPlay() :
yourMovie.gotoAndPlay(1);
If you want to verify if you are at the end of your clip, use the properties currentFrame and totalFrames :
if (yourMovie.currentFrame == yourMovie.totalFrames)
{
// ex. if you want to stop
yourMovie.stop();
}
Ref : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/MovieClip.html
Hope that help. Be more specific, if it doesn't answer your question.
I'm working on a game that uses mx canvases (each in their own mxml file) to wrap different aspects of the application. So the UI is wrapped in one canvas, the main game screen in another, and so on. I am having an issue where mouse input (specifically MouseEvent.CLICK, but it seems to apply to all mouse input) that I want to go to a movieClip in the GameScreen.mxml is being caught by an mx.core.FlexSprite object called "contentPane" that is a child of the GameUI.mxml.
This contentPane sprite doesn't exist when the GameUI object is instantiated, and in fact doesn't seem to exist until I set the text of some textFields contained by the GameUI. These textFields do overlap the movieClip that I want to receive the mouse input, but the textFields themselves are set to mouseEnabled = false, and are not catching the mouse input.
None of my code is directly creating this contentPane sprite, and some elementary Googling tells me that this contentPane sprite is created by the mx.flex.container internally. However, I can't seem to find any documentation on how this actually works, and what causes this sprite to be created.
This functionality has worked previously, and the only significant recent change I'm aware of is moving the swfs loaded into the GameUI into their own application domain to fix a namespace collision. I'm entirely prepared to believe that is the issue.
Ideally, I'd like to know why this contentPane is suddenly catching mouse input. Failing that, I'd at least like to find some documentation on how contentPane works, how I can manipulate it, and what causes its instantiation.
Thank you in advance for your help.
Edit:
I've done some additional digging and wanted to share what I've learned:
The contentPane variable is instantiated in mx.core.container objects for scrolling and clipping purposes. If the content of an mx.core.container object exceeds the size of that object, the container will create a contentPane and move its contents into that pane. However, if scrolling is disabled (verticalScrollPolicy="off" & horizontalScrollPolicy="off") and clipping is disabled (clipContent="false") then the container will not instantiate the contentPane. This solved my specific problem as I did not need either scrolling or clipping behavior in this container.
I would still like to know if there's a way to disable mouse input for an mx.core.container contentPane. It seems like there should be.
Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks
Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.
You can create draggable images like this:
var myImage = new DragImage(sourcePath, x, y);
Let me know if you have any questions about this. Hope it helps.
EDIT
There was a bug when dragging multiple images. Here is a new version.
Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...
The HTML Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:
Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.
Some alternatives that I might suggest:
SVG
Pure HTML
Multiple layered canvases, and drag one transparent canvas over another.
The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.
Update: Here are some examples showing dragging on the canvas:
http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
http://www.redsquirrel.com/dave/work/interactivecanvas/
http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html
None of these have created a separate library for tracking your shapes for you, however.
KineticJS is one such Javascript Library that u can use exclusively for animations
Heres the Link html5canvastutorials
Canvas and jCanvas
You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.
For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:
Drawing an Arrow Between Two Elements.
I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.
Hope that helps others, like me.
JP
As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.
Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.
Hallo, I been having this problem for a while and I have no idea how to solve it.
I have a flash game (very much like a normal memory game) that has a lot of Movieclips in it that has MouseEvents attached to them. But, when I add a bitmap over the stage (used for covering lots of unwanted things and has to be there) that is the full size of the screen non of my events are fired anymore. The reason is that the overlay bitmap is stealing all of the events.
How can I stop this behavior? Is there a way of letting the events pass through the overlay object? Or for the overlay object to be ignored when it comes to events?
Thanks.
Assuming your overlay is stored in a variable m_overlay, then
m_overlay.mouseEnabled = false;
However you said it is used for "covering lots of unwanted things" so perhaps we need more information on what you are trying to achieve?
I've solved this in the past by creating "proxy" object to capture mouse clicks. The MCs under the bitmap aren't going to receive events.