Flash Panorama Tutorial
Mar 30, 2003
In this tutorial we'll put together a VR movie that works just like a Quicktime VR movie and lets you drag with the mouse to alter your point of view and look around. Flash is perfectly capable of creating this kind of behaviour as well.
Drag behaviour is built right into Flash, so it couldn't be easier to make something dragable;
All that is required to make the pano dragable is convert the pano image into a movie clip and embed the following code into it;
onClipEvent (mouseDown) {
startDrag (this);
}
onClipEvent (mouseUp) {
stopDrag ();
}
That's easy, but it doesn't work very convincingly as a panorama. But the drag behaviour in essence is there to be taken advantage of - you click, an action takes place, unclick, the action stops. How can we use this action to control the panorama the way we want?
It is very easy to drag something in Flash - that something doesn't have to be the panorama itself but can instead be another movie clip. We can use that movie clip to give us values which can be used to control the panorama;
No, the pano isn't moving, but as the white circle mc moves you can see the values at the top of the screen change. We can now use these values to control the movement of the panorama. Most particularly, we will use the X distance value. This value tells us how far the mouse has moved while we've been dragging, and in which direction. To get these values, the drag actionscript was taken off the pano and put on the white circle instead, and some new code was added;
onClipEvent (mouseDown) {
x_start = this._x;
y_start = this._y;
this.startDrag ();
}
onClipEvent (mouseUp) {
stopDrag ();
}
onClipEvent (enterFrame) {
x = this._x;
y = this._y;
x_dist = x_start - x;
y_dist = y_start - y;
}
Next, let's take these values and use them to move the panorama.
Now we know which way the mouse is moving when we click and drag, and how far. We can feed this data into another movie clip, and tell this movie clip to control the panorama. The movie clip doesn't have to have any graphics in it - it's just a container for some actionscript which will run over and over every frame and execute commands to the panorama. Here's the actionscript for this movie clip;
onClipEvent (enterFrame) {
speed = Math.sqrt (Math.abs ( _root.dragmc.x_dist ));
x_pos = _root.pano._x;
if (_root.dragmc.x_dist > 0){
x_pos = x_pos + speed;
_root.pano._x = x_pos;
}
if (_root.dragmc.x_dist < 0){
x_pos = x_pos - speed;
_root.pano._x = x_pos;
}
}
All that happens here is; we get the distance the mouse has moved (Math.abs ( _root.dragmc.x_dist ) - 'Math.abs is 'absolute value') and then calculate the square root of that to give us a variable named 'speed'. Depending on which direction the mouse has moved (positive or negative), we can add or subtract this value from the position of the pano. Using the square root gives us a smooth mouse reaction which increases or decreases depending on how far the mouse is moved - just like a QT panorama.Here's what it looks like;
Now there's only one thing missing - it doesn't wrap around.
The panorama movie is going to be far more useful as an engine if we don't have to set custom values if we use a different image which has different dimensions. We can have a completely reusable movie if we have the ability to drop in a new image and have the movie work in exactly same way, regardless of the image size. Since the panorama is contained in a movie clip, not only can we animate the movie but actonscript can tell the dimensions of the image as well. We can take this a step further, and place the pano mc inside another mc which acts as a container. This allows us to use actionscript to automatically copy the image and 'stitch' it alongside the original. We just need to attach this code to the pano container mc;
onClipEvent (load) {
pano1.duplicateMovieClip("pano2",2);
pano2._x = pano1._x + pano1._width - 1;
}
Since the image is contained in an mc, we can determine the _width parameter and use it transpose the position of the duplicate. We now have to alter our pano engine to test for the wrap conditions;
onClipEvent (enterFrame) {
speed = Math.sqrt (Math.abs ( _root.dragmc.x_dist ));
x_pos = _root.pano._x;
if (_root.dragmc.x_dist > 0){
x_pos = x_pos + speed;
if (x_pos > _root.pano._width/6){
x_pos = _root.pano._x - _root.pano._width/2;
}
_root.pano._x = x_pos;
}
if (_root.dragmc.x_dist < 0){
x_pos = x_pos - speed;
if(x_pos < 0 - _root.pano._width/3){
x_pos = _root.pano._x + _root.pano._width/2;
}
_root.pano._x = x_pos;
}
}
And here's how it runs;
If you would like to take a look at the source fla file for this project, you can download it here (actionscript 2 version - it's pretty old)
.Comments
you should make something like a sphere panorama which you can rotate in X-axis, Y-axis.
revprotech 28 Aug 2011, 15:54:04
Just wanted to let you know that as of March 2011 this tutorial is STILL relevant and useful. I would post the site that I used this on but that might be seen as spam. Let me just say THANK YOU.
cyberdancer 7 Mar 2011, 12:48:39
Is there any chance you can send me the real fla for this, as this is just what I want to do, but can't get it to work??
VES 4 Aug 2010, 21:52:43
I still failed to doing it, can you post the real .fla of urs?
Afiq 23 Jun 2010, 21:42:44
thank you very much... perfecto sir!.
irmanator 28 Apr 2010, 21:42:15
'movie clip' is flash-speak for one of the 3 types of element that you have in your flash library; movie clip, buttons and graphics. In flash a movie clip has it's own independent timeline. A VR 'movie' is just a picture which moves to create he illusion of looking around a scene. In flash there is a timeline with a beginning and an end, but the play button is entirely optional, and so is the beginning and the end. You can program flash to go wherever you want on the timeline, and in any particular place on the timeline you can have a movieclip with it's own timeline nested within that. So yes, in one place on the timeline there can a linear movie that plays, and somewhere else there could be a panorama, all in the one flash movie on a single page on a website.
harlands 2 Apr 2010, 09:45:56
Sorry for the dumb questions, but here goes... So a virtual tour in real estate for example, is a couple of panorama photos 'stitched' together, made into a movie clip, and then made "virtual" by adding interactivity in the form of clicking and dragging (zooming, etc) in the movie clip area. Is that right? I guess my confusion is that when I think "movie clip", I think of a play button, a beginning, and an end. Where do those three things exist for the VR movie clip you made above? Lastly, if you have a website where you want to display both Flash videos (non-interactive) AND say virtual tours, can you play them in the same window with the same plugin? Can you display different skins (different buttons - play button versus panning button for example) based on the type of Flash file. i.e. can you tell that one is a virtual tour and one is a movie that needs to play by the file extension? ...or if you want different skins, do you have to display them in different windows? Any help is much appreciated!! This article was extremely helpful by the way. Makes total sense so far...
clueless 31 Mar 2010, 01:35:32
Thanks a lot for the tutorial! :)
Fodi 26 Oct 2009, 22:13:27
clicking should send the playhead to a frame on the timeline where the pano engine runs; mouseup should move the playhead back again. so whatever behaviour you want you can use the timeline and place movie clips and actionscript at particular frames and have commands to send the playhead to stop at particular frames on the timeline. in this way you are using the flash timeline to lay out the structure of your program, and the program can be governed by the most fundamental actionscript command which is gotoFrame
harlands 5 Oct 2009, 14:02:51
Amazing tutorial. It's a great help. I'm having a hard time trying to stop my panorama image from moving when the mouse is released. I've tried to set a flag to trigger when to stop but it still doesn't stop the movement. From some reason it doesn't want to set the speed back to 0 until I shortly click the dragger button afterwards. Please help? Thank you.
asinoy 2 Oct 2009, 15:30:11
THANK YOU VERY MUSH THIS WILL HELP ME IN MY FINAL PROJECT UNIVERSITY. MANY THANK
oh 3 Sep 2009, 13:38:49
THAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANKS!!!!!
angelica 26 Aug 2009, 22:14:04
Yes, just increment (or decrement) the _x parameter with a loop which is placed in the default frame.
harlands 13 Mar 2009, 11:04:52
This is super cool! Is there any way to have the movie clip moving onload and then include the manual scrolling?
Chris 9 Feb 2009, 20:53:59
Do you have a fla file for this tutorial?
andy 12 Nov 2008, 23:49:16
Comment On This Post
Comments are moderated by the site admin. It's nothing personal - just trying to keep out the spam. Any reasonably relevant comment will probably be published.
