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
<?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>

Open in new window

box.png
circle.png
rectangle.png
line.png
alamflexAsked:
Who is Participating?
 
dgofmanCommented:
<?xml version="1.0" encoding="utf-8"?>
<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" width="100%" height="100%">
	
	<fx:Script>
		<![CDATA[
			[Embed(source="images/minimize_up.png")]
			[Bindable] private var defaultImg:Class;
			[Embed(source="images/minimize_over.png")]
			[Bindable] private var overImg:Class;
			
			[Bindable] private var isOver:Boolean = false;
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	<mx:Image source="{isOver ? overImg : defaultImg}" buttonMode="true" 
			  mouseOver="isOver = true"  mouseOut="isOver = false"/>
	<!-- OR -->
	<mx:Image source="{defaultImg}" buttonMode="true" 
			  mouseOver="event.currentTarget.source = overImg"  mouseOut="event.currentTarget.source = defaultImg"/>
</s:Application> 

Open in new window

0
 
alamflexAuthor Commented:
FYI
demo.bmp
0
 
dgofmanCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
alamflexAuthor Commented:
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.

0
 
deepanjandasCommented:
use skinning properties like this:
upSkin="@Embed(source='assets/buttonUp.gif')"
overSkin="@Embed(source='assets/buttonOver.gif')"
downSkin="@Embed(source='assets/buttonDown.gif')"
disabledSkin="@Embed(source='assets/buttonDisabled.gif')"

http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html

Warm Regards
Deepanjan Das
0
 
deepanjandasCommented:
sorry @alamflex, just found you opened a separate question for this. Can you please close any one of these.

Warm Regards
Deepanjan Das
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.