I just wrote a post about stateless vs. stateful graphical skins with Flash and Flex. We discovered there are some big performance issues with using stateful skins created in Flash (swc).
Greg Owen, a fellow coworker and lead developer at EffectiveUI, help me create a test app for this. The app is a Flex app wrapped in AIR, and has 3 style sheets which you can swap out to test the various skin options for a CheckBox which is being instantiated 500 times. (if you download the source, you can alter this value). This provides enough load to actually see the CPU hit.
I had a recent comment about using Degrafa and the comparisons, so with the help of Juan Sanchez, I was able to add a skin that is created in Degrafa programmatically and is a very close resemblance to the other skins being used in regards to colors and appearance of states.
We ran some tests today using 500 CheckBoxes and these were the results:
No skin/CSS – CPU = 13.5%
Stateless – CPU = 13.5% to 14%
Stateful – CPU = 47% to 50% Whoa!
Degrafa – CPU = 13.5% to 14.2%
So, it looks like Degrafa does not have that large of a hit on the performance and if you are using it to skin yoru Flex apps, then you should be good to go!
(results are on a MacBook Pro 2.33GHZ Intel Core 2 Duo 2GB RAM.
Please note, to get a true reading, the app should be in focus)
Download the source here:
https://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip
Is there any chance we can see how you skinned the CheckBox using Degrafa? I can’t find any examples online.
Cheers,
Mark
If you download the source files here:
https://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip
you can go into the assets directory and CheckBox_icon.mxml.
or
Here is the MXML just for the CheckBox_icon in the example:
http://patrickhansen.com/demo/flex/CheckBox_icon.mxml.zip
Sorry, my comment replies don’t allow for rich text, so I will provide the links to the source files instead of just pasting it all in here.
I did create the actual checkMark icon in Adobe Illustrator, and then saved out as SVG path data via File>Save As> SVG. You do not actually need to save the file out, you can click on the “Show SVG code” and that will open up the the data in another window. You will see all types of “path fill” tags, but you can just scroll through to the very bottom and just grab the final “path fill” info after the “d”. That is the path data you will take into the Degrafa “Path” tag.
Thanks to Juan Sanchez for assisting with the CheckBox_icon in Degrafa.
Im really glad that you have this post. 😀
been waiting for it. 😀
oh so you could actually do this?!
i wonder why mine is not working.. damn!
well i got to check this out again!
yipee!!!
I am loving this blog more and more…
😀
oh add this tag skinning checkbox icon in degrafa.. i think lots of people uses this as search keywords in google…
—————–
so how about. the icon inside the buttons?
this thing i need most. 😀
cheers!
Thanks for your feedback. It seems like it is helping!
People actually read my blog?!
I will add that tag to the post – thanks for the idea.
The icon inside the buttons? I’m not sure I quite understand the question.
in flex, you could define the icon that a button should use (instead of labels)
so, could you give an example for this one (with degrafa in flex)?
or its the same as the checkbox?
😀
The thing about reading your examples help me see some things i missed from using degrafa. Like how you added a translate transform inside a path.
Maybe this could help me solve some problems i encountered before.
Since this actually has irritated me to some point because i cant get to position my paths where i wanted them (whenever i use paths in rendering surfaces of containers).
So. More Power and keep blogging (please!)
Have you tried leaving your skins in a SWF, making them stateless ( creating separate classes for up/over/down/disabled states ), and using the up-skin: Embed( source=”blah.swf’, symbol=”blah” ) method? I am curious to see if that still bogs the Flash Player down.
@ Alex Koyich
I have kept the skins in a SWF where they are stateless (i.e. Button_upSkin, Button_overSkin, Button_downSkin, etc.), ad then using the following CSS to pull it in:
Button
{
disabledSkin: Embed(source=”flex_skins.swf”, symbol=”Button_disabledSkin”);
downSkin: Embed(source=”flex_skins.swf”, symbol=”Button_downSkin”);
overSkin: Embed(source=”flex_skins.swf”, symbol=”Button_overSkin”);
upSkin: Embed(source=”flex_skins.swf”, symbol=”Button_upSkin”);
}
This is the traditional Stateless approach using Swf’s or other graphical methods such as bitmaps. And this has been proven to maintain optimal performance with CPU hit with a Flex application.
I have not created individual Classes for each state, I’m not sure if I understand the question clearly.
Alright, so. Any chance there’s an example out there somewhere of using degrafa to completely redefine the look of a checkbox. So not the traditional check in a box.
This post helps in that it shows clearly to use the icon, rather than skin. What I’d like is to be able to create a completly different looking checkbox that will scale aswell. In the example here you guys have hardcoded the icon width/height to 14×14.
Any ideas?
Cheers
-simon
I spoke to Juan Sanchez, who is the head designer behind Degrafa, and he doesn’t currently have an example that you are requesting, but he did provide me with some information that may be helpful.
So yes, skinning a CheckBox in a more non-traditional way with Degrafa can be a headache due to the CheckBox component and how it is developed to handle the icon/label and bounding area. If you want to use Degrafa for skinning a checkbox in a less traditional way (look/size), you can, but if you use CheckBox component, then any part of your visual outside the standard Flex CheckBox size would go outside of the bounding area. This is ok, but you would have to accommodate for this excess in your layout and is probably not recommended or preferred.
He did mention that you could accomplish what you want easier by using ToggleButton instead of a CheckBox. ToggleButton has more flexibility in regards to scaling and skinning. You could assign your new image as the icon or the button skin of a ToggleButton, whichever you prefer or fits your needs.
Hope this helps.