InDebug.com

  • Increase font size
  • Default font size
  • Decrease font size
Home ActionScript VR360 S1

VR360 S1

ActionScript

The VR360 S1 (built with Adobe's Flash) enables you to display photos with 360 degree fluid transition. It  supports XML, RSS, PHP or ASP playlists with JPG, GIF and PNG images, a wide range  of flashvars (variables) for tweaking both behavior and appearance.

 

 

Features

No extra plugin needed

The 3D rotate tool is based on AdobeTM FlashTM plugin, which is widely spread - the user is not prompted to install any additional plugin.

Easy implementation

The images are stored as external jpg files. Just copy them to the images folder and customize your presentation editing an xml file.

Full features list

  • Flash based - no extra plugin needed
  • Rotation in 360°
  • Limit rotation to a custom angle range (e.g. for a faucet)
  • Rotation around a vertical or horizontal axis
  • Custom preloader/branding image
  • Option for not to load the images until start button is pressed
  • Zoom & Pan of images
  • Drag and Drop
  • Custom speed of rotation
  • Custom speed of rotation while dragging
  • Reverse drag

Installation

This section details a step-by-step process of how to install the VR360 S1 onto your page. The download ZIP contains all you need to get started.

Step 1: Transfer the vr360.swf from the ZIP to your website. (Make sure that you’ve also uploaded all photos you want to show onto your site.)

Step 2: Edit the test.html file so that it contains the image URL of your image. This can be done by using a simple text editor.

Step 3: Embed the VR360 S1 in your HTML page with the following lines of code. (Note: If you place the files in different directories, be sure to set the references in this embed code accordingly.)

 

<embed 
  src="/vr360.swf" 
  width="670" 
  height="460"
  allowscriptaccess="always" 
  allowfullscreen="true" 
  flashvars="file=playlist.xml" 
/>

Flashvars

Flashvars are variables you can insert into your HTML code to control both behavior and appearance of the VR360 AT3. With the swfobject embed method, you add them with the addVariable() function and with the embed tag method they are inside the flashvarsattribute, stacked with an & symbol.

Note that you must urlencode the three glyphs ? = & inside flashvars, because of the way these flashvars are presented to the code. The urlencoded values for these symbols are listed here:

  • ? → %3F
  • = → %3D
  • & → %26

Basic

  • height : Sets the overall height of the VR360 S1.
  • width : Sets the overall width of the rotator.

Input / Output

  • nums : Number of images for each folder (max number of buttons: 12, max number of images for each folder: unlimited)
  • ws : Images width
  • gt;hs : Images height
  • a_purity/images/bullet.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; line-height: 21px; background-position: 18px 8px;">logo : Url of logo (png, jpg, gif, bmp)
  • spinspeed : 50 (milliseconds) (default)

Appearance

  • backcolor (0x000000): Backgroundcolor of the controls, in HEX format.
  • frontcolor (0x000000): Texts & buttons color of the controls, in HEX format.
  • logo (undefined): Set this to an image that can be put as a watermark logo in the bottom right corner of the display. Transparent PNG files give the best results (example).
  • overstretch (false): Sets how to stretch images to make them fit the display. The default stretches to fit the display. Set this totrue to stretch them proportionally to fill the display, fit to stretch them disproportionally and none to keep original dimensions.
  • showicons (true): Set this to false to hide the activity icon and play button in the middle of the display.
  • usefullscreen (true): Set this to false to hide the fullscreen button and disable fullscreen.