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.
Here is my current testing code:
CSS Code:
Box
{
borderSkin: Embed(source="15x15.png",
scaleGridLeft="5",
scaleGridTop="5",
scaleGridRight="10",
scaleGridBottom="10");
}
MXML Code:
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="MainTest.css"/>
<mx:Box id="tw" width="400" height="400">
</mx:Box>
</mx:WindowedApplication>
Try this :
Box{
background-image: Embed("15x15.png",
scaleGridTop="5",
scaleGridBottom="10",
scaleGridLeft="5",
scaleGridRight="10");
background-size:"100%";
}
Related
there a better way as this example
to create round corners for dynamic (addChild or addElement) created Images?
ok, here is a custom class http://santobay.blogspot.com/2010/04/rounded-corner-image-in-flex.html . save this code as com/RoundedImage.as , create new mxml file with this code
<mx:Application name="Image_mask_test"
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="com.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:HBox id="hbox" width="100%">
<custom:RoundedImage source="images/test.jpg" width="250" height="250" cornerRadius="15"/>
</mx:HBox></mx:Application>
and compile. For create images dynamic use this code:
<fx:Script>
<![CDATA[
import com.RoundedImage;
public function createImage():void {
var newImage:RoundedImage = new RoundedImage();
newImage.source = "images/test.jpg";
newImage.cornerRadius = 20;
hbox.addChild(newImage);
}
]]>
</fx:Script>
No, you must use a mask, if you add it dynamically.
However, you could add a 'frame' on top of the image, if the background is solid, you can use this trick.
I am adding a flex image component to a mx:canvas component with a fairly large image. I have the horizontal and vertical scroll policies set to "on", but when I add the image to the canvas, it doesn't expand to show the whole image (the scrollbars aren't activated).
Anybody else have this issue.
The code is pretty straightforward:
<mx:Canvas id="myCanvas" minWidth="0" minHeight="0" horizontalScrollPolicy="on" verticalScrollPolicy="on">
</mx:Canvas>
and the script adding the image
var newImg:Image = new Image();
newImg.source = $value.sourceImg;
newImg.x = $value.positionX;
newImg.y = $value.positionY;
newImg.scaleX = $value.scaleX * _scaleRatio ;
newImg.scaleY = $value.scaleY * _scaleRatio;
newImg.rotation = $value.rotation;
myCanvas.addChild(newImg);
Ok, So I had to use clipCOntent = true. I had clipContent="false", I thought the meant that it would clip the image and anything outside the bounds could just be scrolled, buut it actually just clips it and doesn't offer a scroll.
It would be helpful if you posted your code, but without seeing it I would recommend setting minWidth="0" on the canvas. This is an old trick to force a re-measure of the canvas so it shows the scroll bars properly. Hope that helps.
Try using canvas.rawChildren.addChild(img) instead of canvas.addChild(img). That's worked for me before, otherwise you'll need to hook into the Flex component measuring system - but this is very seldomly necessary.
Cheers
Create a first canvas (viewCanvas) and place another canvas inside it (imageCanvas).
Set the scroll policies on the imageCanvas to 'off'. This should work, and the viewCanvas should have scrollbars. Note that no width/height are specified on the imageCanvas or image in code below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas id="viewCanvas" x="95" y="65" width="169" height="159">
<mx:Canvas id="imageCanvas" x="0" y="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image x="0" y="0">
<mx:source>http://www.beach-holiday.cn/beach-holiday/pics/2009/09/florida-fort-lauderdale.jpg</mx:source>
</mx:Image>
</mx:Canvas>
</mx:Canvas>
</mx:Application>
I'm using flex and have a few images that I need to sequence through. I may add some text under each image. What I'm trying to do is automatically sequence through these images such that a black fading effect appears briefly between each image and the next - sure you've seen that sort of thing before.
My questions are this:
should these images be considered as states of a component or what? I was going to go that way, but corrections are welcome
how to get that black fading effect between the images and the next. Any clues please
Update: found an example of it. This example has more elements, but the idea is the same, an images fades and another images loads.
http://www.lifeblue.com/flash/lb_banner.swf
You can try using a ViewStack and a Timer to iterate through its children. Just add a fade in/fade out effect on them and you'll get what you're looking for.
Something like that :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black" creationComplete="creationCompleteHandler">
<mx:Script>
<![CDATA[
private var timer:Timer;
private function creationCompleteHandler():void
{
timer = new Timer( 2000 );
timer.addEventListener( TimerEvent.TIMER, timerHandler );
timer.start();
}
private function timerHandler( e:TimerEvent ):void
{
if( vs.selectedIndex == vs.getChildren().length - 1 )
vs.selectedIndex = 0;
else
vs.selectedIndex++;
}
]]>
</mx:Script>
<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="500" effectEnd="timer.start();"/>
<mx:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="500" effectEnd="timer.stop();"/>
<mx:ViewStack id="vs">
<mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
<mx:Image source="picture1.jpg"/>
</mx:Canvas>
<mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
<mx:Image source="picture2.jpg"/>
</mx:Canvas>
<mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
<mx:Image source="picture3.jpg"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
Note that this code isn't the most optimized one. The best would be to create a custom component with a black background and 2 Image components.
Set the alpha property of both of
them to 0
Load a picture in the first one, then
play your fade in effect
Begin to load the following picture
in the second Image component
Fade out the first one, fade in the
second, and load the following
picture in the first Image, etc.
This way you only got one Container (instead of one per picture plus the ViewStack) and 2 Images.
It will also be easier to clean them from memory if you need to.
I have a problem in applying the styles for scroll bar skins through actionscript.
In css we specify as
thumbOverSkin: Embed(source="assets/thumb_over.png",scaleGridLeft="4",scaleGridTop="4", scaleGridRight="5", scaleGridBottom="5");
In actionscript we specify as
setStyle("thumbOverSkin", someImageClass);
How can we specify scaleGrid properties in the above statement?
Thanks for the help in advance.
If you're using Flex 3, that someImageClass, if it's just an image, could just be assigned to a variable. Try this out, it shows two ways of setting simple skins on Flex 3 components:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button
{
overSkin: Embed("assets/over_button.png");
}
</mx:Style>
<mx:Script>
<![CDATA[
[Embed(source="assets/up_button.png", scaleGridLeft="15",scaleGridTop="15", scaleGridRight="25", scaleGridBottom="25")]
public static const UP_SKIN:Class;
]]>
</mx:Script>
<mx:Button id="button" click="button.setStyle('upSkin', UP_SKIN)"/>
<mx:HSlider id="sizer"
minimum="100" maximum="1000"
liveDragging="true"
change="{button.width = sizer.value;button.height = sizer.value/2}"/>
</mx:Application>
(the up_button.png was a simple red square shrunken to 40x40 for testing).
If you're using Flex 4, the Group, which extends Skin, has full 9-slice scaling baked in and you can do a lot more with them.
Hope that helps,
Lance
i'm creating a visual editor in flex and need to let users export thier projects into Image format. But i have one problem: size of the canvas is fixed and when user add element which is out of these sizes some scroll bars added. And user continue working on the project. but when he want to take snapshot of the canvas he just get the visible part ot the canvas with scrollbars. how to get image of the fullsize canvas?
The only solution i found is to check the positions and sizes of canvas child objects and rezise it to fit them. then take snap and resize back. But it hmmmm... too complicated i think. Is there some "easy methods"?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
private function SnapshotButtonHandler():void
{
var snapshot:ImageSnapshot = ImageSnapshot.captureImage(AppCanvas);
var file:FileReference = new FileReference();
file.save(snapshot.data, "canvas.png");
}
]]>
</mx:Script>
<mx:Canvas id="AppCanvas" width="800" height="300" backgroundColor="0xFFFFFF">
<mx:Box x="750" y="100" width="100" height="100" backgroundColor="0xCCCCCC" />
</mx:Canvas>
<mx:Button id="SnapshotButton" label="take snapshot" click="SnapshotButtonHandler()" />
</mx:Application>
i would put one container into the scrollable canvas, that adapts it's size according to objects in it ... maybe even UIComponent would do the trick ... then do a snapshot of that container ... the canvas only adds the scrollbars, so to speak ...
greetz
back2dos
Solution i found
BaseCanvas - canvas with fixed height and width
EditCanvas - dynamic canvas which params depends on it's children position.
Snapshot takes from EditCanvas. Here part of code
private function SnapshotButtonHandler():void
{
var snapshot:ImageSnapshot = ImageSnapshot.captureImage(EditCanvas);
var file:FileReference = new FileReference();
file.save(snapshot.data, "canvas.png");
}
private function ResizeCanvas():void
{
for each (var child:* in AppCanvas.getChildren())
{
if ((child.x + child.width) > AppCanvas.width)
AppCanvas.width = child.x+child.width;
if ((child.y + child.height) > AppCanvas.height)
AppCanvas.height = child.y+child.height;
}
}
<mx:Canvas id="BaseCanvas" width="300" height="200">
<mx:Canvas id="EditCanvas" width="300" height="200" backgroundColor="0xFFFFF0" horizontalScrollPolicy="off" verticalScrollPolicy="off"/>
</mx:Canvas>
krishna: make sure you're targeting flash player 10 in your build path.