In the event you do not find what you are looking for, please e-mail us.
How to manually insert an interactive image (in flash format) in your web page
How to manually insert an interactive image (for HTML5 environment only) in your web page
How to manually insert an interactive image (for Flash + HTML5 environments) in your web page
How to fix a non-functioning fullscreen feature
How to change the size of an interactive image (in flash format) in a web page
How to manually insert an animated GIF in your web page
How to insert an animated GIF in a PowerPoint presentation
Why do I get an error message on my web page and no interactive image?
Why not use the Quicktime VR (QTVR) format?
How to Insert an Interactive Flash Format Image (360° pano or VR object) in a PowerPoint Presentation
In addition to the image file itself, there is one additional file that may be required depending on the options present in the image or project.
The first file is a "flash" file (for example: imagefilename.swf)
and the second one is a "javascript" file that contains display commands (p2q_embed_object.js).
The file names should not be changed, especially if the images contain links to each other!
These external files are referenced in two javascript coding items in the source code of the web page.
The first one goes in the head section, the second at the location where the image should appear in the page:
In the above example, the external javascript file is located in a folder named "scripts" that is located in the same folder as the web page;
if your folder is named differently or located elsewhere, make the appropriate changes here.
If the javascript file is in the same folder as the web page, remove "scripts/" (including the "/").
The second, goes in the body of the page at the spot where you want the image to appear:
In the above example, the image file named "imagefilename.swf" is located in a folder named "images" that is located in the same folder as the web page itself.
If the folder containing the image file is named differently or located elsewhere, make the appropriate changes.
If the image file is in the same folder as the web page, remove "images/" (including the slash: "/").
The above script does more than just place the image on the page.
First, it calls the javascript function placed in the head section of the page.
It identifies the image file ("imagefilename.swf" in this example) and its location in relation to the web page file itself (in this case, a folder named "images").
The script then checks for the presence of Flash Player version 9 or more recent.
Last, it checks to see if javascript is enabled in your browser.
An error message should appear if any of the three conditions above is not met.
HTML5 is a standards-based non-proprietary environment that utilizes javascript and advanced features of the device to display and allow interactivity with the 360° image. At this point in time (nov. 2012), Internet Explorer is not fully compatible with HTML5 and will not correctly display 360° images. Therefore it is not advisable to offer HTML5-only images, unless yout target audience is using an Apple mobile device or a fully HTML5-compatible browser/device combination. HTML5 standards are still evolving and browsers are trying to keep pace. Implementing HTML5-only images should not be attempted by the end-user. Please contact us for more information.
In order to increase the chances that the 360° image will be displayed in any browser and device combination, it may be advisable to upload both "flash" and HTML5 versions. A script in the web page can detect the presence (or absence) of the Flash Player and another script can force the browser to use one technology over the other by default (if the browser and the device can handle both). Reference notes (dated nov. 2012): 1) Flash technology offers more options than HTML5; 2) Flash is not compatible to Apple Computer's mobile devices (iPad, iPhone and iPodtouch); 3) Android devices will eventually cease supporting Flash as Adobe has announced that it will no longer support flash for mobile devices. Flash and HTML5 technologies are very different and require advanced knowledge and skills. Implementing both technologies in the same web page should not be attempted by the end-user. Please contact us for more information.
This may happen if you use your own script or a script generated by your software instead of the one suggest on this page (or the one originally supplied along with your project files). The fullscreen feature is hard-coded in the ".swf" file but it has to be enabled in a script that is part of the source code of the web page. If the full-screen feature is not working, the parameter "allowfullscreen" is probably missing in the script; it should go in the same line that specifies the size of the flash animation window. Depending on the way your script is written, it might look like: <param name="AllowFullScreen" value="true"/>. Hint: look at the suggested script on this page for another way to include this parameter.
It is amazingly simple to change the size of the image as it appears in your web page.
The apparent size of the image is indicated in the javascript code within the source code of the web page (not in the flash file).
Note: changing these settings will not change the download time, nor the image file itself.
Look for the line that looks like this:
The first number is the width and the second number is the height of the area of the webpage (a 700 and 400 pixels window in this example)
where the image will be seen.
The actual image may be much larger however; it has to be, to allow zooming into the image without bluring.
These numbers do not affect the image itself except to make its apparent on-screen size bigger;
if you change the aspect ratio (height/width porportions), the image will keep its proportions (no distorsion) and fill the new window size.
Note: if you augment the window size, the image may look "softer" than previously; if you reduce the window size,
the image may look a bit sharper.
If the image looks too soft, the only remedy is to create a new image at a higher resolution (and bigger file size) and replace the original image.
The GIF format (animated or not) has been around since the begining of the Internet.
A simple img tag is all that is required to insert such a graphic or image in a webpage.
Here is a simple example of coding:
The above coding assumes the file is located in a folder called "images" and this folder is itself located in the same folder as the webpage where the image will appear.
The width, height and alt attributes are optional but highly recommended.
You must use the actual size of the image (width and height measured in pixels), otherwise the on-screen visual quality will suffer or the image may be distorted.
Resolution, as measured in "dpi", is irrelevant; web browsers do not care about this.
The alt attribute is used to provide information to the visitor, in case the file is not found or the browser is set not to show images.
Use the insert function, as with any image you want to insert into a page. The animation will only play in the presentation mode, it will not play not in the edit mode. Be aware that PowerPoint and recent versions of Outlook use the image's "document size" (measured in inches, not pixels). Web browsers use the actual number of pixels in the image to determine the size of the on-screen image. Therefore, the apparent image size may be different between a PowerPoint presentation (or an HTML-formated e-mail in Outlook) and a web page. Nice going Microsoft! Not!
Displaying multimedia content on a web page often requires the use of sophisticated coding that depends on specific instructions and external files. Should anything not be in perfect or near perfect order, an error message will usually pop-up to indicate there is a problem. Review your html or javascript coding and double check that all external files are present and in the correct location in relation to the web page itself in the website folder structure.
Although Apple Computer Inc. created the original VR (virtual reality) technology and the QTVR format, it has fallen out of favour with panoramic photographers.
Recent versions (2008-2010) Quicktime could not display VR images in the more and more popular 64-bit version of Windows operating systems (XP, Vista and 7).
Even the Mac OS version of Quicktime (version X), seemed incompatible with QTVR images! These problems have apparently been fixed in version Quicktime version 7.6.6.
Admittedly, there is an alternative to play Quicktime VR images but it requires the download of the
DevalVR plug-in.
In the case of a Macintosh computer, it is possible to run Quicktime 7 alongside Quicktime X, in order to maintain compatility with QTVR images.
Of course, this may change at any time.
We have decided to use Adobe Flash technology, as it is currently installed on nearly all computers connected to the Internet.
Flash provides the same image quality and offers many options not available with Quicktime.
Currently, flash works fine in all major web browsers; Adobe Systems Inc. is working on a version that will also work on true 64-bit browsers.
This is a very minor inconvenience as very few people use a true 64-bit browser even if their computer's operating system is 64-bit.
While it is possible to insert an interactive image in a PowerPoint presentation, it is a bit complicated... Here is the recipe:
These instructions apply to PowerPoint 2007 on a Windows PC.
1. Make sure you have the Flash Player on your computer (it's probably already there!). If you can see the interactive images on this web site, you're OK.
2. Create a new folder to contain your projet (if not done already) and put the interactive image file there.
3. Open PowerPoint 2007 on a Windows PC, save your presentation in the project's folder (if not done already).
4. In PowerPoint's Normal (EDIT) view, display the slide on which you want to play the animation.
5. Click the Microsoft Office Button at the top left of the window , and then click PowerPoint Options.
6. Click Popular, and then under Top options for working with PowerPoint, select the Show Developer Tab in the Ribbon check box, and then click OK.
7. On the Developer tab, in the Controls group, click More Controls.
8. In the list of controls, click Shockwave Flash Object, click OK.
9. Click and drag on the slide to draw a window for the image. You can resize it later by dragging the sizing handles.
10. Right-click the rectangle (the Shockwave Flash Object), and then click Properties.
11. On the Alphabetic tab, click the Movie property.
12. In the Value column (the blank cell next to Movie), type the name of the file including the .swf file extension.
Optionally, you could include the full path to the file (C:\Users\username\documents\ ...\imagefilename.swf) or a web URL address for the file (http://www.mydomain.com/files/imagefilename.swf).
13. To play the file automatically when the slide is displayed, set the Playing property to True; now close the Properties dialogue box.
14. To test the interactive image, run the presentation in presentation mode.
15. Test your presentation *more than once* on at least one other computer (especially if it will eventually be presented on a different computer).
Remember to copy the flash file along with your PowerPoint presentation. Do not rename the flash file, nor move it to a different location relative to the presentation.
Note 1: an active-X control is required for this to work, unfortunately, this technology does not work on a Macintosh computer!
Note 2: the flash-format image will always be in front of everything else; you will not be able to put text or graphics on top (in front) of the image.
However, you may be able to import a Quicktime version (file extension: .MOV) of the image into Powerpoint for Mac; contact us if you need a Quicktime VR version of your image.
An alternative to inserting the interactive image directly in PowerPoint is to place a link to a web page.
This web page can be on the Internet or in the same folder as the presentation.
When you click on the link, the web page will appear in a new window (your web browser) and when you close that window, your PowerPoint presentation will be waiting.
Test this *more than once* to make sure it works as desired!
Note: there probably are other ways to obtain the same result... If the above does not work for you, Google may be your best friend!