best practices on loading and displaying images on a gallery

[isaacalves]

Hello, I'm building an Image Gallery, and I've come up with this ugly code which I'm trying to clean up.

 

What it actually does is check whether the image loaded is PORTRAIT or LANDSCAPE by comparing the width and height of the ImageLoader.content. Then it will swap some values (_maxWidth and _maxHeight), so it can later scale the image to _maxWidth and _maxHeight. Then the user will be able to zoom the image, using a "panning" class that will scroll the image inside the holder.

 

So here is my code so far, it's not so cool:

 

		private function scalePropInside():void
	{
		// this will scale proportional inside.

		if (_imageOrientation == "landscape"){
			// must ajust width first

			if (_imageWidth > _maxWidth) {
				_imageWidth = _maxWidth;
				_imageHeight = _maxHeight * _imageWidth/_imageHeight;
			}

			if (_imageHeight > _maxHeight) {
				_imageHeight = _maxHeight;
				_imageWidth = _imageHeight * _maxWidth/_maxHeight;
			}	
		}else{
			// must ajust height first

			if (_imageHeight > _maxHeight) {
				_imageHeight = _maxHeight;
				_imageWidth = _imageHeight * _maxWidth/_maxHeight;
			}			
			if (_imageWidth > _maxWidth) {
				_imageWidth = _maxWidth;
				_imageHeight = _maxHeight * _imageWidth/_imageHeight;
			}
		}
	}

	private function onImageLoaded(e:Event):void
	{
		while (imageContainer.holder.numChildren > 1)
			imageContainer.holder.removeChildAt(0);

		// GET DIMENSIONS FROM IMAGELOADER
		_imageWidth = e.target.content.width;
		_imageHeight = e.target.content.height;

		// SET IMAGE ORIENTATION
		//_imageHeight > _imageWidth ? setImageOrientation("portrait") : setImageOrientation("landscape");
		if (_imageHeight > _imageWidth){
			_imageOrientation = "portrait";
			_maxWidth = PORTRAIT_WIDTH;
			_maxHeight = PORTRAIT_HEIGHT;				
		}else{
			_imageOrientation = "landscape";
			_maxWidth = LANDSCAPE_WIDTH;
			_maxHeight = LANDSCAPE_HEIGHT;		
		}

		// SCALE IMAGE
		scalePropInside();

		// REPOSITION ALL ELEMENTS
		imageContainer.holder.width = _imageWidth;
		imageContainer.holder.height = _imageHeight;

		imageContainer.holder.x = -_imageWidth * .5;
		imageContainer.holder.y = -_imageHeight * .5;

		imageContainer.holderMask.width = _imageWidth;
		imageContainer.holderMask.height = 0;
		imageContainer.holderMask.x = -_imageWidth * .5;
		//imageContainer.holderMask.y = -_imageHeight * .5;

		imageContainer.prevBtn.x = -_imageWidth * .5;
		imageContainer.nextBtn.x = _imageWidth * .5;

		TweenMax.to(imageContainer.holderMask, .6, {height: _imageHeight, ease:Expo.easeOut});

		TweenMax.to(imageContainer.prevBtn, .3, {autoAlpha: 1, x: "-30", delay: 0.1, ease:Expo.easeOut});
		TweenMax.to(imageContainer.nextBtn, .3, {autoAlpha: 1, x: "30", delay: 0.2, ease:Expo.easeOut});
	}

 

As you can see, the code of the function scalePropInside() looks ridiculous. I know I can pass the argument scaleMode: propInside, but then I'd need to know if it was portrait or landscape prior to loading the image, for example setting in the xml. What are the best practices on that issue?

 

thanks in advance!

[GreenSock]

Why would you need to know its aspect ratio before loading it? Why not just set the width/height to the maximum it could be either way and set the scaleMode to "proportionalInside"? Wouldn't that automatically accomplish what you're after? If it's portrait, it would fill the height but proportionally adjust the width. If it's landscape, it would fill the width and proportionally scale the height. Feel free to set the vAlign to "top" and hAlign to "left" if you want.

 

Did I misunderstand something?

[isaacalves]

You mean I don't need a different maximum width and height value for 'portrait' and 'landscape'?

 

I guess I'm complicating things in vain... one MAX_WIDTH and one MAX_HEIGHT are enough.. thanks!

[isaacalves]

Yeah I was doing something really dumb, maybe too much motivated with programming. Still a long path though.

 

So, I just eliminated 150 lines of code.

Thanks a lot !

[isaacalves]

Hey Jack, there's something weird going on when it loads and displays the image.

 

I am not able to click on areas adjacent to the image, it seems that there's a transparent rectangle of the original size of the image ( cause i've set width, height, and propInside in the ImageLoader ). I called an eventListener from the imageHolder and it traces like i was clicking on a bitmap, and if i trace the width of the container of the image loaded, it traces the original width.

 

Why does that happen?

[GreenSock]

Yes, as indicated in the ASDocs, when you define an width and height, the ContentDisplay will draw a transparent rectangle accordingly in order to ensure that interactive events fire properly (like rollovers/rollouts/clicks, etc.). This is typically a very good/helpful thing. However, feel free to clear() the graphics if you want with myContentDisplay.graphics.clear() after your image loads.