Random Fractals

After analyzing my blog stats, I’ve discovered to my surprise that I get the most direct hits from Google search for a simple Flex music player example.

If you are still looking for one, see my new Flex Music Player:

I added support for multiple tracks with the Prev./Next track buttons and a couple of sample tracks, enabled track scrubbing (just click on the track), replaced the playback component with the Playr, and added the music Visualizr from Ronny Welter. View source is enabled on this one, although it’s a little messy, but should give you a good head start.

I am planning to do a more extensive example with playlist management provided by the Playr, cleaned-up source code, and a sample of pulling music from last.fm soon.

There are plenty of sites for generating tag clouds, but this one just blew me away.

Wordle generates really beutiful and compact tag clouds from plain text, provided RSS feed, or del.icio.us user tags. There is even Wordle Advanced that lets you enter weighted words with optional hex colors.

The tool provides many different fonts, layouts and color schemes to tweak the end result with options to print or share it with your friends. Here is an example from my blog’s RSS feed:

The generated “word clouds” are really compact, packed with dozens of words utilizing free space between words and inside of larger letters. You can also pick the desired word orientation: any which way, mostly horizontal, mostly vertical, half and half, horizontal or vertical.

What are you waiting for? Pick an interesting RSS feed you know and go Create your Wordle.

This short tutorial describes how to implement and load multiple UI skins in a Flex application, leveraging compiled CSS stylesheets.

1. Move all mxml component style settings that control visual aspects of the view controls  to a standalone stylesheet (defaultStyles.css in this example).

For a good separation of UI design and easy maintenance, typical UI control properties that should be moved to a stylesheet rather than specified inline include font and border settings, fill and background colors, padding, alignment, etc.

Use the CSS type selector to override the style settings for all the control instances and class selector with a styleName attribute to control individual control instance settings. Here is an example from the Flex 3 lang. ref. docs:

A CSS rule such as

Button { color: #FF0000 }

affects every instance of the Button class; a selector like Button is called a type selector.

A CSS rule such as

.redButton { color: #FF0000 }

affects only components whose styleName property is set to
".redButton"; a selector like .redButton is called a
class selector and must start with a dot.

2.Include default stylesheet in the main application mxml file:

<mx :Style source="assets/skins/defaultStyles.css" />

3. Create alternative stylesheets for your CSS skins.

Once the style settings you’d like to change are moved to a separate css file and you are happy with how your application looks with the default stylesheet, you can create alternative stylesheets to implement different UI skins.

Read the rest of this entry »

Some folks complained that my default UI skin is too dark, it is hard to read photo descriptions in Flickr Flip Book, and the whole charcoal look and feel used in most Adobe Flex and AIR apps is wearing off.

So, I added new silvery Light UI skin to this app with an option to switch between the default and light skin:

And here is the screenshot of Flickr Flip Book Light:

It’s a little plain, but easy on the eyes. Maybe I’ll add some album page background pattern options in v.2 to make it stand out and more colorful.

In the meantime, I am planning to do a short how-to with some sample code next, to show how easy it is to add support for multiple UI skins to Flex apps with a well-designed UI and cleanly separated view/layout code and styles.

Flickr Flip Book is my new Flickr mashup to browse Flickr photo stream and view large photos with all the extra info, Photo Album style!

Flickr Flip Book Features:

- Flickr Tag Search prompt

- Flip Book animation with Photo Album pages displaying photos and extra photo informaion

- Detailed Photo Information: description, tags, author, number of views, date posted, comments

- Photo strip to navigate through the album photos and skip pages

- Tag clouds to view photo tags and perform a quick search of similar images

- Keyboard navigation to flip through photos and zoom in for a larger photo view

- Search by content or media type with some sort options: relevance, interestingness, date posted/taken

- Sequential and random slideshow playback

- Full screen view

Read the rest of this entry »