Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to show different images for a single button?

Posted on 2011-05-06
6
Medium Priority
?
308 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:alamflex
  • 2
  • 2
  • 2
6 Comments
 

Author Comment

by:alamflex
ID: 35709913
FYI
demo.bmp
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35709929
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
 

Author Comment

by:alamflex
ID: 35713231
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
Meet the Family that is Made for Collaboration

The TeamConnect Family product group as part of the Sennheiser for Business Portfolio comprising high-quality, technically well-conceived meeting solutions for business communication – designed for any meeting room and any meeting situation.

 
LVL 17

Expert Comment

by:deepanjandas
ID: 35718849
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
 
LVL 17

Expert Comment

by:deepanjandas
ID: 35718862
sorry @alamflex, just found you opened a separate question for this. Can you please close any one of these.

Warm Regards
Deepanjan Das
0
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 35724418
<?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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Conducting a customer service survey used to be as straightforward as sending a template email out using checkboxes and numerical rating systems to measure satisfaction.
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Loops Section Overview
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question