ActionScript :: Draw A Border Around A Masked Image?
Jan 20, 2010
I'm trying to write some ActionScript which will accept a mask and an image, then mask the image and put a border around the result (assuming that the mask is always 100% opaque).
For example, if my mask is a poorly drawn star, and my image is a bunch of flowers, I want the result to be a poorly drawn star with flowers inside it and a border around it. Something like this:
I'm using BitmapData.Draw to draw a masked movieclip to a bitmap.Flash behaves very strangely in many different ways. To give a couple examples:1) Normally, the position of the mask is relative to the masked object. Ex. if I Draw() the movie clip at 10,10 and the mask's position is 20,20, then during the Draw() the mask will effectively be at 30,30. Weird, but consistent. However, if I Draw() the mask to another surface first, and then Draw() the movie clip, the mask position will be absolute (20,20 in the example)
Here's my latest attempt at rendering a dynamic rectange (w/ width, height, border_width, border_color & background_color) I'm trying to render a dashed border, and can't seem to get the code right...
I've reworked my logic about five times, and can get the dashes to render right (almost) but the fill color disappears. It's rendered using actionscript. You can see the issues if you change the border width.[code]...
Let's assume I have an Image that's used a button. By default, the image has no border around it. Clicking on this Image will cause another component be displayed beneath it or next to it. When the second component is displayed, I want to draw a joined border around the Image and the second component.
The second component would not be visible by default. It would only be visible after clicking on the Image by using the popupManager, PopUpAnchor, setting the visible property, etc.
If you take a look at the coordinates, this was suppose to draw a 180x22. Well, it looks lika it draws a 180x22 rectangle, but only if the zoom is at 100%. If I zoom in on the flash player, there are two problems:
1) the line, as it is scaled, goes over the shape edge. Basically, as the border line has 1 pixel, Flash starts do draw it half pixel up and half pixel left; 2) the rectangle is in fact a 179x21 pixels, instead of the 180x22.
I'm sending an example project on an attachment. In this example I have 2 vertical rectangles which act as buttons:
1) the first button draws the rectangle step-by-step; 2) the second button cycles through 3 different styles: 2.1) line with 1 pixel, normal border rescale. This is the style at start; 2.2) no line; 2.3) line with 1 pixel, no border rescale.
The background is a checker texture, with 1 pixel per square. This gives you a perfect look on how the line is drawn.
The drawing instructions are executed on the yellow movieclip, which serves as reference, considering that it has the desired dimensions (180x22). *
If you zoom a couple of times you'll be able to see the problems I'm experiencing.
All you have to do is to click the first vertical button several times to draw the lines, to press the second vertical button to reset the draw and to change the border style, and finally to look at the draw with some zoom in, in order to see it in detail.
So, what can I do in order to draw a perfect rectangle, meaning that the border will not go outside the shape (it would be nice that when the border is rescaled, it does it inside the boundaries of the shape) and the rectangle has right dimensions (why am I missing one pixel in each direction?).
* By the way, is there a way to draw in a movieclip using the lineTo in such a way that the drawing is on the topside instead of the bottomside? I had to make the yellow rectangle partially transparent in order to see my drawing.
I can't post images yet: [URL]. Using Actionscript 3 I'm drawing multiple Shapes onto a MovieClip [top drawing]. The end result I need is the bottom drawing. I originally thought it would be simple to just merge the shapes and then find a way to draw a border around the end result but I can't seem to find any way of doing this. Is this possible or is there a better way of trying to do this?
Is there a way to easily specify on which sides a border is drawn for Flex 4's Spark BorderContainer?[URL]But that uses MX styling which seems like a hack. Is there a better or 'correct' way without having to build a skin? It seems incredibly silly to build a skin for a 'Bordered' component when this is a very common use case.
I have been doing much research on this - including creating a custom skin but cannot seem to be able to do it. I just want to have one border around both the checkbox and label. I also want a background color which I did manage to via opaqueBackground property (setting it via AS3). Just can't seem to find the key to have a border as well.
Here's my latest attempt at rendering a dynamic rectange (w/ width, height, border_width, border_color & background_color) I'm trying to render a dashed border, and can't seem to get the code right...
I've reworked my logic about five times, and can get the dashes to render right (almost) but the fill color disappears. It's rendered using actionscript. You can see the issues if you change the border width... Anyone mind taking a look to see what I'm doing wrong? It seems like the moveTo function isn't behaving right when I get to the end of each line.
My basic requirement is to draw a circle inside a BorderContainer with the layout set to BasicLayout.I run this method in the CREATION_COMPLETE event of the BorderContainer object.[code]I know I must be missing something VERY basic here. Can I just draw like this OR should I draw in some other event? I know that I can create a Ellipse object and easily add it to the border container but I would like to know how I can do this using the graphics object.
I am trying to take a snapshot of the masked region of an image... so, I load my image then perform the following functions:
private function manageLoadedImage(e:Event):void { _bitdata = e.currentTarget.content; // get the bitmap _bithold.addChild( _bitdata ); // add the bitmap to a sprite on the stage
[Code]....
I have a movie, inside that movie I have a thumbnail editor name ThumbEdit.
ThumbEdit has a movieclip on its stage called "holder1". In the document class of ThumbEdit I create a sprite "_bithold" and place it on the stage at holder1.x and holder1.y. When the image loads, I add the image to _bithold and then mask _bithold with a shape. So, I want to grab a snapshot of the masked region of _bithold but I'm not sure how I should go about doing that.
change the following php/AS3 to make it save the dynamically created masked image to the server instead of offering it for download? You have to pass it variables from the as3 AT THE BOTTOM OF THIS POST...
PHP - <?php if(isset($_FILES['Filedata'])) { // basically if file data exists to actually upload.
I would like to have an image that is wider than the viewing area be viewed by dragging a slider left or right, it's basically just a custom scrollbar. My first inclination is to make a mask and put the image behind it, and then I assume I would have to connect the slider to the image somehow so when user clicks and drags slider left or right, the image slides with it to show the part so it that are obscured.
I'm creating a shape in code based on some random points and then using it as a mask for an image. What I'm hoping to do is have the mask fade the image to transparent around the edges. I know I can do this using a gradient mask, the issue is how do I create a gradient on a shape that just fades out around the edges? The shape is not regular, so a radial or linear fill just won't cut it.
I am using this following code to display images using xml.Everything is working fine for me but i have to add background image or border to the displayed image using function BitmapFileMaterial.
using BitmapData or Bitmap Class but same functionality.
i am building an editor which allows you to resize images and to do this (once an image is selected) I add a visible border to the image that allows you to resize the image. so i want to have a function something like,
[Code]....
and i have to call this redrawborder function inside the MOUSE_MOVE listener that controls the resizing (so that i am constantly removing and redrawing the border). constantly removing and redrawing the frame seems very inefficient. is there some property or better why to do this? i want to have, displayobj.scaleChildren = false or something like that
Alright, is there some way to keep a clip with masked content from reacting to the mouse?'ve got a button clip with a masked image inside (so the image that goes beyond the button's bounds can't be seen), but, when the mouse rolls over the masked-off image area, the button still reacts. I've been looking for a few days now, and I can absolutely not figure out what to do!
I am building a sliding image movie. It takes two photos and compares them by using "startDrag" to slide a "setMask" MC horizontally to reveal one photo under another. The idea here is to compare two photos taken 50 years apart.
[Code]....
As you can see I have two MCs here one is a mask and the other is a handle of sort. They work fine separately but I would like to have the two function in unison or as one MC. The handle MC is just that a handle that appears on the left edge of the masked image. So when user drags the handle the masked image moves as well. (or vice versa)
I have a Movie Clip object with a timeline, and it has 3 layers: a layer to stop the timeline at the last frame, a layer with regular drawing with mask attribute and a layer containing a target movieclip with the instance named 'target', that is masked by the layer above.
The drawing is very simple, not even a movieclip, just vector drawing. It's supposed to show the target movieclip only on regions where the mask layer has some drawing, right?
So, I created the method to load an image, listen to the complete loaded event and add the image to the target masked movieclip, but it disappears after the first frame! If i delete the layer with the mask drawing, works fine.
I am working on an custom container and I need a border for this container. I have a 15x15 image that I am creating a 9-slice border skin with. The issue that I am having is that the border skin does not appear the way that I had hoped it would.
Here is a ss of the skin in place.
Ideally I should have a transparent box with a 5 pixel border around it.
I load my images using XML and tween them + putting a border with this script (not including the xml loading code, dont know if I need to change this?) Everything works fine with doing the same thing with all images. What I want to try to accomplish is putting no border on the first image?
My question is related to putting a border around an image. I am dynamically loading images from an xml file and they appear as thumbnails. I want to put a 1 or 2 pixel black border around the image when I load it. The problem that I see is that some of the images are portrait and others, landscape. I hope there is a way to do this in AS? I have searched the forum but nothing.
I have a dynamic border with a loader and buttons and whatnot. It works for the most part, but when the images have not loaded on the persons machine before, there is an occasional glitch preventing it from displaying properly(the border shrinks to nothing, the loading bar goes to aobut 10px, etc.)