Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Image Zoom Effect in Flex 4

0 (0 Likes / 0 Dislikes)
[ADOBE DEVELOPER CONNECTION] [ codedependent () ; ] [Chet Haase - Flex SDK Team] Today on CodeDependent, I'm going to talk about a nifty little image effect that a friend asked me about. He was writing an application where tons of thumbnails were going to be presented to the user, and back behind those, there were larger, high-resolution images, but he didn't want to bring in all the data for the high-res images--instead, let's just display the thumbnails, and then if they click on a particular region in the thumbnail, what we want to do is then bring in the data from the large image and zoom in to the place in the image that they clicked on, right? So we've got the thumbnails for low footprint operation-- don't need to bring in all that data-- but then when they actually want to zoom in, thumbnails aren't appropriate for zooming in on a particular location because the resolution simply isn't there, so then we need to bring in the larger data, and then we need to zoom in on that area in particular. So the simplest way to do this--well, don't use thumbnails to begin with. Just use the high-res ones--that didn't work. The next simplest way is--okay, well, when they click on it, then you go to the high-res version and you start out at the same view as the thumbnail, and then you zoom in from there. But that doesn't work either, because the thumbnail--due to the way it's sampled or whatever resolution you happen to be running at or whatever-- is not necessarily going to look the same as that large image resampled to the same size, so instead, I sort of hacked around with it, to come up with an approach that could be used. This may not be appropriate for your situation, but it was kind of a nifty effect that I thought was worth talking about. The effect is basically start with the thumbnail and have the backing data of the larger resolution image, and crossfade between them at the same time. Right--so what you want to do is when they click on part of the image, you want to zoom in, and you're going to be zooming in on the thumbnail, and in the mean time, you're going to be cross-fading to the higher-resolution image so that by the time you get fully zoomed in, you're actually looking at a zoomed-in view of the large image. And then, when they zoom out, you then cross-fade between them so that you get the thumbnail there, so you can get rid of the footprint of the larger image. So let's take a look at the application. So we have here a sample image. Sitting down here, a little thumbnail--maybe I want to see what her hands look like or maybe--I've always wondered about that smile, so we can see a little closeup of it there. All right--and you can see over time that we cross-fade between these different versions, so although the thumbnail has this very sort of blotchy look to it, as thumbnails will, by the time we actually fade--zoom in to the point that we were interested in-- we're looking at a zoomed-in view of a high resolution image instead. So how does that work? Okay, so first of all, we have our canvas with just these 2 images in it. This is obviously a simplified model where I'm not bringing in backing data from high-res images. I've got them both declared already. I have the thumbnail, which is called image, and the larger image, which I called imagelg, and it's going to be false on visible at first, so we're not going to actually see the large image. And then when you click on the image, we're going to zoom in and that is going to use the effects that are declared above in our declaration section. So we have the zoomer-in effect, which is a parallel, which is going to do a cross-fade between the two, so this is going to fade the thumbnail out while it's fading the high resolution image in. And then, we're going to do a resize at the same time on both targets, and a move on both targets. Now, notice we're not simply scaling in on a high-res one and moving the high-res one to the point of interest--instead, we're doing it on both of them. We're treating both images as the same image, so we're running the same exact effect on them, but we're going to be cross-fading between them so as we're zooming in on what starts out as the thumbnail, we're going to be cross-fading over to the high resolution image at the same time. And then, when we click on it--we do the zoom in operation. That's going to removeEventListeners, so we're not going to listen for clicks while we're running the nifty little animation. We're going to make the large image visible. We're going to set up our x and y and width and height information according to the point that they clicked on and what's the location that we actually want to center around when we zoom in. Then we're going to set the information about x and y and the resize information on the effects appropriately. Then we're going to play the effect, and when the effect ends, we're going to call our EndHandler, which then sets the thumbnail to be invisible. It's also going to set its alpha property to be completely opaque so that the next time we play with it, at least it will actually exist and it won't be transparent. And then we're going to add our EventListeners back in because we want to listen for clicks in the future. Similarly, when we zoom out, we're going to be clicking on the large image, we're going to remove the EventListener so we're not getting intermediate clicks while the animation is playing. We're going to make our thumbnail visible and we're going to set the width and the height and the x and y information to basically go out to the fully zoomed-out view on these things. And those effects are declared up here as well. We have a parallel running all of these things at the same time. We have, again, a cross-fade operation--I actually noticed as I wrote this that while it was really good to cross-fade simultaneously on the zoom in operation, it was actually good to wait a little bit on the zoom out. We do want the thumbnail to be natural in the transition. We don't want to zoom out on the high res and then snap into thumbnail because we'll get a snapping artifact at the end as we get to this sort of blotchy view that-- but we can wait a little bit on that so that half the zoom out information is actually using the high-res image so you get this really nice quality image being used for half of that zoom, and then we start the cross-fade for the second half of the animation. So that's why we have a duration of half the time and a startDelay that starts halfway through. Now we do our cross-fade, and then we have the resize and the move operation that are going to be zooming out to the full view of--and then the thumbnail image. If you want to see the code for this application and other related applications, check out my blog at graphics-geek.blogspot.com. [ADOBE DEVELOPER CONNECTION]

Video Details

Duration: 6 minutes and 18 seconds
Country:
Language: English
License: All rights reserved
Genre: None
Views: 251
Posted by: adobetv on Oct 21, 2010

Chet demonstrates an effect that you can use to zoom in on details of an image while switching between thumbnail and high-resolution versions of the image.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.