Creating a 3D Gallery Step by Step

The directory "!Samples" contains numerous 3D Gallery examples. Each example is fully configured and can be used as a basis for your own Gallery page.

This tutorial details every step required to build a NEW working 3DGallery sample, explaining each line of code to make the process easy to understand.
Required Files

3dgallerydev.swf
The 3D Gallery as compiled Adobe Flash animation.

3dgallery.xml
The configuration file by which the Flash animation can be controlled.

swfobject.js
A Java Script file which is used for embedding the Flash animation in an HTML page.

getflash.png (optional)
Alternative content. Users without the Flash plugin or with Javascript turned off will see this.
Tutorial
Step 1: Open a new directory "My3DGallery" anywhere on your hard disk.
Step 2: Create a new, empty file "ClickMe.html" in the directory "My3DGallery".
Step 3: Open the folder "Files" in the downloaded toolsets and copy and paste the files 3dgallerydev.swf, 3dgallery.xml, swfobject.js and getflash.png into directory "My3DGallery".
Step 4: Open file "ClickMe.html" with an editor (e. g. Notepad).
Step 5: Copy the following code into file "ClickMe.html":
These are simply the definitions of a standard web page.
Step 6: Copy and paste the following comment into the first line of the web page:
This comment prevents the displaying of "To help protect security ..." in the Internet Explorer when script files are executed on a web page. For more information on this subject, please check in the internet.
Step 7: Copy and paste the following code into the <head> part:
This will include the Java file swfobject.js in the web page. SWFObject is the worldwide standard for embedding Flash files in web pages. For further information on SWFObject, please click here.
Step 8: Create within the <body> part a <div> tag. A <div> tag defines a division/section in a document. This <div> tag is replaced by the Flash content! Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this.

Important! Give this <div> tag a unique ID (e. g. id="flashcontent"). This ID will be used by SWFObject for exchanging the <div> tag against the Flash animation.
Tip:This alternative content will also be picked up by search engines, making it a great tool for creating search-engine-friendly content!
Step 9: In the next step, the Flash animation will be embedded in the web page. Within a <script> tag an instance of SWFObject is being created. This passes on the following values:
- the file path and name to the Gallery swf file (case sensitive!)
- the Gallery name (file name without swf extension)
- the width of the Flash Player
- the height of the Flash Player
- the minimum required Flash Player version (9.0.115.0)
- the hex value of the background color of the Gallery

Via parameters you can pass on further values.
A listing of possible parameters can be found on Adobe.com.
For further information on SWFObject, please click here.
Step 10: Tell SWFObject to write the Gallery animation to the web page by replacing the content inside the specified <div> tag (see step 8):
Step 11: Your web page should now look something like this:
Save and close the file "ClickMe.html".
Step 12: Now copy the images to be displayed in the Gallery into directory "My3DGallery".
Step 13: Then open the configuration file "3dgallery.xml" with an editor (e. g. Notepad).

Hint:
The file "XMLConfigurationFileHelp.htm" contains an exact description of the configuration file.

The lower part of the configuration file contains information on the Gallery images. Each Gallery image must be defined within an <Image> node.
Enter into the first <Image> node the name ("ImagePath") of one of the images which you have copied previously into directory "My3DGallery" (see step 12).
Also allocate a hyperlink ("ImageLink") to the image.
The <Image> node should now look something like this:
Step 14: Delete all other <Image> nodes (if any) in the configuration file.
Here is an example for a complete configuration file:
Step 15:
Save and close file "3dgallery.xml".
Step 16:
Double-click "ClickMe.html". The browser should start automatically and display the Gallery.
Congratulations!
The samples supplied contain further information, tips and tricks!

Hints

If the 3D Gallery is not displayed, please check the entries in the web page and the configuration file. Pay special attention to case-sensitive spelling of names in the Flash animation:
3DGalleryDev.swf = wrong
3dgallerydev.swf = correct

Some editors add whitespaces into the files to be processed. This may possibly cause the Gallery not to be displayed anymore! Use Notepad to ensure that no unwanted whitespaces are entered in the configuration file.

If the links in a Gallery do not work on your local hard disk, this may be due to the Flash security settings. Connections from local Flash animations to the internet must be approved by you explicitly. To do so, open the Flash Settings Manager.
Change to panel "Global Security Settings" (third panel from left) and enter the directory on your local hard disk where the Gallery is stored.

Browsers (particularly IE) cache Flash animations in order to improve performance.
After installing an update (and after every large modification) it is therefore recommended to
empty the browser cache so that the modifications can take.