Skip navigation

Time for a new Flash tutorial. This time, it’s a quick tip on using the 9-slice scaling feature in Flash CS3 to ensure that the corners on rounded rectangles don’t get distorted when scaling symbols disproportionately. Check out the tutorial embedded below or on Vimeo.

Ok, this one is nowhere related to design, but it’s a nice tip anyways. Someone recently came to enquire how one would use conditional formatting in MS Excel to grey out columns that belonged to weekends in a project plan. I decided to create a quick screencast to explain it.

I’m embedding the video from vimeo.com here, but unfortunately the HD version doesn’t seem to work in the embedded player. I would highly recommend checking out the HD version to get all the details.

Light source

Light source

I think this tutorial is pretty unique and I’m very excited about the possibilities this technique brings to the table.

Adding a pseudo light source to a flat texture, till very recently was considered a Photoshop/Fireworks-only technique. Since it involves modifying the look of a bitmap image, I had not attempted to try it in Flash. When working out possibilities for an interface recently, I decided to give it a try and was very happy with the results.

Click the thumbnail to see the tutorial and let me know what you think. I’ve also hosted the tutorial on DeviantArt.

Engraved textTime for a new tutorial. This time, we will look at how to use the filters in Flash CS3 to create the effect of text being engraved into the background. Note that this effect will work only on text that is big & bold enough.

Click the thumbnail to launch the tutorial in a new window. It is also available on DeviantArt.

Pie chart in Flash CS3One of the most frequently used information graphic when dealing with data is the pie chart. Unfortunately, however easy it seems to create one in any of the MS Office applications, Flash has never been one to provide a simple way to create them. Until CS3 came out, that is.

The primitive ellipse tool in the latest version of Flash makes it very easy to construct analytically accurate pie charts, as long as you know how to convert the percentages into degrees. This tutorial covers precisely that part, and then goes on to show how to use these numbers to create a pie chart in Flash.

Click the thumbnail to open the tutorial in a new window. This tutorial is now also available on DeviantArt.

I will be following this tutorial up with another one on how to convert this pie chart into 3D later. Stay tuned!

Glass Orb in InkscapeHere’s a quick tutorial on creating a glossy looking orb in Inkscape. Although the purpose behind creating it was to use as icon background, the result seems pretty universal and can be used in interfaces, web design, what have you. I started creating this one believing I will need to push Inkscape to the limit to get the kind of soft gradients and blurs required, but was thoroughly impressed with how easily it stood up to the task.

I would also like to point out here that I’m using a development version of Inkscape 0.46. I’m also trying out a different approach and using video-sharing site DailyMotion to host the video, so please let me know if you prefer this one to the hosted SWF solutions I’ve used before.

There is also a better-quality version available on Viddler.

Paper note in inkscapeAlthough Adobe Flash is pretty much bread & butter at work, there are a couple of other applications I’ve been trying out and have been thoroughly impressed with. Inkscape is one of them. It is one of the most actively developed open source design applications out there and by far the best Illustrator alternative yet. It takes a while to get used to though, so if you’re planning to give it a shot – and I strongly recommend you do – just make sure you give it some time.

So then, here’s my first Inkscape tutorial. It’s a paper note, similar to what we did in Flash last week, but I’ve found Inkscape’s interface & features provide much more flexibility and power when designing such stuff. See for yourself.

Click the thumbnail to open the tutorial screencast in a new window.

Post-it noteOne of the most often re-invented technique within my team here is the one used to design post-it-like notes. These are a pretty popular feature in many of the e-learning courses we design, but the number of different formats we’ve used for the notes is insane. Pre Flash 8, creating a soft shadow – which is such a critical bit of designing anything realistic – used to be a pain. But with the new bitmap filters, it’s an absolute breeze. Check it out.

Click the thumbnail to open the tutorial screencast in a new window.

Flash buttonsHere’s my first tutorial for Flash CS3. This one covers a trick I use to design a single button that can be used in different scenarios with different colors. The trick is to create the button in greyscale and then use the ‘Tint’ and ‘Advanced’ color properties to make multiple colored instances. Click the thumbnail to open the tutorial screencast in a new window.