Yesterday I’ve been working with images: loading, resizing, removing, etc. I got into a challenging issue: I had to vertically position a label after an image resize - but a resize that is triggered by setting maxWidth and maxHeight keeping also the aspect ratio.
I tried to get the new width and height after the resize event was triggered but no luck. I’ve been debugging a while and seen that the new width and the new height are in $height and $width internal variables. I had no luck getting the new width and the new height in this method triggered by the resize event.
So I started to investigate to see which event triggers the last that way making it sure all properties are updated. I created a simple application that will load an arbitrary image in mean time displaying the events triggered. There is also a button that moves the image horizontally by 50 pixels also showing the triggered events.
I found that after resize event update complete event triggers which contains the needed width and height in contentWidth and contentHeight properties.
I hope this will help you in different scenarios you’ll encounter in development.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="start()" width="600" height="615"> <mx:TextInput id="imageUrl" x="10" y="10" width="383" text="http://www.flexer.info/wp-content/gallery/wallpapers/fxr_1600x1200.png"/> <mx:Button x="401" y="10" label="Start" click="handleButtonClick(event)"/> <mx:Button x="464" y="10" label="Move it" click="handleMoveButtonClick(event)"/> <mx:Image id="testImage" maxWidth="250" maxHeight="250" x="10" y="40" addedToStage="handleAddedToStage(event)" complete="handleComplete(event)" creationComplete="handleCreationComplete(event)" currentStateChange="handleCurrentStateChange(event)" init="handleInit(event)" initialize="handleInitialize(event)" open="handleOpen(event)" preinitialize="handlePreinitialize(event)" progress="handleProgress(event)" removed="handleRemoved(event)" render="handleRender(event)" resize="handleResize(event)" show="handleShow(event)" unload="handleUnload(event)" updateComplete="handleUpdateComplete(event)" valid="handleValid(event)" valueCommit="handleValueCommit(event)" /> <mx:TextArea x="10" y="300" width="580" height="305" text="{_debug}"/> <mx:Script> <![CDATA[ import mx.events.ResizeEvent; import mx.events.StateChangeEvent; import mx.events.FlexEvent; [Bindable] private var _debug:String; private function start():void { _debug = "---> application started!!!\n"; } private function handleButtonClick(e:MouseEvent):void { testImage.source = imageUrl.text; _debug += "---> handleButtonClick\n"; } private function handleMoveButtonClick(e:MouseEvent):void { testImage.x += 50; _debug += "---> handleMoveButtonClick\n"; } private function handleAddedToStage(e:Event):void { _debug += "handleAddedToStage\n"; } private function handleComplete(e:Event):void { _debug += "adddedToStage\n"; } private function handleCreationComplete(e:FlexEvent):void { _debug += "handleCreationComplete\n"; } private function handleCurrentStateChange( e:StateChangeEvent):void { _debug += "handleCurrentStateChange\n"; } private function handleInit(e:Event):void { _debug += "handleInit\n"; } private function handleInitialize(e:FlexEvent):void { _debug += "handleInitialize\n"; } private function handleOpen(e:Event):void { _debug += "handleOpen\n"; } private function handlePreinitialize(e:FlexEvent):void { _debug += "handlePreinitialize\n"; } private function handleProgress(e:ProgressEvent):void { _debug += "handleProgress\n"; } private function handleRemoved(e:Event):void { _debug += "handleRemoved\n"; } private function handleRender(e:Event):void { _debug += "handleRender\n"; } private function handleResize(e:ResizeEvent):void { _debug += "handleResize\n"; } private function handleShow(e:FlexEvent):void { _debug += "handleShow\n"; } private function handleUnload(e:Event):void { _debug += "handleUnload\n"; } private function handleUpdateComplete(e:Event):void { _debug += "handleUpdateComplete\n"; _debug += " contentHeight: " + e.currentTarget.contentHeight + "\n"; _debug += " x: " + e.currentTarget.x + "\n"; } private function handleValid(e:FlexEvent):void { _debug += "handleValid\n"; } private function handleValueCommit(e:FlexEvent):void { _debug += "handleValueCommit\n"; } ]]> </mx:Script> </mx:Application> |
I hope you won’t be offended by the fact that I created one event method for each event type instead of having just one method and “switching” for the type inside it. 
Tags: ActionScript, Events, image, load, MXML
This post was written by Andrei Ionescu
Views: 890
Articles
” hope you won’t be offended by the fact that I created one event method for each event type instead of having just one method and “switching” for the type inside it. ”
No, but you might save 1 page of space and write the debug output messages in 1 line
private function handleEvent(e:Event):void
{
_debug += e.type+”\n”;
}
No harm intended.
Cheers.
John
John, thanks for comment. I know there are better ways… but my intention was to write every event in order to really see the event types in the code and in what order those are triggered.