Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Artlantis Studio 4 comes with a great feature called iVisit 3D Panoramas or i call it Multi-Nodes Panoramas. It allows multiple panoramas (called nodes) to be combined into single panorama. The output of those combined Panoramas will be a html file with flash embedded. This enables us to publish the panoramas on the web. Most Android Mobile Phones support Flash technology, therefore, you can use your Android mobile phone or tablet like Samsung Galaxy Tab to view the panoramas.  This is really convenient for Architects or Interior Designer to present their rendered models in panorama form. In this tutorial, I will detail out the steps how to make the panoramas in Flash Format on the web and Android Phone/Tablet.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

As Flash is not supported on iOS Technology, so you can't view the panoramas in flash format on the iPhone and iPad. Luckily, iVisit 3D comes with another solution with the tools called iVisit 3D Builder and iVisit 3D Mobile App on App Store. The iVisit 3D Builder can convert the file into another format which the iVisit 3D Mobile App downloadable from App Store can view it. In the another tutorial, Converting Multi-Nodes Panoramas for iPhone and iPad, i will explain the steps on how to present the same panoramas on the iPad and iPhone.

 

Note: iVisit 3D Mobile App is charged USD19.99 on App Store.

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: iVisit 3D Lit Mobile App is free on App Store.

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: iVisit 3D Lite Mobile App on App Store is a free version with certain limitation.

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Before we begin, you may consider to visit the Official iVisit 3D website, i.e. http://www.ivisit3d.com. The site has several flash-format iVisit 3D Panoramas samples. worth to take a look.

 

 

OK. Let's start to create Multi-nodes Panoramas.

 

1. Switch to Panorama Inspector.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: If this is the first time you access Panorama, it will have one Panorama called Panorama0  with a Panorama Node called Panorama0 by default in the View List.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

2. In the View List, double-click the Panorama and change the name to Myhouse. Double-click the Panorama Node and change the name to Exterior.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

3. Open up 2D View Window, drag the node to a location as shown below.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: Always remember to adjust the height of the camera in Front View also.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

4. In the 2D View Window, Use Alt key + drag the node to duplicate two more nodes as shown below.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

5. In the View List, rename both new nodes to Corridor and Living.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

6. In the 2D View Window, a panorama node is represented by a blue circle, camera is at the red dot and camera target is at the blue dot. You can drag the 2 blue straight line to adjust the camera angle.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Or, drag the Focal in mm slider in the Panorama Inspector to adjust the camera angle.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

7. Always remember to move around the blue dot (i.e. camera target) to see whether the rendered model is correct at the Preview Window.

 

Note: The rendered model at the Preview Window.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Ok. So far, you have 3 Panorama Nodes, but, they are not linked. Let's learn how to link them by creating Panorama Link.

 

8. Click empty area within the blue circle (Watch Up! Don't click the camera or camera target) and drag to another panorama's circle.

 

Note: A green arrow appears.

 

Drop it on the empty area of another circle.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: Once done, you can see a line is built. Mouse over the link, a tooltip "Panorama Link" is shown. You can click the line to select the Panorama Link and delete it if you need to remove the link.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

9. Repeat the step 8 to link all the panoramas.

 

Note: The panorama links to link up all panorama nodes.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Ok. We are ready to render the panorama.

 

10. In the Preview Window, click the Render button.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: Render Window dialog box opens. In the current Artlantis Studio Version, only HTML format is available.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

11. Click Render Now button.

 

Well! You can now relax and let the machine to render.

 

12. Once the render is complete, a folder called myHouse containing Assets folder (containing many rendered jpg files), player folder (containing flash files) and a HTML document called myhouse.html.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

13. Open the myhouse.html using Web Browser, Firefox for my case.

 

Note: Something is missing! The Floor Plan icon is NOT at the top left.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Let's learn how to make the Floor Plan icon appears on the output.

 

14. Switch to Parallel View Inspector. Important! In the View List, rename the parallel view to 00 or 01 or 02.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: This is the parallel View in the Preview Window.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: Rename to 00 in the View List.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

16. Click Render button.

 

17. Once the rendered floor plan is finished, a JPG file called 00.jpg is created, place the 00.jpg into assets/special folder.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

18. Open the myhouse.html again using the web browser.

 

Note: The Floor Plan icon at the top left is visible now.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

19. Click the Floor Plan icon on the top left of the flash file.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: This will open the floor plan image with the 3 nodes. You can navigate to respective panoramas using the nodes.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: The floor plan icon will change to white-filled icon as shown below.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

Note: Exterior Panorama with 2 nodes which will direct you to Corridor Panorama and Living Room Panorama when clicked.

 

Artlantis Creating Multi-Nodes Panoramas in Flash Format | Cemtech Training Center Puchong, Selangor Melaka

 

That's all for Part I of this tutorial. In part II, i will detail out how to move the Panorama to Web (via DropBox) and share to public.

 

At the meantime, you can view the panorama at dropbox

 

I will also write another tutorial to make this Panorama viewable on ios devices. Stay tuned. Don't forget to support us by clicking Like button. Thanks.

 

Written by Liang Ee Hang | LinkedIn
This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
Artlantis Studio Trainer
Pusat Latihan Komputer Cempaka
Cempaka Technology Sdn Bhd www.cemtech.biz