29.05.08 | 5 Comments
In this article I’ll present a new component I built: ImageRail. This MXML component will display a series of thumbnails having the possibility to scroll them horizontally.
Parameters:
- paths: an array containing URLs to images
- images: an array containing image objects
- imagesToShow: an unsigned integer that specifies the number of images displayed at a time - deafult is 4
- imagesGap: an unsigned integer that specifies the gap between images - deafult is 10
- passePartout: an unsigned integer that specifies the white padding around each image - deafult is 10
- effect: a function that in fact is the easing function (ex: Exponential.easing) and can be one of the following each having easeIn, easeOut and easInOut - deafult is Exponential.easeOut
- mx.effects.easing.Back
- mx.effects.easing.Bounce
- mx.effects.easing.Circular
- mx.effects.easing.Cubic
- mx.effects.easing.Elastic
- mx.effects.easing.Exponential
- mx.effects.easing.Linear
- mx.effects.easing.Quadratic
- mx.effects.easing.Quartic
- mx.effects.easing.Quintic
- mx.effects.easing.Sine
- effectDuration: an unsigned integer that specifies the duration in milliseconds - deafult is 500
- height: a number that specifies the height of the component, based on which all others measures are calculated - deafult is 120
- width: a number that specifies the width - if it is not set imagesToShow will be used instead
First two parameters excludes one another and images array has priority over paths so if you specify both paths and images only images will be populated. If paths will be used then both arrays will be populated and the values in images array will be created based on paths array.
We will use:
- sequence - to use more than one movement effects, but we will use only one
- effect - our movement effect
- canvas - component is extending canvas and used also for every image and for all images
- image - used to display images
- button - used for next and previous
The code is very well commented so you won’t find any problems understanding what is done there. So first lets see the component in action.
This example is a simple one. For it only height, width, gap, passePartout and effectDuration are set.
The next example is a more complex one. You can see how ImageRail’s properties are updated with the ones specified in controls.
In this example you may notice that the size of the images are calculated based on the component height and by changing its height the images are also resized.
Below you can find the code of each file (not the component because of its size) and at the end you can download all sources.
ImageRailApp.mxml - the complex application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
<mx:VBox>
<mx:Canvas>
<mx:Label x="10" y="10" text="height"/>
<mx:Label x="108" y="10" text="imagesToShow"/>
<mx:Label x="206" y="10" text="gap"/>
<mx:Label x="304" y="10" text="passePartout"/>
<mx:Label x="402" y="10" text="width"/>
<mx:Label x="10" y="56" text="effect"/>
<mx:Label x="108" y="56" text="effectDration"/>
<mx:NumericStepper x="10" y="26" id="cmpH"
value="130" minimum="90" maximum="200" width="90"/>
<mx:NumericStepper x="108" y="26" id="picsToShow"
value="2" minimum="0" maximum="10" width="90"/>
<mx:NumericStepper x="206" y="26" id="imageGap"
value="12" minimum="0" maximum="50" width="90"/>
<mx:NumericStepper x="304" y="26" id="passePartout"
value="12" minimum="0" maximum="50" width="90"/>
<mx:NumericStepper x="402" y="26" id="cmpW" value="500"
minimum="0" maximum="800" stepSize="10" width="90"/>
<mx:ComboBox x="10" y="72" id="effect" selectedIndex="5"
dataProvider="{easingFunctions}" width="90"/>
<mx:NumericStepper x="108" y="72" id="effectDuration"
value="500" minimum="100" maximum="5000" stepSize="10" width="90"/>
</mx:Canvas>
<flexer:ImageRail height="{cmpH.value}" width="{cmpW.value}"
paths="{_paths}" gap="{imageGap.value}" imagesToShow="{picsToShow.value}"
passePartout="{passePartout.value}" effectDuration="{effectDuration.value}"
effect="{effect.selectedItem.easingClass.easeOut}"/>
</mx:VBox>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.effects.easing.*;
[Bindable]
public var easingFunctions:Array = [
{label: "Bounce", easingClass: Bounce},
{label: "Back", easingClass: Back},
{label: "Circular", easingClass: Circular},
{label: "Cubic", easingClass: Cubic},
{label: "Elastic", easingClass: Elastic},
{label: "Exponential", easingClass: Exponential},
{label: "Linear", easingClass: Linear},
{label: "Quadratic", easingClass: Quadratic},
{label: "Quartic", easingClass: Quartic},
{label: "Quintic", easingClass: Quintic},
{label: "Sine", easingClass: Sine}
];
[Bindable]
private var _paths:Array = [
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"
];
]]>
</mx:Script>
</mx:Application>
ImageRailApp2.mxml - simpler application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
<mx:VBox>
<flexer:ImageRail id="ir" height="130" width="430"
gap="20" passePartout="24" effectDuration="700"/>
</mx:VBox>
<mx:Script>
<![CDATA[
import mx.controls.Image;
[Bindable]
private var _paths:Array = [
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
"http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"
];
[Bindable]
private var _images:Array = new Array();
private function init():void
{
for (var i:uint = 0; i < _paths.length; i++) {
// creating images
var image:Image = new Image();
image.source = _paths[i];
// adding image to images array
_images.push(image);
}
ir.images = _images;
}
]]>
</mx:Script>
</mx:Application>
I think you noticed that our component is located in com/flexer folder. That why we use
xmlns:flexer="com.flexer.*"
and
This is the component and from the two mini applications you can see how it can be used. There enough space to extend it and to use it in many applications.
What else can be added? Here are just some thoughts:
- a parameter to make it circular (when it gets to end it should display the first images after the last) - this is a complex job and there are a couple of ways doing it
- titles for images
- a parameter to use an XML to tell the URLs to images and the titles
- events on images
A very nice article about easing by James Ward is here and the demo is here.
Popularity: 93%
 |
imageRailApp_sources | |
 |
imageRailApp | |
 |
ImageRailApp2 | | Tags: ActionScript, component, imagerail, MXML This post was written by Andrei Ionescu Views: 3116 | |
