hello i want to apply tween motion on UIcomponents using actionscript in flex.
i searched alot but didn't find something useful help required.
thanks in advance.
The code below creates a move tween for a button in actionscript.
Clicking anywhere on the screen will move the button to that location.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" click="moveButton(event)">
<mx:Script>
<![CDATA[
import mx.effects.Move;
private function moveButton(event:MouseEvent):void {
var myMove:Move = new Move();
myMove.target = myButton;
myMove.xTo = event.stageX;
myMove.yTo = event.stageY;
myMove.play();
}
]]>
</mx:Script>
<mx:Button id="myButton" />
</mx:Application>
For a more advanced example you could look at the Flex documentation: http://livedocs.adobe.com/flex/3/html/help.html?content=createeffects_3.html
It shows an example how to extend and use the TweenEffect class to create your own effect class.
Caurina Tweener: http://code.google.com/p/tweener/
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 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 am trying to make a label that has an X over it. Like so I can say was this price with an X over the price. I want to make it a component because I am going to use it more than once. I want the X to be close to the same size as the text so that it is not a giant X over small text or a small X over large text.
Here is the code I tried which did nothing at all:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set text(value:String):void
{
super.text = value;
var g:Graphics = this.graphics;
g.clear();
g.lineStyle(3,0xFF0000);
g.lineTo(this.width,this.height);
g.moveTo(0,this.height);
g.lineTo(this.width,0);
}
]]>
</mx:Script>
</mx:Label>
See this post. It provides a component which will do this for you.
It's not currently supported natively.