Page 1 of 3
This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.View all articles by Matt Byrnes
Written by: Matt Byrnes / www.inflash.com
Time: If you're just learning If Then statements, Get Property, and/or Set Variable, give yourself 6 hours. If you've got all those down, give yourself 30 minutes to an hour.
Difficulty Level: Advanced
Requirements: Software Required; Flash 4
Topics Coverred: Take your panoramic picture, import it into Flash, follow the steps below and presto! Instant 360 degree world for conveying depth and perspective to a static environment.
Assumed Knowledge: If Then, Set Variable, Get Property, Set Property, and Buttons directing the action on the timeline. Download the source.
I was able to create a virtual tour of an apartment with the ability to go into different rooms.
With Flash's interactive features, you can have virtual tours for real, not just scrolling. For instance, I have the door to the bedroom be a button that accesses the virtual tour of the bedroom. Same for the kitchen area. I could have done the whole building, if I wanted.
The great thing about this tutorial is that once you get it, if you have a panoramic camera, you can go to any and all real-estate companies and offer your Flash virtual tour services for $. The other great thing is that, if you're anything like me, you'll just want to download the .fla and modify it as little as possible and get the results. The .fla is designed for that, too. Just follow the picture taking and importing steps below.
First, about taking the pictures: you must use a tripod on a flat surface and pay close attention to keeping the camera the same level. The camera I used, an Olympus D-360L, enables you to take a series of pictures and line each picture up so that they can all be assembled into a panoramic photo later. The camera also comes with software that can stitch the photos together seamlessly. You can do this lining up and stitching of photos together yourself without the aid of software, but I haven't done any experiments with that.
Also, with my camera, there always seems to be some mismatching between the last picture at 360 degrees and the first picture at 0 degrees. The seam between the 2 pictures can be pretty apparent, and you might want to hide the seam in an overexposed or underexposed section of the picture or whatever else you can come up with. (I used an extreme close-up of a tree trunk in this example. I was on such un-even ground with a weak tripod, so I had to make do). For the apartment example, the unevenness was much less since I shot it on a hardwood floor. I used the over-exposed doorway to hide the seam.
Alright, onto assembling the flash tour.
- Break up the panoramic picture into roughly 3 equal parts. You could do this with 2 pictures that are wide enough each to cover the stage, however, Flash gets funky when the images get too far off the stage. So 3 smaller pictures is a safer bet, and that's what I've coded for.
- Place them in the appropriate movie clips: left, center and right. Line them yp in perfect, seamless, alignment. If they're out of aligment to begin with, they'll be perfectly out of alignment throughout.
- Keep all the movie clip's widths free of decimal points other than 0. (No '900.7' type widths). Otherwise, you'll get small gaps between your pictures. Remember, the movie clips determine the width of the picture they contain, not the other way around. You could have a picture 1000 pixels wide, but it will get stretched to 1015.5 pixels wide if that's how wide your movie clip is set to.
- After that, if you find yourself getting small gaps between your pictures,select each image inside of the movie clip and select the 'break apart' command. ('Break apart' is in the 'Modify' pulldown menu). If you still have gaps, be sure to check point 6 below.
5. If you change the stage's width, be sure to make the variable in the Action Script in Frame 1 reflect that.
6. Last, but not least, once you import your pictures into the movie clips, be sure the picture's x-axis is at zero inside the movie clip. For example:
Inside the movie clip you'll have your image, and you need to relocate it so that it's x-axis is at zero by moving it to the crosshairs like so:
If you don't do that, instead of scrolling in order, your pictures will flop on top of each other. All the pictures top most left corner must be at the x-axis inside of the movie clips. Once outside of the movie clip and on the main stage, line up your pictures by the seams. In other words, make the picture look whole on the main stage.