View the Source Code

View my Portfolio Source Code

http://www.adambergman.com/portfolio/

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:

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

Yesterday I posted my first attempt at a custom Spark Layout, PagedLayout.  Using the GreenSock TweenLite libraries I added animation to the transitions of pages.  I will go into detail on the changes made to the original class at some point, but today I only have time to post the project and my source.  I have also created a an example application using Flickr’s RSS feed that I will post tomorrow.

View the Project in Action
Explore the Source Code

You may notice I didn’t go through and remove unnecessary parts of the tweening libraries, that’s something I’ll do later on as well.

Also, there are bugs in Flash Builder 4 (Gumbo) that prevent leading ['s (in cases like [Bindable]) from showing up in the exported source.  Make sure you download the zip file if you plan on using this code, not copying and pasting from the web.

I am intrigued by the possibilities of the new layout architecture in the Flex 4 framework (currently in beta, code named Gumbo). I have seen some really neat stuff materializing already: Evtim’s WheelLayout and FlowLayout, Andrew Trice’s CircularLayout, and Ryan Campbell’s collection of 3D Layouts.

Inspired by the great Javascript widgets on Apple’s Get A Mac web page and Google’s new Fast Flip, I decided to get my feet wet with Flex layouts.  This layout is similar to a horizontal layout in that it positions children from left to right along the same Y-axis.  It differs in that it compares the width of child elements on the container and when the combined of width of the child elements exceeds the width of the container it creates a new “page” for the extra elements.

Since this is my first experience with the new layout architecture I’m not sure if I’m doing everything to protocol – that is to say, it works, but is it the most optimal way to do it?  Thoughts, opinions, ideas, and criticism is desired.  I have 3 iterations of this layout and I’ll be posting one each day.  The first contains no animation, it is simply layout logic with some convenience methods for moving between pages.  Which leads me to my first question – Is it appropriate to have methods that modify the layout inside of the custom layout class?  I couldn’t really think of another way to do it so my next() and previous() paging functions are included in the actual layout class.

Below is the movie, you can view the source by right-clicking and going to “View Source”.  I have also linked the project so you can view it in a full browser window and really get a feel for the container in larger screen dimensions.  Tomorrow I’ll be posting the animated version.

In this version there are 15 buttons added to a DataContainer on startup.  You can use the sliders to control the container’s width and the padding between buttons.  The current page number and number of pages is displayed below.  Use the “Prev” and “Next” buttons to move between pages.

View the Project in Action
Explore the Source Code

As with most code I post, feel free to use this code in your personal projects.  If you do wish to use this in a commercial project you are free to do so as long as you drop me line and let me know.

Also notice the includeIn property, this tells the player which state the image is visible in.  Below are a few screen shots of the buttons along with links to the example project and source code.

View the Project in Action
View and Download the Source Code

View the Project in Action
Explore the Source Code
Step By Step Explanation

Step 1: Photoshop

I knew that I wanted to be able to change the bar’s color, and that I wanted that to animate with the AnimateColor transition. I also knew that I wanted the bar to have a glossy feel to it. So, I fired up Photoshop and mocked up my new application bar:

I added the highlights on separate layers so I could isolate them, create a pattern and then use them in a BitmapFill on the skin of my bar. Below is a screenshot of the highlight pattern on a black background:

I exported my highlights with no background layer to a PNG file (to preserve the transparency) and fired up Flash Builder 4 Beta.

MXML Application in Flash Builder

First I created a new project called “SkinBar” and dropped a SkinnableContainer on to the blank canvas (MXML below):

Creating a Skin

The background skin of my SkinnableContainer would include two rectangles, the bottom-most would have a standard SolidColor fill and the top-most rectangle would have a BitmapFill that used my highlights image as a pattern. I want the background rectangle to be able to switch between green, red and blue. First, I create a new MXML Component and base it on the Skin component. I call it “ApplicationBarBackground”:

The component starts out with the <fx:Metadata> tag. This tag tells the compiler which component type the skin is used with. The tag is very important in that it gives us the ability to call back to the root component’s data/model from our skin class. Most of the time you wouldn’t need this functionality because things like disabled/enabled, selected/not are handled with states.

The SkinnableContainer component requires at least two specific states to be implemented in the Skin, “normal” and “disabled”. If you try to compile the Skin without these two states the compiler will throw an error. Beyond the states required by the component you are skinning you can specify other, custom states. We’ll look at this in a bit.

After the <s:states> tag comes the <s:layout> tag. This property specifies how the SkinnableContainer component will display its children. BasicLayout works fine here because I will be manually setting the position of the children.

Finally, you see the <s:Group> tag which is the actual container for components that are added to the SkinnableContainer using the addChild() or addChildAt() methods. A container is required here and it must be named “contentGroup”. Not including this will result in a compiler error. Because I want the container to behave like the ApplicationControlBar I have told the group to use a HorizontalLayout.

Adding Custom Graphical Elements

We currently have a good skeleton of a skin going, it complies with the structure for a SkinnableContainer. Now, we have to customize it. I’ll do that by first adding my visual elements: two rectangles, one a solid color, the other my highlight pattern.

In MXML, the top most component in the MXML syntax is rendered first and therefore “below” other components that come after it in MXML syntax. First, we create a rectangle and set its fill to a solid color. Notice that an id of “barColor” is given to the fill so that we can animate its properties during transitions. The second <s:Rect> tag has the same dimensions as the first, however it contains a BitmapFill which will repeat the highlight pattern I created in Photoshop earlier.

Declaring the Skin in your Application

The last thing you must do to use a new skin is to set the skinClass property on your SkinnableContainer. You can do this by either setting the property on the instance of the SkinnableContainer in the MXML:

If you would like this skin to apply to all SkinnableContainers in your application you could create a style:

After setting your SkinnableContainer’s skinClass property, you should be able to compile and run the application and see a nice green skin. Now we’ll add some new states and transitions.

Custom States with Animated Transitions

Three states are added to the Skin MXML: “red”, “green”, and “blue”.

The color property of our SolidFill will be modified based on the state:

Notice the multiple definitions for the color property – one for each state. The default color=”…” is used for the normal state.

This functionality can be tested by adding a Button to the main Application that switches the state of the Skin on the SkinnableContainer:

Transitions between States
To make the current color of the rectangle (inside our Skin MXML) move smoothly to the color of the state that is going to be displayed I used the AnimateColor transition:

A duration is set to 1000 milliseconds, and the target of the animation is set to the fill of the background rectangle.

On Demand Animations

Finally, I added an animation that can be called through ActionScript:

This animation will flash the bar red 3 times and return back to the original color. The final project can be viewed below:

View the Project in Action
Explore the Source Code

Check out the Project in Action
View the Source Code (Update: I added some more descriptive comments to the source code)

It seems that you must create a new MXML component that extends the fx:Skin component and use FXG to draw the gradient yourself on the skin.  You then set the skinClass property of the fx:Application to your newly created MXML fx:Skin component.

See the Application in Action
View the Source