1) You should prepare the depth map of the source image. The depth map has the same size as the source image. To indicate the depth of every part of the source image we will use various shades of gray. White is closest, black is farthest. You can see an example of the source image and depth map below.

3D Photo converts the image and depth map to the following 3D object:

You need Adobe Flash Player v.10 or above.

Install Adobe Flash player

2) You should embed 3D Photo into a web page. There are 2 ways:

2a) The simplest way to embed 3D Photo into a web page is to use the tags OBJECT and EMBED (I use a deprecated version with the tag EMBED instead of recommended modern OBJECT because it is more compatible with old style CMSs. For example Live Journal does not recognize the modern OBJECT edition). Insert these lines in an appropriate place within a web page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400">
    <param name="movie" value="movie_name.swf"/>
	<param name="bgcolor" value=#FFFFFF/>
	<param name="flashvars" value="movie_vars"/>

	<embed src="movie_name.swf" bgcolor=#FFFFFF width="550" height="400"
		flashvars="movie_vars"
		type="application/x-shockwave-flash" />

</object>

Edit the attributes of the OBJECT and EMBED tags.

  • Change the width and height parameters to appropriate values.
  • Change all instances of "movie_name.swf" where it appears in the OBJECT and EMBED tags above to the actual path or URL of your 3D Photo swf file.
  • Change all instances of "movie_vars" where it appears in the OBJECT and EMBED tags above to the string "img=image_file_url&map=map_file_url&blur=16&off=200&depth=200". You should use the actual URL of your image instead of image_file_url and the actual URL of your depth map instead of map_file_url. Play with the blur value to decrease the distortion at the boundary of objects. Play with the depth value to adjust "a sense of depth". The off variable is reserved (so please don't change 200 to other value).

2b) Embed 3D Photo into a web page using the swfobject library. You can use the following template.

<html>
  <head>
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
      var flashvars = {
        map:"map_file_url",
        img:"image_file_url",
        blur:"16",
        off:"200",
        depth:"200"
      };
      swfobject.embedSWF("movie_name.swf", "swfWrapperId", "640", "480", "10.0.0",
        "expressInstall.swf", flashvars);
    </script>

  </head>
  
  <body>
    <div id="swfWrapperId">
      <p>You need Adobe Flash Player v.10 or above.</p>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img 
        src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
        alt="Install Adobe Flash player" /></a>
      </p>
    </div>
  </body>
</html>	

Please pay attention to the line: swfobject.embedSWF("movie_name.swf", "swfWrapperId", "640", "480", "10.0.0", "expressInstall.swf", flashvars);
Change movie_name.swf to the actual path or URL of your 3D Photo swf file.
Change 640 and 480 to the actual values of width and height.
Be careful: swfWrapperId specifies the id of the HTML element you would like to have replaced by 3D Photo movie.
Change image_file_url and map_file_url to the actual URL of your image and depth map respectively.
Play with the blur value to decrease the distortion at the boundary of objects.
Play with the depth value to adjust "a sense of depth". The off variable is reserved (so please don't change 200 to other value).

You can download this demo to see examples of embedding 3D Photo into a web page.