![]() Creating a 3D Cube Step by StepThe directory "!Samples" contains numerous 3D Cube examples. Each example is fully configured and can be used as a basis for your own Cube page.This tutorial details every step required to build a NEW working 3DCube sample, explaining each line of code to make the process easy to understand. |
Required Files 3dcubedev.swf The 3D Cube as compiled Adobe Flash animation. 3dcube.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 "My3DCube" anywhere on your hard disk. |
Step 2: Create a new, empty file "ClickMe.html" in the directory "My3DCube". |
Step 3: Open the folder "Files" in the downloaded toolsets and copy and paste the files 3dcubedev.swf, 3dcube.xml, swfobject.js and getflash.png into directory "My3DCube". |
Step 4: Open file "ClickMe.html" with an editor (e. g. Notepad). |
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 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 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 Cube swf file (case sensitive!) - the Cube 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 Cube Via parameters you can pass on further values. A listing of possible parameters can be found on Adobe.com. |
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 Cube into directory "My3DCube". |
Step 13: Then open the configuration file "3dcube.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 Cube images. Each Cube 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 "My3DCube" (see step 11). 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 "3dcube.xml". |
Step 16: Double-click "ClickMe.html". The browser should start automatically and display the Cube (with one image). Congratulations! |
The samples supplied contain further information, tips and tricks! Hints If the 3D Cube 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: 3DCubeDev.swf = wrong 3dcubedev.swf = correct Some editors add whitespaces into the files to be processed. This may possibly cause the Cube not to be displayed anymore! Use Notepad to ensure that no unwanted whitespaces are entered in the configuration file. If the links in a Cube 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 Cube 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. |