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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
FlassariConnect With a Mentor Commented:
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
 
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
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.