I have been working to get a minimalist theme for one of the Flex 4 apps I am building. I did some minor tweaks to my actual theme and created “Plastic”. This theme is inspired by the regular plastic ware that you would see everyday. It is a sober, light theme with a dash of boldness added by the sunshine-orange roll over scheme. As of now, I only have spark component skins built into this. I will add the styling for the halo components in the next iteration.
I cooked up a sample application mock-up with Plastic theme applied. View the application Give this theme a spin – download the source files (Plastic.fxp), import into Flash Builder 4 and you are all set! Due to the limitations of the Beta 2, you cannot import this FXP into Flash Catalyst again. In case you want to dabble with the skins in Flash Catalyst itself, download the FXP for catalyst (This FXP will not have constraint based sizing)
Plastic can be applied to all the spark components that are available as wireframe components in Flash Catalyst. View Components Demo
Some of the components are likely to have sizing issues, if you find any – drop me an email or drop a comment in this post. Download FXP
Very very nice!
Corey
16 Jan 10 at 12:31 am
@Corey: Thanks a lot!
Harish Sivaramakrishnan
16 Jan 10 at 12:33 am
Looks good, but the font doesn’t seem to be embedded correctly on the bottom menu (renders times new roman for me when I view the demo)
Aran
16 Jan 10 at 2:20 pm
@Aran: Thanks for bringing this to notice, will get it fixed
Harish Sivaramakrishnan
16 Jan 10 at 5:27 pm
Good one Siva..
Keep create and post..
Nathan
18 Jan 10 at 10:37 am
some suggestions.
- the hover colors can be made uniform (currently there we have light-blue, dark blue, orange and gray).
- the checkbox and the radio button look similar. i would expect a checkbox to havea tick mark or a cross mark but not a dot.
- the arrows on the scrollbar don’t seem to provide much value.
- the font is not embedded for the header tabs.
satish
18 Jan 10 at 10:44 am
@Nathan:Thanks a lot
@Satish: Thanks for the suggestions.
Hover colors are kept that way, which I thought was aesthetic.
The arrows in scrollbar is another design element I have, its not about value – again, it is the aesthetics and not value proposition
Will fix the font embed issue.
Check box with tick is the most common implementation, I am much more fond of a dotted checkbox. But, Point taken.
Harish Sivaramakrishnan
18 Jan 10 at 12:01 pm
looks good. the only thing i noticed is the top left and lower left corner’s stroke seems to be off. u might be able to set pixel hinting to true. if that’s already set it may be a bug. i’ve seen it in my spark application but haven’t been able to fix it.
judah
19 Jan 10 at 2:30 am
simple and interesting,WOW!
sheetal
19 Jan 10 at 11:49 am
@Judah: Thanks for the comment, I will try the pixel hinting workaround.
@Sheetal: Thanks a lot.
Harish Sivaramakrishnan
19 Jan 10 at 11:51 am
nice one,
some suggestions,
I guess this is a very basic version and it can be much better
- I can’t feel radio button
- selected bg of first and last item is visible behind the scroll track.
- nav item font , vertical alignment.
Thanks so much, greetings!
musavir
19 Jan 10 at 12:27 pm
Looks good but I am unable to open the fxp in catalyst beta 2. It fails to open with “This FXP project has been modified outside of Flash Catalyst and cannot be opened.” Any ideas?
Very
20 Jan 10 at 8:08 am
Daniel
20 Jan 10 at 8:09 am
@very, daniel: To get the component sizing right, I had to take the fxp and open it in Flash Builder. Once that is done, the beta 2 does not support round tripping to Catalyst. Let me post the Catalyst Source FXP itself. Thanks for bringing this to my notice.
Harish Sivaramakrishnan
20 Jan 10 at 9:55 am
@very, daniel: I have added a link to the FXP that you can use in Flash Catalyst. Let me know if that works for you.
Harish Sivaramakrishnan
20 Jan 10 at 11:39 am
Hello.
First of all – thx for great job. Very good stuff.
I decide to form your skins and CSS as a theme (single swc file) – collection of such themes in my plan list.
So rather than using command line or ant, I decided to use lib FB project to do this. I made new project Plastic_lib, and put all your src to Plastic_lib src and deleted Main.mxml and Plastic.mxml. I didn’t include FlashCatalyst.swc in its source path. FB show me list of errors. I went project prefs->Flex Lib Build Path->Classes tab and changed “Include all classes from…” radiobutton to “Select cl…” and selected all classes. Errors disappeared. In project prefs->Flex Lib Build Path->Assets check css and ttf files. Plastic_lib.swc in my bin folder. To test this new theme, I made new TestPlasticTheme regular project. I took your Main.mxml to test on it and commented <!—-> as it will be matter of theme, and removed all skin class assignments (skinClass=”bla bla”) from components code cause it aldeady done in Plastic.css in Plastic_lib.swc (but you need to correct it slightly – add s|TextInput
{
skinClass: ClassReference(“components.TextInput1″);
}) to the Plastic.css file.
Than in TestPlasticTheme properties->Flex Compiler->Compiler Options I added -theme “path_to_your_lib \Plastic_lib.swc and built. Flex didn’t see font! Put UbuntuTitling-Bold.ttf in TestPlasticTheme src and all compiles good(strange thing. Font is already in swc.). All looks good except two lists
(I don’t know how to resolve it correctly, but I find two ugly ways :
1. You can rename s|List.menuList to s|List#menuList in css and give id=”menuList” in mxml to menu list(same with defaultList).
2. Rename rename s|List.menuList to .menuList and use this style as styleName property in the component.
Both approaches needs knowledge about the theme – bad.
)
It is almost fully-featured theme ,but troubles with font and list styles – don’t get it completed.
Any ideas how to resolve this.
Thx.
Andrew
21 Jan 10 at 6:01 pm
@Andrew: Thanks for using my theme. Appreciate the effort that you have done. For the list styling, I would believe using your approach 2 is a good enough one. FB4 not detecting the font after the swc compile sounds bad, I need to take a look at this one.
Harish Sivaramakrishnan
21 Jan 10 at 11:44 pm
great theme man !!!
i even liked your mac theme as well!!
gr8 work
codebreaker8086
20 Feb 10 at 12:08 am
Excellent work,
Thank you very much!!!
Asanka Lakamal
26 Feb 10 at 2:42 pm
Is there anyway I can use this for a Flex 3 app?
Dameon
10 Mar 10 at 11:05 pm
@Dameon: This is currently Flex 4 only.
Harish Sivaramakrishnan
11 Mar 10 at 1:22 pm
it’s look very simple and gud.but i am unable 2 download this file?how 2 download this theam?
prem
14 Mar 10 at 1:12 am
When we updated to the release version of FB 4 we notice that the list tabs now show a blue shadow with the selected tab. Any ideas on how to get the shadow to go away? It seems to have something to do with the “selected” state but I have no idea how to change “RepeatedItem2.mxml” skin to make it disappear. With FB 4 Beta 2 we did not have this problem.
Tami Wright
30 Mar 10 at 1:37 am
*BUMP*
We are releasing our application soon as the shadow I mentioned in my last comment is still there (in both the Plastic demo app and in our own app). I have screen shots but just can’t attach here. Anyone? This is REALLY bugging us and we haven’t had any chance to track down the culprit.
Once again, this only became problematic when we upgraded to FB 4 release version.
Thanks,
Tami
Tami Wright
14 Apr 10 at 11:11 pm
The same stuff for me.
Anyway, good job!
Alex
12 May 10 at 3:17 am
i found a bug that maybe you can help with. When i use the Slider tool with objects in its viewport it doesnt slide all the way to the bottom of the track but rather 1/2-3/4 way down. i have tried everything and just cannot get it to work. when i hard code basic text it seems to work ok.
corey
6 Jul 10 at 1:32 pm
Same bug for the selected state, seems that Flash Builder did it, because I tried to change the skin, but nothing was doing it… I put a s:rect to cover it :p but you have to change is color depending on the application color :/
Myumyu
16 Jul 10 at 7:18 pm
I found the bug of corey with the slider too, I used a Slider on a Group and had two scrollbars, the horizontal one works great, but the vertical one is like 1/6 of the track size and goes to 1/4 of the track max (at this point it have scrolled everything). I tried to look on the skin, and the track skin is good, when i put the classic spark thumb skin, the scrollbar has the perfect size, so the problem must be in the thumbs4.xml. Didn’t found where…
Myumyu
22 Jul 10 at 1:55 pm