6 Replies Latest reply on Aug 11, 2013 4:08 PM by raffialexanian

    Flex Mobile: 3D Carousel or Coverflow layout

    VivD

      Anyone know if anyone has implemented a 3D carousel or coverflow layout on Flex Mobile.

       

      I did some searching on Google and found a few for Flex on the Web but didn't look like these would work in on Flex Mobile.

       

      Here's an example..

      http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/

        • 1. Re: Flex Mobile: 3D Carousel or Coverflow layout
          Don Kerr Level 3

          Yes, I have on tablets.  Rialvalue.  Works good.

           

          I don't believe I had to change anything specific for mobile.  But, don't recall for sure.

           

          Don

          • 2. Re: Flex Mobile: 3D Carousel or Coverflow layout
            VivD Level 1

            You mean the same one I provided the link for? Is there an app on the Market or a sample I can see on mobile that uses it.

            • 3. Re: Flex Mobile: 3D Carousel or Coverflow layout
              Don Kerr Level 3

              Yes. same one.  But, app is only internal enterprise app for my client and is not in Market.

               

              But, here is my code from it ...

               

              <s:List dataProvider="{photosDP}"  width="100%" height="100%"     

                                             click="listClickHandler(event)"  id="list"  

                                            skinClass="CoverFlowListSkin"  useVirtualLayout="false"

                                            itemRenderer="TouchPresentationsCoverFlowRenderer">

                      <s:layout>

                          <layouts:CoverflowLayout      id="coverflow"   selectedIndex="{ list.selectedIndex }"

                                             horizontalDistance="103

                                             selectedItemProximity="0"

                              depthDistance="1"

                                                      elementRotation="-70"

               

                              perspectiveProjectionX="-1"

                                                      perspectiveProjectionY="-1"/>

                      </s:layout>

                  </s:List>

               

               

              renderer ....

               

              <s:ItemRenderer

                        xmlns:fx="http://ns.adobe.com/mxml/2009" clipAndEnableScrolling="false"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="100%" height="100%">

                <fx:Script>

                                  <![CDATA[

                                            import mx.core.FlexGlobals;

               

               

                                            override public function set data(value:Object):void {

               

                                                      if(value){

               

                                                                img.source  = FlexGlobals.topLevelApplication.assetsUrl+'Thumbs/300/'+value.imageFile;

               

                                                      lbl.text = value.imageCaption;

                                                      bc.visible = true;

                                                                if(lbl.text.length == 0){

                                                                          bc.visible = false;

                                                                }

                                                      }

                                            }

               

                                  ]]>

                </fx:Script>

               

               

                <s:layout>

                <s:BasicLayout />

                </s:layout>

                <s:BitmapImage id="img"   />

                                  <s:BorderContainer id="bc" width="50%" height="60"

                                                                             backgroundColor="#000000" cornerRadius="10" borderAlpha="0.3"

                                                                             borderColor="#000000" backgroundAlpha="0.3" top="50" right="50">

               

                                            <s:RichText id="lbl" textAlign="center"  width="100%" backgroundAlpha="0.0" paddingTop="5" paddingBottom="5"

                                                                          fontFamily="Myriad Pro-Semibold"   fontSize="14"

                                                                          color="white"/>

                </s:BorderContainer>

               

               

              </s:ItemRenderer>

              • 4. Re: Flex Mobile: 3D Carousel or Coverflow layout
                VivD Level 1

                Thanks for the code example. I was able to implement it. However, I don't think a user would click on the next image though to bring up the next image in the list. The natural tendency is to swipe left or right on the image being dispayed to bring up the next/previous one.

                 

                I tried doing that with gesture swipe but that approach doesn't provide a smooth and fluid experience. It should be like how it is in the video below

                http://www.youtube.com/watch?v=2TwBPQWW1uo&feature=related

                 

                Do you have any alternate suggestions?

                • 5. Re: Flex Mobile: 3D Carousel or Coverflow layout
                  Don Kerr Level 3

                  Agree.  Not as smooth as it could be.  I'm just happy to have it work with tap.

                   

                  I'm not sure if their CoverFlow layout component will respond to explicitly setting interactionMode = touch on the List. It might add some inertia effect like the standard mobile flick scroller in the List.  Haven't really tried it.  It should behave that way on mobile without setting interactionMode.

                   

                  To me, it looks like in your video it is responding to tap on each one, not really a swipe.  It just moves faster when you do.  Not sure if CoverFlowLayout supports adjusting the speed.  I know it has a lot of adjustments you can do.

                   

                  Setting the selectedIndex via Swipe gesture should be fine, especially if you can increase CoverFlow's speed.

                   

                  Sorry.  Not much to add.

                   

                  Don

                  • 6. Re: Flex Mobile: 3D Carousel or Coverflow layout
                    raffialexanian

                    Hello, two years later were you able to do somethig for mobile tha is smooth and uses a swipe instead of tab?

                     

                    Thanks;