[Flex/ActionScript 3] Photoslider

[Psyed]

Hey mensen,

ik ben bezig met een slideshow product voor mijn vader, grotendeels heb ik die al werkende (XML uitlezen, laten zien, knoppen, design etc.). Alleen kom ik er steeds niet uit hoe ik een fade-in en fade-out effect moet creëren, ik ben wel zo ver dat de fades werken, door middel van visiblity in te stellen, alleen ik moet er een pause moment in zetten of iets anders waardoor hij niet alsnog over springt naar de volgende foto.

Iemand die me er verder mee kan helpen? By the way: De source hier onder is van een test document waarin ik momenteel werk, er zit verder geen extra functionaliteit in.

Edit
Wat ik geprobeert heb:
Visibility aanpassen met true en false waardes, hierbij veranderdt de foto wel, maar de fade-out gebeurt pas na het wijzigen. Eenmaal de nieuwe foto weg gevaagd, klik ik weer op 'Vorige', dan fade wel netjes de nieuwe foto in.

Ik heb dit geprobeert met mx:Sequence, mx:Parrallel en in functions waarin ik ook gebruik heb proberen te maken van Sequence en Parrallel.

Bij het voevoegen van een pause-event fade de foto wel netjes weg, maar stopt het script daat verder en wordt de volgende foto niet geïnitialiseerd waardoor het scherm verder wit blijft en de nieuwe foto dus niet tevoorschijn komt.

code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:eff="com.adobe.effects.*">
    <mx:Script>
        <![CDATA[
            import mx.effects.Sequence;
            import mx.effects.Pause;
            import mx.effects.Fade;
        
        [Bindable]          
            private var curImg:int = 1;
            private function goNext():void {
                if (curImg == 1) {
                    foto.source = 'images/Winter.jpg';
                    curImg = 2;
                } else {
                    foto.source = 'images/Waterlelies.jpg';
                    curImg = 1;
                }
            }
            
            private var pause:Pause;
            
            [Bindable]
            private var mySequence:Sequence;
            
            [Bindable]
                private var Visibility:Boolean = true;
                
            [Bindable]
                private var photoSource:String = 'images/Waterlelies.jpg';
            
            private function goPrev():void {
                if (curImg != 1) {
                    Visibility = false;
                    photoSource = 'images/Waterlelies.jpg';
                    Visibility = true;
                    curImg = 1;
                } else {
                    Visibility = false;
                    photoSource = 'images/Winter.jpg';
                    Visibility = true;
                    curImg = 2;
                }
            }
        ]]>
    </mx:Script>
    <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" duration="5000" />
    <mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" duration="5000" />
            
    <mx:Panel x="10" y="10" width="712" height="362" layout="absolute">
        <mx:Image x="103" y="60" width="305" id="foto" height="237" source="{photoSource}"
             showEffect="{fadeIn}" hideEffect="{fadeOut}" visible="{Visibility}"/>
        <mx:LinkButton x="13" y="152" label="Vorige" click="goPrev();"/>
        <mx:LinkButton x="416" y="152" label="Volgende" click="goNext();"/>
    </mx:Panel>
    
</mx:Application>

[ Voor 12% gewijzigd door Psyed op 20-12-2007 12:05 ]

[Creepy]

Je komt er niet uit? Wat heb je zelf al geprobeerd en wat lukte daar niet mee? Zie ook Programming Beleid - De Quickstart

[Psyed]

Topic kan gesloten worden, heb het al kunnen oplossen.

Voor de mensen die er geinteresseerd in zijn, hier nog effen de oplossing:

Een extra functie aan gemaakt die de foto-holder op 'false' zet:

code:

public function Volgende():void {
    foto.visible = false;
}

Het fade-out effect aangepast:
effectEnd="goNext();" er aan toe voegen

code:

<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" duration="5000" effectEnd="goNext();" />

En ook nog de image tag aangepast:
complete="foto.visible = true" er aan toegevoegd

code:

<mx:Image x="103" y="60" width="305" id="foto" height="237" source="images/Waterlelies.jpg"
             showEffect="{fadeIn}" hideEffect="{fadeOut}" visible="true" complete="foto.visible = true"/>

Vervolgens ook de knop 'volgende' aangepast:

code:

<mx:LinkButton x="416" y="152" label="Volgende" click="Volgende();"/>

Wat er vervolgens gebeurt:
Zodra er op de knop 'Volgende' geklikt wordt, wordt het event afgetrapt. Dit event zet alleen de Image visibility op FALSE. Dit triggert het fadeOut effect. Als het effect klaar is, dan pas wordt er aanspraak gedaan op de volgende afbeelding.

Omdat het kan gebeuren dat een afbeelding erg groot is, en dus lang nodig heeft om in te laden moet het fadeIn event pas aangeroepen worden als de foto geladen is, dit doe je met complete="foto.visible = true". Hierdoor komt de status van vasibility op TRUE te staan, en vervolgens traps Flex automatisch de fadeIn functionaliteit af.

De totaal code is als volgt:

code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:eff="com.adobe.effects.*">
    <mx:Script>
        <![CDATA[
        import mx.effects.Fade;
        
        [Bindable]          
            private var curImg:int = 1;
            
            private function goNext():void {
                if (curImg == 1) {
                    foto.source = 'images/Winter.jpg';
                    curImg = 2;
                } else {
                    foto.source = 'images/Waterlelies.jpg';
                    curImg = 1;
                }
            }
            
            public function Volgende():void {
                foto.visible = false;
            }
        ]]>
    </mx:Script>
    <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" duration="5000" effectEnd="goNext();" />
    <mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" duration="5000" />
            
    <mx:Panel x="10" y="10" width="712" height="362" layout="absolute">
        <mx:Image x="103" y="60" width="305" id="foto" height="237" source="images/Waterlelies.jpg"
             showEffect="{fadeIn}" hideEffect="{fadeOut}" visible="true" complete="foto.visible = true"/>
        <mx:LinkButton x="13" y="152" label="Vorige" />
        <mx:LinkButton x="416" y="152" label="Volgende" click="Volgende();"/>
    </mx:Panel>
    
</mx:Application>