![]() Creating a 3D Gallery V2 - Step by Step TutorialThe 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 3D Gallery, explaining each line of code to make the process easy to understand. |
Required Files 3dgalleryv2.swf The 3D Gallery as compiled Adobe Flash animation. 3dgalleryv2.xml The configuration file by which the Flash animation can be controlled. swfobject.js (version 1.5) A JavaScript 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 3dgalleryv2.swf, 3dgalleryv2.xml, swfobject.js and getflash.png into directory "My3DGallery". |
Step 4: Open file "ClickMe.html" with an editor. Windows: e.g. Notepad (c:\windows\notepad.exe) |
Step 5: Copy and paste the following comment into the first line of the file: 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 6: Copy the following code into file "ClickMe.html". These are simply the definitions of a standard web page: The code <script type="text/javascript" src="swfobject.js"></script> will include the JavaScript file swfobject.js (version 1.5) 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 7: 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 8: 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 9: Now pass the name/path of the configuration file via the parameter "flashvars". Make sure that the name is preceded by the prefix "configfile=".: |
Step 10: Tell SWFObject to write the Gallery animation to the web page by replacing the content inside the specified <div> tag (see step 7): |
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 "3dgalleryv2.xml" with an editor. Windows: e.g. Notepad (C:\windows\notepad.exe). 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 child node <ImagePath> the name of one of the images which you have copied previously into directory "My3DGallery" (see step 12). Also allocate a tooltip <ToolTip> 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 "3dgalleryv2.xml". |
Step 16: Double-click "ClickMe.html". The browser should start automatically and display the Gallery (with one image). Congratulations! |
The samples supplied contains further information, tips and tricks! Click here for MORE TUTORIALS 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: GalleryV2.swf = wrong 3dgalleryv2.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 do not work when accessing this sample from your local hard disk, a Flash security setting may be the reason, because connections from local Flash animations to the Internet must be approved by you explicitly. To remedy this issue, open the Flash Player Settings Manager: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html and choose the "Global Security Settings Panel", "Edit Locations", then enter the local disk directory where the animation is stored. Important! In the case where the animation file, the configuration file and/or the images are stored in other domains / on different servers, please read the tutorial "Access to Resources in Other Domains". 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. |