I’ve spent the last couple of days getting up to speed with skinning in Flex 4. All I can say is that it is much easier than it was before. You can see my first skin release below which I am calling Black Ops. I started out in Illustrator drawing the basic shapes and then moved to Flash Catalyst to skin the button and scrollbars. I created the rest of the skins using Flash Builder 4. You can view source on the Flex application below or download the FXP skin file to start using it. I only skinned a small segment of the components but feel free to build on what I did.
[kml_flashembed fversion="10.0.11.0" movie="skins/BlackOps/Main.swf" targetclass="flashmovie" useexpressinstall="true" publishmethod="dynamic" width="576" height="254"]
[/kml_flashembed]
Lee
this is really nice. saves my precious battery power when flexin. thx lee!
Nice Skins I have not had the time due to work to explore Flash Catalyst but I tried to set some skins out of an Illustrator Artwork, and it’s really easy and intuitive hope I get time on the weekend to explore it a little bit more.
Very nice!
Nice, lookin good-thanks for the download…
Been digging into the copy of FC I got at FlashCamp when I should be catching up at work – I can see it being a huge time saver.
What’s up with the no FW import option from the welcome screen? Is it b/c FW CS4 can export FXP’s?
it’s nice yes, but the BIG problem is, correct me if I’m wrong, that when you open and modify a catalyst project inside flash builder there is no way to go back to catalyst.
cool, but without handcursors!
How much time did you need to do this little demo?
need weekend to get deeper into Gumbo Flash Flex Builder 4
Don’t you mean “download the FXP Flash Builder project file”? The Flex skin format is FXG, but I’m sure you already knew that
Hi Lee,
I’m having trouble viewing the SWF. Perhaps it’s a cached SWZ thing as it doesn’t appear anyone else is getting it, but I’m getting the following errors in FP10.0.0.525 debug and nothing gets shown:
VerifyError: Error #1053: Illegal override of isRelatedObjectInaccessible in .RemappedMouseEvent.
ReferenceError: Error #1065: Variable _mx_managers_CursorManagerStyle__embed_css_Assets_swf_mx_skins_cursor_BusyCursor_149475243 is not defined.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler(…
love it
Hi Lee, nice stuff
Can you maybe estimate how much the Flash Builder & Flash Catalyst Combo License will cost?
Perhaps not, I just deleted the contents of my FlashPlayer/AssetCache folder (OSX) restarted Safari/FF and still no luck with those errors. I can’t figure it out though.
looking good lee! i’m not a reel flex man but looks good!
@Richard I have no idea what that error means sorry.
hi lee,
In your Button skin’s labelElement you’ve got a property called d:userLabel=”Button” ? any change you could explain what that’s for? thxs
Wow, looks great even when inverted (ctrl + opt + cmd +
@paddy That is generated by Flash Catalyst. It doesn’t have any effect on your actual application.
@mloncaric Wow cool! I didn’t know that trick
looks good, you should know that on my wide screen monitor I could not see anything, both colors look black, I had to open it in my second monitor.
@almog Yeah it may a bit too black
@Lee turns out your SWF (and project) requires FP 10.0.22.0 or higher, Flash Builder 4 helpfully informs you of this when importing the FXP which is nice. I was running a slightly older FP 10 after installing Flex Builder again. Not sure if you want to update your JS embed code to reflect the requirement?
Those wanting to upgrade whilst keeping a debug player version (i.e. not via teh SWFObject upgrade route) can get it from:
http://www.adobe.com/support/flashplayer/downloads.html
is there no round tripping since catalyst prevents from opening an fxp after it’s been modified in flash builder ?
It’s probably coming later, not in this beta, right ?
@Richard thanks for letting me know Richard!
@rem Yes there will be round tripping in the future but didn’t make it into this beta.
Is there a way to create one component at a time in FC, and then bring that into an existing flex project, instead of having to create an entire FXP? What if I’m into a big project, then I need to create / skin another component? Do i just make FXPs that hold my components, and copy them over?
You should upload this to:
http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=28&loc=en_us
I have to second what almog said about the darkness.
On my brand new Eizo *VA panel (which is so bright that I have to turn the maximum brightness level way down), the skin is adequately bright–but only just so.
On my Dell panel (several years old, but it was a top of the line IPS panel when new), the skin looks almost solid black! (Other than the labels, of course)
Sorry . . .
I like it, though I think you should make the text highlight color black;)
I can’t view this SWF in Firefox, only IE. I have the latest Flash Player installed.
Either I’m getting old or my monitors aren’t any good (and they’re Apple Cinema Displays), but the contrast is a touch too low, like almog and Banned are saying. I mean, i get it, it’s “Black Ops,” right? As in, covert and darkness and deniable assassination and all that. But I, for one, probably won’t be utilizing the skin as it is. Thank goodness custom skinning is as easy as you say it is!
@banned in boston.
I think you’re missing the point. The point is you can skin flex components crazy fast…make the handles hot pink if you want…takes two seconds.
Check out a video tutorial on the Fireworks/Catalyst workflow at http://labs.adobe.com/technologies/flash/videos/.
It will be fully integrated into the tool in the final release version.
Hy everyone!
Lee! I FOUND A BUG in it! Reealy strange one…
1)When you push the HSlider and than play with the mousewheel it changes its value while the scroll bar does not.
2) in Google chrome after mouse click on scroller you can get such picture
http://superior0.narod.ru/Untitled-1.jpg
Hy everyone!
Lee! I FOUND A BUG in it! Reealy strange one…
1)When you push the HSlider and than play with the mousewheel it changes its value while the scroll bar does not.
2) in Google chrome after mouse click on scroller and than game with mouse wheel you can get such picture
http://superior0.narod.ru/Untitled-1.jpg
I really like to skinning now with catalyst. Very easy and I made my first “hulu player” with it. The only thing I can’t seem to grasps is the scaling. What I want is the controls I skinned to scale to whatever width-height I set. Instead, because I made the skins in illustrator they are stuck to the orginal size I made them. I really wish it was like flash in the way that no matter what “size” you make it if you put it in a movie clip it scales with that movie clip. Either I’m missing something or it’s jsut not possible.
Definitely too dark for anything but a high end monitor. I wonder if low contrast interfaces are the new 8-point font of the Flash world?
Flashbacks of Gmunk.com abound!
I figured it out!!!
just needed to set resizeMode=”scale”
@Michael that’s why it’s called Black Ops. It’s so secretive you can’t even see it
Hi
Nice skin
Sorry if its a stupid question, but i just cant figure out how to apply this skin to an existing project. (im using Flash builder 4 beta)
I tried file->import skin artwork, but no go.
Thanks for help
@ Sydd
That’s kind of along the lines of my unresolved question (#23). Seems like it’s set up to create entire projects instead of individual compoonents or skins. What I did was open Lee’s project in FB and copy over the mxml components into my project. I was then able to use them. I’m more than sure this is not the way to do it, I’m definitely anxious to see how we use this is a real world situation. It’s gonna be awesome I’m sure!
I get an error opening the FXP in Catalyst … “This FXP project has been modified outside if Flash Catalyst and cannot be opened.” … any ideas?
I wrote this about using stateful skins with degrafa for folks still using Flex 3 FP9 : http://blog.lyraspace.com/2009/06/05/stateful-skins-with-degrafa/
what’s the deal with the namespaces? …
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:d=”http://ns.adobe.com/fxg/2008/dt”
xmlns:fc=”http://ns.adobe.com/thermo/2009″
xmlns:ai=”http://ns.adobe.com/ai/2008″
@Brad
I figured it out
i found the solution on Adobe wiki:
[Quote]
Associating Components with Skins
Skins are associated to a component via the skinClass style property defined on SkinnableComponent.
An example of doing this via CSS:
FxPanel{
skinClass: ClassReference(“mx.skins.spark.FxPanelSkin”)
}
You can also do it inline with MXML:
The skinClass style is typed to take Class objects.
[/Quote]
… the blog is eating my MXML tags
heres the url:
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning
cool, that works , but we still need to create the flex project from the FXP made from FC to bring the MXML component to our existing Flex project. Is there a better solution for that?
So lee, nice one, and indeed it looks got in negative/reverse as well…
PS: Anyone know what is causing Flash Catalyst to fail/freeze/hang/shutdown immidiatly at launch? can’t open it for more than to seconds and it crashes. I even don’t get the main window, it hangs with the first splash screen within 2 secs! Just when I wanted to try this out!
To make matters worse, after it crashes and gives me the dialog box stating:
“An error has occured.” “See the log file”, a second later the default OS X crash prompt comes stating that: “The application Flash Catalyst quit unexpectedly” “Mac OS X and other applications are not affected”. (this is the prompt many will know, it has a yellow triangle with an exclamation mark in it)
So not only Flash Catalyst gives it’s own error, the error is serious enough to have caused a trigger of the default os x quit prompt. I’m at a loss here, have already tried and reinstalled it several times, to no avail. Please someone, help me… (PS sorry lee for using your blog like this, but to my knowledge this is still the quickest way to get answers, I intend no harm or irrelevant/over comments)
Re: Catalyst crashing on MacOS X – After removing and re-installing the beta, try running the system utility to repair disk permissions. I noticed that though it’s not exclusive to these software tools, many beta products really chew on system resources and break these linkages. It is beta software, after all. Hope this helps. – m
Hi
If you are looking for a special operations group for any black ops missions then look no farther. Snake4hire is a group of special operatives formed together for secret black operations. Our team can infiltrate any high security facility, bypass any secured door, escape from any prison, we use a low quantity of high tech equipment enough to survive in any conditions. Our team is build up of operatives from different fields to help in any sort of mission, we have people that are weapons experts, vehicle experts, computer geniuses, security systems experts, stealth and survival experts, bomb experts and many other types of expertise. Depending on the type of black ops mission there is a negotiable charge for our services. email us on snake4hire@hotmail.com
Hi
If you are looking for a special operations group for any black ops missions then look no farther. Snake4hire is a group of special operatives formed together for secret black operations. Our team can infiltrate any high security facility, bypass any secured door, escape from any prison, we use a low quantity of high tech equipment enough to survive in any conditions. Our team is build up of operatives from different fields to help in any sort of mission, we have people that are weapons experts, vehicle experts, computer geniuses, security systems experts, stealth and survival experts, bomb experts and many other types of expertise. Depending on the type of black ops mission there is a negotiable charge for our services. If you would like to use my black ops team then email us your name a short briefing on the mission and we will email you back within 48 hours. Our email address is snake4hire@hotmail.com
p.s if any of your missions involve us using weapons then let us know on your first email.
Lee, is there a way you can fix the RSS so that this particular story doesn’t keep updating in my RSS Reader? All the other stay deleted after I read them, this one just seems to be a pest and won’t stop updating.
Lee,
Is there a reason why the opening brackets were left off of the Host component Meta Data declarations? for instance:
HostComponent”spark.components.HScrollBar”)]
(missing the opening “[“)
Perhaps this can be set in the preferences of FB somewhere? Just wondering.
thx
This is one piece of nice information. I’d like to ask, is there some way for Flash Catalyst to support for earlier versions of Flex specifically Flex Builder 3? I’ve purchased my license of Flex Builder and it would be very beneficial if it has support for Flex Builder 3.
Hoping for your reply. Thank you.
Jonathan
Your text input has a blue highlight when you select text — how did you manage this? When I create a black text input, the highlight color is black, making it hard to distinguish the highlighted portion from the non-highlighted. I checked out the source, but I couldn’t find anything that jumped out as “highlightColor”
it is fantastic
Maybe its time to convert it for Flash Builder Beta 2 and Flash Catalyst Beta 2?
hi great one thanks, I used this tutorial to skin mu flex buttons , was quite simple and easy , would like to share
http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex
unable to resolve ‘/Users/labuser/Library/Fonts/final font – Junction 01.otf’ for transcoding Main.css
How to resolve this error ?
Hey Lee maybe you should replace “labelElement” to “labelDisplay” in your source – it has been updated.
love your site btw
greets
hello i cant even run it it is saying that is error:file format