html5 bottom slider thumbnail bar ??

[360Texas]

Anyone tried an html5 screen bottom slider thumbnail bar. Each picture on the slide in/out thumbnail on the bar is linked to its companion panorama... in flash fall back, html5 for ipad and of course iphone 4 ??

I know I have seen this type of skin done for Flash... but do you think it might work with Pano2vr ver 3 html5/css3 concept ?

[SIMPLEPLAY]

i want to know how to do this in flash...it seems a problem to me

Thank you.

Zhu

[360Texas]

Made some progress - then got confused again.

So here is progress report:
Issue:
Pano1 = Skin shows properly lower left corner of stage. Click on Pano2, 3 and 4 thumbnail goes properly to HTML (s) but skin has vanished.

Created a new OUTPUT Flash and HTML5 configuration"

Flash and HTML 5 will use the same Skin named "360texasthumbar"

Flash typical settings. Skin Editor shows

Container named "thumbar" inside are children:
4 100x100 thumbnails
+1 <- -> button graphic

The thumbar slider performs Left and Right sliding off /on stage correctly
---
All 4 thumbs are configured:
ID: separate ID for thumb 1,2,3 and 4
POS x/y Anchored upper left
Scaling 1 & 1 no scaling
Angle 0,0
Visible [x] Alpha 1
States: no state specified
Format [x] .png
Quality - grayed out
Hotspot proxy ID none required because 4 hotspots are on the static toolbar not on panorama

Actions/Modifiers
Mouse Click | Goto URL | URL= albrightpat.html Target: $self
Yes I have replaced Goto URL with Next Panorama and specified .swf but still loose the skin on pano's 2,3 and 4. Have replaced Target:$self with blank. No change
--
Behavior comments
On initial panorama 1 - Skin is off screen to left- only <-> button is showing.
Click <-> and thumbar extends to right on to the stage.
Click on #2 thumbnail and a new page is opened and pano is displayed - with no skin.

Alternate: I removed the Target $self and left it blank
Pano2 opens over top of previous Pano1 still no skin.

Observation
The HTML5/CSS output for iPhone/iPad2 are configured for cube face dimensions 1300 1024 960 width image sets. I ran it a several times.
Noticed that the cube face image set for 1300px gets duplicated and added to the original CF tile set. Now have 3 or 4 sets of 1300 pixel width in the IMAGE folder.
The original cube face tiles for 1024 and 960 sets remain unchanged.. like might be overwritten with each pass.

Here is a photoshop picture of both pano1 and pano2 showing the skin missing in #2

I would appreciate questions and constructive comments.

[360Texas]

Progress Update: 12July2011 "Some of it works now"

When a project does not seem to work... suggest breaking it down into componet parts.
I created a new folder and copied over only the salient parts for Flash.

I copied over to the new folder for the 4 panoramas:
Project files .p2vr
Original .TIF's
Previously created .swf

Slider Skin:
4 thumbnail 100x100 jpgs
<-> thumb button

Process:
Opened the FIRST .p2vr
Deleted X the 2 html5/css3 960 and 800 OUTPUT entries. This left only the Flash Output entry.
Opened the Skin Editor
ADDED to the Thumbar container: Circle hotspot for each of the 4 picture thumbnails. Placed the circle hotspot over top of each thumbnail
Opened the Circle hotspot provide a unique ID
Opened the Actions/modifiers tab
Added Mouse click | Next Panorama | added the pano.swf | FOV blank

Saved | Saved | OK to create

It brought up IE 9 browser with Pano1 displayed with the thumbar slider

Clicked on #2 , 3, 4 panos thumbnails

BROVO !! It WORKS ! Skin in each pano... I could cycle back to each pano.. from each pano !

Now to go find a cold beer !

NEXT will be to try this separately with HTML5/CSS3 with out the FLASH component. MORE TO COME !

[360Texas]

Using a new folder, I moved all appropriate files for 4 pano's and skin:
.p2vr
.swf
.tif

Generated a new /images folder, xml, html and skin.js, and 3 .js's

Observation
Using Safari, I realized that I am looking at the 1300 wide cubeface tiles.

Now I need to learn how to have each button open a new panorama over top of existing pano... using _self or $self syntax. At the moment, each time I click a sliderbar button it opens a new page to display the pano. Here is Safari viewing 1 pano... but each time I click.. it opens a new page. I need next thumbnail click to display in 1 view port

[360Texas]

You will need to provide your own 2:1 equirectantular image for each of the project .p2vr files. All the other files including the 2 skins (flash and html5).

IE 9 functions properly with the Flash project
Safari functions proper with the Html5 project -- I edited the nadir cube face tiles with the 1300, 960 and 800 so you would know which set of images were delivered to your device. IF the number is missing you are viewing FLASH and yes the "Fall back" option is enabled.

Functions start behaving oddly when IE 9 with the html5 project

Please visit download page:

http://www.360texas.com/services/sr/dbu/index.htm

[hum@no.id]

You can knock out behavior IE 9

add to header
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

[roomrotator]

did you ever get this figured out? would LOVE to do something similar for a current project, hopefully both in flash and HTML5. Thanks!!

[Hopki]

Does this help?
viewtopic.php?f=17&t=9040#p35332
Regards,
Hopki

[roomrotator]

This is a great step towards what I am trying to accomplish, thank you Hopki for sharing the link!!

I am wondering if there is a way to make the scrolling function work by dragging the thumbnails with your finger (on mobile) or using the scrolling function on your mouse (computer). I have built a tour outside of Pano2vr that functions almost exactly how I want it to, but I would love to be able to recreate the same thing completely within Pano2vr. Any idea if this is possible?

Here is a link to what I have done: http://www.coachella.com/2014virtualtour/

You can either click the small arrows at the far sides to scroll (which it sounds like is similar to the action in the skin you posted) or use scrolling on your mouse or your finger to swipe left or right.

Finally, I would love to be able to show and hide the strip if possible.

Any help would be greatly appreciated, THANKS!!

_andrew