PagedLayout Part 3: Flickr Mashup

September 18th, 2009 · 10 Comments

Over the last few days I have been posting about my first custom layout in the Spark component architecture, PagedLayout (day 1, day 2).  Today I thought I’d post a real world mashup using the layout as well as take a little more time to explain what’s going on with the class and how you can use it in your projects.  Since I didn’t have time yesterday to post the changes I made between the animated and non-animated versions I’ll go through them now.

I am using the GreenSock TweenLite libraries to animate the transitions between pages.  The layout allows you to specify three key properties to manage the animation without having to modify the underlying layout class.  Notice these lines in the Flickr mashup:

  1. <!– Our DataGroup bound to our itemList data provider with the Paged Layout applied –>
  2. <s:DataGroup id="datagroup" height="128" verticalCenter="-1"
  3.         dataProvider="{photoFeed}" itemRenderer="itemRenderer"
  4.         width="446" horizontalCenter="2">
  5.         <s:layout>
  6.                 <adam:PagedLayout id="myLayout" itemPadding="10"
  7.                         animationDuration="0.75"
  8.                         easingType="{PagedLayout.EASING_DEFAULT}"
  9.                         useAnimation="true" />
  10.         </s:layout>
  11. </s:DataGroup>

PagedLayout allows you to specify whether or not it uses animation to switch between pages with the useAnimation property.  You can set this property to true or false.  

The animationDuration property is the number of seconds it takes the transition to complete.  

The easingType property is  a string place holder for the type of easing you wish to use in the animation.  There is currently support for Elastic, Bounce, Quadratic, and Cubic – the respective constants are EASING_ELASTIC, EASING_BOUNCE, EASING_DEFAULT, and EASING_CUBIC.  Take a quick look at the PagedLayout.as class file and you can see how easy it is to add a new type of easing as an option.  All easing included with TweenLite is supported, just use what is already there as an example and it should take only a few seconds to add in other easing equations.

I used the same method as Evtim in his WheelLayout Mashup post to connect with Flickr. This method downloads up to 20 photos from Flickr’s recent uploads RSS feed to use them as elements in the layout.  Below is the final version with a link to view it in a full browser window and a direct link to the source code.  As always, free for personal use, and commercial use (if you drop me an e-mail).

View the Project in Action
Explore the Source Code

Get Adobe Flash player

Tags: ActionScript · Flash · Flash Builder 4 · Flex · Flex 4 Framework · Gumbo