Multi Node and Multi Floor Plan Projects
Posted: Sun Dec 30, 2012 4:30 pm
The subject on how to make a multi node tour with more than one floor plan has been a topic of many forum posts and e-mails. To this end please find two projects attached, one for Pano2VR and the other for Pano2VR Pro. Both are set to display the Flash output with fallback to HTML5. Note the Pano2VR Pro project has no separate flash output as the flash fallback player is being used.
Before reading any further please download the relevant project so you can follow along as there will be references in this post to files in the projects.
The projects have five nodes and three floor plans, the user data titles are Room One to Five. This naming convention is also used in the Hotspot title text field for Pano2VR. Pano2VR Pro automatically adds the title when dragging in nodes from the tour browser to the hotspot editor.
For the Pano2VR project each node has tags to identify its floor location and which room it is, for example, Room One node has the tags gf for Ground Floor and r01 for Room One. For the node Room Five the tags are sf, Second Floor and r05, Room Five. For Pano2VR Pro only the tag for the floor location is required.
Nodes 1 & 2 are on the Ground Floor
Nodes 3 & 4 are on the First Floor
Node 5 is on the Second floor
Skin Construction:
Apart from the three png floor plan images the entire project is made using the tools found in the skin editor. This has the advantage that text and colours can be changed easily.
The elements can also be replaced with different graphics as long as they have the same ID’s and actions. Of course the projects are free for everyone to use and change as they wish with no restrictions on use.
All buttons are made from two rectangles and a text box. The second rectangle with the ID that ends with the word hit has its alpha set to 10, adjusted in the colour picker not the element so the text can be seen through it and is set to have the hand cursor selected. This is needed for the Flash output so when the mouse hovers over the button the hand cursor can be seen. At the time of writing this Flash does not allow the hand cursor for text boxes.
How it works:
The three floor plans are arranged in one long strip which slides up and down inside a masking container which means only one radar element is needed. In this project the change element position action is used so the floor plans can be seen sliding. If a set element position action is used then the floor plans will be seen to just change.
Open the first project file with the skin, for Pano2VR this is pano_01.p2vr and for Pano2VR Pro, Tour.p2vr. The skins are very similar in both projects however the differences will be highlighted.
Opening the skin the top three elements are node markers which have the ID’s ground, first and second floor trigger. Each has the relevant tag, gf, ff and sf and has the action to trigger click a button in the floor plan to select the correct floor.
The next element is the floor_plan_bg which is a rectangle and forms the background for the floor plan. Note this can not be seen in the skin editor as its position is off stage, X -354. Change the X position to 10 to see the element in the skin editor, but remember to reposition it when ready to publish. The reason for it’s negative position is because it will slide out from the left when opened.
Expand the floor_plan_bg element to see all the child elements that make the floor plan. The next three child elements are the buttons that select which floor is to be viewed. It is these buttons the trigger click action in the above node markers click. There is also a rectangle with the ID floor_location. This moves over the selected floor_select rectangle and highlights which floor plan is being viewed. This works by using a mouse click set element position $self action in the floor_select rectangles. The ground_floor_select rectangle also has an init set element position $self action so the floor_location rectangle is covering the ground_floor_select rectangle when the tour opens.
Each floor_select rectangle has the actions to change the position of the container, ID floorplans. When click the floorplans container will slide down or up depending on which floor_select rectangle is clicked. The math for this is simple 0/0 for ground floor, 0/400 for the first then 0/800 for the second. This is because the floor plans are 400px high.
The next element down is the close button and has the actions to change the position of the floor_plan_bg element and show the open floorplan_open button while hiding the close floorplan_close button by changing their scale.
The mask is a container set to masking, the mask is the same size as one floor plan png so as the floorplans container slides down and up only one floor plan will be visible.
Children of the floorplans element are the three floor plan png images and the map hotspots. The map hotspots are made from node markers. In the Pano2VR project the node markers with the ID’s room_one_mh to room_ five_mh have the room tags, r01 to r05. They also have the actions that when activated to set the position of the radar element mh_radar and also a mouse click action to open the next panorama.
In the Pano2VR Pro project a markertemplate is used and can be found in the container with the ID hide_mh. The markertemplate has the action activate set element position for the element mh_radar.
Both the Pano2VR and Pano2VR Pro node markers/markertemplat use the mhn (map hotspot normal) and mha (map hotspot active) elements also found in the hide_mh container for the floor plan hotspots.
The next element in the file tree is hs, this is a hotspot template which has child elements, two rectangles and two text boxes which are in a container with the ID tooltip. The text box with the ID tooltip_bg is being used as a drop shadow and has a 1px offset from the tooltip_face text box.
Under this is the control container, this houses the rectangles that make the buttons for zooming and opening and closing the floor plan. Note there are two buttons stacked, floorplan_open and close. Each hides itself and shows the other by using the set element scale actions as well as changes the position of the floor_plan_bg element to slide it side to side.
Lastly the loader element is made up of two rectangles, one being used as the background, the other as the visible loading bar. Opening the rectangle loadbar will show that the Centre position for the scaling is set to the left indicating the start position of the load bar. It will scale from left to right. Selecting the centre will cause the load bar to scale from the centre so changing the effect, scales from the centre to both left and right.
Thats it and we hope it inspires ideas for your own projects. Just leaves us to say, Happy New Year to all and thank you for your on going support and feedback. It is all very much appreciated.
The Gnomes.
Before reading any further please download the relevant project so you can follow along as there will be references in this post to files in the projects.
The projects have five nodes and three floor plans, the user data titles are Room One to Five. This naming convention is also used in the Hotspot title text field for Pano2VR. Pano2VR Pro automatically adds the title when dragging in nodes from the tour browser to the hotspot editor.
For the Pano2VR project each node has tags to identify its floor location and which room it is, for example, Room One node has the tags gf for Ground Floor and r01 for Room One. For the node Room Five the tags are sf, Second Floor and r05, Room Five. For Pano2VR Pro only the tag for the floor location is required.
Nodes 1 & 2 are on the Ground Floor
Nodes 3 & 4 are on the First Floor
Node 5 is on the Second floor
Skin Construction:
Apart from the three png floor plan images the entire project is made using the tools found in the skin editor. This has the advantage that text and colours can be changed easily.
The elements can also be replaced with different graphics as long as they have the same ID’s and actions. Of course the projects are free for everyone to use and change as they wish with no restrictions on use.
All buttons are made from two rectangles and a text box. The second rectangle with the ID that ends with the word hit has its alpha set to 10, adjusted in the colour picker not the element so the text can be seen through it and is set to have the hand cursor selected. This is needed for the Flash output so when the mouse hovers over the button the hand cursor can be seen. At the time of writing this Flash does not allow the hand cursor for text boxes.
How it works:
The three floor plans are arranged in one long strip which slides up and down inside a masking container which means only one radar element is needed. In this project the change element position action is used so the floor plans can be seen sliding. If a set element position action is used then the floor plans will be seen to just change.
Open the first project file with the skin, for Pano2VR this is pano_01.p2vr and for Pano2VR Pro, Tour.p2vr. The skins are very similar in both projects however the differences will be highlighted.
Opening the skin the top three elements are node markers which have the ID’s ground, first and second floor trigger. Each has the relevant tag, gf, ff and sf and has the action to trigger click a button in the floor plan to select the correct floor.
The next element is the floor_plan_bg which is a rectangle and forms the background for the floor plan. Note this can not be seen in the skin editor as its position is off stage, X -354. Change the X position to 10 to see the element in the skin editor, but remember to reposition it when ready to publish. The reason for it’s negative position is because it will slide out from the left when opened.
Expand the floor_plan_bg element to see all the child elements that make the floor plan. The next three child elements are the buttons that select which floor is to be viewed. It is these buttons the trigger click action in the above node markers click. There is also a rectangle with the ID floor_location. This moves over the selected floor_select rectangle and highlights which floor plan is being viewed. This works by using a mouse click set element position $self action in the floor_select rectangles. The ground_floor_select rectangle also has an init set element position $self action so the floor_location rectangle is covering the ground_floor_select rectangle when the tour opens.
Each floor_select rectangle has the actions to change the position of the container, ID floorplans. When click the floorplans container will slide down or up depending on which floor_select rectangle is clicked. The math for this is simple 0/0 for ground floor, 0/400 for the first then 0/800 for the second. This is because the floor plans are 400px high.
The next element down is the close button and has the actions to change the position of the floor_plan_bg element and show the open floorplan_open button while hiding the close floorplan_close button by changing their scale.
The mask is a container set to masking, the mask is the same size as one floor plan png so as the floorplans container slides down and up only one floor plan will be visible.
Children of the floorplans element are the three floor plan png images and the map hotspots. The map hotspots are made from node markers. In the Pano2VR project the node markers with the ID’s room_one_mh to room_ five_mh have the room tags, r01 to r05. They also have the actions that when activated to set the position of the radar element mh_radar and also a mouse click action to open the next panorama.
In the Pano2VR Pro project a markertemplate is used and can be found in the container with the ID hide_mh. The markertemplate has the action activate set element position for the element mh_radar.
Both the Pano2VR and Pano2VR Pro node markers/markertemplat use the mhn (map hotspot normal) and mha (map hotspot active) elements also found in the hide_mh container for the floor plan hotspots.
The next element in the file tree is hs, this is a hotspot template which has child elements, two rectangles and two text boxes which are in a container with the ID tooltip. The text box with the ID tooltip_bg is being used as a drop shadow and has a 1px offset from the tooltip_face text box.
Under this is the control container, this houses the rectangles that make the buttons for zooming and opening and closing the floor plan. Note there are two buttons stacked, floorplan_open and close. Each hides itself and shows the other by using the set element scale actions as well as changes the position of the floor_plan_bg element to slide it side to side.
Lastly the loader element is made up of two rectangles, one being used as the background, the other as the visible loading bar. Opening the rectangle loadbar will show that the Centre position for the scaling is set to the left indicating the start position of the load bar. It will scale from left to right. Selecting the centre will cause the load bar to scale from the centre so changing the effect, scales from the centre to both left and right.
Thats it and we hope it inspires ideas for your own projects. Just leaves us to say, Happy New Year to all and thank you for your on going support and feedback. It is all very much appreciated.
The Gnomes.