Flex, image manipulation

[LivingDeadBeat]

Hi Forum,

Firstly i didn't notice there was a Flex 3 section when i first posted this, if a mod wants to move this it would be greatly appreciated.

I'm trying to learn flex, i don't have any prior knowledge of flash but have watched all the "learn flex tutorials". I have coding experience in php, javascript and the .net framework.

Basically i want to make a app much the same as this:

(click on view/zoom large image)

http://www.sothebys.com/app/live/lot/LotDetail.jsp?lot_id=159530245

So far i have managed to use the image loader to load an image....and thats about it. I have been messing around with the bitmapdata class but not really sure how to go about zooming in or out, or what to display the image in. I.e what component in the design view should i use as a container for the image that will let it overflow without scollers.

This is the start of my code:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FBF8F8, #FBF8F8]"
applicationComplete="Init()">

<mx:Script>
<![CDATA[
private var imgLoader:Loader;

private function Init():void{
imgLoader = new Loader();
//Image location string
var imageURL:String = "http://www.miravit.cz/.....1.jpg"
//Instantiate URL request
var imageURLReq:URLRequest = new URLRequest(imageURL);

imgLoader.contentLoaderInfo.addEventListener(Event .COMPLETE, imgLoadCompleted);
imgLoader.contentLoaderInfo.addEventListener(Progr essEvent.PROGRESS, progressListener);

//Begin image load
imgLoader.load(imageURLReq);
}

private function imgLoadCompleted(event:Event):void{
//On completion of image load
progressBar.visible = false;

var scale:Number = 1;

//Set matrix size
var m:Matrix = new Matrix();
m.scale (scale,scale);

var originalBmd:BitmapData = new BitmapData(this.width, this.height);
originalBmd.draw(this.imgLoader,m);
auctionImageContainer.source = bm;

}

private function progressListener(event:ProgressEvent):void {
//Update progress indicator.
progressBar.setProgress(Math.floor(event.bytesLoad ed / 1024),Math.floor(event.bytesTotal / 1024));

}
]]>
</mx:Script>


I have tried to find tutorials on this but they seem thin on the ground with reference to flex and the few that i have found either contain errors, or don't show what components to use in the design view. Any help with how i might move forward would be greatly appreciated.

Thanks
Tom

[charlesshoults]

Where I work, the images for the Internet line of business are stored in Scene 7, which is also by Adobe. When products are viewed online, it brings up a similar zoomifier thing that allows the user to zoom in and out and pan around, working very similar to your example. It looks like it starts with the image at a preset resolution, then when zoomed in, it blows the existing image up, then determines the extents of the viewport and resamples just that section because if you pan left or right, the newly exposed section is fuzzy, then resampled.

It seems like parts of it wouldn't be too hard to replicate. You could start with a canvas and an image inside it. Set up the image to listen for a left-click to zoom in and a right-click to zoom out. You could replicate the effect to check the current mouse position, and set up a transition to scale the image up and center it on the mouse position relative to the image, then change the source of the image to one of higher resolution. However, this would mean that you'd need to store multiple copies of the same image, at various resolutions. There may be some way, with PHP or something else to sample a portion of an image, but I haven't looked anything up.

Actually, to account for zoom in, zoom out as well as panning, I would do a mouseX and mouseY check at the moment the mouse button is pressed and again when the mouse is released. If the coordinates change, it knows that you are panning the image in some direction but if the coordinates stay the same, you want to zoom in or out, depending on the button used.

[mattb]

I've developed something very similar to this. Unfortunately I can't post the code as it's a commercial app. Basically I have a Canvas with an Image control. When you zoom in the image is scaled. A request is then made to the server to get an image at the given x/y/width/height and is placed on top of the underlying image. If the user thens crolls or zooms, the top image is removed, the bottom image rescaled/positioned and a new image is requested from the server.

Works pretty smoothly and isn't too complicated. The server side of things however was a little more involved.