Friday, February 12, 2010

FLEX : Creating buttons in Fireworks, imported in Flash, imported to Flex as components

"Oke, so going further with trying to find out how to make plugin components for Xcelsius, you actually need alot of stuff. Since I'm going all out with making new buttons, charts, etc with Flash, then you gotta install Adobe Flash, Flex, and Xcelsius itself."

This part talks about the step from Flash to Flex, how to create custom components in Flex using Flash components."

(I got the original tutorial from this link :
http://www.actionscript.org/resources/articles/861/1/Create-Flex-Component-Button-Skins/Page1.html)

Just in case you forgot, this is how you create buttons.

Open Fireworks and save all files in PNG so that you have transparency.
You need to create a file for :
1. button (normal state)
2. mouse over
3. mouse click
4. disabled button

Create a new Actionscript 3 file. Import all files to Flash. Check “Import as a single flattened bitmap”. Drag your normal button to stage (the bitmap version, not symbol), modify->break apart (ctrl+b), delete the white area. Select the rest and modify->convert to symbol movie clip type and name it (something like button_up). Do all those stuff for the rest of the bitmap images. Afterwards select all the movie clips in the library and go to commands->convert symbol to flex component. Publish it.

Open Flex, create a new project. Open window navigator (through main menu under windows). There in the src folder create a new folder called swc. Right click the folder and choose import and choose file system, hit browse, find the folder where your swc was published and import the swc file you created after publishing your button in Flash.

Afterwards, right click the root folder of your project and right click properties. Find Flex Build Path in the list, then click the Library Path tab. Click the Add SWC button, browse your src folder, open the swc folder and choose your SWC file.

Go to code view, find your mx:Application tag and inside add (not replace anything, simply add before the end of the /mx> tag) xmlns:button_skins=”*”. That step creates your namespace for your button skins. You can name it btn_skins, bttn_skins or whatever as long as it’s not used yet.

Creating your button is by coding or design :

For all the name for upSkin, downSkin, overSkin, and disabledSkin, name it accordingly to your vocie clip name in Flash.

No comments:

Post a Comment