by Peter Baird

 Comments (16)

Created

May 9, 2006

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.

COMMENTS

  • By John Barrett - 7:31 PM on May 9, 2006   Reply

    Hi,
    Wow, that is so cool`-`
    I get this error:
    Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
    Firefox crashes, but when I click”dismiss all” in Safrai, I am able to view it.

    Wonderful aplication`-`
    John

  • By Peter Baird - 7:35 PM on May 9, 2006   Reply

    Thanks for identifying the error. I’ll look into it. The CSS file should work fine on its own, though, since it looks like a load of an image that’s causing the error.

  • By Steven Erat - 8:03 PM on May 9, 2006   Reply

    Using Firefox 1.5.03 with Flash Player version 8,5,0,133, I also receive a series of Actionscript errors starting with “VerifyError: Error #1042: Not an ABC file. major_version=46 minor_version=16″

  • By John - 8:07 PM on May 9, 2006   Reply

    I downloaded the application,and compiled it, with no problems. Matbe the error is due to the browser.

    Thanks so much for sharing this, I really love it`-`
    I have been having some weird errors with flash 9.
    Thanks again,
    John

  • By SiamesePurr771 - 10:58 PM on May 9, 2006   Reply

    Great work. Now we need a Windows-style CSS and an OSX CSS built into Flex Builder. That’ll put Flex closer to SWT, which we now know to have won the Java GUI competition.

  • By Martijn - 11:10 PM on May 9, 2006   Reply

    The fonts aren’t embeded so at my machine it looks crappy with a Times New Roman as font.

  • By Jonas - 12:55 AM on May 10, 2006   Reply

    Nice, but I think the font isn’t embedded? I just see a default Times New Roman font..

  • By Quentin - 1:30 AM on May 10, 2006   Reply

    Hi !
    Nice StyleSheet ! But the font I have when viewing the example app is not the good one, it looks like the default one… (Flash Player 9 – Firefox)

  • By Carlos Rovira - 2:42 AM on May 13, 2006   Reply

    Hi Peter,

    The results are really awesome, thanks for sharing this. I want to point only one thing: The round corners in some controls are a little strange, what do you think?

    thanks! :)

  • By Peter Baird - 6:32 AM on May 13, 2006   Reply

    Yep, you’re right. That’s a logged bug in Flex… if you play around a bit with cornerRadius’s in the Style Explorer you’ll see the same results. That’s something that will be fixed with the next release of flex, and this same css file will produce the correct results. Good eye. ;-)

  • By Ganesha - 2:52 PM on May 26, 2006   Reply

    What’s up with the font on this page????

    (check in FF)

  • By jason - 12:31 PM on September 25, 2006   Reply

    When using a very long datagrid with the scroll bar the text in the datagrid roles under the column headings and shows through. When scrolled up the heading are unreadable as the text in the columns shows through.

  • By Mitch - 12:23 PM on February 2, 2007   Reply

    Oh my gosh! That is sooo cool… THANKS!

  • By mitch - 8:30 AM on February 7, 2007   Reply

    By the way, i changed the radius of the combobox from 17 down to 12 because it was just looking funky on the outer edges.

  • By Dennis van Nooij - 5:00 AM on September 4, 2007   Reply

    great theme, thanks for sharing ! For some reason the property “fontSize” in Application crashed my Air application though..

  • By Dani - 11:25 PM on July 27, 2008   Reply

    I use Adobe Reader 9.0 to read my online university books. If I open more than one PDF file, the second one blurs and runs to the top left slowly. If I highlight using the selection tool, it speeds this process up. Also if I use the right-hand scroll bar it leaves these streaks of horizontal lines? I’ve tried re-downloading. All my drivers are updated, and there is no hardware malfunction. What can I do to stop this?

ADD A COMMENT