FlashPanos

Over in the Flash Panorama Player Forums a while back, user jaaaab posted a "Simple Compass Tutorial". I've extended his simple solution to show you how to have a rotating nadir image! Demonstration links are below, and links to source files are included at the end.

• Rotating Nadir Cap, using a SWF & jaaaab's method
• Rotating Nadir Cap, using modified method
• Stationary Nadir Cap, using modified method

Jaaaab's example is an elegant way to add, say, a rotating field-of-view (FOV) indicator to a floorplan or map graphic which overlays your virtual tour. In his example, you have a FLA in which you draw your FOV indicator. This FLA also holds the code responsible for rotating the indicator.

Simply save your FOV SWF file, add it to your FPP XML file for the tour, and away you go! Well, it's almost that easy... Steps to get there, as outlined in jaaaab's original post:

• Create your map graphic;
• Place your map graphic in the tour as a static spot;
• Create your FOV indicator, from the FLA file;
• Place it in the tour XML as a static spot with an id of "fov";
• Add another spot to the XML, with only:
• id="deltarotation"
• rotation="0"
• set "rotation" equal to how you want the rotating FOV indicator to look when the pano first loads.

Still, that's pretty darned simple. (Note: I omitted jaaab's steps which show you how to have the indicator's rotation re-set when a new pano loads. You should check out his explanation at the FPP forum).

I don't use a lot of floorplans/FOV indicators in my tours, but I do use nadir caps (or "bottom caps") quite a bit. One of the holy grails of QTVR was a simple rotating nadir cap -- and also, a nadir cap that stayed stationary as your pano rotated.

I took a peek at jaaaab's FOV source to see if I might be able to adapt it... Lo and behold, you don't even really need to change a line of code in the FLA to achieve it!

What you do need to do is use a box instead of a spot. This allows you to distort the nadir SWF and "pin" it to the bottom of your panorama. The relevant XML follows:

• Note that i did change the id of the spot to "nadir", and this required me to alter one little line in the FLA.
• Get all the source files which i discuss
• Relevant files are:
• nadir.fla (nadir.swf)
• xml-simpleNadir.html
• xml-simpleNadir.xml

This approach works, but it still forces you to have your rotating image in the SWF (along with the rotating ActionScript). With some minor alteration, you can have your nadir image and your rotating scripts completely separate (demo)! And as a bonus, you won't have to open the FLA or do any Flash scripting.

For my example, I removed the artwork from the FLA, and made it 20 pixels square (totally arbitrary dimensions). I changed the code so that it targets a box/spot which has an id of "nadir_image". I saved the FLA, and exported my SWF.

I also created a nadir cap in Photoshop, using the Flexify plugin. This is a round PNG with transparency.

Your basic steps, then, will be similar to:

• Create your nadir/bottom cap image;
• Place your nadir image in the tour as a box with an id of "nadir_image", and set other parameters (distorted, pan, tilt, etc.) as you see fit;
• Place your SWF in the tour XML as a static spot with:
• id of "deltarotation";
• url of "nadir-image.swf" (or whatever you call it);
• rotation equal to the opening position you want for your "nadir_image" box;
• visible of 0;
• staticX or staticY set to position it off-screen (optional)

An example of the XML for the nadir box and the "controller" spot is below:

Get all the source files which i discuss. Relevant files are:

• nadir-image.fla (nadir-image.swf)
• xml-nadirImage.html
• xml-nadirImage.xml

Voila! Another approach to a rotating nadir cap or FOV indicator. The stationary nadir cap works similarly to this example, but requires slightly different math in the Flash file.

I hope this helps some folks out -- if you have a link to an example of it in use, feel free to put a comment below. Cheers!