Use flex to implement Image Show + gradient effects

The principle is to configure the image data through XML, read the XML file by Flex to obtain the image data, and then set the currently displayed image to the image of the first data configured in XML, you can use four buttons to control the image playback indexes and add an event processing function to the image. Click the image to switch to the next image. The following is the final result.

Imageshow.jpg

Put it bluntly.Code.

Code:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" creationcomplete = "Init ()">
<Mx: SCRIPT>
<! [CDATA [
Import MX. Collections. arraycollection;
Import MX. Core. uicomponent;
[Bindable]
Private var picarray: arraycollection;
[Bindable]
Private var index: Number = 0;

Private function Init (): void
{
VaR Loader: urlloader = new urlloader ();
Loader. addeventlistener (event. Complete, oncomplete );
Loader. Load (New URLRequest ("Data/PIC. xml "));
}

Private function oncomplete (Event: Event): void
{
VaR XML: xml = new xml(event.tar get. data );

Picarray = new arraycollection ();
For (var I: Number = 0; I <XML. Children (). Length (); I ++)
{
VaR O: Object = new object ();
O. imageurl = xml. PIC [I]. imageurl;
Picarray. additem (O );
}
}

Private function onclickhandler (ID: string): void
{
Switch (ID)
{
Case "btn1 ":
This. Index = 0;
Break;
Case "btn2 ":
If (this. Index! = 0)
{
This. Index-= 1;
}
Break;
Case "btn3 ":
If (this. Index! = Picarray. Length-1)
{
This. index + = 1;
}
Break;
Case "btn4 ":
This. Index = picarray. Length-1;
Break;
}
}

Private function onimageclick (Event: mouseevent): void
{
If (this. Index = picarray. Length-1)
{
This. Index = 0;
}
Else
{
This. Index ++;
}
}
]>
</MX: SCRIPT>
<Mx: panel X = "73" Y = "78" width = "701" Height = "536" layout = "absolute" fontsize = "12">
<Mx: Image x = "0" Y = "0" width = "680" Height = "455" id = "imageshow" completeeffect = "{fadein }"
Source = "{picarray. getitemat (INDEX). imageurl}" Click = "onimageclick (event)"/>
<Mx: button x = "154" Y = "463" label = "first" id = "btn1" Click = "onclickhandler (btn1.id)"/>
<Mx: button x = "227" Y = "462" label = "previous" id = "btn2" Click = "onclickhandler (btn2.id)"/>
<Mx: button x = "300" Y = "462" label = "Next" id = "btn3" Click = "onclickhandler (btn3.id)"/>
<Mx: button x = "373" Y = "462" label = "last" id = "btn4" Click = "onclickhandler (btn4.id)"/>
<Mx: Label x = "607" Y = "466" width = "73" id = "indexcount" color = "# ff0030" fontweight = "bold"
TEXT = "{(index + 1) + '/' + picarray. Length}"/>
</MX: Panel>
<Mx: fade id = "fadein" Duration = "2000" alphafrom = "0.18" alphato = "1.0"/>
</MX: Application>