09
Mar
09

Simple Sideways-Scrolling Carousel

Not another carousel! Well yes. Posting this for storage really, the only real new thing added here is the method for scaling up the focus object.

On every enter frame event, each item in the list is checked to see if it is in the focus range (the centre of the visible area and a selected distance either side). If so, then the absolute position is calculated against the centre point. Now the scale and blur are added accordingly.

The class is encapsulated and easy to instantiate:

_carousel=new Carousel()
_carousel.init(area_width, area_height, range_pc, margin, min_scale, item_array, blur_on, blur_amt)

area_width – width of the visible carousel area
area_height – height of the visible carousel area
range_pc – the percent of area either side of the centre point to use as the focus range (0.1 – 1.0)
margin – the margin bordering each item on the carousel
min_scale – scale that items outside of the range reduce to (0.1 – 1.0)
item_array – array of sprites/movieclips buttons
blur_on – true=blur on, false=blur off
blur_amt – amount of blur to apply to the items out of range

Simple AS3 Carousel

AS3 Simple Carousel

A demo has been set up and can be seen here

The items in the carousel can be anything from simple pictures or buttons to more complex interactive movieclips.

There are three main interactive methods in the Carousel class:
scrollLeft() / scrollRight() – Increment along the list
gotoItem(index) – scroll to the selected item (where index is the item array reference for the item)

I have only added the functions required for my current project, but it should be very simple to add extra functionality such as looped content, reflections, etc.

Source files
Demo

Advertisement

3 Responses to “Simple Sideways-Scrolling Carousel”


  1. 1 Thirty
    May 6, 2009 at 2:51 pm

    Hi, interesting post. I have been pondering this issue,so thanks for sharing. I’ll definitely be subscribing to your blog. Keep up the good posts

  2. 2 Nick
    October 29, 2010 at 5:33 pm

    Hey thanks for this. I’m struggling to get it to load into another .fla file tho… could you give me some advice? thanks!

  3. December 26, 2011 at 11:37 am

    Please help to make it looped(auto sliding with dynamic content like classifieds ads Featured items)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates


%d bloggers like this: