graphic design | parkland college

Graphic Design Exercises

Integrated: Flash Slide Shows

 

Objective

 

To learn to web site production techniques by example. To learn various techniques for generating easy-to-manage slide shows using Flash technology by recreating these web pages:

 

Discussion

 

Photoshop has a variety of web galleries that can be generated. In this exercise, we'll generate a Flash-based slide show from Photoshop and then modify it to our needs. Updating the slide show is as simple as editing the XML file.

In this sample web page, the live area of the slide show images are 500x410 px. To control the position of the images, each slide has been prepped in Photoshop to be exactly the same dimension. In addition, a 20px black box has been added to the bottom of all images to hide the automatically generated captions.

Dreamweaver also offers a simple Flash image viewer (see help menu for more info). Another approach is to download existing XML slide shows and modify them to your needs. Adobe offers a free version. SimpleViewer is another. Others can be googled by searching for "flash jpeg slideshow."

 

Procedure

 

generating the Flash slide show from Photoshop

  1. download starter files, move files to "projects_html"
  2. examine "gallery_prep" folder: note dimensions
  3. launch Photoshop
  4. file > automate > web photo gallery:
    style=flash gallery 1
    browse for folder "gallery_prep"
    destination = new folder "slides"
  5. recommended options:
    general = .html
    banner = blank (space)
    large images = height 430, filename none, quality high
    thumbnails = small, title none
    custom colors = bg black, others gray

embedding the slide show in Dreamweaver

  1. RMB on "slides" folder: new file "index2.html"
  2. insert > media > flash: "gallery.swf"; scale to 550x550
  3. move "Scripts" folder into "slides" folder
  4. window > CSS: add <body> rule (margins=0), bg=black; save, close
  5. open "contact.html", save as "portfolio.html"
  6. select <div#col3>, delete
  7. select <div#col2>, change id=portfolio
  8. select <div#text>, delete
  9. insert > html > frames > iframe
  10. edit code: <iframe src ="slides/index2.html" scrolling="no" height="550" width="550" frameborder="0" >
  11. modify menu
  12. save, file > preview in browser (opt+F12)

tweaking the slide show

  1. edit "galleryconfig.xml":
    main image border=0
    display info toggle button=false
  2. edit "photos.xlm":
    text = "#000000"
    banner = "#000000"
  3. publish the updated site as a link from your personal projects page for grading

optional: alternative approach #1 (simple XML flash slide show)

  1. examine files in "slides2" folder
  2. examine image dimensions in "500x480" folder
  3. open "slideshow.fla" in flash (note movie dimension)
  4. edit symbol "grey area" (note dimensions of shape)
  5. duplicate "portfolio.html", rename "portfolio2.html"
  6. modify iframe:
    <iframe src ="slides2/index.html" scrolling="no" height="550" width="680" frameborder="0" >
  7. select <div#portfolio>, change id=portfolio2
  8. save, file > preview in browser (opt+F12)
  9. open "slides.xml": examine structure

optional: alternative approach #2 (SimpleViewer flash slide show)

  1. examine files in "slides3" folder
  2. download SimpleViewer source files; examine files
  3. copy HTML, SWF, XML, JS files into "slides3" folder
  4. duplicate "portfolio.html", rename "portfolio3.html"
  5. modify iframe:
    <iframe src ="slides3/index.html" scrolling="no" height="590" width="660" frameborder="0" >
  6. edit "gallery.xml": add filenames, remove captions; change title=""
    frameWidth="0" stagePadding="0" navPadding="20" thumbnailColumns="2" thumbnailRows="6" navPosition="right"
  7. edit "index.html": change bg color=#000000 (css+script)
  8. preview "portfolio3.html" in browser (opt+F12)

 

 

BACK TO TOP

Version 1.0 • Last updated: 7/11/09 • Webmaster: Paul Young