Game Developer and Paper Pusher
Tip of the day
Tip of the Day – Using Fireworks to skin those Flex Applications
11588 days
Today I was going to post about using flashvars and widget development. However, as I started to document the process, it became too much information for a single tip. So I’m going to do a separate post walking you through my widget development process. Now on to today’s tip!
To be honest with you guys, I’ve never really been a huge fan of Fireworks. I’m a Photoshop guy, and I have been since version 5.5 (hooray ImageReady). However, at our last SeaFlex meeting Marty gave a quick introduction into Flex skinning using Fireworks. My eyes were opened! So here is the basic run down of creating Flex skins using Fireworks CS4.
- Within Fireworks go to Commands > Flex Skinning > New Flex Skin
- Select the components you want to skin.
- Skin to your heart’s desire.
- When you’re finished, go to Commands > Flex Skinning > Export Flex Skin
- I created a new folder called testSkin and saved to that.
- Now in Flex Builder. File > Import > Skin Artwork
- Browse to the folder we just exported our assets to.
- Make sure the image to component mappings are correct.
- And…. you’re done.
Amazing.
:: UPDATE ::
Marty just posted a PC (and more in depth version) of the skinning your Flex applications with Fireworks. Read it here!
Tip of the Day – Widget personalization is important!
11589 days
Some people call it skinning, others call it customization, for this post we’re going to call it personalization. Having sat in many focus groups… I’ve learned this following pearl of wisdom.
Adding personalization to your widget is incredibly important.
Social Network users spend HOURS customizing their profile to… express themselves. If your widget doesn’t “gel” with their Dwight Schrute bobble head photo, then it’s not going to work for them.
But… what is personalization?
Take a look at Snapvine’s VoicePlayer skins page.
You’ll notice that the widget here has many different flavors or “skins”.
Your widget doesn’t have to be as complex as the Snapvine widget, and frankly it shouldn’t be. One corner that you can easily back yourself into is by making your skins so customizable, that it makes it difficult to add new features or UI components.
Imagine if you will, a widget that allows users to move any button they want, anywhere they want. Then later on, you want to add 3 new buttons to the interface. You have to go back through all of your skins and make the changes to all of them. If you have over 100 different skins that are unique, you have to change and test all of them. Not fun.
When your go down the path of TOO MUCH customization, the widget quickly becomes far too complex, and a burden to maintain. So use KISS methodology when dealing with personalization.
Here are some easy ways to add personalization:
- Allow an image path as a flashvar to be used as the background.
- Point to different external CSS files.
- Allow for colorization of components.
- Custom information – Name, tagline, etc…
Tomorrow’s tip I will discuss how to use flashvars for customized widget information.
Tip of the Day – Flex Builder, Open Resource shortcut
21589 days
So while thinking about the tip I wanted to write today… I thought about my development process, and trying to identify things that I do to speed up my development. That way I can share them with all of you.
One thing that has become second nature to me is the use of the Open Resource shortcut in Eclipse (and therefore Flex Builder). This handy little shortcut is a life saver.
For all the pcs: ctrl + shift + R
For all the macs: ⌘ + shift + R
This panel allows you the type in the resource you want to open, even if it is open already, and will bring it to focus. It’s amazing! Use it, love it, cherish it.
Tip of the Day – Using the libs directory in Flex Builder
31592 days
This tip I’m stealing from Amy over on the flexcoders list.
One not so well documented feature of Flex Builder is the use of the libs directory. By default, when you create a new Flex Project, a libs directory is created. So say for example, you want to create a project, and you are planning to use the Cairngorm framework.
All you need to do is copy Cairngorm.swc into your libs directory, and you’re good to go.
Tip of the Day – Mouse wheel scrolling on the mac
01592 days
A friend of mine asked me yesterday if I would take a look at a Flex application that he was writing. I said, “of course!”, and pulled up his app in my browser. To my surprise, I couldn’t for the life of me figure out how to navigate through his application.
So I called him back as asked him. He told me that his app uses the mouse wheel quite a bit to navigate around, he thought it would be very intuitive. I guess not everyone knows that mouse wheel scroll events don’t register on the mac.
So today I’m letting everyone within the sound of my blog know that…
Mouse wheel scrolling does not work on Macs… natively!
Luckily for us, Ali Rantakari has created a solution for this very problem. You can read up about the solution in this post.