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:

• Simple Flash slide show using XML
• Advanced Flash slide show using XML
• Flash slide show using SimpleViewer

Discussion

Updating and editing portfolio slide shows is time consuming. There are many approaches to making this process more efficient. One of them is making use of Flash technology.

In this approach, typically a visual layout is created in Flash and action script is written to run a slide show. The published SWF file then links to an external XML file which stores the data. The data will usually refer to a list of images and the sequence that they are to be loaded. To updating the slide show, only the XML data file needs to be changed.

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. Senocular offers a good one. SimpleViewer is another approach. Others can be googled by searching for "flash jpeg slideshow."

Procedure

prepping the Flash slide show

1. download starter files, move files to "html" folder
2. examine "slides1" folder: note image dimensions
3. examine "slides.xml" in a text editor
4. open "slideshow.fla" in flash (note movie dimension)
5. examine layers and contents
6. edit symbol "grey area" (note dimensions of grey shape)
7. file > publish setttings (html & swf; version=6); publish
8. preview "slideshow.html" in a browser

embedding the slide show in Dreamweaver

1. open "slides1/slideshow.html", save as "index.html"
2. modify > page properties: margins=0
3. save, close
4. open "contact.html", save as "portfolio.html"
5. select <div#col3>, delete
6. select <div#col2>, change id=portfolio2
7. select <div#text>, delete
8. insert > html > frames > iframe
9. edit code: <iframe src ="slides1/index.html" scrolling="no" width="680" height="480" frameborder="0" >
10. modify menu
11. save, file > preview in browser (opt+F12)
12. publish the updated site as a link from your personal process page for grading

optional: alternative slideshow #1 (advanced XML flash slide show)

1. examine "slides2" folder: note image dimensions
2. download source files from www.senocular.com
3. move files into "slides2" folder; examine downloaded files
4. open "xmlportfoliowithimageandtext.fla" in flash, save as "slideshow2.fla"
5. examine layers and contents
6. modify > document: 680x550, bg=black
7. delete dynamic text, grouped objects
8. double-click "image placeholder" symbol: shape=500x430, fill=black, delete stroke (important: do NOT scale symbol)
9. double-click "menu" symbol: shape=680x65, fill=black, delete stroke
10. scene 1: adjust layout, center symbols
11. edit actions:
    • line 104: currentThumb._x = child * 58;
    • line 139: currentThumb.onRollOut = currentThumb.onDragOut = function()
    • line 166: portfolioInfo.load(baseurl + "slides.xml");
12. test movie (cmd+RETURN)
13. double-click "image placeholder" symbol: new layer "first image"
14. file > import to stage: "01.jpg", align, center
15. file > publish setttings (html & swf; version=6); publish
16. preview "slideshow2.html" in a browser

embedding alternative slideshow #1 in Dreamweaver

1. open "slides2/slideshow.html", save as "index.html"
2. modify > page properties: margins=0
3. save, close
4. duplicate "portfolio.html", rename "portfolio2.html"
5. modify iframe:
   <iframe src ="slides2/index.html" scrolling="no" width="680" height="550" frameborder="0" >
6. save, file > preview in browser (opt+F12)

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

1. examine files in "slides3" folder
2. download SimpleViewer source files; examine files
3. copy HTML, SWF, XML, files into "slides3" folder
4. duplicate "portfolio.html", rename "portfolio3.html"
5. modify iframe:
   <iframe src ="slides3/index.html" scrolling="no" width="660" height="540" frameborder="0" >
6. edit "gallery.xml": add filenames, remove captions; change:
   title=""
   textColor="000000"
   frameWidth="0"
   thumbPosition="right"
   thumbColumns="2"
   thumbRows="6"
   showOpenButton="false"
   showFullscreenButton="false"
7. edit "index.html": change bg color=#000000 (css+script);
   change line 14: swfobject.embedSWF("simpleviewer.swf", "flashContent", "660", "560", "9.0.124", false, flashvars, params);
8. preview "portfolio3.html" in browser (opt+F12)