asked on

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

Flassari

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.

StreveWeyrick

ASKER

@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.

StreveWeyrick

ASKER

@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.

Flassari

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.

StreveWeyrick

ASKER

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

StreveWeyrick

ASKER

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

Flassari

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.

StreveWeyrick

ASKER

@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

ASKER CERTIFIED SOLUTION

Flassari

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

StreveWeyrick

ASKER

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.

StreveWeyrick

ASKER

Thanks again