Step Two: Add Pictures

1. Copy the original picture sun.jpg in to directory "original" that's under the directory "material".
    
2. Create thumbnail
   
   Use image editor tool such as Fireworks or Photoshop to change the size of sun.jpg to be 125*125 through the command "Modify ImageSize…". It should be set according to the longest line. If the width is longer than the height, then set the width 125; if the height is longer than the width, then set the height 125. Please pay attention to the Constrain Proportions item, tick it to zoom the picture pre rata so that there won't be any image distortion.
   
   
   
   Save the picture with the file name sun-s.jpg in JPG format and to thumb directory under material directory.
    
3. Change the node in image.xml file
   
   Add new image node in the root node:

   <Image>
       <TiTle  data="Sunset"  />
       <Filename  data="sun.jpg" />
       <Note  data="This is a Sunset Picture" />
       <UploaderName  data="WebMaster" />
       <UploadTime  data="2007.12.12" />
       <Thumb  data="sun-s.jpg" />
   </Image>

   Please pay attention to the file syntax, the picture list doesn't support structure embedding, the following structure is incorrect:

   <Image>
       <Image>
       </Image>
   </Image>

Please refer to the relevant XML document structure data.

Save image.xml file and open show.swf again. Then you can see the new picture.

TIPS: You can modify the file image.xml dymically through the background program PHP or ASP.net to realize the update of image list dynamically. It’s a good idea to generate the image file list automatically according to the image directory file.