Learn how to style a Flex Button Component with bitmap Images exported from Photoshop. Assign different images the the Up and Over states of the Flex Button Component.
View outline for this entire lesson. Skinning a Flex Video Player.
Author Archive
How to Setup a new CSS Stylesheet in Flex
09
Apr
Learn how to make a new blank Stylesheet in Flex and call it from your application so that your styles can be applied to Flex Components to customize them.
How to Add an FLV to play in the Flex Video Display Component
09
Apr
Learn how to continue fleshing out the UI Design of a Video Player Skin by adding the Video the Video Display and tweaking the the layout using the Flex Properties Panel.
Adding an Image Background and Image to Flex Components
09
Apr
Learn how to add a new image to serve as a header in your Flex UI. Also add an image to the background of a container (HBox) in Flex to server as the backdrop of a controller.
How to Add or Copy Design Assets into your Flex Project
09
Apr
This Video Training Snippet Shows you how to bring in Flex Skin Design assets such as images, video and swf’s into the project and store them in folders in order to use them in the Flex Skin Design process.
Steps Covered in Video
1. From the location you have saved your design files select all of the images.
2. Copy the images from their current location.
3. Right click on the “images” folder in your Flex Navigator Panel.
4. Select Paste from the menu.
5. Repeat the process for videos, audio, swf’s, etc.
View outline for this entire lesson. Skinning a Flex Video Player.
How to Create a New UI Layout in Flex to Skin
09
Apr
This Video Training Snippet Shows you how to layout a user interface using Flex components in the Flex Design View. For this interface we are creating a Basic Flex Video Player (skin only).
Steps Covered in Video
1. From the Flex Component Panel click and drag the “Vbox” component to insert it into the layout.
This box will hold all the other components into place and lay them out “Vertically” on the screen.
2. Enter a 430 width and a 438 height or leave default for now.
3. Drag a “Video Display” component and drop it inside the “VBox”
4. Drag an “Image” component over to the layout and drop it above the Video Display inside the VBox.
5. Drag an “HBox” component and drop it underneath the Video Display.
This box will hold all the buttons that control the video player and lay them out “Horizontally”.
6. Drag a “Button” component and drop it inside of the HBox. Repeat 4 more times for a total of 5 buttons.
View outline for this entire lesson. Skinning a Flex Video Player.
Making New Folders to Store Graphics and Video in Flex
09
Apr
This Video Training Snippet Shows you how to make a new folder in your project in Flex 3. This is necessary to store files like images, video, swfs. This process is similar to setting up a new website when you are about to take a web design into production.
Steps Covered in Video
1. Right Mouse Button Click on your “src” folder in the Flex Navigator Panel in your project.
2. Go to New > Folder.
3. Type in title for your new folder in the “Folder Name” field.
4. Hit “Finish” Button.
View outline for this entire lesson. Skinning a Flex Video Player.
How to Create a New Flex Project
09
Apr
This Video Training Snippet Shows you how to make a new project in Flex 3. This is the most basic way to make a new project with the default settings.
Steps Covered in Video
1. Launch Flex 3.
2. Go to File > New Flex Project.
3. Type in title for your new project in the “Project Name” field.
4. Hit “Finish” Button.
View outline for this entire lesson. Skinning a Flex Video Player.
Free Flex Application Icons for Developers
27
Mar
For my Flex UI Design contribution to the Flex Community, I Designed this set of icons for developers to use in their Flex Applications. These are free to use in any way you wish. Hopefully these can help you spruce up your next Flex application. Download the source by right-clicking and selecting “view source”.
View and Download Free Flex Icons
The icons are Embedded in the buttons and the background can be changed independently. I did not create .ico files but used .png’s. Have fun.
Animation Fun with Flex Effects
22
Mar
I’ve been playing around with Flex’s Effects lately and I thought I would post some of my experiments here. These are just my creative sketches. I like to play around with User Interfaces so I sat down to see what kind of animations I could create as a Designer.
Here I use Blur, Zoom, Resize, Fade, Move. I also put some Bounce.easeOut on the Zoom effect.
Bounce
play Flex Bounce Effect Animation
Zoom
Here I tried out the Flex Animation Effects combined with a Video Embedded in a Flash SWF. Looks pretty cool. I call it “Cloudscape. Could be a whole theme.
play Flex Zoom Video Animation