Component Tutorials  
   
  Flash component tutorials:
 
   
  Flash object tutorials:
 
   
    Flash object: Creation of a Photo Catalog Using XML
 

In this Lesson we will consider in detail the creation of a simple photo catalog using the page flip object.


Step #1

First, select the photos you wish to include into your catalog. The object supports JPEG image file format. If your photos are in another format, first export them to JPEG with any suitable graphic editor. To get the best image quality, ensure your photos are of the same size as the component page. This will avoid distortion and save CPU resources. Photo filenames may include any text, but for the sake of definitiveness we will assume that you have 10 photos and named them photo01.jpg, photo02.jpg - photo10.jpg.

Step #2

Create the FBookLesson directory on your computer and then the images directory therein. Save your photos to the images directory.


Step #3

Move your flash object swf to this directory and name it album.swf.

Step #4

Create HTML-page and save it in FBookLesson directory as lesson.htm. Paste following code into this page and save it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0"
width="640" height="480">
<param name="movie" value="album.swf">
<param name="quality" value="high">
<param name="flashVars" value="xmlConfig=config.xml">
<param name="scale" value="noscale">
<param name="bgcolor" value="#FFFFFF">
 
<embed src="album.swf" width="640" height="
480" quality="high" bgcolor="#FFFFFF" flashvars="
xmlConfig=config.xml" scale="noscale" pluginspage="
http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
></embed>
</object>
</body>
</html>

Step #5

Create xml configuration file. To create it, use any text editor like notepad, create a text file with the following content:

<FlippingBook>
     <width>600</width>
     <height>400</height>

     <firstPage>5</firstPage>
     <scaleContent>true</scaleContent>
     <alwaysOpened> true </alwaysOpened>
     <autoFlip> 50 </autoFlip>
     <flipOnClick> true </flipOnClick>
     <staticShadowsDepth> 1 </staticShadowsDepth>
     <dynamicShadowsDepth> 2 </dynamicShadowsDepth>

     <moveSpeed> 5 </moveSpeed>
     <closeSpeed> 3 </closeSpeed>
     <gotoSpeed> 3 </gotoSpeed>

     <flipSound> </flipSound>
     <pageBack> 0xB4DBF5 </pageBack>

     <loadOnDemand> true </loadOnDemand>
     <cachePages> true </cachePages>
     <cacheSize> 10 </cacheSize>
     <preloaderType> Progress Bar </preloaderType>
     <userPreloaderId></userPreloaderId>

     <pages>
         <page> images/photo01.jpg </page>
         <page> images/photo02.jpg </page>
         <page> images/photo03.jpg </page>
         <page> images/photo04.jpg </page>
         <page> images/photo05.jpg </page>
         <page> images/photo06.jpg </page>
         <page> images/photo07.jpg </page>
         <page> images/photo08.jpg </page>
         <page> images/photo09.jpg </page>
         <page> images/photo10.jpg </page>
     </pages>
</FlippingBook>

and save it to the earlier created FBookLesson directory as config.xml . (Be careful: text editors often add the .txt extension to the files they have been used to create. Parameters description and additional information are available in the Documentation Section. Make sure the target file has exactly the name config.xml. The object is not sensitive to file extension, but the file name should be the same as the value of the External XML Source parameter.


Step #6

Now open your HTML page. Done!