«
»

CarouselLayout

A while ago I posted an example of SemiCarouselLayout. Since then I’ve replaced the class with CarouselLayout, as it will now work as a full carousel (set numUnselectedElements to 0) whilst retaining the functionality to show a particular number of items to provide virtualization. I’ve also added new properties such as the angle of the carousel, easing, duration, rotation of elements etc.

Below is an example with a Navigator and DataNavigator, and some controls to edit the properties of the layout. If you have a play around you can create some interesting layouts, there’s also a couple of preset examples.

(right click for source).

The source can be downloaded from our Google Code repository, the following classes have been added.

  • ws.tink.spark.layouts.AnimationNavigatorLayoutBase
  • ws.tink.spark.layouts.PerspectiveAnimationNavigatorLayoutBase
  • ws.tink.spark.layouts.CarouselLayout

    • This entry was posted on Monday, April 25th, 2011 at 2:36 pm and is filed under Flex 4. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    41 Responses to “CarouselLayout”

    1. Tink » Blog Archive » SemiCarouselLayout says:
      April 25, 2011 at 2:40 pm

      [...] NOTE: This class has now been replaced, please refer to CarouselLayout. [...]

      Reply
    2. Thomas Burleson says:
      April 25, 2011 at 3:39 pm

      Really nice.
      Any chance you can upload/use GitHub repositories?
      GitHub rocks for code sharing, team developent, issues, wiki, etc. !

      Reply
    3. JesterXL says:
      April 25, 2011 at 3:43 pm

      Hey Tink, thanks for this, it’s awesome!

      Curious what SDK you’re compiling against? I’m getting a lot of errors in 4.5 which I’m attempting to fix, but not sure if I’m fixing correctly. The mx_internal overrides are fairly straight forward, but things like MatrixUtil.fitBounds going from 9 parameters to 11, and missing states in some of your skins makes me think you’re compiling against 4.1 or 4.2; is this correct?

      Reply
    4. Tink says:
      April 25, 2011 at 3:58 pm

      @Thomas – I’ve been meaning to look into getting Git to mirror the SVN repo for some time just never got round to it. I can’t promise anything but I’ll keep it in mind.

      @JesterXL Its build against 4.1 at the mo. I’ll be doing some changes to the repo over the next week or so and I’ll push out a 4.5 version.

      Reply
    5. Tink says:
      April 25, 2011 at 5:21 pm

      I’ve added a 4.5 repo.

      I’ll try and get some Version.as files in the source over the next week or so.

      To build it you may need to remove so items from the manifest.xml as it may list some classes that aren’t in the repo.

      Reply
    6. George Profenza says:
      April 27, 2011 at 10:33 pm

      Pretty tight quality stuff here! Thanks for sharing!

      Reply
    7. Florian says:
      May 6, 2011 at 9:07 am

      Looks really nice!

      Could you update the swc file on the google repo? I’m having trouble compiling the 4.1 spark lib with ANT

      Reply
    8. Tink says:
      May 6, 2011 at 9:41 am

      What issue do you have with the ANT build Florian, then I can try and fix them so it builds for everyone else.

      Reply
    9. Florian says:
      May 9, 2011 at 2:22 pm

      I’m trying to compile the flex4.1 spark lib.

      It says flex4/mx/bin directory doesn’t exist. So I suppose I should first build the flex4 mx lib. However, when I try to build it, it can’t find some classes (MathUtil, FrameLabelEvent, …)

      It looks like MathUtil is in the as3_fp10 directory but there is nothing in the flex4 mx build.xml file that target it.

      Hope it helped

      Reply
    10. Juan says:
      June 24, 2011 at 10:01 am

      Hi, Good job !!!!
      I’ve a doubt. Is possible to do a loop effect?
      For example, rotate all elements, from 0 to 13 (in al loop effect) during 2 seconds and stop in the element number 2 (for example).

      Regards

      Reply
      • Tink says:
        June 24, 2011 at 10:17 am

        Hi Juan

        It’s definitely possible to rotate all elements from 0 to 13 in 2 seconds, you would set the selectedIndex to 0, the duration to 2000 and then set the selectedIndex to 13.

        This would then animate through the items over 2 seconds.

        What you can’t do in the current implementation is tell the layout to navigate 16 indices is a particular direction of 2 seconds (i believe what your after so that it ends up on index 2). Also at the moment the layout doesn’t check for the fastest direction to an index (i.e. it always moves right to a lower index and left to a higher index). This is totally feasible though with some code additions.

        Reply
        • Juan says:
          June 24, 2011 at 11:01 am

          Hi Tink,
          thanks for your answer. I wan to to rotate all elements from 0 to 13 more than once. For example, two, three,….complete rotations in 2,3,…seconds.
          To get the effect of a continuous loop.

          Regards,

          Reply
    11. Simon says:
      August 1, 2011 at 7:32 am

      Hi mate,

      Still cannot get your library to compile. Any chance there is a compiled 4.5 swc available?

      Cheers

      Reply
    12. Bruno says:
      August 18, 2011 at 12:16 am

      Hi Tink,

      I’ve downloaded the CarouselLayout from SWV for FB 4.5 and set it to work pretty fine, but I have a question about the rotation of the FullCarouselLayout.

      Im using the layout in a list, so the items can be selectable, let’s assume that my datProvider has 10 items. the rotation works fine until I have to move from the 10th item back to the 1st… it seems the carroussel rolls all the way back to the first item.

      for instance:

      10 is selected…

      [8][9][10][1][2]

      when I click on 1 the carousel should move smoothly to the left but instead it’s quickly moving back to the initial position.

      [9][10][1][2][3]

      is there a way to avoid this weird behavior?

      don’t know if I made myself clear, if not, I’ll try posting an example.

      Regards…

      Reply
      • Tink says:
        August 18, 2011 at 9:27 am

        Hi Bruno

        Thats not weird behavious at all, the direction the carousel moves is based on the index you tell it to go to. As 1 is less than 10, it animates back to 1, not forward to 1.

        You can force the direction by specifiying an index that is in the direction you want, so if you have 10 items and you want to go to index 1, but through index 0 instead of 9, 8, 7, 6, 5, 4, 3, 2 you can specify the selected index as 12.

        You can also use this method to do 1 or more complete spins of the carousel.

        I might look into added a flag which would make the carousel have the behaviour your after.

        Reply
        • Alexander says:
          October 20, 2011 at 1:01 pm

          Hi Tink,

          First of all, great work on these Flex components, they’re a life saver! The code also looks very clean and structured. Thank you so much!

          Just like Bruno, I am also looking to do a continuous loop of all elements with a wrap and without a backwards animation. Is there an easy way I can hack this into your code? Or is it possible you could add a parameter like ‘useShortestPath’ or something to achieve this? Thank you so much for your response!

          Reply
          • Tink says:
            October 20, 2011 at 1:39 pm

            Hey Alexander

            Thanks for the kind words.

            Currently the layout will always move left if the index is less, or right if the index is greater. That said you can trick it by sending it to an index that doesn’t exist.

            For instance if you have 4 items, and the selectedIndex is 3 (the last item), you could send the carousel to index 4, and it will move to the right (as the index is greater), and show the item at index 0.

            I will get a property added a some point that you can just set to goto the nearest item.

            Reply
      • Norman says:
        September 17, 2011 at 3:23 am

        Hi Bruno,

        can you give us some hint how you did it in 4.5. I’m still getting a lot of errors.

        Reply
        • Tink says:
          September 17, 2011 at 12:34 pm

          Hi Norman

          Can you give me some info on the issues you have (maybe log them as an issue on google code or github, then leave a link to the issue here).

          Reply
    13. Norman says:
      September 5, 2011 at 8:53 pm

      Hi Tink,

      I’m getting the same problems as Simon for FB 4.5. Can’t seem to get things going. New to Flex, by the way. It would be good for us newbies if you could include the 4.5 SWC in the example so that it’s easy to download and import as a project. A self-serving suggestion…. for all the noobs all over :) . Great work by the way!

      Reply
    14. swati says:
      September 15, 2011 at 4:30 pm

      Really gr8 work..could you please help me how to navigate by clicking on particular image to a new page..

      Reply
      • Tink says:
        September 15, 2011 at 7:59 pm

        If you use this layout on a List you can bind the selectedIndex of the layout to the selectedIndex of the List.

        <s:List id="list">
    <s:layout>
        <st:CarouselLayout selectedIndex="{list.selectedIndex}"/>
    </s:layout>
</s:List>

        Do you think I should add interactive selection to the navigators?

        Reply
    15. Robert says:
      October 10, 2011 at 5:31 am

      Great job guys … but please compile in swc all the libs

      Reply
      • Robert says:
        October 10, 2011 at 6:39 am

        Sorry about the double post
        the spark 4.5 cant reference to: “mx.controls.scrollClasses.ScrollBarDirection;”

        (its part of the 3.0 SDK and cat add more than 4.5 SDK to be used in mobile apps)

        Reply
    16. Excallibur says:
      October 10, 2011 at 3:12 pm

      Hi Tink,
      I used the 4.5 version from github and i couldn’t find the class NavigatorItem which should is associated with the local namespace.
      Can you help me out.
      The error is something like this :

      Description Resource Path Location Type
      Unable to locate specified base class ‘NavigatorItem’ for component class ‘CarouselLayoutExampleInnerClass1′. CarouselLayoutExample.mxml /flex4.1_spark_examples_blog/src Unknown Flex Problem

      Reply
      • Tink says:
        October 10, 2011 at 9:35 pm

        Ah yeah that should have been in the example source really.

        Here’s a copy of the file…

        package
{
	import spark.components.Label;
	import spark.components.supportClasses.ItemRenderer;
 
	public class NavigatorItem extends ItemRenderer
	{
		public function NavigatorItem()
		{
			super();
		}
 
		private var _labelDisplay:Label;
 
		private var _color:uint;
		public function get color():uint
		{
			return _color;
		}
		public function set color( value:uint ):void
		{
			if( _color == value ) return;
 
			_color = value;
			invalidateProperties();
		}
 
		override public function set data(value:Object):void
		{
			super.data = value;
 
			label = data.label;
			color = data.color;
			invalidateDisplayList();
			invalidateProperties();
		}
 
		override protected function createChildren():void
		{
			_labelDisplay = new Label();
			_labelDisplay.setStyle( "textAlign", "center" );
			_labelDisplay.setStyle( "verticalAlign", "middle" );
			_labelDisplay.setStyle( "color", 0xFFFFFF );
			_labelDisplay.setStyle( "fontSize", 40 );
 
			addElement( _labelDisplay );
 
			super.createChildren();
		}
 
		override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
		{
			super.updateDisplayList( unscaledWidth, unscaledHeight );
 
			_labelDisplay.setActualSize( unscaledWidth, unscaledHeight );
 
			graphics.clear();
			graphics.beginFill( color, 1 );
			graphics.drawRect( 0, 0, unscaledWidth, unscaledHeight );
			graphics.endFill();
		}
 
		override protected function commitProperties():void
		{
			super.commitProperties();
 
			_labelDisplay.text = label;
		}
	}
}
        Reply
    17. Robert says:
      October 20, 2011 at 10:57 pm

      Why you guys avoid responding to the posts where people are asking for the SWC builds ????

      Please build the 4.5 SWC for everyone that does not have countless hours to try and see why we cant easily make the build… and solve all the dependencies.

      Reply
    18. Tink says:
      October 21, 2011 at 10:40 am

      I not avoiding responding to anyone Robert. I know I keep saying it, but I’ll see if I can get a SWC up. I’ve just lost my machine so need some time to try and recover some stuff, set up the new machine etc.

      Reply
      • Robert says:
        October 22, 2011 at 12:18 am

        Sorry to hear that… you did a great job here … just did not understand why you would not build the bloody SWC…

        Reply
        • Tink says:
          October 22, 2011 at 7:17 pm

          Due to my setup (which probably isn’t the best), I have a different version to the public version, with extra components etc so it takes a bit of time to remove everything, update the styles and the manifest etc.

          I have started trying to put new stuff of changes in another library so once I get a bit of time and my new machine fully up and running it should be a simpler and quicker process.

          Reply
    19. VivD says:
      January 3, 2012 at 4:27 am

      Will this work on flex mobile too. Will it basically work on swiping or does one need to select an index/list item to move to it.

      Reply
      • Tink says:
        January 5, 2012 at 9:08 pm

        This would depend on the component your using it with. i haven’t (but need to) add some swipe gestures to my navigators. You could try using it with a SpinnerList (be interested to know your results).

        Reply
    20. AK says:
      January 5, 2012 at 5:31 pm

      Hi there!
      First of all this is a great example of an carousel-layout.
      But i´ve got a little question about the selection of the elements and I hope you could help me.
      I’ll describe my problem next:
      The current selected item is the last one (13) and i click the first element (0).
      How can i avoid to scroll all the elements back to the first item but rather go “only” one item to the right side. So to item nbr 0.
      is there any flags in the layout i could set and that would help or do you have a tip which part of your source-code has to be edited to handle this use case.

      Reply
    21. Norman says:
      February 3, 2012 at 7:10 pm

      Hi Tink,

      When I clicked on the link to get the latest resource it gives me 404 error and a message “This is Not the Web Page You Are Looking For”.

      Reply
    22. Tink says:
      February 5, 2012 at 9:05 pm

      Hey Norman

      Best place to get the source is https://github.com/tinklondon/tink_flash_platform

      Reply
    23. Norman says:
      February 14, 2012 at 3:19 pm

      Hi,

      Tink, got it working using FB4.6. Thanks. I’m trying to rotate the carousel smoothly in one direction (either left or right) but once it gets to the beginning or ending it rotates the opposite direction. I guess it’s the same thing the others are trying to do. I have 5 elements (so Index 0-4). Is there a way to do this?

      Reply
    24. Norman says:
      February 16, 2012 at 12:47 pm

      Hi Tink,

      Your quote- “I will get a property added a some point that you can just set to goto the nearest item.”

      I think this is a better idea than tricking the carousel by adding an index. I added click navigation by matching the list index to the carousel index. Works fine except that trying to rotate it both directions one click at a time is an issue. If I applied the suggestion of adding an index, it will work one direction but skip an item. The reverse direction is still an issue. Maybe I’m missing something.

      Reply

    Leave a Reply