I am new in flex. Currently i am going to build a flex album, but I get a problem about
the render in image by spark list.
the problem is this last 2~3 thumbs can not be properly displayed, as you can see as follows:
http://www.j-rich.com/Problem
and it will look like:
http://www.j-rich.com/Problem/show.jpg
for the source code, you can right click and choose view source in the demo
Any suggestion will be appreciated, thank you very much.
Sincerely,
Yuan-Hsu Liao
Add cachePolicy="on" to your Image control in ItemRenderer. But I don't recomend to use this kind of huge images as thumbnails. Looks like Flash has some limitations in this field.
This is correct for me, my resolution is 1920*1080. I use FLEX SDK4.5.1, flashplayer 11.8.
By the way, you should better override the set data function in the ItemRenderer, and set img source in the function, like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
override public function set data(value:Object):void {
super.data = value;
var url:String = value as String;
img.source = url;
positionImg();
}
private function positionImg():void
{
this.ima.width = 136;
this.ima.height = 105;
this.ima.x = 0;
this.ima.y = 0;
}
]]>
</fx:Script>
<s:Group id="group" x="0" y="0" width="170" height="85">
<s:Image id="img" x="0" y="0" scaleMode="letterbox"/>
</s:Group>
</s:ItemRenderer>
ItemRenderer is recycled, so it's better to do some stuff in the set data()
Check whether ur Padding given is Correct...or else Adjust the same.
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 have a UIComponent (tried it also with Canvas) and some icons in it (sub views). On the UIComponent I defined some extra ContextMenuItems.
Now when I'm testing it, the context menu appears only on the subviews (icons) with a right-click.
I've checked the documentation but found nothing about required properties for using context menus.
Do you have any ideas why it's only on subviews?
This is probably happening because your UIComponent's (or Canvas') graphics are clean/empty. If the component doesn't have any "content" it will act as transparent, which means the click event will not be caught.
If you are using a Canvas there's a simple way to check this out, try to add some background color and it should work:
<mx:Canvas backgroundColor="#FFFFFF" backgroundAlpha="0.001"/>
I think this is what you're looking for:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
var menu:ContextMenu = new ContextMenu();
menu.customItems.push(new ContextMenuItem('weee'));
menu.customItems.push(new ContextMenuItem('weee2'));
menu.hideBuiltInItems();
canvas.contextMenu = menu;
}
]]>
</fx:Script>
<mx:Canvas id="canvas" backgroundColor="#000000" height="50%" width="50%" >
<s:Button label="blarg" />
</mx:Canvas>
</s:Application>
Notice how I'm creating a menu, then adding items, which then replaces the contextMenu property. This should work on any object that extends InteractiveObject.
What the problem was is the mouseEnabled="{false}" property in one of the parent-parent containers. I removed it and it works now.
How is cropping/clipping accomplished on a Sprite in Flex?
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="Init()">
<mx:Script>
<![CDATA[
public function Init():void {
var spr:Sprite=new Sprite();
uic.addChild(spr);
uic.graphics.lineStyle(2,0);
uic.graphics.moveTo(22, 22);
uic.graphics.lineTo(2222, 2222);
}
]]>
</mx:Script>
<mx:Panel title="StackOverflow">
<mx:UIComponent width="200" height="200" id="uic"/>
</mx:Panel>
</mx:WindowedApplication>
Notice that the lineTo completely leaves the UIComponent and Panel.
How can I cause my UIComponent or Sprite, Or Panel for that matter, to be cropped/clipped?
(source: liquidfeline.com)
I realize I could just change the hard-coded 2222's to something more reasonable, but I need a generalized solution to this, since the actual project doesn't involve hard-coded values that I can alter, but works with dynamic data.
You should also try using scrollRect, this will be faster in performance than a mask. Introduction to the scrollRect from Grant Skinner.
Use a mask.
var mask:Shape = new Shape();
with(mask.graphics)
{
beginFill(0xFFFFFF, 1); // white, opaque
drawRect(0, 0, width, height);
endFill();
}
uic.mask = mask;
I need to animate a lable movement between 2 canvases...
The mxml example of the code is:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()" frameRate="1">
<mx:Script>
<![CDATA[
import mx.controls.Label;
public function main():void
{
onEnd();
}
private function onEnd():void
{
(canv1.getChildAt(0) as Label).move(canv2.x, canv2.y);
}
]]>
</mx:Script>
<mx:Panel x="208" y="0" width="190" height="200" layout="absolute" title="Panel2" id="d">
</mx:Panel>
<mx:Panel width="200" height="200" id="c" title="Panel 1">
<mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565">
<mx:Label text="Move me after event" y="10"/>
</mx:Canvas>
<mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA">
</mx:Canvas>
</mx:Panel>
</mx:Application>
Currently the problem is that the label actually do not leave borders of the first canvas (I see scrollbars instead of it).
I think this is related to globalToLocal conversion problems, but do not understand how to use it.
Also another question is how to animate the movement corretly, because move function performs movement without any visible action.
(The movement happens seamlessly).
I don't think the move function will solve this for you since it will only move the label within it's parent, just as Robusto has commented above.
The way to go about this would perhaps be to see to it that you first detach the label from its parent. Then move it, and add it as a child to the other canvas. Manipulating x,y coordinates will not implicitly change the parent for you. That will always have to be done explicitly, which is good...
So for example, to actually switch parent you would need to do something like this (pseudo code):
/**
* This function only switches the parent.
*/
private function moveLabel(label:Label) {
label.parent.removeChild(label);
canv2.addChild(label);
}
If you want this action to be animated you would first have to detach the label from the canvas and see to it that it is added to the parent of the canvas, in your case, the panel with id "c". Then you can tween it into position and add it to the correct canvas.
TweenLite is a great library for tweening. http://www.greensock.com/tweenlite/
But I guess the main lesson here is that manipulating coordinates will never result in a new parent for the component you are moving.
Update: Here's a complete example of how you could solve this, take into account that the code is not very nice looking, but it contains a simple example of animation.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import flash.geom.Point;
import gs.TweenLite;
import gs.easing.Expo;
public function main():void
{
onEnd();
}
private function onEnd():void
{
var label:Label = canv1.getChildAt(0) as Label;
var originX:int = label.localToGlobal(new Point(label.x, label.y)).x;
var originY:int = label.localToGlobal(new Point(label.x, label.y)).y;
label.parent.removeChild(label);
stage.addChild(label);
label.x = originX;
label.y = originY;
TweenLite.to(label, 1.5, {y: "80", ease:Expo.easeOut, onComplete:onFinishTween, onCompleteParams:[label]});
}
private function onFinishTween(label:Label):void {
stage.removeChild(label);
label.x = canv2.globalToLocal(new Point(label.x, label.y)).x;
label.y = canv2.globalToLocal(new Point(label.x, label.y)).y;
canv2.addChild(label);
}
]]>
</mx:Script>
<mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565" y="-1" x="9">
<mx:Label text="Move me after event" y="10"/>
</mx:Canvas>
<mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA" y="90" x="8">
</mx:Canvas>
</mx:Application>
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.