I have been working on a seating layout application for a set of rooms in a building. The current perspective is from the presenter's point of view (looking towards the back of the room). I have been asked to provide an inverted view (standing in the back and looking forward).
Each seat contains an image and text so just flipping the entire canvas would result in the images and text being upside down and difficult to read. What I decided to do was move each seat to its inverse location and rotate it 180 degrees from its original orientation. I was able to this, but I still had the problem of the inverted image and text within the seat. I thought I could just rotate the contents of the seat 180 degrees so the orientation would be correct, but I ran into a sizing problem. I found that the mouseOver event on the seat was firing even though the mouse was not over the seat image. After some debugging I found that the second rotation of the image was essentially making the seat twice as wide and twice as tall, which was really causing problems since my seats were already close to each other to begin with. And even move confusing was if I flipped the layout again the seats went back to their original size. My seat component was a Canvas with a VBox representing the frame of the seat (an image inside this frame) and then another Canvas for performing actions on the seat like moving, rotating and deleting. I started to try different things to see what would happen and found that the sizing problem went away if I rotated the image directly rather than the frame itself (however this was not ideal for other drag and drop problems with the 0,0 coordinate.) Eventually I found that if I wrap the VBox frame inside another VBox or made the Seat component a HBox, I could rotate the frame without the sizing problem and things seemed to behave as I expected. My question is why does the surrounding canvas of a rotating object change size? It seems dumb to add another VBox layer or define the object as a HBox when I do not need the extra features the HBox provides. You can see a crude example at http://flex- dev.wharton.upenn.edu/users/johnrp/Misc/bin/Miscellaneous.html and the source code is below. Thanks, John index.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" xmlns="*" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.AbstractEvent; import Seat; import SeatHBox; private function onCreationComplete():void { seat1.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat2.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat3.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat1.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat2.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat3.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat4.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat5.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat6.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat4.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat5.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat6.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); } private function onMouseOver (event:MouseEvent):void { event.currentTarget.vwOptions.visible=true; } private function onMouseOut (event:MouseEvent):void { event.currentTarget.vwOptions.visible=false; } private function btnFlipClick():void { seat1.rotateSeat(); seat4.rotateSeat(); seat3.rotateStudentCanvas(); seat2.rotateStudentCanvasImage(); seat6.rotateStudentCanvas(); seat5.rotateStudentCanvasImage(); } ]]> </mx:Script> <mx:Canvas id="classroomCanvas" width="100%" height="100%" y="100"> <mx:Label text="Seat as a VBox" y="450" x="0" /> <mx:Label text="Seat as a Canvas" y="100" x="0" /> <mx:Label text="Flip the outter most object (Seat)" y="0" x="150" height="30" /> <mx:Label text="Flip the inner most object (Gray Box)" y="0" x="300" height="30" /> <mx:Label text="Flip the middle object (Gray Box with White Frame)" y="0" x="450" height="30" width="200" /> <SeatHBox id="seat4" y="400" x="150" /> <SeatHBox id="seat5" y="400" x="300" /> <SeatHBox id="seat6" y="400" x="450" /> <Seat id="seat1" y="50" x="150" /> <Seat id="seat2" y="50" x="300" /> <Seat id="seat3" y="50" x="450" /> </mx:Canvas> <mx:Button x="300" y="400" id="btnFlip" click="btnFlipClick ()" > <mx:label>Flip</mx:label> </mx:Button> </mx:Application> Seat.mxml <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*" borderStyle="solid" borderColor="#000000" > <mx:Script> <![CDATA[ [Bindable] public var studentAngle:int; [Bindable] public var txtRightSideUP:String = "RightSide UP"; public function rotateSeat():void { rotate.end(); studentAngle += 180; rotate.duration=2500; rotate.play(); } public function rotateStudentCanvas():void{ rotateStudent.end(); studentAngle += 180; rotateStudent.duration = 7500; rotateStudent.play(); } public function rotateStudentCanvasImage():void{ rotateStudentImage.end(); studentAngle += 180; rotateStudentImage.duration = 5000; rotateStudentImage.play(); } ]]> </mx:Script> <mx:Rotate id="rotate" originX="{this.width/2}" originY="{this.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{this}"/> <mx:Rotate id="rotateStudent" originX="{student.width/2}" originY="{student.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{student}"/> <mx:Rotate id="rotateStudentImage" originX="{studentImage.width/2}" originY="{studentImage.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{studentImage}"/> <mx:VBox id="student" width="100" height="125" borderColor="#DDDDDD" borderStyle="solid" horizontalAlign="center" verticalAlign="middle" > <mx:Canvas id="studentImage" width="95" height="120" backgroundColor="#BBBBBB"> </mx:Canvas> </mx:VBox> <mx:Canvas x="98" id="vwOptions" width="25" height="122" backgroundColor="#dddddd" visible="false"> </mx:Canvas> </mx:Canvas> SeatHBox.mxml <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*" borderStyle="solid" borderColor="#000000" > <mx:Script> <![CDATA[ [Bindable] public var studentAngle:int; [Bindable] public var txtRightSideUP:String = "RightSide UP"; public function rotateSeat():void { rotate.end(); studentAngle += 180; rotate.duration=2500; rotate.play(); } public function rotateStudentCanvas():void{ rotateStudent.end(); studentAngle += 180; rotateStudent.duration = 7500; rotateStudent.play(); } public function rotateStudentCanvasImage():void{ rotateStudentImage.end(); studentAngle += 180; rotateStudentImage.duration = 5000; rotateStudentImage.play(); } ]]> </mx:Script> <mx:Rotate id="rotate" originX="{this.width/2}" originY="{this.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{this}"/> <mx:Rotate id="rotateStudent" originX="{student.width/2}" originY="{student.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{student}"/> <mx:Rotate id="rotateStudentImage" originX="{studentImage.width/2}" originY="{studentImage.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{studentImage}"/> <mx:VBox id="student" width="100" height="125" borderColor="#DDDDDD" borderStyle="solid" horizontalAlign="center" verticalAlign="middle" > <mx:Canvas id="studentImage" width="95" height="120" backgroundColor="#BBBBBB"> </mx:Canvas> </mx:VBox> <mx:Canvas x="98" id="vwOptions" width="25" height="122" backgroundColor="#dddddd" visible="false"> </mx:Canvas> </mx:HBox>
