Click on any phrase to play the video from that point.
[♪upbeat music♪] [ADOBE TV Presents...]
[♪♪] [Paul Trani in...]
[♪♪]
[Adobe® Flash® Professional CS5 - Training With Trani]
[♪♪]
With the wider use of touch devices such as smartphones and tablet PCs,
it actually introduced some new methodologies
such as being able to pinch and zoom in or zoom out,
being able to wipe, maybe the ability to touch with multiple fingers
on some tablet computers.
Well, Flash can take advantage of all of that as well.
So here I have my project,
and what I want to do with it is I want to be able to zoom in on this character.
If I just double click on this movie clip,
you can see that he contains this sort of skin layer
and then there's also this sort of muscles layer right there.
I'm going to be able to zoom in on the human body.
All right. So I'm going to use the gesture zoom on this body instance.
I'll just copy that.
Let's go to Window, Actions, go into my Actions panel,
and I need to go ahead and add an Event Listener.
[body.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
It's going to listen for a TransformGestureEvent,
specifically, the GESTURE_ZOOM.
And on zoom, fire off this function called onZoom.
Okay. [function onZoom (e:TransformGestureEvent)]
Notice how any time I add any class it will add the import statement as well.
But what I want to do now is just type in what I want to happen on zoom.
So any time the zoom changes, any time somebody pinches on this device,
I want the body to scale.
[body.scaleX *= e.scaleX;]
I'm going to scale its X position, so scaleX,
and I am going to multiply by this specific property
that I'm going to get from the Gesture Event, and that is known as the scaleX.
Now, I can also do rotation in scaleY, but right now I'm just going to do the scaleX.
Okay, so I'm adjusting the scale of this body--its width--
but what I want to do with the body is scale up the Y as well.
[body.scaleY = body.scaleX;]
And all I'm going to do here, rather than running another calculation
for the scale of the Y, I can just make the Y equal to the body's X scale--
just like that.
So again, this is just a simpler way to do this.
I'm going to make sure these two always scale together,
and everything should be fine now.
In fact, I'll go to Control, Test Movie,
and I'm going to preview it in Device Central.
And what's great about Device Central is it doesn't require me to have a device
that has gestures built in,
but I can go ahead and use this Multitouch panel.
So right in here it says, "Hold down the Alt key."
So I'll hold down the Alt key and define the first point,
which might be my pointer finger,
and then I'll just click and drag on that other point.
And you can see that body kind of scaling up.
So imagine if I'm pinching and zooming, I can go ahead and zoom in on this body.
So again, pretty easily done.
For the most part, that works pretty well.
I'll go back into Flash,
and what I can do from there is I can start to even control this some more.
My next step is to just add a Rotate Listener.
So I'm going to listen for the rotate.
[//Rotate]
[body.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);]
[function onRotate (e:TransformGestureEvent);void(body.rotation += e.rotation;]
I'm going to add an Event Listener, and it's going to be TransformGestureEvent again.
I'll just copy that, paste that down here, and I'm going to go ahead
and take care of the rotate.
Notice how it does give me the ability to select any one of these.
I've used zoom. I'm going to use rotate now.
I can also pan or I can sort of swipe with two fingers.
So again, GESTURE_ROTATE is what I'm going to use. I'm going to select that.
And I'm going to go ahead and add a function, onRotate.
Function onRotate.
So when you rotate this item,
go ahead and we're going to apply that specifically to our object.
And our object is, of course, the body.
I'm going to change this rotation, and all I'm going to do is make the body's rotation
equal to the rotation property available in GESTURE_ROTATE.
I'm going to go ahead and rotate the body based on the rotation property
available in there.
That's all I'm going to do. I'm keeping this pretty simple for now.
There are some more things I'd like to add to it, but I'll go to Control, Test Movie,
and let's go ahead and test this out.
There's our character. I'll define my two points.
Notice how I can scale up but I can also rotate him around as well just like that
and make him quite dizzy.
Whatever I want to do I actually have that available all within Device Central.
So I really would want to take this to the next level
and start defining maybe some if-else statements in here.
Based on the scale, I can start to sort of zoom in to that human body
like I mentioned initially and start to reveal different layers.
I'm actually going to switch over to this final file, save us some time,
and just kind of review some of this code
because in here it does give me the same code I had,
but what has been added is this information.
So if the scale of the body is greater than 1 but less than 2,
then go ahead and adjust the alpha of the skin. Okay?
So the skin is going to start to fade out as long as it's within this certain size.
So you're zooming in the alpha of the skin, the skin starts to fade out.
You zoom in some more and the muscles fade out.
You zoom in some more and then the skeleton is then going to fade out.
But again, I'm still doing all of this based on the scale of this body,
and it all comes from the GESTURE_ZOOM.
So let's do a Control, Test Movie.
There's my character.
I'll go ahead and hold down the Alt key and click once,
and then I'll click again, and I'm able to zoom in.
You can see that it fades out the skin.
Zoom in some more, it fades out the muscles, and then I can see the skeleton,
and then I can actually see the organs right in there.
So again, just a quick example of how you could use the gesture zoom
on any particular project you might be interested in using it with.
It's also really helpful to note that this provides some great opportunities
to use some new technology to really enhance any project you're working on.
[♪upbeat music♪]
[Executive Producer - Bob Donlon] [Producer - Karl Miller]
[Director/VFX - Kush Amerasinghe] [DP/Post Production - Erik Espera] [Editor - Elen Gales]
[ADOBE TV Productions - tv.adobe.com] [♪♪]
