Posts Tagged ‘carousel


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



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