xml image rotator slideshow red

Freebie: XML Flash Image rotator / Slideshow

November 3, 2011 by PremiumCoding - No Comments

Today’s freebie is a fully functional flash image rotator / slideshow with four skins. Images are added and edited via XML file. You can add all the titles and content text via HTML file. Slideshow is available in four color variations (red, orange, green and blue). Buttons used are vector shapes, source file (ai) is included in the files for download so you can easily change the colors.

Download XML Flash Image rotator / Slideshow (873)

LIVE DEMO

MAIN FEATURES

  • Full XML driven
  • Resizable
  • 2D & 3D transitions
  • changeable animation easings
  • vector buttons (different color variations)
  • load images and swf files

PARAMETERS THAT CAN BE CHANGED VIA XML

  • external URL for each image
  • visibility of text
  • width and height of content text holder
  • how external URL opens (in the same or new window)
  • background color of content text holder
  • whether image is clickable or not

SCREENSHOTS

Red Version

xml image rotator slideshow red

Orange Version

xml image rotator slideshow orange

Green Version

xml image rotator slideshow green

QUICK GUIDE

Some of the parameters that can be changed in XML file are described below:

BASIC SETTINGS

  • transition type (field transitionType). You can choose between 6 different types of 2D transitions (“blur”, “alpha”, “blurx”, “blury”, “x”, “y”).
  • you can get unlimited variations of 3D rotations via fields transitionX, transitionY and transitionZ. Value 1 equals one full circle (360 degrees). If you wish for rotations to be smooth on image change you have to be careful to set the angle in a manner for the change to occur when image is not visible (90 degrees, 270,…). So if you set transitionX to 0.25 (90 degrees) and transitionY and Z to 0, image transition will occur when image is at an angle that is not visible.
  • you can set the depth of where image will move along z axis along with transition (field zDepth). Higher value means image will be further away along z axis when transition occurs.
  • size of forward, backward and pause buttons (fields buttonW and buttonH ). Here you set size of buttons in numeric values.
  • blur value (when you choose blur transition) – field transitionBlurValue. Increase value to increase blur effect.
  • exact position of banner on stage (fields positionX and positionY). By changing these values you can move banner up, down, left and right to achieve exact position you would like.

SETTINGS FOR EACH SLIDE

  • time of tween and time banner is shown (fields tweentime, tweentimeIn, speed). First two variables determine the time of tween that hides the banner and time of tween that shows the banner. Speed represents the time banner is shown.
  • whether image is clickable or not (field imageClickable). Set value to “true” if you want images to be clickable or to “false” if you want for images to be non clickable.
  • how URL is opened (in new or same window), field openIn. Set to _self or _new for URL to be open like you would like.
  • easing of each transition (fields easingIn and easingOut). EasingIn represents the easing of transition that hides the banner, easingOut represents the easing of transition that shows the banner.
  • easing of each transition for button appearence (fields easingInForButtons and easingOutForButtons). EasingInForButtons represents the easing of transition that hides the buttons, easingOutForButtons represents the easing of transition that shows the buttons.
  • visibility of text holder for each slide (field textHolderVisible). Set alpha from 0 to 1, to set to be visible, invisible, or transparent.
  • color of text holder for each slide (field textHolderColor). Set color in hexadecimal format to set background color of text holder
  • size of text holder for each slide (fields textHolderWidth, textHolderHeight). Here you can set size in pixels for each text holder of each slide.
  • alpha and position of text holder for each slide (fields textHolderAlpha, textHolderPositionX, textHolderPositionY )

EASINGS

Easings that you can set for image transitions and buttons animation are:

  • Elastic.easeOut
  • Back.easeOut
  • Bounce.easeOut
  • Circ.easeOut
  • Cubic.easeOut
  • Expo.easeOut
  • Quad.easeOut
  • Quint.easeOut
  • Linear.easeNone
You can add your own easings by adding following code in source file at line 480:
 if (easingOut == “Linear.easeNone”)
typeOfEasingOut = Linear.easeNone;
Be sure to change  “Linear.easeNone” with your own easing.

Flash Image Rotator / Slideshow Logo License

All resources made available under category Freebies on PremiumCoding are free for use in both personal and commercial projects.

You may freely use resources, without restriction, in software programs, web templates and other materials intended for sale or distribution. No attribution or backlinks are required, but it’s always nice to be credited. Any links or nice words are always appreciated.

Download XML Flash Image rotator / Slideshow (873)