Author Archive: Peter Baird

Time-based Flex 2 UI: If time were a color, what color is it now?

I read an interesting comment on a blog post recently discussing the possibility of a doing mathematical operations on colors in the UI, and not one to shy away from a fun challenge, I cooked up the following example of a time-based user interface in flex, as shown in the below example.

There are two things going on here. First, the background color is chosen from a pre-defined set of colors based on the day of the week. Come back tomorrow, and the background color will be different.

But, the more fun part is the second piece, which is something I’ve mused about in the past before… “if time were expressed as a color, what color would it be right now”. So, follow me on this. The time is expressed as such: Hour is represented by a percentage of red, where 24 equals a full value (so, x / 24 converted to a hex value). Same goes for minutes (Green), and seconds (blue). All put together, a full time with hours, minutes, and seconds, becomes the RGB value. So, 12:00:00 a.m. is black and 23:59:59 is white, 12:30:30 is grey, and so forth.

View the Example (Flash 9 Player Required)

Download the Source Code

timeBasedUI.jpg

Beyond Styling: Applying Filters on Flex Components

This is documented in the livedocs, but I also wanted to give some examples of how you can apply filters to components to further achieve your desired look-and-feel. Want a drop-shadow on a button or a label? Want your text to look chiseled, or maybe your combo-box looking nicely chiseled? What an inner-shadow on a text input? Or maybe you just wantd a an area that looks beveled, or inset. This is all possible with filters in flex, as shown in the image below.

Not only is it possible, but it’s incredibly simple. A label with a drop-shadow is as simple as the following:

<mx:Label label="Label">
   <mx:filters>
      <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
   </mx:filters>
  </mx:Label>

So, I’ve provided a sample mxml file that shows some nice uses of filters.

View the Example

Download the MXML

Once again, here’s to Flex apps that don’t look like flex apps!

filtersOnComponents.jpg

Mac OS X-looking CSS for Flex 2

As an experiment in CSS Styling, and to show off some of the new features of flex 2 styling, I’ve created a Mac OS X looking style sheet for Flex 2. It’s not perfect, but to the untrained eye, it’s pretty close. There are no images or skins used in this, it’s strictly CSS. With the next transparency features, and highlights, there’s a huge variety of look-and-feel that’s possible. Here’s to more flex apps that don’t look like flex apps!

Click here to download the the CSS and source to the below example

Click here to view an example application with the os x css file
(Flash Player 9 required)

OSSXcss.jpeg

[UPDATE] Thanks to all who pointed out some of the errors (I should have test on a PC first ;-) ). I’ve replaced the the swf and the zip. Apparently there’s a bug with embedding an image declaratively in the application tag, so I used a workaround for that. Also, the fonts should be showing now… but that has surfaced another bug (which I’ll file)… embedding a font and then apply a drop shadow to it makes the font disappear until you rollover it, so you’ll see some words missing until you rollover.

Flex 2 Style Explorer Beta 3 Available

Just a quick note that with today’s release of Flex 2 Beta 3, the Beta 3 version of the Flex 2 Style Explorer is also available.

In addition to some bug fixes, both in flex and in the Style Explorer, you’ll notice a few additions, my favorite of which is the fillColors property added to application (no more loading background swfs to define the background gradient).

Other changes to the Style Explorer include:

  • Application: added fillColors property
  • Application: added fillAlphas property
  • Application: swfs embedded as the background image now reference the symbol within the swf, rather than the swf itself
  • Tab: added backgroundAlpha property
  • LinkBar: added disabledColor, and exampled of disabled item
  • ScrollBars: added a horizontal scrollbar in the sandbox
  • DateChooser: added dropShadowEnabled property
  • MenuBar: added highlightAlphas property (note, this behaves differently from highlightAlphas on other components, and defines the highlight on rollover, not the highlight area in the resting state.
  • Several components: added dropShadowColor property
  • Several components: there are also a couple of other naming conventions that have changed between beta 2 and beta 3, so keep an eye for those.

As always, feedback is welcome and encouraged. If you find something not working, or feel that something is missing, please let us know.

Lastly, the Flex Style Explorer has found a new home.

[Update: the style explorer... the style is at its final home on adobe.com]

Click here to run the style explorer from its new home. (view source is also enabled from this location)

Click here to download the Style Explorer

Flash Lite 2.0 Styleable Bar Chart Component

Adding to our previous work, I’ve created styleable bar chart class for Flash Lite 2.0, with properties for bar colors, background colors, highlights, shadows, data tips, labels, chart height, chart size, chart placement, whether its horizontal or vertical, and other fun stuff. Again, all you need to do is figure out how to get the array of data onto the phone (whether it be loadVars, or whatever). Once it’s on, all you need to do is assign the data to the chart class and tell the chart to draw itself.

Some of the things you can produce via styling it are as follows:

barCharts.jpg

Download it here

Kinglong and Motiondraw have sweet Flash Gradient Explorers [Updated]

Seeings as we’re all about the Explorer’s here, I thought I’d point out some great work that others have done. Kinglong has a great Gradient Explorer. Anyone whose spent a little time trying to programmatically draw a gradient with the gradientFill function in actionScript knows what a headache it can be trying to get the right parameters to draw the right gradient. Enter Kinglong’s gradient explorer. Create your gradient and copy and paste the code. Sweet!

[Update] Andreas Weber of MotionDraw also has a fantastic GradientTweenEditor that goes a bit farther to include code for 2D gradients, and gradient tweens

Flex 2 Style Explorer Now Beta 2

With today’s release of the Flex 2 Beta 2 we’re also releasing a companion Flex 2 Style Explorer Beta 2. You’ll notice a lot of changes in naming to styles in Beta 2, and so if you’re working with Beta 2, you’ll need to use this version of the Style Explorer to generate the right CSS.

Continue reading…

Flex 2 Style Explorer (beta) available

The Flex 2 Style Explorer (beta) is now available for use. It being a beta, built with a beta product, there are the usual caveats. Being Flex 2, of course, to use this you’ll need the Flash Player 8.5 to run it. Also, as Flex 2 is beta, there are some interesting behaviors you’ll notice in terms of the way some things might look. And finally, as this is built on Beta 1 of Flex 2.0 some things may, and most likely WILL change in later versions. Once the next Beta comes out, I’ll update it to beta 2, and re-submit.

flex2StyleExplorer.gif

Continue reading…

Styleable Line Chart Component for FlashLite 2.0

Building off of the FlashLite Stock app in the previous post, I put together an actionscript class that, given an array of data, will draw a line chart. It’s specifically geared towards FlashLite 2.0, in both its display on a small screen, as well as using key control rather than mouse for display of point labels.

Continue reading…

FlashLite 2.0 app: Stock Charts using the Drawing API

FlashLite 2.0 offers quite a bit in terms of better mobile application development. Trying out the new features, I’ve created the following application which provides stock quotes for any stock the user enters and charts the historic prices of that stock, which you’re free to download and try out either on your PC or your FlashLite 2.0 enabled phone. Some of the great things about FlashLite 2.0 that I appreciated include the following:

Continue reading…