Transitions added to Photoshow example
10 comments Posted by: LauraI added some transitions and a progress bar to our Photoshow example.
For the transitions, I wanted the previous image to fade out and the new image to fade in. But in the original code, the image was binding to the currently selected image, so whenever the selected image changed (by clicking on next or previous buttons), the source of the image would change. The biggest problem with this is that if I changed the currently selected image as soon as the user would click the buttons, the image would change without waiting for the fade out to complete. One of the main changes made to the code is that before I can change the source of the image, I need to wait until the previous image has completely faded out. I do this by using the effectEnd event of the Fade effect to know when this happens, and only then make the change in the image source.
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
The updateCurrentPicture() function changes the currently selected image.
To trigger the effect, I used the hideEffect property and when the user clicks “Next”, we set the picture.visible = false:
<mx:Image id="picture" [...] hideEffect="{fadeOut}" />
Adding the fade in effect is simple, and I used the showEffect property of the Image:
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
Another issue was that if I set picture.visible = true as soon as the previous image has faded out, the fade in effect would be applied on a picture that may still be loading, and I would miss the effect. To avoid this, I must wait until I am sure the image has loaded:
<mx:Image [...] complete="picture.visible = true" />
Next update would be to add a timer for autoplaying.
View example
Download the source
10 Comments so far
Write yourscould you help in putting a timer in your code? how can i do that?
Thank you...
Y Rck
Just wondering, I am interfacing with Drupal and am not using an xml file I'm using a standard array that I load from Drupal via amf php and xml rpc with the contributed services module. How do I get the first image in the array to autoload?
Thanks so much again ;)
Sarah
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" creationComplete="init()" borderColor="#666666" themeColor="#009DFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #666666]">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.rpc.events.*;
import mx.rpc.remoting.*;
import mx.utils.ArrayUtil;
[Bindable]
public var articles:Array;
[Bindable]
public var currentIndex:int = 0;
[Bindable]
public var currentPicture:Object;
public function init():void
{
getArticles();
}
public function onFault(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}
public function onViewsResult(event:ResultEvent):void
{
articles = ArrayUtil.toArray(event.result);
}
public function getArticles():void
{
article.all();
}
// show the next picture in set
private function goNext():void
{
if (currentIndex < articles.length - 1){
currentIndex++;
}
else {
currentIndex = 0;
}
switchPictures();
}
// show the previous picture in set
private function goPrevious():void
{
if (currentIndex != 0){
currentIndex--;
}
else {
currentIndex = articles.length - 1;
}
//set the current picture
switchPictures();
}
private function switchPictures():void{
fadeIn.end();
fadeOut.end();
picture.visible = false;
}
private function updateCurrentPicture():void{
//set the current picture based on current index
currentPicture = articles[currentIndex];
}
//this changes the set of pictures
public function set dataProvider(value:Array):void
{
articles = value;
currentIndex = 0;
updateCurrentPicture();
}
public function get dataProvider():Array
{
return articles;
}
]]>
</mx:Script>
<mx:RemoteObject showBusyCursor="true" destination="amfphp" source="article" id="article">
<mx:method name="all" result="onViewsResult(event)" fault="onFault(event)" />
</mx:RemoteObject>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Canvas y="10" width="500" height="460" horizontalCenter="0" backgroundAlpha="1.0">
<mx:Image id="picture" x="0" y="0" width="500" height="376" source="http://mysite.com/{currentPicture.field_image_attachments[0].filepath}" hideEffect="{fadeOut}" showEffect="{fadeIn}" complete="picture.visible = true" autoLoad="true"/>
<mx:VBox y="238" height="95" width="500" backgroundColor="#C3C3C3" alpha="0.4" horizontalCenter="0">
<mx:Button height="25" textAlign="left" horizontalCenter="0" label="{currentPicture.title}" color="#FFFFFF" moveEffect="Move" click="navigateToURL(new URLRequest('http://mysite.com/node/' + currentPicture.nid), '_self');" />
<mx:Text width="500" height="60" textAlign="left" horizontalCenter="0" text="{currentPicture.teaser}" color="#FFFFFF" moveEffect="Move" />
</mx:VBox>
<mx:Button width="58" height="20" styleName="next" click="goNext()" label="Next" color="#FFFFFF" labelPlacement="right" textAlign="right" x="442" y="343"/>
<mx:Button y="343" width="78" height="20" styleName="previous" click="goPrevious()" x="0" label="Previous" color="#FFFFFF"/>
</mx:Canvas>
</mx:Canvas>
</mx:Application>