The transition between images in a slideshow creates the nice pleasing dynamic effect. Maths lies at the heart of these effects. If you are as old as I am and have driven as much as I have, you will immediately notice the similarity between the transition effect in the slideshow we present below and the billboards you often see as you drive through the many highways. The rotating slices that retire the old advertisement on the billboard and herald the new ones create an urgency to ‘see’ what is coming next before the car goes too ahead and it is too late.
We present a preview here of the Flex slideshow with the Billboard effect where you do not need to worry about missing the next ‘scene’. It works with Flex 3 and Flash Builder 4. A full live preview of this nice Flex Component can be found here.
When it comes to dynamic effects involving time and motion Flash leads Flex. The gap is however closing especially with the new Flashplayer 10 and the new Flex 4 release. For example, take a look at this Dynamic 3D Cylindrical Image Gallery that works from Flex 3 and Flex 4 (Flex 3 usage required Flashplayer 10). The gallery is extremely customizable with options like
Auto Rotate
Rotation speed
Mouse over captions
XML config for thumbs and full size images
And it is all pure Actionscript so it can be used from Flex or Flash. The power of Actionscript components is there extreme reuse in both worlds. Freeing these components from the Flash timeline opens the door to Flex usage.
There are many uses of such 3D Flex Galleries like creating mesmerizing portfolio displays, product visualization images, Slideshows and Galleries. The dynamic and interactive nature of these components and the pleasing effects also make them very popular as a fashion statement for your website.
This Photo Gallery component will work with Flex 4 and Flex 3.4+ versions. It requires Flashplayer 10. You can check out a live preview of the Flex 3D Cylindrical Photo Gallery component here.
Flash has for long been the standard for building slideshows and other dynamic content presentation on the web. Slideshows however have little dynamic content except for the transition from one image to another, and the transition actually is the easy part. Configuring the Slideshow for many possible display options or layouts is the more difficult part. Flex with its CSS strength is arguably, more configurable than Flash, especially from XML. A simple sophisticated function can xmlize the flex CSS, load it at runtime and apply it to the Slideshow. In this example, we will take a look into how Flex can be used to build a Slideshow. For those who prefer buy rather than build, a good Slideshow can be purchased from FlexDownloads.com . The reference content in this article is from Flex downloads and the complete solution can be found there.
Essential ingredients of a Slideshow
1. General Settings
2. Designer transition effects
3. Navigation
4. InfoBox=Title+Description
5. XML configuration of slideshow
Coverflow Slideshow from FlexDownloads.com
1. General Settings
These settings are primarily visibility toggles for title, description, navigation buttons, auto rotate option etc. These can be loaded from an XML file into bindable variables in Flex.
XML elements: <root>
<!-- GENERAL -->
<autoRotate>true</autoRotate> <!-- Automatically rotate images -->
<showNavigation>false</showNavigation> <!-- Show navigation icons -->
<showButtons>true</showButtons> <!-- Button navigation -->
<showPlayPause>true</showPlayPause> <!-- Play/Pause button -->
<showInfoToggle>true</showInfoToggle> <!-- Show/Hide more information -->
<showInfo>true</showInfo> <!-- Show info on startup -->
<showTitle>true</showTitle> <!-- Show/Hide Title text -->
<showDescription>true</showDescription> <!-- Show/Hide Description text -->
<!-- GENERAL -->
</root>
Corresponding Flex variables: //General config
[Bindable] private var _autoRotate:Boolean=false;
[Bindable] private var _showNavigation:Boolean=true;
[Bindable] private var _showButtons:Boolean=true;
[Bindable] private var _showPlayPause:Boolean=true;
[Bindable] private var _showInfo:Boolean=true;
[Bindable] private var _showTitle:Boolean=true;
[Bindable] private var _showDescription:Boolean=true;
Most of the variables are pretty self explanatory. The generic navigation arrows allow you to go to the “next” or “previous” slide. The buttons are less sequential, they allow you to jump to a slide number ‘n’. normally you would have only one of the navigation options turned on, previous/next arrows or navigation buttons. The _showInfo, _showTitle and _showDescription are visibility variables for the info box and its content – title and description.
Slideshow General Settings
2. Transitions
The best source of transitions is efflex.com. You can also use actionscript code from the Flash world. Efflex has many transition effects like coverflow, Grid, Squash, Slide. Pixelate etc. A timer can be used to control image transition delays. The transition effect itself encapsulates the duration of the transition. The transitions themselves are rather easy to use ad usually have vey few parameters. Two parameters are common across all transitions – duration and delay. Duration is the time for which the transition plays and delay is the time between different images. All other parameters will be specific to the transition type you choose.
Slideshow Transitions
3. Navigation
Navigation can be in the form of next/previous arrows or in the form of numbered buttons that let you jump to image ‘n’. One and only one of the navigation – Arrows or Buttons, must be turned on.
4. InfoBox
The InfoBox houses the title and description. Visibility for both can be turned off by turning off the info box visibility. Selectively, the visibility of title and/or description can be turned off. Styling the infobox and its contents title and description can be extremely challenging if you want the slideshow to be used without any code changes or recompilation. Flex CSS in compiled into the swf code so the “usual” way of doing things hinders usability and adoption. We will see in the next section how XML can rescue the situation.
Slideshow InfoBox Settings
5. XML Configuration
The XML configuration is the tricky and challenging part. If you are writing your own Slideshow and are perfectly happy with Flex CSS and its strong compile time requirements, you don’t need to worry about XMLizing the Flex CSS and augmenting it with your own custom properties. If you still want an XML configuration file, this is how to do it:
5a) Create an xml configuration file with the xml elements as flex property names
e.g. <backgroundColor>0xbbbbbb</backgroundColor> is the same as backgroundColor:0xbbbbbb; OR background-color:0xbbbbbb (do not use the alternate background-color notation that has hyphens as the xml element names).
5b) Load the xml from an http service. for example, if your xml file is called Slideshow and is in the config folder, you http service would look like
5c) Parse the styles in the xml config file into a CSSStyleDecleration class object. I encapsulate this is a function call where I pass in the appropriate object representation of a subset of the xml and expect a CSSStyleDecleration in return.
private function object2Style(styleObject:Object):CSSStyleDeclaration {
var decl:CSSStyleDeclaration=new CSSStyleDeclaration();
for(var i:String in styleObject) {
if(styleObject[i]!=null && styleObject[i].toString().indexOf(",")==-1) {
decl.setStyle(i,styleObject[i]);
}
else if(styleObject[i]!=null && styleObject[i].toString().indexOf(",")!=-1) {
var arr:Array=styleObject[i].split(",");
decl.setStyle(i,arr);
}
}
return decl;
}
Note the rather neat trick we use here. We exploit the fact that the value of any CSS property is either string, numeric, boolean (true, false in string format) or an array represented as comma delimited string. The advantage of using this approach is that you can put your own custom properties in the xml stylesheet and make it available to the entire program by accessing the stylesheet declaration from anywhere…very powerful and cuts down on a lot of code. In addition to that, you can dynamically change style from anywhere and have the flash player apply it instantly by forcing an update of styles.
Slideshow Buttons Style
Putting it all together is rather simple. The timer rotates the images. The transition between the images is controlled by the “special effects” class you use, which is hopefully more then the basic that Abode provides. The Slideshow configuration can be xmlized in a file appropriately call slideshowconfig.xml. The description and title of each image itself can be encapsulated as another xml file (I prefer the name contentconfig.xml).
