Click on any phrase to play the video from that point.
[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]
