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)
[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.
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
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:
Download it here
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
This tool allows you to try out the various transition and tween effects offered in ActionScript 2.0 and then, when you’re happy with the way it looks, you can copy the code snippets into your own movies.
Inspired by Peter Baird’s line chart class, here’s a pie chart class in Actioncript 2.0. It’s designed for FlashLite, small screen UIs, keyboard interaction. The pie chart is constructed using a data array that specifies, for each pie wedge, the size, colour and a wedge label.
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.
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.
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.
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: