Max Presentation

Here is the carousel component that goes along with ‘Creating New Flex Components’ (RA208W), my Max 2007 presentation. This is a sample component designed to show how the major component lifecycle methods work and interact. This version makes some bad assumptions: the scale of all included items will be 100% and that items will not be added dynamically, to name a couple. If this were a production level component some additional work should be done to address these issues.

Further, a lot of the logic that determines the movement and positioning of items should really be factored out into a different class.I believe that using a strategy pattern in a lot of these cases would lead to better components and more maintainable code. However, this code is about the lifecycle methods and isn’t intended to be a reference on component implementation best practices.

That said, I replaced some of the more boring images from my talk with images from www.chicagopictures.net (special thanks to Don Brown for permission to use these images). As the balance of you never made it outside of the conference facility, I thought you might like to see what was beyond the giant walls of McCormick place. Check out the online version (source included) or download the code samples attached to this post.

Coming up in the next few days: The next posts on ObjectProxy and an introduction to the revised unit testing framework we have been diligently tackling.

Labriola

Download

18 Comments

    Sweet. I have been waiting to play around with this.

    thanks!

    • by Anthony
    • 10:10 pm, October 28, 2007
    • Reply

    Wow, that looked nice. I’ll have to play around with it as well :-)

    Awesome. Thanks Michael. I’m amazed you found the time despite the new born.

    • by Mike
    • 8:10 am, October 29, 2007
    • Reply

    a week before MAX i had to program a rotating carousel. the next week i’m sitting in your MAX class and i hear, "so here’s a free rotating carousel you can download." your’s is better. i took your code and made something more fun on my home page.

    Wow, this is great. How might I be able use an XML file to point to the images on the server?

    Michael, I have to say, I am just simply amazed with the carousel you posted. It is a really impressive !
    I started playing with it. I am trying to programmatically add more images to the carousel but a carousel.addChild(new Image(‘img.jpg’)) does not actually add a new side of the carousel.
    What do you think is the reason for that and which approach to doing so would you recommend ?

    Thanks in advance for any help.

    Regards,

    Romain.

    This component was just a prototype for Max. Right
    now all of the math and setup for the children of the
    container happens inside of createChildren, which is
    only called once on startup. To use this with either an
    external datasource or calling addChild wouldn’t be hard.

    Basically, you need to add an event listener inside of the
    component for everytime a child is added. In the handler
    for that event, you would redo some of the logic from
    createChildren. If I get a chance in the next few days
    I will try to post a version that shows this behavior.

    –labriola

    Awesome. Thanks Michael. I’m amazed you found the time despite the new born.

    micheal, thanks alot for sharing this amazing component. actually, im quite blur and new to AS2, AS3. can you help and assist me by create a sample for this carousel menu with mouse event with selectedChild? ex: when user mouseOver/click particular child, it begin to popup some panel? thanks a lot in advance.

    sorry for my bad english. learning

    • by Newb
    • 3:02 am, February 14, 2008
    • Reply

    Great blog, great comments. But how might I be able use an XML file to point to the images on the server? The answer of Labriola didnt help me much. Maybe i can use that for http://www.homepage-hoster.de

    Within the next week, I will post a new version of the component, which will handle dynamic children.

    Sorry for the delay,
    Mike

    Hey Mike,

    I just noticed that your "animationComplete" event doesn’t always fire correctly, FYI. For instance, if I have four images added to the carousel and click on the image to the right of the first image, the currentPosition variable ultimately evaluates to "-1" and the selectedIndex ultimately evaluates to "2".

    Thanks for the prototype. I look forward to seeing your next version.

    Best regards,
    Justin Winter
    useflashmore.com

    Justin:

    Thanks for the feedback. I hope to post a version that works a bit
    differently shortly. Stay tuned and I promise to get it online soon.

    Mike

    i apreciate your contribution, i looking that for monthes.

    • by HPdv1000
    • 12:10 pm, October 22, 2008
    • Reply

    Hi Michael!

    Wonderful carousel component! I’m still learning the ropes with Flex and AS, and this has helped me learn a lot. I just realized that you mentioned that it’s not possible to add dynamic children to this, is there any way you can give me some tips on how to do it if you haven’t gotten to around to creating an updated version of this component?

    Again, tons of thanks!
    -n

    • by Norm
    • 10:01 am, January 13, 2009
    • Reply

    can you please make auto rotate

    its really very good job

    very help full

    thanks

    nimesh nanda

    • by nimesh nanda
    • 1:02 pm, February 4, 2009
    • Reply

    Nice job! I have modified it to load in images dynamically, and auto rotate, unloading images on the back portion of the carousel and loading new ones in, working through a series of images listed in and xml file, then starting back at the beginning and working through them again.

    One thing I’m having a little difficulty figuring out, is a way to have the images spaced more closely together on the back of the carousel, than on the front. Is there a quick easy way to reset a couple of the variables you’re using, to do that?

    In advance: Thank you!!!

    If you have made this Auto Run, could you please share the code with me?

    • by forvars
    • 4:08 am, August 24, 2009
    • Reply

Leave a Reply