I have posted the following in the Adobe forums a couple of days ago. I didn't get a respond and I also think I accidentally posted it in the wrong forum. So here's the post:
Let me introduce myself. My name is Wisse and I have been working with Adobe products since I was a child at the age of 8 (10 years ago). Well, then it was called Macromedia Flash but you understand what I mean.
I have always been using flash for making animations and small simple applications (for presentations and games) in my spare time. I also use photoshop and dreamweaver for making sites and other things. So I will soon order the new CS5 web design collection.
I have a big (biggest so far) project coming up and before I really started I thought it'd be best to orient on what Flash application(s) to use and how I will make this project. So here is the plan:
I am making a dutch driving exam site where people can take practice exams for a small text message fee. The application will have to look slick and work smoothly. I made this to clarify what the application has to do.
I have never worked with Flash Builder and Catalyst but I kind of like the idea of making nice looking interfaces using Catalyst and then export them to Flash Builder. But as I just said, I have never worked with Flash builder and so I don't know whether I will be able to make this on Flash Builder (due to it's complexity). Flash builder also has some nice options for accessing external data (the XML, HTTP API and PHP in this case). Catalyst's data list designer and transition animator will save a lot of time and effort when compared to doing it manually in Flash Pro. The big issue here is that I have no idea how to script the rest in Flash builder. the 5 day course might help, but I want to make to be sure that Builder is the best way to go before doing so.
But on the other hand, I am quite familiar with flash and that could also save time. Flash is a bit harder to use when I want to make a good UI and Flash builder wins when you look at the server communication and the debugging tools.
So I would like some advice from some fellow Adobe users. What would you do? What would be the best way for me to go, according to you?
It really comes down to time and your understanding of AS3. I have been coding Flash for many years (since flash 5), and a friend with very little programming experience showed me what he was doing in Flex. I was able to connect the dots very quickly and was up and running in a few days. I was able to learn enough Flex and get a project beta released in 30 days working 8 hours a day.
Catalyst is a bit quirky to me. If you are skilled in Photoshop or Adobe Illustrator, then I would use catalyst as a convergence point to add spark markup to your visuals. Adobe has on their site a couple of nice videos on this and it's really a matter of organizing your layers in folders correctly for Catalyst.
You can also get the Flex Component kit plugin for Flash CS3 and higher. It comes with templates for an abundance of control skins that can easily be imported into flex to skin HALO components.
Spark is a different story however. But if you have time available, I would go straight to using Spark components and skin files. Granted they are coded in a mixture mxml and AS, but all the mxml is a descriptive definition of actionscript and once you've played with it for a couple of days, it starts to sink in pretty quick.
Catalyst is going to convert it's native projects or ps and ai files to FXG and you will end up with Spark skin files and spark components anyway.
Spark is also an "as Needed" concept versus "all features" meaning if you create a component, it's very basic. You then define things like layout and attributes / features as you need them. It keeps things lightweight and fast.
If you want to design in flash and use Spark, it's not too complicated, you just have to do a few things by hand like embed your movieclips into your skin files and wire up the states there. I do this quite a bit because I work with designers that prototype UI designs in Flash. I just export swc files, add them to my project and define the assets in the skin files.
FB also has a bunch of containers for controlling layout. This is real nice coming from flash because if you have a dynamic button group, you dont have to write loops to place the buttons on the screen. There are controls for doing this and some advanced controls like buttonbar and tabnavigator that make this a breeze just by binding data to them.
Hopefully this bit of info was helpful. If you have more specific questions, fire them back and I will do my best to answer.
TJ
The Early Bird may get the worm, but the second mouse to the trap gets the cheese...
Wow Gohloum, that was really helpfull I decided to go with the Flash Builder way because the 'Flex in a week' course on Adobe really helped me understand how Flash builder works (and how powerful it actually is).
Cool! Let me give you a little skinfile primer that will help you out bigtime.
1 - create a Flex project.
2 - in the project folder find the lib icon labeled Flex 4.0
3 - expand it and locate spark.swc
4 - click to expand and locate spark package
5 - click to expand and locate skins package
6 - click to expand and locate spark package (yes it is repeated)
7 - click to expand and now you will see a whole list of files with the extension .abc. These are the default skin files.
To make a custom button skin:
1 - double click ButtonSkin.abc
2 - Go File -> Save as and save the file in your root directory or a designated directory of your choice in your project (I use src/skins) and rename the extension from .abc to .mxml along with the file. You should now have src/skins/MyButtonSkin.mxml
3 - close the file and reopen. For some reason errors sometimes happen if you dont do this.
4 - You now have a Stock Button skin with all the code to draw the stock button and states. This is a great starting point to start fiddling with it.
5 - in your main application, add a spark button. Set the skinclass attribute to skinclass="skins/MyButtonSkin". When the button renders, it will now use your new skin file as the skin.
Other things you should know:
Complex components like DropDown list, datagrid, videoplayer, tabbar, etc have skins too but they are a little different. Say a buttonbar for instance. You define button skins for the first, middle, and last type buttons, and then the button bar skin itself is where the buttons skin class references are set. It may seem a little confusing at first, but you'll get it once you start playing around.
Actually, the TabBar would probably be the best complex component to start with. Just have to deal with 2 skins TabBarSkin and TabBarButton skin.
Lists and any component using a list is a little different as well because the utilize item renderers. So try skinning a List first before you skin a drop down list or datagrid.
So there you go, Spark Skin primer 1.0.1! Enjoy!
G
The Early Bird may get the worm, but the second mouse to the trap gets the cheese...
Heh heh... Yeah, I want to do a blog, but just haven't had the time to set it up.
I've not seen the lesson you are talking about, but I have created skins through inheritence by creating a new mxml file. The problem with this is you dont get any of the states defined pertaining to that particular underlying component, so you end up going to the docs to find them. By doing it the way I demonstrated, you get a full blown and defined component. It's easier to delete / modify than write it all by hand. Just know that if you remove properties that are accessible styles (background, etc), you need to modify the ActionScript in the component skin. I usually just go comment crazy and then if I botch a style I decided to keep (say cornerRadius), then it's easy to restore.
The Early Bird may get the worm, but the second mouse to the trap gets the cheese...
Reply With Quote
I decided to go with the Flash Builder way because the 'Flex in a week' course on Adobe really helped me understand how Flash builder works (and how powerful it actually is). 
