Multiple Tours + Thumbnails

[kirby]

I'm a newb so apologies if this seems immediately obvious to everyone...

Is there a way to add multiple tours that include thumbnails so that the user can select between multiple panoramas in a given tour. Example: http://flashificator.com/1/Diverse/FFC_ExampleTour/ (notice the tour selector) on the right.

Thanks in advance!

[360Texas]

Yes, I think its done in the Pano2vr skin editor.

Wished the photographer would have written the Resturant LOCATION. I might like to visit some year. Only hint ? is the Italian flag over the buffet.

[three6T]

Even more impressive is that the digital clock is telling the correct time and wrking ! ow on earth has he done that ?

[360Texas]

Probably there is a clock routine... that goes out and returns with the computer clock not an international clock website. It was reading the proper time in my time zone.. so must have been getting time from my computer clock.

[kirby]

Ya, the clock is pretty cool. Here is the tutorial for anyone interested

http://flashificator.com/forums/viewtop ... =302#p1593

[k.ary.n]

Yes, tours with thumbnails is quite easily done in the skin editor. You use the thumbnails as buttons and link to the panos from them.

[kirby]

Thanks k.ary.n,

That sounds easy enough. I'm new to pano2vr though. Would the thumbnails be created in an image editor or done directly through pano2vr?

In terms of workflow, let's say I am creating 2 virtual tours in a given day:
- VT#1: has two panos
- VT#2: has four panos

Do I have to create a new skin for each of the above scenarios?

[Hopki]

Hi
If you have already got the panoramas, why not use Pano2VR to generate the thumbnails by using the Transformation option. You can even get the best image from the panorama then output to a small image size all ready for the skin editor.
This is one of those very useful features of Pano2VR that is not really highlighted, but very, very useful.

You can make a corporate skin and adapt it to all your tours for your website, I have a standard set of images I use and they are labeled One.swf, Two.swf and Three.swf.

Any skin I build just uses these file names, all you need to do is the reverse this. Have one skin and make sure all the panoramas have a common name, say pano1.swf, pano2.swf and pano3.swf.
All the best

Hopki

[anahum]

Kirby, here an example I did using only Pano2vr's skin editor --> http://www.360panotours.com/edificio_sf.html
If you have any doubts, please send an e-mail.

[kirby]

Thanks so much for the suggestions and sorry for the delay in between replies..

If you have already got the panoramas, why not use Pano2VR to generate the thumbnails by using the Transformation option.

Where can I find the transformation option?

Kirby, here an example I did using only Pano2vr's skin editor --> http://www.360panotours.com/edificio_sf.html

.

I notice that when you place the cursor on top of the thumbnails, it has a snazzy effect of displaying the room name whereby the text follows the cursor. i don't know what this effect is called so I can't check to see if there is another thread about how to do this?

[Hopki]

Hi Kirby

To generate thumbnails add a “Transformations” output.
You should now have Remap under your Flash or QuickTime output.

First thing I do it go to the html tab and turn it off, un-tick “Enable HTML file”.
Then in settings, set type to Rectilinear (default view)
Set the size of your thumbnail, in preview you can set your view, set your output file type, quality and file name. Click OK job done.

To have a text box follow the mouse is very easy.
Place a text box in the skin say 150 x 20px.
In the text box modifiers tab set the following:

Move X – Mouse X
Move Y – Mouse Y
Leave the Factor and Offset at default.

The mouse will be in the top left corner of the text box so you nee to position it so the mouse is in the correct place.

To have it show in the middle and above the mouse you would set the X & Y of the text box to:

X: -75
Y:-50

This puts the text box 30px above the mouse and half way along.
I will leave you to work out how to hide and show the text box, as a hint, mouse enter and mouse leave.

As a bit more inspiration I have attached a swf with a skin I am working on for my shop, still work in progress. The thumbnails and popups are of all the same image, but you should get the idea.

Although you would not normally have interaction between point hotspots and thumbnails I have put it in to show it can be done, but personally I wood not.

Hope this gets the old gray matter working.
Hopki

[kirby]

Thanks for the explanation, Hopki. I was successfully able to get the text box to follow the mouse cursor. I'm not sure I would have been able to figure out the X,Y coordinates without some serious trial and error though - so thanks for being so specific.

I really like the effects of the skin above. For the rollover of the thumbnails, is the large and small thumbnail the exact same image but scaled, or do you create two separate thumbnails (one for large and one for small)? I ask this because sometimes when you scale things in Flash, the image can get a little messy looking.

[Hopki]

Hi Kirby
They are two different sizes, the small thumbnail is 50 x 30px and the larger one is 195 x 125.
The main reason for this is that if you copy an image and scale it, you now have two images in the skin, so putting in a much smaller file cuts down overall size.
All the best
Hopki

[anahum]

Kirby, here an example I did using only Pano2vr's skin editor --> http://www.360panotours.com/edificio_sf.html

I notice that when you place the cursor on top of the thumbnails, it has a snazzy effect of displaying the room name whereby the text follows the cursor. i don't know what this effect is called so I can't check to see if there is another thread about how to do this?

Kirby, to have the text following your mouse you must:

1.- Put the image (thumbnail) on your skin and add actions to Show and Hide the text element when mouse enter/leave the thumbnail
2.- Create the text as a "child" of the thumbnail and in the Settings uncheck the visible mark
3.- Then, open the Actions/Modifiers tab of your text and at the bottom (Modifiers) add 2 modifiers. One to have the text to follow your mouse on the X coordinates and one for the Y (Move X/Mouse X/Factor 1/Offset 0, and do the same for Y)

Done!

[kirby]

Thanks everyone!

In regards to the sample Hopki has provided, I notice that when you select a given thumbnail, the white border indicates which panorama has been selected. I am trying to do something similar but instead of the selected state displaying a border, I am trying to make it so that the unselected state is at alpha 0.5 and then fades to 1.0 when selected and stays that way until a different thumb is selected.

To better explain the scenario:
- User opens tour1 which contains three thumbnails: Thumb1 would be at alpha 1.0 since it represents tour1 currently being displayed; thumb2/3 should be at alpha 0.5.
- When user hovers over thumbs2/3, the alpha fades to 1.0; the finger cursor is not active when user hovers over thumb1 since tour1 is already currently being displayed.
- When user clicks thumb2, thumb1 alpha should fade to 0.5 and thumb2 alpha would go to 1.0

Can someone please explain how I can achieve this effect?