Creating Slide Shows using SWF Quicker's Wizard

Sothink's SWF Quicker is the leading Flash animation editor. It supports editing of existing Flash SWF files and creation of professional graphic animations from scratch. It is popular as a powerful yet low cost Flash Animation Solution.

I purchased SWF Quicker to create slide shows for the home page of the Lost Dutchman Marathon and Heidi's Library Site.  Several projects later, I am very happy with the results.  (examples: Lost  Dutchman Marathon, Grand View Library, and Foothills Community Foundation)

For someone without an extensive background in flash animation, the interface challenging at times. This guide documents step by step the process of creating Quicker Slide Shows to help you become productive faster.

The slide show template wizard incorporated in SWF Quicker is very capable, it will produce professional results to most specifications.  The next section of this document steps through creation of a slide show with the wizard.

More advanced requirements such as using hyperlinks, custom transitions and on slide animations require building your slide show as a movie rather than using the template.  Instructions for creating a slide show as a movie within SWF Quicker, the process is described below. 

Creating a Flash Slide Show with SWF Quicker Using The Wizard

One major caveat, the core product of the wizard is an action script that drives the flash slide show.  There is little graphical editing available within SWF Quicker its self once the wizard is complete.  Do not spend hours, as I have, trying to edit your slide show once it is created using the template. The editing options are limited to adjusting controls and making direct modifications to the action script... once you find it! 

One very nice feature is that the slides are stored separately and not contained in the flash animation .swf file.   Slide show content can be updated by replacing pictures without the need to rebuild the slide show itself.

Video Demonstration - Creating SWF Quicker Slide Show using the Template Wizard

Detailed Description and Notes of the Steps Involved

Key point: the primary product of the Sothink's SQF Quicker Slide Show Wizard is an action script file. 

1. Decide on the slide show display size.
2. Prepare your slides ahead of time.  Quicker does a nice job of scaling images to fit within your show.  Just the same, you will get better results if your slides are all the same size or fit within the display with either height or width equal to the slide show size.  (Microsoft Office Picture Manager is a nice tool for quickly resizing and cropping pictures.)  If your slides names sort sequentially it will save the need to order them correctly when you  run the Wizard, and it is likely you will run the wizard repeatedly.
   

   Prepared Slides

3. Follow the Wizard, it's self explanatory.
   • Panel 1: Select and order slides, click effects and set the desired transition effects.  Check the box to apply one effect to all slides
     

     Select, Order, Set Transitions

     

     Setting Transitions

   • Panel 2: I like 4 seconds per slide, so I set the interval to 4000. Disable show next a photo after mouse and leave the rest for an automatic looping slide show.
     

     Slide Show Parameters

   • Panel 3:  You must include a loading graphic, pick your favorite.  I prefer to not have one, so I move it later.
     

     Select Loading Graphic

   • Panel 4:  I disable navigation, or select the most appropriate one for you.  You can edit the controls in SWF Quicker once the wizard completes.
     

     Navigation Disabled

   • Panel 5: Select the directory for your slide show.  This is the time to go back and double check your wizard entries, once you click next the slide show is published and the wizard must be rerun for corrections.
     

     Publish Slide Show

   • Panel 6: As the dialog states: "All the required files were saved to {your directory}. You can open SlideShow.swf in this folder to view the SlideShow now. If you want to publish the SlideShow to a Web server, please remember to upload all the files in the folder."
     

     Finished!

4. If you do not want the image loading graphic, click it here and drag it off the view port.  If you figure out how to delete it altogether, please let me know.
5. You can edit the movie properties to change the background color.  The interval setting does not affect overall slide show timing, changing the width and height does not rescale the slides.
   

   Properties and Moving Graphic

6. To locate the slide action script, click the movie explorer tab in the lower right panel, expand index, action layer 2, and highlight "actions for frame 1."  The action script can be edited in the bottom panel under the action tab.  Picture information and the slide duration are easy to find.
   

   Action Script

7. Publish the file again using the file, publish, export flash movie option.  For embedding into a web page use the options provided for the correct html code.
   

   Publishing from Quicker

8. When embedding flash video .swf files, setting the window mode parameter to transparent prevents bleed through to other windows, setting the z-index to less than 0 will allow pop-up menus to display over the top of the slide show if for example you have a menu system requirement to pop over the video.  The filename is used four times in the embedded code, I use the full relative path in each to keep it consistent and simple.
9. Since each slide is a separate file, you can change or update them without editing or recreating the slide show.

Sample Code for Embedding Slide Shows

Sample code for embedding flash into a web page.  Filename references, transparent mode and stacking (z-index) settings are highlighted.

Flash Animation Slide Shows Using SWF Quicker's Graphical User Interface

This section steps through the use of Sothink’s SWF Quicker in order to create a new Flash animation slide show movie.  It demonstrates the use of the Quicker graphical interface for this specific requirement.  While use of the Quicker slide show template is recommended for most projects; this approach provides more flexibility.

Video Demonstration - Creating SWF Quicker Slide Show as a Movie in Quicker

Detailed Description and Screenshots

For this demonstration I have prepared my slides ahead of time.  They are all the same size, 500 x 320 of image area and an additional 40 pixels of on the right side containing the graphic for a custom page turning effect.

1. Launch SWF Quicker and create a new movie.  File | New | New Movie or Ctrrl+N. 
2. In the properties window along the bottom of the display, set the Main Movie properties including height, width and background color.  If the movie properties dialog is not currently available, click on this scene in the upper left and any empty area within the main workspace to select the main movie and display the properties dialog.  Use the default 12 frames per second.
   

   New Movie

3. Import the slides into the library.  File | Import to Library.  The pictures are now available in the library displayed on the lower right.
4. Drag the first slide into the workspace thereby loading it into layer 1.  Use the transform box on the right to exactly position the slide.  For slides the same size as the movie, x and y are each 1/2 the total height and width of the slide.  Because there are "pages" on the right of my slide, I am using a slightly larger x value.
   

   Slide One Added

5. To display this image for a total of 5 seconds which will include a one second transition, go to the timeline for layer 1, right click on the 60th click, select "Convert to Keyframe."  There will now be a white box extending from the start through 60 for layer one.
   Note: Either "Convert to Keyframe" or "Insert Keyframe" will work here.   Insert simultaneously adds the start and finish keyframes where convert just modifies the selected element, be careful when working within an existing timeline.
   

   Slide One with Timeline

6. Each additional slide will have it's own layer.  Repeat the following steps for each slide. 
   • Create a new layer by selecting Insert | Layer or right clicking on a layer and selecting Insert Layer.
   • Drag the picture to the work area. (If the slide won't drag, make sure the red timeline line is over frame 1 with the new layer selected.)
   • Position the slide exactly using the transform dialog.
   • "Insert Frame" 60 frames beyond than the end of the previous slide
   • At the start of the transition to this slide, "Convert to Keyframe" and delete the image from the layer timeline prior to where it is initially displayed.
     

     Adding Slide 2

     

     Convert to Keyframe

     

     Deleting Slide From First, Undisplayed Frame

     

     Finished Adding Second Slide

     

     All Slides Added

7. This is a good time to test, use the little green triangle on the top tool bar to preview your show.  When everything is correct, each slide will display properly positioned for 5 seconds. 
8. Do not continue until this basic slide show is working.  Save the project at this point as well.  More times than I care to admit, I have created such a mess that the simplest solution is to return to this point and continue from here.
9. Adding Links:  This project required each slide to include a link to a web page. It saves steps to add them before building transitions while there is only one display frame per slide.  Links are contained in the button symbol.  Select layers one at a time in the display frame then:
   • Right click the image within the work space, select Convert to Symbol, choose Button.
   • Select the Action panel along the bottom, use the first dropdown, mouse/keyboard events and select release.
   • Within the release function added, insert the link using the getURL function:  getURL("destination.html","_self");
   • Check the syntax using the green checkbox in the action dialog.
10. If links were added, this is another good place to test and save.
11. Transitions are generated by setting an initial state in a keyframe, setting the finished state in the next keyframe and using a motion tween to create the smooth effect.
12. Fade Out and In Transitions:  For a one second fade out...
    • Select the timeline position 12 frames before the end of the slide (layer) display line. 
    • Right mouse click, "Convert to Keyframe."
    • Select the last frame of the timeline for this layer.  "Convert to Keyframe", select the frame again to enable the transform dialog on the right.
    • In the transform dialog, select Color transform, Alpha (from dropdown) and 20%.
    • Click the layer timeline between the two keyframes, right mouse click and "Create Motion Tween."  There should now be a solid black arrow within that section of the timeline.
    • For a fade in, reverse the process at the start of the display timeline:  Convert to keyframe 12 ticks from the start, set color alpha to 20% at the start, and "Create Motion Tween."
      

      Fade Effect Completed

13. Page Turn  Transition
    • Select the timeline position 12 frames before the end of the slide (layer) display line. 
    • Right mouse click, "Convert to Keyframe."
    • Select the last frame of the timeline for this layer.  "Convert to Keyframe", select the frame again to enable the transform dialog on the right.
    • Position the slide as it should appear once it is almost completely "turned" off the page by using the transform tool of modifying the transition values.  After experimentation, I chose to use values of x=-10, y=150, width= 20% and vertical skew of -20%.
    • Click the layer timeline between the two keyframes, right mouse click and "Create Motion Tween."  There should now be a solid black arrow within that section of the timeline.
      

      Page Transition Effect Completed

14. Follow this process and build your transitions for each slide.
15. If you will be using a continuous loop, don't forget the transition back to your first slide.  Create a new layer for just a fade in or page turn at the very end.
16. Test, save and publish!

The slide show is now complete!

Sample Code for Embedding Slide Shows

Sample code for embedding flash into a web page.  Filename references, transparent mode and stacking (z-index) settings are highlighted.