Why are my flex 3 images being resized on includeInLayout and visible properties?

I have images show or hide based on a boolean value that is binded to the images visible and includeInLayout properties.  Half the time when the binded value becomes true, the images are sized incorrectly when they become visible.  I have tried almost everything to fix this and I can't seem to figure this issue out.  Any help would be greatly appreciated.  I am using the Swiz framework and binding to variables inside my controller.  Please let me know if you need to see more code or if this is enough.
<mx:Image id="weatherImgFrom"
			  trustContent="true"
			  height="45"
			  width="130"
			  visible="{(weatherImgFrom.source!=null ? true : false)}"
			  source="{travelCalcController.weatherFrom}"
			  maintainAspectRatio="false"
			  toolTip="Click for weather in a seperate window"/>

[Bindable]
			[Autowire(bean="travelCalcController")]
			public var travelCalcController:TravelCalcController;

Open in new window

StreveWeyrickAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

FlassariCommented:
I think the flex framework sets the width and height of the image when it is loaded. When you set the width and height in the beginning you're basically doing it on an empty container.

Try listening to the complete event and setting the width and height then.
0
StreveWeyrickAuthor Commented:
@Flassari

Thanks for responding.  I tried to use the complete event like you were saying.  But for some reason the Complete event doesn't seem to be firing off when the image is loaded.  I added this inside my creation complete function:
weatherImgFrom.addEventListener(Event.COMPLETE, handle_WeatherFromComplete, false, 0, true);

I tried the resize event which my event listener seemed to catch but the images still shrink, or don't resize correctly.  
0
StreveWeyrickAuthor Commented:
@Flassari  

I think what you were talking about before is exactly what's happening.  I'm just not sure why its happening only half the time.  
0
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

FlassariCommented:
If complete isn't working, then maybe it's not loading the images, are the images maybe already embedded into the movie?

Then there's only the dataChange event left that I can think of.
0
StreveWeyrickAuthor Commented:
No there not embedded in the movie, and I tried dataChange and that didn't work either.  I have it set up now where the source path is binded as a sprite.  
var weather:com.dj.googleweather.data.Weather=e.data as com.dj.googleweather.data.Weather;
var imageMarker:Sprite=createGoogleImageMarker(weather);		travelCalcController.weatherFrom=imageMarker;

<mx:Image id="weatherImgFrom"
			  trustContent="true"
			  
			  visible="{(weatherImgFrom.source!=null ? true : false)}"
			  source="{travelCalcController.weatherFrom}"
			  maintainAspectRatio="false"
			  toolTip="Click for weather in a seperate window"/>

Open in new window

0
StreveWeyrickAuthor Commented:
This is how the sprite is made.
private function createGoogleImageMarker(weather:com.dj.googleweather.data.Weather):Sprite
			{
				var weather:com.dj.googleweather.data.Weather=weather;
				var imageLoader:Loader=new Loader();
				var widgetLoader:Loader=new Loader();
				var content:Sprite=new Sprite();

				var weatherCode:Number=YahooWeatherCode.getWeatherCode(weather.currentCondition.condition);
				if (weatherCode != -1)
				{
					var wDayCode:String="d";
					//Alert.show(weather.date.hours.toString());
					/* if(weather.date.hours <= 6 || weather.date.hours >= 18) {
					   wDayCode = "n";
					 }*/
					imageLoader.load(new URLRequest('assetsTravelCalc/images/icons/weather/'+weatherCode.toString()+wDayCode+'.png'), new LoaderContext(true));
					widgetLoader.load(new URLRequest('assetsTravelCalc/images/icons/weather/weatherbg.png'), new LoaderContext(true));

					imageLoader.x=-50;
					imageLoader.y=-15;
					imageLoader.mouseEnabled=false;

					widgetLoader.alpha=0.8;
					widgetLoader.x=-(widgetLoader.width / 2);
					widgetLoader.y=-(widgetLoader.height / 2);
					widgetLoader.filters=[new DropShadowFilter(5, 45, 0x00000, 0.50, 4, 4, 1, 4)]
					// create the text fields to show the temperature and the condition description.
					var _degreeText=new TextField();
					_degreeText.cacheAsBitmap=true;
					_degreeText.visible=false;
					_degreeText.defaultTextFormat=new TextFormat("Helvetica,Arial", 28, 0xFFFFFF, true, null, null, null, null, TextFormatAlign.RIGHT);
					_degreeText.appendText(weather.currentCondition.temp_f + "°");
					_degreeText.width=60;
					_degreeText.height=_degreeText.textHeight + 5;
					_degreeText.x=115;
					_degreeText.y=0;

					var _conditionText=new TextField();
					_conditionText.cacheAsBitmap=true;
					_conditionText.visible=false;
					_conditionText.defaultTextFormat=new TextFormat("Helvetica,Arial", 12, 0xFFFFFF, true, null, null, null, null, TextFormatAlign.RIGHT);
					_conditionText.appendText(weather.currentCondition.condition);
					_conditionText.width=180;
					_conditionText.height=_conditionText.textHeight + 5;
					_conditionText.x=10;
					_conditionText.y=40;

					var _conditionDetailText:TextField=new TextField();
					_conditionDetailText.cacheAsBitmap=true;
					_conditionDetailText.visible=false;
					_conditionDetailText.defaultTextFormat=new TextFormat("Helvetica,Arial", 9, 0xFFFFFF, true, null, null);
					_conditionDetailText.appendText("Hum: " + weather.currentCondition.humidity + "%");
					_conditionDetailText.width=180;
					_conditionDetailText.height=_conditionText.textHeight + 5;
					_conditionDetailText.x=10;
					_conditionDetailText.y=50;

					content.addChild(widgetLoader);
					content.addChild(imageLoader);
					content.addChild(_degreeText);
					content.addChild(_conditionText);
					//content.addChild(_conditionDetailText);
					_degreeText.visible=true;
					_conditionText.visible=true;
					_conditionDetailText.visible=true;
				}
				content.cacheAsBitmap=true;
				return content;
			}

Open in new window

0
FlassariCommented:
Ok, flex isn't going to help us on this one, the only option you have left is to set the width and height manually when the datasource changes.

Just listen for data binding event on travelCalcController. If it still only works half the time you might have a race condition on the data binding events and might have to remove data binding all-together and set the source manually following with the width and height.
0
StreveWeyrickAuthor Commented:
@Flassari

I tried what you said, but the images still seem to be resizing themselves.  I'm no longer using binding at all.
I'll paste my code so you can take a look.  Thanks for all of your help.
private function onGoogleResult(e:GoogleWeatherServiceResultEvent):void
			{
				var weather:com.dj.googleweather.data.Weather=e.data as com.dj.googleweather.data.Weather;
				var imageMarker:Sprite=createGoogleImageMarker(weather);

				/* travelCalcController.weatherFrom=imageMarker; */
				var weatherFromEvent:DynamicEvent = new DynamicEvent(TravelCalcController.WEATHER_FROM_CHANGE, true, false);
				weatherFromEvent.fromImageSprite = imageMarker;
				Swiz.dispatchEvent(weatherFromEvent);
			}

Swiz.addEventListener(TravelCalcController.WEATHER_FROM_CHANGE, handle_WeatherFromComplete, false, 0, true);

protected function handle_WeatherFromComplete(event:DynamicEvent):void
			{
				
				weatherFromImage = event.fromImageSprite as Sprite;
				weatherImgFrom.source = weatherFromImage;
				weatherImgFrom.height = 45;
				weatherImgFrom.width = 130;
			}

Open in new window

0
FlassariCommented:
Wait, you already have the image as weatherFromImage. Just set the width and height on that and use an UIComponent instead of Image to contain it. Problem solved =)

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StreveWeyrickAuthor Commented:
Thanks, I didn't even think of adding that to a UI Component.  It hasn't shrunk yet, and I've tested it a bunch of times.  I really appreciate all your help.
0
StreveWeyrickAuthor Commented:
Thanks again
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.