alamflex
asked on
How to show different images for a single button?
How to show different images for a single button?
I mean to say
1) It should show different image when the mouse pointer is over the button and out side of the button.
Also i have few more questions...
2) Remove the bar from the right hand pane and keep the button as it is. It should look similar to left hand pane.
3) For line functionality once a line is pressed, then i should be able to draw as many lines as possible.
4) Also check the collapse button directions. when i select open right hand pane button the button at the right hand pane is changing the direction and again i have to press the button then only at that time it is changing the direction and closing the pane.
5)Also when we right click image properties and press right hand pane button it is not closing the pane for the first time for this we have to click twice to close the pane.
Plz provide me some sample code.
Thanks,
Alam.
Plz find the below code.
Thanks,
Alam
circle.png
rectangle.png
line.png
I mean to say
1) It should show different image when the mouse pointer is over the button and out side of the button.
Also i have few more questions...
2) Remove the bar from the right hand pane and keep the button as it is. It should look similar to left hand pane.
3) For line functionality once a line is pressed, then i should be able to draw as many lines as possible.
4) Also check the collapse button directions. when i select open right hand pane button the button at the right hand pane is changing the direction and again i have to press the button then only at that time it is changing the direction and closing the pane.
5)Also when we right click image properties and press right hand pane button it is not closing the pane for the first time for this we have to click twice to close the pane.
Plz provide me some sample code.
Thanks,
Alam.
Plz find the below code.
Thanks,
Alam
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" xmlns:local="*" >
<mx:Style>
CustomDividedBox{
dividerAffordance:10;
dividerBorderColor:#3387A7;
dividerFillColors:#ffffff,#bad2f0;
collapseBoxDividerSkin: Embed(source="assets.swf",symbol="CollapseBoxDividerSkin");
expandBoxDividerSkin: Embed(source="assets.swf",symbol="ExpendBoxDividerSkin");
}
</mx:Style>
<mx:Script>
<![CDATA[
import DrawingClasses.Designer;
import mx.controls.Alert;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.events.ListEvent;
import mx.managers.DragManager;
[Bindable]
[Embed(source="/Images/line.png")]
public var linePicture:Class;
[Bindable]
[Embed(source="/Images/box.png")]
public var boxPicture:Class;
[Bindable]
public var xm:XML =
<AbstractComponentTemplate></AbstractComponentTemplate>;
public var compType:XML =
<ComponentTemplateDescriptor>
<Owner>BackTesting</Owner>
<Name>Component</Name>
<Version>1</Version>
</ComponentTemplateDescriptor>;
[Bindable]
private var cm:ContextMenu;
public var xm1:XML;
public var loopparent:Array = new Array();
private var mouseTarget:DisplayObject;
private var xOff:Number;
private var yOff:Number;
private var designer:Designer = new Designer();
private var i:int;
private var j:int;
private function init():void
{
designer.setDesignArea(designArea);
var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.customItems = [cmi1, cmi2, cmi3];
cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
}
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
}
private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
panelRight.width = 260;
Alert.show("properties");
//vDivProp.moveDivider(0, 400);
//accrWinProp.label = "Two Way Split - Properties";
//accrWinProp.selectedIndex = 1;
}
private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {
viewstack1.selectedIndex = 1;
}
private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {
accrWinComp.selectedIndex = 1;
}
[Bindable]
private var propValue:String = "Component";
private function itemClickEvent(event:ListEvent):void {
var propKey:String = dgProp.selectedItem.@key;
if (propKey == "name") {
propValue = dgProp.selectedItem.propvalue;
}
}
[Bindable]
private var sourceXML:XML =
<order>
<!--This is a comment. -->
<?PROC_INSTR sample ?>
<item id='1'>
<menuName>burger</menuName>
<price>3.95</price>
</item>
<item id='2'>
<menuName>fries</menuName>
<price>1.45</price>
</item>
</order>;
[Bindable]
private var savedComp:Array=['ComponentTemplate',
'iv85341.EquityCash.v1',
'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
'ra92724.TwoWaySplit.EU.OTHERS.v1',
'ra92724.TwoWaySplit.US.OTHERS.v1',
'iv85341.VanillaNode.v1',
'iv85341.ReadGmrFs.v1'
];
[Bindable]
private var propData:XML =
<properties>
<prop key="name">
<propvalue>Component</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Version">
<propvalue>1.0</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Owner">
<propvalue>iv85341</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="width">
<propvalue>250</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="height">
<propvalue>300</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="X-Pos">
<propvalue>40</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Y-Pos">
<propvalue>20</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
</properties>;
private function rightClick(event:MouseEvent):void
{
Alert.show("Properties ..." + event.currentTarget, "Open");
}
// Draging Code Starts Here
private var curDate:Date = new Date();
private var dateList:XMLList = null;
public function pictureDragDrop(event:DragEvent):void {
//Alert.show (" com = " + event.dragSource.dataForFormat("key"));
var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
var nodeValue:String = "";
if (nodeValue == "")
{
if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)
{
xm.appendChild(compType);
dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
xm.appendChild(dateList);
dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
xm.appendChild(dateList);
xm1 = XML("<" + nodeName + "></" + nodeName + ">");
xm.appendChild(xm1);
}
else
{
i++;
xm1 = XML("<" + nodeName + "></" + nodeName + ">");
xm.appendChild(xm1);
//loopparent.push(xmlarray:xm1);
loopparent[i] = xm1;
}
}
else
{
var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
if (xm1 == null)
{
xm.appendChild(xmlList);
}
else
{
for (j = i; j>0; j--)
{
(loopparent[j]).appendChild(xmlList);
//Alert.show("alert");
}
}
}
var x:int = event.currentTarget.mouseX - xOff;
var y:int = event.currentTarget.mouseY - yOff;
if(event.dragSource.dataForFormat("key") == "box")
{
designer.addBox(x, y);
}
else if(event.dragSource.dataForFormat("key") == "circle")
{
designer.addCircle(x, y);
}
else
{
designer.addRectangle(x, y);
}
}
// this method gets x and y coordinate of template box image
private function myoffset(img:Image):void {
xOff = img.mouseX;
yOff = img.mouseY;
}
// this method does acceptable draging box image
public function pictureDragEnter(event:DragEvent):void{
DragManager.acceptDragDrop(Canvas(event.target));
}
// this method supply drag box when mouse move on the design area
private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
var imageProxy:Image = new Image();
imageProxy.source = img1.source;
imageProxy.height= 150;
imageProxy.width= 150;
ds.addData(format,"key");
DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
}
// this method works when click on the line button
// it is make enable to draw line
public function doDrawEnable():void {
designer.setIsDrawEnable(true);
}
private var fileRef:FileReference;
public function createXML():void {
var fileName:String = "component.xml";
fileRef = new FileReference();
fileRef.browse();
}
// Draging code ends here
private function onExpand(event:Event):void {
if (event.target.dividerIndex == 1) {
//Alert.show("hi");
panelRight.width = 0;
}else{
panelLeft.width = 200;
}
// panelLeft.width=this.screen.width-100;
}
private function onCollapse(event:Event):void{
if(event.target.dividerIndex == 1){
panelRight.width = 260;
}else{
panelLeft.width = 0;
}
// panelLeft.width=(this.width)/60;
}
]]>
</mx:Script>
<mx:Fade id="theEffect"/>
<mx:Resize id="resizeEffect" />
<mx:ApplicationControlBar dock="true">
<mx:Image toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Spacer width="100%" />
<mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
</mx:ApplicationControlBar>
<mx:Resize duration="500" id="r1"/>
<local:CustomDividedBox width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
<mx:VDividedBox id="panelLeft" height="100%" width="20%" resizeEffect="r1">
<mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
<mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
<mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
<mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
<mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
<mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
<mx:Button toggle="true" id="line" toolTip="Line" useHandCursor="true" buttonMode="true" icon="@Embed(source='Images/line.png')" click="doDrawEnable()" width="28" height="28" x="279" y="10"></mx:Button>
</mx:Panel>
<mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
<mx:List height="100%" width="100%" dataProvider="{savedComp}" />
</mx:Panel>
</mx:Accordion>
</mx:Panel>
</mx:VDividedBox>
<mx:VDividedBox id="mp" height="100%" width="100%">
<mx:HDividedBox width="100%" height="100%">
<mx:Canvas width="100%" height="100%" >
<mx:TabBar x="0" y="10" dataProvider="viewstack1" />
<mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
<mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >
</mx:Canvas>
<mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
<mx:ControlBar width="100%" barColor="#FF22CC">
<mx:Spacer width="100%"/>
<mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
</mx:ControlBar>
<mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />
</mx:Panel>
</mx:ViewStack>
</mx:Canvas>
</mx:HDividedBox>
</mx:VDividedBox>
<mx:VDividedBox id="panelRight" height="100%" width="0" resizeEffect="{resizeEffect}" >
<!--<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
<mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%"> -->
<mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
<mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
<mx:columns>
<mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
<mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<!--</mx:Accordion>
</mx:Panel>-->
</mx:VDividedBox>
</local:CustomDividedBox>
</mx:Application>circle.png
rectangle.png
line.png
Hi Alam,
You are asking 5 diffrent questions.
Please split by categories.
An answer for your original question how to change icon on diffrent states you can find here
http://www.adobe.com/devnet/flash/quickstart/button_component_as3.html
You are asking 5 diffrent questions.
Please split by categories.
An answer for your original question how to change icon on diffrent states you can find here
http://www.adobe.com/devnet/flash/quickstart/button_component_as3.html
ASKER
Thanks for your reply,
Here i want to change the button image not the icon.
The example which you have provided in the link is for changing the icon but i need to change the image itself when user mouseover and mouseout the button.
I hope you got my point.
Here i want to change the button image not the icon.
The example which you have provided in the link is for changing the icon but i need to change the image itself when user mouseover and mouseout the button.
I hope you got my point.
use skinning properties like this:
upSkin="@Embed(source='ass
overSkin="@Embed(source='a
downSkin="@Embed(source='a
disabledSkin="@Embed(sourc
http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html
Warm Regards
Deepanjan Das
upSkin="@Embed(source='ass
overSkin="@Embed(source='a
downSkin="@Embed(source='a
disabledSkin="@Embed(sourc
http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html
Warm Regards
Deepanjan Das
sorry @alamflex, just found you opened a separate question for this. Can you please close any one of these.
Warm Regards
Deepanjan Das
Warm Regards
Deepanjan Das
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
demo.bmp