Flex :: Draw A Joined Border Around Two Components?
Mar 16, 2011
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.
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.
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.
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]...
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:
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?
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.
I am created a dynamically adding a VBox, that contains two images. Into a Custom Component that is derived from UIComponent. The problem is the Vbox that contains the two image is only a really tiny size. I would like the VBox stretch to the size of the two images. This is how I am creating the Vbox....
Is it bad practice/design to nest components inside components using Flex 4? Should I simply be creating components and inserting them into my main application as below, or doesn't it matter?
I have a long movie 22 000 frames at 30 fps so I had to split it into two parts. I have joined them with AS. Can I have a slider that scrubs the timeline from part1 to part2 of my movie? Is this possible?
I'd like to be able to use some raw 3d coordinates from a text file and display them, joined sequentially in a wireframe model. Then be able to rotate, scale etc the resulting model. The coordinates aren't from a 3d drawing package but rather measured - therefore each point is literally assigned three numbers, in a tab delimited file. With a large number of points (i.e. over 100) is there a way to load in the file and then generate the resulting model?
i have a class thats create a class with bitmapData that merge 2 IBitmapDrawable. one of them is 24*20 while the other is 16*16.i want to draw the smaller first in a bitmapData object which its width and height are 24*20 but i want to draw it in the center of the big bounds.
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.
In Flex 4, I have a canvas that I'd like to set border-width on via css. I can set the border color and border style, but the border width remains 1 pixel wide no matter what.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations>
I have a MainPage, on initialize I am calling a method which would create a SWFLoader object (aka LoginPage) and loads it in the MainPage. When we run the MainPage in 800x500 window, the LoginPage loads in that window size, however when we maximize the window the content of the LoginPage gets resized to 1027X660, but the border remains 800x500, and the remainig area of the window stays blank.
I have an old Flex app build with the Halo library. Now that Halo was changed to mx library, it makes the old Border component stop working and I'm unable to build the project anymore. Even when I try to change the library to MX, the Border cannot build.
How do I add a border to a Flex VBox? My VBox is the renderer of a List. I've tried the following without success (in particular VBox's borderVisible="true" borderStyle="solid" borderColor="0x888888"):
Is there a way to Set a a focus border on a datefield when it is selected and change the border to some other colour when we lose focus from the datefield.
according the documentation borderThickness is an applicable style, but when I try to set it to anything (would prefer '0') it says "The style 'borderThickness' is excluded by type 'mx.controls.DateField'."I could style the background color to be the same as the background, but I have an image behind so this will not work.
