Posted by scarer on August 3, 2009 at 12:17am
I have built a flex app that interfaces with Drupal services and AMFPHP. I was wondering if anyone could tell me how I autoload the first image in my slideshow?
Thanks :)
Here's my flex code:
<?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;
[Bindable]
public var slideTimer:Timer = new Timer(1000, 5);
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;
}
public function returnImages():void{
currentPicture = articles[0];
var firstpicture:Image = new Image();
firstpicture.source = 'http://mysite.com/{currentPicture.field_image_attachments[0].filepath}';
this.picture.addChild(firstpicture);
}
]]>
</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" creationComplete="returnImages()"/>
<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>Please help!
Comments
dd
dd
i forgot about this post lol
managed to do this check out the sites at
http://www.cdp.edu.au/cdp/feature-stories
http://ag3.griffith.edu.au
If you have any questions about the source let me know :)