Purchase
Order with your Credit Card or PayPal account. Once you complete the checkout, your download will start automatically. You will also receive an email with the download link.
Price: $10
download free version Want to try before you buy? Free version has all the functionality, but includes a small link to this site.
What's included?
slideshow.swf - Allows you to set up a customizable flash slideshow without using Flash Authoring Program
slideshow.html - Ready to use slideshow with slideshow.swf embedded and flash detection set up.
flashdetection.js - Detects for flash player 6 or higher
slideshow.xml - Simple xml to add images and customize the slideshow.
XML Flash Slideshow v2.1
Oops!
It looks like you don't have flash player installed. You might want to get that if you plan to use the Flash gallery. Click here to go to Macromedia download page.
Tons of options allow you to create a flash slideshow that is as simple or robust as you need, all customizable through a simple text document.
The slideshow will seamlessly load all the images you define in xml one buy one, and keep them in cache till they are ready to be displayed. No matter how many images you through at it, the slideshow will never slow down.
Features
Fully Customizable - Position, size, colors, opacities, text styles, roundness of corners, transition types, speeds, and just about anything else you can think of is at your control.
No Flash Software Required - Comes complete with a published flash move, ready to create your customized flash slideshow.
Auto Image Sizing - No need to resize images, slideshow resizes the image to the largest allowable size.
Customize Your Transitions - Choose from a wide range of transition types, and customize each one with different tweens types.
Keyboard Control - Browse the images with the LEFT, RIGHT and SPACE keys.
Easily Updateable - Simply upload more images and add them to xml. They will appear in the slideshow automatically!
Unlimited Images -Add as many images as you require without slowing down the slideshow.
Smart Image Loading - Images are loaded one by one, so there are never any hick ups. The current slide will not switch until the next image has fully loaded.
NEW! - Make the slideshow automatically pull all images in a specific folder and don't bother with xml. Read this post.
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" new | 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" new | 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" new | Number of pixels between image and edge of the slideshow |
| showMusicButton="true" new | Set to true to display music button in navigation if music is defined |
| music="images/music.mp3" new | 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" new | Volume of music |
| musicMuted="true" new | 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" new | Set to true to loop the music. |
| watermark="logo.swf" new | 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" new | Horizontal location of watermark. Can be set to: "left", "center", "right" or a number. |
| watermarkY="bottom" new | Vertical location of watermark. Can be set to: "top", "middle", "bottom" or a number |
| watermarkOpacity="100" new | Opacity of waternark |
| watermarkLink="http://flashnifties.com"new | You can link the watermark to a url. Set full url, including http:// |
| watermarkLinkTarget="_blank" new | Target of the watermark link. |
| captionsY="abstop" new | 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 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 2007 FlashNifties.com | savdesign.com