Flash tutorials | Flex Skin roundup
1.Flex - Simple Skinning Example
As I am sure most who have even just dabbled in Flex know, you can style your applications using CSS. The problem with styling is that, at the end of the day, your application still looks like a Flex application (not there is anything wrong with that). The real power behind making Flex apps look different comes from skinning.




2.How to Skin a Flex Video Player
I have created a series of small snippet videos taking you through the basic process of creating this (left) Flex Skin using Photoshop. This training is meant to give insight into the process of using the Flex interface to implement a Design from Mock-Up into a Production like workflow. This is a very similar process to creating a Website and anyone who is familiar with that will be at ease with this. I am traditionally a Web Designer and I found that Flex is very friendly for making User Interfaces. Adobe is supposed to come out with an application specifically for Designers to Design UI’s in, but until then I am outlining how to work within Flex and Photoshop.
3.Accessing the component instance from a Flex skin
If you need to access the component that a skin belongs to, you need to know that the skin’s parent is the component that you’re skinning. Which means you can access properties of the component through the skin’s parent (N.B. Don’t do this in the constructor – the skin isn’t added to the component’s display list until after the constructor has run).
4.15+ Strongly Recommend Tutorials You Must Read for Creating Skins and Themes( UI Design ) in Flex
As well as you know creating a polished user interface is an important part of a successful application. Although the Flex has powerful default skin and looks not bad. But from the business point of view you should consider more about the comany’s identity,unique, the difference from competitors and need meet the target customer’s sense. Then you need to be an ability to customize the look for your own. No matter you are just a beginner or an expertise, we all recommand these tutorials to read. Athough some of them seems very old by now written in 2006, but still very classical. Okay,let’s enjoy!
5.Installing the Flex Skin Design Extensions for CS3 from Adobe Labs
The Flex Skin Design Extensions are a set of extensions for various Adobe Creative Suite 3 applications (notably Flash, Photoshop, Illustrator, and Fireworks) that allow you to easily create skins for various Flex components and other assets (such as cursor manager, drag manager, etc.)
To quote the Flex Skin Design Extensions page on the Adobe Labs site:
Flex 3 helps designers and developers to more easily work together by enabling you to import skins that were created in the Adobe Creative Suite 3 products, including Photoshop, Illustrator, Flash, and Fireworks. New extensions are available below for each of these CS3 products that will allow you to create and export Flex component skins that can then be consumed using the Flex Builder Skin Import Wizard.
6.Yahoo! Flex Skin
Yahoo! Flex Skin modifies the appearance of standard Flex components and gives your applications a new, fresh and cool appearance.
7.Create your own skins for Flex and AIR
Learn how you can use Adobe Creative Suite to create skins for Flex and AIR applications. Click on the icons below to get the software.
8.custom flex skins
creating web-applications with flex 3 is great. there are a ton of pre-made components, and an open-ended architecture to allow you to create your own. built into flex is also a variety of options to change the visual styles of the components. today i will talk about two different types of customization. first, the simplest method, is using css to style your components. next, the more advanced technique, is creating component skins. for this example i will be using flash cs3.
9.Using FlexBuilder 3 and Flash CS3 to Build Your Skin in Flex–KingnareStyle skin produce introduction
It could control the style by using CSS in Flex3.0 component. Of course the CSS mentioned here is different with the CSS which used in writing the website. It is the style sheet which is tailored for Flex specially. By using ActionScript could realize the powerful display effect. It will be introduced in following example.
The black style of “Express Photoshop” released by Adobe is very attractive. KingnareStyle is one of Flex Skin from Express Photoshop prototype. The Skin contains many components but limited by the article length, we could only choose the typical components for example. Following we will begin our Skin production by Button Component(Full Component effect Screenshot ).
10.Flex Skinning: Introduction w/ Buttons (Part 1)
This is the first part of a multi-part series on Flex skinning. I’ll be reviewing the wide assortment of skinning capabilities found in the Flex 3 platform. The goal is to provide documented resources for this specific topic — something I’ve found lacking on the Internet. Today, I’ll begin a general introduction to skinning by using the Button component.
If on Day 1 of the universe God created the UI, then surely Day 2 there was some company demanding the ability to skin these newfound components. In today’s world, it’s not enough for a platform to provide UI controls to the developer base. There needs to be an ability to customize the look and feel of these controls for a wide assortment of reasons:
- company identity
- differentiation from competitors
- specialization to a target demographic (e.g., children like big, colorful buttons)
Feel free to spend your own time expanding on that list. What *I* am here for is to explain how to style, skin, and customize your Flex components. First, let’s talk terminology.
11.Jumping Into Skinning with Flex 4
Last week a lot of new information came out for Flex 4 (Gumbo). One of the major changes we’ll be seeing in the next version of Flex is how you skin components. After doing some reading on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex 4.



Comments (0)
Trackbacks - Pingbacks (0)