XML Flash Slideshow Setup
Your download includes everything you need to create a stand-alone flash slideshow or a slideshow to add to your html pages. You do not need the Flash Authoring Software.
Step1 - Prepare Images
Size your images to the maximum size that you want them to appear in the slideshow. Save your images in JPG format into the images folder. Make sure the JPG's are saved as non-progressive JPG's.
Step 2 - Add Images To XML
Open slideshow.xml using a text or html editor. Avoid using word processing software. This is a simple text file that tells the slideshow which images to use, what are the captions and links for each and in what order they should be displayed. It is also used to customize the way the slideshow looks and behaves. To see the structure click here.
At the top, right after the <slideshow opening tag is a list of attributes that are used to define how the slideshow will look and behave. See chart below for a description of each.
Each image in the slideshow is represented by a <image /> node. Attributes img, link, target, tooltip and caption correspond to the JPG, link, target of link, and the caption that will appear in the slideshow. There is no limit at to the number of images that the slideshow can display. Create a tag for each image you want to display in the slideshow. Here's an example of a properly formatted tag:
Note: If you omit the caption attribute, the caption will not show up. If you omit the link attribute, the image will not be clickable, etc.
Step 3 - Test and Upload
Test the slideshow by loading slideshow.html in the browser. Now upload the following files to your server: slideshow.html, slideshow.swf, slideshow.xml, flashdetect.js, and the images folder. That's it!
Customizing The Slideshow Using XML
Open slideshow.xml using a text or html editor. Each name/value pair represents a setting in the slideshow. The following is a table of descriptions and sample values.
| Attribute with sample value | Description |
| displayTime="5" | Time in seconds each image stays on. |
| transitionSpeed="1.5" | Speed of transitions in seconds |
| transitionType="Wipe" | Type of transition. Possible value include: |
| motionType="Strong" | Type of motion to be applied to transition. Possible values include: "Back" "Bounce" "Elastic" "None" "Regular" "Strong" Strong and Regular are probably the most useful, but there might be circumstances in which you would need to use the others. Play around to get a feel for each. |
| motionEasing="easeOut" | Type of easing to be applied to transitions. Possible values include: "easeIn" "easeOut" "easeInOut" This setting will make transition slow down toward the beginning, end or both. |
| randomize="false" | Setting to true will shuffle the order of images |
| slideshowWidth="435" | Width of slideshow. Set to "auto" to use Stage.width |
| slideshowHeight="300" | Height of slideshow. Set to "auto" to use Stage.height |
| slideshowX="center" | Horizontal position of slideshow. Can be a number or the word "center" |
| slideshowY="0" | Vertical position of slideshow. Can be a number or the word "center" |
| bgColor="FFFFFF" | Background color of slideshow |
| bgOpacity="100" | Background opacity |
| showHideCaption="false" | Set to true to automatically hide captions on roll out and show on roll over. "false" will keep them shown at all times. |
| captionBg="FFFFCC" | Caption background color |
| captionBgOpacity="60" | Caption background opacity |
| captionTextSize="14" | Size of text |
| captionBold="false" | Set to true to make captions bold |
| captionTextColor="666666" | Color of text |
| captionPadding="15" | Padding around captions |
| showNav="true" | Set to false to hide navigation at all times. |
| autoHideNav="true" | Assuming showNav is set to true, setting autoHideNav to true will fade the navigation after the user has rolled off and a short pause has passed |
| navHiddenOpacity="20" | Opacity of nav when autoHidden |
| navX="center" | Horizontal position of nav. Set to a number or "center" |
| navY="200" | Vertical position of nav. Set to a number or "center" |
| btnColor="FFCC00" | Default color of buttons in nav |
| btnHoverColor="ffffff" | Color of buttons when rolled over |
| btnShadowOpacity="70" | Opacity of the shadow of buttons |
| btnGradientOpacity="20" | Opacity of gradient covering buttons |
| btnScale="120" | Scale of buttons from original size |
| btnSpace="10" | Space between buttons |
| navBgColor="333333" | Background color of nav |
| navBgAlpha="95" | Background opacity of nav |
| navCornerRadius="20" | Roundness of nav corners |
| navBorderWidth="2" | Thickness of border around nav |
| navBorderColor="FFFFFF" | Color of border around nav |
| navBorderAlpha="100" | Opacity of border around nav |
| navPadding="15" | Space between buttons and border of nav |
| tooltipSize="11" | Text size of tooltip |
| tooltipColor="ff7f00" | Color of tooltip text |
| tooltipBold="false" | Set to true to make tooltip text bold |
| tooltipFill="FFFFFF" | Background color of tooltip |
| tooltipStrokeColor="000000" | Tooltip border color |
| tooltipFillAlpha="80" | Tooltip background color |
| tooltipStroke="3" | Tooltip border thickness |
| tooltipStrokeAlpha="100" | Tooltip border opacity |
| tooltipCornerRadius="5" | Roundness of tooltip corners |
| loaderWidth="150" | Width of loading bar |
| loaderHeight="5" | Height of loading bar |
| loaderColor="FF0000" | Color of loading bar |
| loaderOpacity="100" | Opacity of loading bar |
| attachCaptionToImage="false" | Set to true will make captions same width as image |
| cropImages="false" | This attribute is no longer used. Leaving it in will not hurt the slideshow. |
| imageScaling="fill" | Controls scaling of images. Accepts the following values: fit - scales image proportionately up or down to fit the slideshow area fill - scales image up or down to proportionately fill slideshow area downFit - scale images down to fit. If images are smaller than slideshow area, they are not scaled up downFill - scale images down to fill. If images are not big enough to fill, they are not scaled up. stretch - stretches imges to fill slideshow area none - no scaling is applied. |
| slideshowMargin="20" | Number of pixels between image and edge of the slideshow |
| showMusicButton="true" | Set to true to display music button in navigation if music is defined |
| music="images/music.mp3" | Location of mp3 music file to be used in slideshow. If not defined, no music will play and no music icon will appear in navigation. |
| musicVolume="100" | Volume of music |
| musicMuted="true" | Set to true to start slideshow with sound off. Users will still be able to turn the sound on if you display the navigation and the sound button. |
| musicLoop="true" | Set to true to loop the music. |
| watermark="logo.swf" | Define an external image to be loaded on top of the slideshow. This can be a logo or a watermark at a set opacity. You can use a jpg image or a .swf flash movie. |
| watermarkX="left" | Horizontal location of watermark. Can be set to: "left", "center", "right" or a number. |
| watermarkY="bottom" | Vertical location of watermark. Can be set to: "top", "middle", "bottom" or a number |
| watermarkOpacity="100" | Opacity of watermark |
| watermarkLink="http://flashnifties.com" | You can link the watermark to a url. Set full url, including http:// |
| watermarkLinkTarget="_blank" | Target of the watermark link. |
| captionsY="abstop" | Vertical placement of captions. Can be set to: "top" - top of image "middle" - middle of slideshow "bottom" - bottom of image "abstop" - top of slideshow "absbottom" - bottom of slideshow |
Play around with the above settings to achieve the desired style for your slideshow.
Using Auto Option
In some cases you just don't want to bother with XML, and would rather drop a bunch of images in a folder and have them appear in the slideshow. Well, you're in luck! Follow the steps below and you won't have to look XML in the face again.
Step 1
You will need to download this file: auto.zip
Step 2
Unzip the file and open auto.php. At the very top set $file_dir to the directory you want the gallery to read from. There are a couple of other options:
$show_titles will allow you to display image titles as captions (without the .jpg)
$omit_chars allows you to set the number of characters to be omitted from the beginning of the image title. So, 01_image_title.jpg will show up as "image_title" in the caption. Useful for sorting.
$link_to_image lets you link each slide to the image directly.
You can also adjust the slideshow settings just as you would in slideshow.xml. Change any of the settings starting with displayTime="3" and ending with pausedAtStart="false". If you made adjustments to your slideshow.xml, you can copy/paste the settings from there.
Step 3
In your slideshow.html change the following line:
so.addVariable("file", "slideshow.xml");
to:
so.addVariable("file", "auto.php");
Step 4
Now you will need to upload everything to a server that supports php (most do). The gallery will not work on your local computer.
This method makes things considerably easier to update, but there are sacrifices. You will not be able to set any custom settings for each slide, such as captions, tooltips, links or transitions.
Using HTML in captions and tooltips
The slideshow allows you to custom style each individual caption and tooltip with html tags. If you do not include any html tags, the default style will be applied, however if you want to use html formatting, you will need to create a font style for the entire caption or tooltip, otherwise it will be defaulted to black 12 point text.
HTML tags must be escaped!
If you do not properly escape the < , > and " characters, the slideshow will not work. The download includes some examples of html formatted text. Here is a handy utility you can use to convert your html code to escaped text that can be used in captions:
Oops!
It looks like you don't have flash player installed. Click here to go to Macromedia download page.
© Copyright 2010 FlashNifties.com | savdesign.com