Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
ddev1702
Posts: 64
Registered: ‎04-25-2012
My Device: 9000

Slideshow Effect

Hi,

i am trying to implement Gallery like functionality,where in home page i am showing 12 images in a table like layout and now i want to add slideshow effect to those images on a button click,here images should have fade in  feature when images will appear and will have fade out effect when images disappear.

 

 

 

how to do this?

 

plz,reply...

d.dev
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Slideshow Effect

Use the Tweener class:
1) Set incoming image alpha to 0.
2) set the alpha to 0 over a period of time to the outgoing image.
3) set the alpha to 1 over a period of time to the incoming image.

This will dissolve between the two. If you want the incoming image to slowly appear *after* the outgoing image is first done, then you can start the second tweener on the "onComplete" callback.
Please use plain text.
Developer
ddev1702
Posts: 64
Registered: ‎04-25-2012
My Device: 9000

Re: Slideshow Effect

[ Edited ]

can you plz  give me any example ?

actually i am using a timer for that . here i have to provide horizontal scrolling facility also.if user doesnt want to play slide show

 

<s:List id="pagedList" x="0" y="64"
            width="100%" height="100%"
            verticalScrollPolicy="off" horizontalScrollPolicy="on"
            pageScrollingEnabled="true" contentBackgroundAlpha="0">
        <s:layout>
            <s:TileLayout orientation="rows" requestedRowCount="1"
                          columnWidth="{pagedList.width}" rowHeight="{pagedList.height}"
                          verticalGap="0" horizontalGap="0"/>
        </s:layout>
        <s:itemRenderer>
            
            
            <fx:Component>
                <s:smileyvery-happy:ataRenderer>
                    
                    <fx:smileyfrustrated:cript>
                        <![CDATA[
                            import mx.collections.ArrayList;
                            
                            import valueObjects.GlobalValue;
                            
                            [Bindable]
                            public var _imgSource : ArrayList;
                            var    isVisible : Boolean = false;
                                            
                            public var t:Timer = new Timer(2000);
                            public     var count : Number = 0;
                            protected function myImg_clickHandler(event:MouseEvent):void
                            {
                                // TODO Auto-generated method stub
                                trace("click");
                                
                                if(GlobalValue.clicked){
                                    Showplay.visible = true;
                                    Showplay.text = "Off";
                                    GlobalValue.clicked = false;
                                    startPlay();
                                }else{
                                    Showplay.text = "On";
                                    GlobalValue.clicked = true;
                                    t.stop();
                                }
                                
                            }
                            
                            protected function Showplay_clickHandler(event:MouseEvent):void
                            {
                                // TODO Auto-generated method stub
                                Showplay.text = "Off";
                                
                                startPlay();
                            }
                            
                            public function createDataProvider():ArrayList
                            {
                                
                                var a:Array = new Array();
                                for (var i:int = GlobalValue.imgIndex; i <= 17; i++){
                                    a[i] = "http://www.aslogtech.biz/design/project/Album/assets/"+[i]+".jpg";
                                    //trace("a[i]"+a[i]);
                                }
                                return new ArrayList(a);
                            }
                            
                            function onTimer(event:TimerEvent):void
                            {
                                if(isVisible)
                                {
                                    //hideImage();
                                    myImg.alpha = 1;
                                }
                                else
                                {
                                                                        
                                    count ++;
                                    
                                    if(count==17){
                                        count =1;
                                    }
                                    
                                    showAndMoveImage(count);
                                    
                                }
                                
                                isVisible = !isVisible;
                            }
                            
                            
                            protected function startPlay() :void {
                                t.addEventListener(TimerEvent.TIMER, onTimer);
                                t.start();
                                _imgSource = createDataProvider();
                            }
                            
                            function showAndMoveImage(count : Number):void
                            {
                                
                                myImg.visible = true;
                                myImg.alpha =1;
                                myImg.source = _imgSource.getItemAt(count) ;
                                
                                Showplay.visible = false;
                            }
                            
                            
                        ]]>
                    </fx:smileyfrustrated:cript>
                    
                    <s:Image  id="myImg" source="{data}" height="100%" width="100%"  scaleMode="stretch" click="myImg_clickHandler(event)"/>
                    <s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
                        <s:Label text = "On" color="white" id="Showplay" visible="false" fontWeight="bold" verticalAlign="middle" click="Showplay_clickHandler(event)"/>
                    </s:HGroup>
                    
                </s:smileyvery-happy:ataRenderer>
                
                
            </fx:Component>
            
            
            
        </s:itemRenderer>
        
    </s:List>

d.dev
Please use plain text.
Developer
ddev1702
Posts: 64
Registered: ‎04-25-2012
My Device: 9000

Re: Slideshow Effect

Sorry! but i dnt know how this smileys are automatically inserted?

d.dev
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Slideshow Effect

Insert the code by selecting the [C] icon in the editor.
Please use plain text.
Developer
ddev1702
Posts: 64
Registered: ‎04-25-2012
My Device: 9000

Re: Slideshow Effect

[ Edited ]

Still cant implement Slide show effect properly.can any one help me?plz.i need an example .

d.dev
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Slideshow Effect

Can you repost your code so it is more readable?
Please use plain text.
Developer
ddev1702
Posts: 64
Registered: ‎04-25-2012
My Device: 9000

Re: Slideshow Effect

<s:List id="pagedList" x="0" y="64"
            width="100%" height="100%"
            verticalScrollPolicy="off" horizontalScrollPolicy="on"
            pageScrollingEnabled="true" contentBackgroundAlpha="0">
        <s:layout>
            <s:TileLayout orientation="rows" requestedRowCount="1"
                          columnWidth="{pagedList.width}" rowHeight="{pagedList.height}"
                          verticalGap="0" horizontalGap="0"/>
        </s:layout>
        <s:itemRenderer>
            
            
            <fx:Component>
                <s:smileyvery-happy:ataRenderer>
                    
                    <fx:smileyfrustrated:cript>
                        <![CDATA[
                            import mx.collections.ArrayList;
                            
                            import valueObjects.GlobalValue;
                            
                            [Bindable]
                            public var _imgSource : ArrayList;
                            var    isVisible : Boolean = false;
                                            
                            public var t:Timer = new Timer(2000);
                            public     var count : Number = 0;
                            protected function myImg_clickHandler(event:MouseEvent):void
                            {
                                // TODO Auto-generated method stub
                                trace("click");
                                
                                if(GlobalValue.clicked){
                                    Showplay.visible = true;
                                    Showplay.text = "Off";
                                    GlobalValue.clicked = false;
                                    startPlay();
                                }else{
                                    Showplay.text = "On";
                                    GlobalValue.clicked = true;
                                    t.stop();
                                }
                                
                            }
                            
                            protected function Showplay_clickHandler(event:MouseEvent):void
                            {
                                // TODO Auto-generated method stub
                                Showplay.text = "Off";
                                
                                startPlay();
                            }
                            
                            public function createDataProvider():ArrayList
                            {
                                
                                var a:Array = new Array();
                                for (var i:int = GlobalValue.imgIndex; i <= 17; i++){
                                    a[i] = "http://www.aslogtech.biz/design/project/Album/assets/"+[i]+".jpg";
                                    //trace("a[i]"+a[i]);
                                }
                                return new ArrayList(a);
                            }
                            
                            function onTimer(event:TimerEvent):void
                            {
                                if(isVisible)
                                {
                                    //hideImage();
                                    myImg.alpha = 1;
                                }
                                else
                                {
                                                                        
                                    count ++;
                                    
                                    if(count==17){
                                        count =1;
                                    }
                                    
                                    showAndMoveImage(count);
                                    
                                }
                                
                                isVisible = !isVisible;
                            }
                            
                            
                            protected function startPlay() :void {
                                t.addEventListener(TimerEvent.TIMER, onTimer);
                                t.start();
                                _imgSource = createDataProvider();
                            }
                            
                            function showAndMoveImage(count : Number):void
                            {
                                
                                myImg.visible = true;
                                myImg.alpha =1;
                                myImg.source = _imgSource.getItemAt(count) ;
                                
                                Showplay.visible = false;
                            }
                            
                            
                        ]]>
                    </fx:smileyfrustrated:cript>
                    
                    <s:Image  id="myImg" source="{data}" height="100%" width="100%"  scaleMode="stretch" click="myImg_clickHandler(event)"/>
                    <s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
                        <s:Label text = "On" color="white" id="Showplay" visible="false" fontWeight="bold" verticalAlign="middle" click="Showplay_clickHandler(event)"/>
                    </s:HGroup>
                    
                </s:smileyvery-happy:ataRenderer>
                
                
            </fx:Component>
            
            
            
        </s:itemRenderer>
        
    </s:List>

 

d.dev
Please use plain text.