I am trying to create a Flash Application similar to www.faceinhole.com.
So far I was able to load my photo through Browse functionality.
Display it inside a movie clip.
Mask this movie clip with an oval shape.
Add the transform controls (senocular) to resize and move the image.
The problem:
Whenever I click on the visible part of the Masked Movie Clip, I can successfully drag my photo around. However when I click on the hidden part of the Masked Movie Clip, I cannot drag my photo around.
Question: Is there a way to add mouseEnabled=false to the hidden area of a mask?
Place a invisible (alpha=0) Sprite on top of everything on the stage or visible section, including the picture and mask and have that drag around. Add a callback to it that updates the picture's position underneath the mask based on the drag values. You'll need to reset the invisible sprite so you can keep dragging the picture and also put limits to how far it can be dragged.
Related
I have a movieclip moving and when I click him I want that appears a hole.
Its possible do that with actionscript? how?
If your hole should appear there the mouse clicks, you could create new Sprite, draw two circles (one bigger than your MovieClip, another at size of you hole, both at position of your click) using his graphics property. Fill it with any color. It should look like donut.
After that assign created Sprite as a mask for your MovieClip.
youMovieClipId.mask=createdSpriteId;
After that, you could add mask as child of your MovieClip, using
youMovieClipId.addChild(createdSpriteId);
Now created mask will follow your MovieClip.
I have several Movieclips which overlap one another, each one has a different graphic of a body part. I would like the user to be able to click on a body part and it highlights.
I've set up event listeners to detect a click on the movieclips and to then apply a colorTransform. The problem is that the top movieclip also gets selected, and not the one's below even though the movieclips have transparent BitMap (PNG) images in them.
Is there a way I can create the hotspots to support only opaque pixels?
I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?
You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.
Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.
If you have two canvases and want to drag something from one to the other, what I would do is:
On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
Draw the item onto that canvas.
Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.
Though, what I'd probably really do here is use SVG. ;)
Check this answer.
It is for multiple select drag & drop, but maybe will be useful.
Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?
I have a function that displays an image on top of a movie clip but when you click another image, it of course replaces the current image. I don't know how to stop it from replacing the image, that way I can make an image appear and drag it over somewhere on the stage and then make a different image appear and drag that somewhere else, too. and what is the drag event for Actionscript 3.0.
Sprite or MovieClip startDrag() and stopDrag() methods.
also i don't understand the following:
function that displays an image on top of a movie clip but when you click another image, it of course replaces the current image
how do images get inside of your swf (library, embed, loader)?
why are they replacing each other on MouseEvent.CLICK?
according to my current vision of your problem Event.stopImmediatePropagation() or Event.stopPropagation() in MouseEvent.CLICK handler function may help
I have a fully working flash application, made in as3. Now i dynamicly added a movieclip and i would like to be able to erase that movieclip with a eraser of some sort, my goal is to be able pick up a sponge with the mouse and then start dragging over the movieclip and erasing the parts where i dragged over it.
Anyone who can help?
Looks like this might be what you're looking for:
http://www.piterwilson.com/personal/2008/05/07/bitmapdata-erasing-in-as3-with-custom-brush-shape/
Is the background behind the MovieClip always the same?
If so you can put an image of the background over the MovieClip you want to erase, and mask that image so it becomes invisible, then add a click listener that draws a circle in the mask when clicked. This way it'll look like the MovieClip is being erased.
With getPixel you can loop over the mask and detect the percentage of the MovieClip that has been erased, so you can remove the clip from stage when it's fully erased.