Windows generator – in progress

I took on a small project, you know, to stay in shape. anyway, it has to do with generating windows on stage and giving focus by clicking them, only one window is in focus at a time. the interesting part is once a window is blurred (not in focus) the first click should only give it focus and only then the content and UI become active. so clicking once on the ‘close’ button on a blurred window will not close it but only give the window focus.

The windows are movable by dragging the header area, and scalable a-la-Mac with a small handle in the bottom right corner. did I mention I hate this behavior in Macs already? will change it here! watch me Steve.

New portfolio site

It has been over 6 months that I haven’t used Flash, and even more since I worked on my own portfolio site. This weekend I decided to dive into it.. At first I thought I forgot everything, but pretty fast it came back :)

todepoint portfolio 2009
I decided to simplify things and put it together without pyrotechnics and artistic choreographies, I hope I will have the time to finish all those fancy plans I had.
It’s a chronological view of projects I did along the years, with an option to filter them by categories – flash, gui, graphics etc. The small scroll bar on the right controls the size of the thumbnails. clicking each thumb will change the interface to show more images and details.

Status updates

First of all, apologies for the blue blog theme.. the good old orange theme will be back soon, didn’t have the time to customize the new version of K2 with the new version of wordpress, hopefully will put the orange theme back up next week.
Update: Yeah! Orange is back :)

Another update: I have started working in an exciting company as Head of Product (will disclose more details soon), managing all aspects of a very interesting web site. The new job is taking most of my time.. so I am not giving services or taking on new clients until further notice, sorry guys : )

How to stroke several sprites as one

If you’re trying to create a single stroke (outline, contour) over several sprites or movieClips, you can simply create a parent object to hold them and apply a glow filter to it. In this example (yeah, it’s an old and basic as2 thing, a test I did ages ago) I applied a glow filter of 2 pixels Blur to the comic balloon background.

The background is made of two movieClips, each has it’s own behavior, if you click the horn you can adjust its size and direction, if you click the text area you can scale the textField and the balloon background along with it.

This trick can be really handy if you’re making animations of moving silhouettes. In this flash I used GreenSock’s TransformManager to make the textField and horn controlable.

Silverlight, do I know you?

AIR != Silverlight
Mrinal Wadhwa:

Microsoft Silverlight is a browser plugin and is sort of similar to Adobe’s Flash Player and Flex Framework taken together

Adobe AIR is cross platform desktop runtime that allows developers to build desktop applications using web technologies, it has no real equivalent in the Microsoft world.

Peter Elst also finds it important to differentiate..

So many people ask me – “How is Silverlight?” or “Is Silverlight a real threat to Flash?”.. well, I never even tried Silverlight. (I did install the plugin, but simply never got to a website that uses Silverlight..)
So the only answer I can give is: when aiming at the web industry (us developers), such a difference in user/client perception must result in different adoption trends, evident: I did not try.. but the logo looks kinda cool.

The Year of the Flash

So much was written of the new flash player (version 10, code named “Astro”) and what it may do to the industry, it is indeed technologically inspiring, but from a freelance point of view (business wise) this even looks better.

Looking back to when I started working with flash (about ten years ago) and now, I can see a huge change in the weight of flash in projects out there.
Today, both the platform and the clients have matured, Flex has made a huge impact on technological companies perception of flash as the focus is shifting towards User Experience (anyone said RIA?) and OS compatibility and consistency, and the role flash plays in those is non comparable.

Up until recently I had to explain what I do, when refusing to take so many projects that were not related to my skills.. I guess because flash animators, designers, and coders were all considered the same in term of wages and availability.
Now, companies are looking for flash experts that can make charts like Google’s financial charts, and this is clearly a specialist job, since most of these companies don’t have the know-how in house, they call guys like me : )

The good news is that each improvement in flash adds to the appeal we have, and the demand for advanced flash programers is absolutely amazing.

I think this will be a great year.

K2 – Cool rich interface yet browsers compatible

I am very happy with the K2 wordpress theme (you’re watching it right now), beside having some pretty amazing browsing enhancements (I did not enable them yet, features like search results that appear as you type your search phrase, timeline view of your posts) it also has a very nice and intuitive sidebar manager, that allows you to write and manage the widgets and snippets in your side bar.
You can edit, rearrange them by dragging – works the same on all browsers! that’s pretty cool.

K2_sidebar_manager

Glossy buttons in pure as3 code


I’ve been playing with the drawing classes, experimenting gradients and blending modes, and so I put together a small (basic) as3 class that generates a glossy button with pure code – no library assets.

You can download the class here.

The class constructor expects only 3 parameters:
@param rad = Width of button
@param darkColor = The color in top area, more dominant
@param lightColor = The color in the bottom area

* you can then place it anywhere, and use method setCaption(cap:String) to place a label on the button, though this is a very basic implementation of text handling, I focused on drawing..

Let me know if you liked it : )

PC is a blue screen in Mac networking icons

Leopard networking shows PC's icons as a blue screen

In Leopard’s (latest Mac OS) Finder networking, the default icon for PCs sports a typical error blue screen.. I love it : )

ResizeManager – simple scaling engine for MovieClips

Flash objects (SWF) can fill the entire Html body, and scale along with browser window as you resize it (it’s done by setting width and height attributes to 100% in the embed tags). However unless scaleMode is properly defined as well, the outcome may look surprisingly bad, the flash content may loose proportions and distort, images quality drops and texts loose readability.. oh man.

Only specific contents should be scaled when the stage is resized, the same way apps handles resizing: an app will redistribute its panels without scaling them, will scale panel background but not the buttons and the controls in it. When the entire stage is simply scaled, the interface balance is disturbed.. and we don’t want that.

So I decided to share: ResizeManager (download) is a very simple scaling engine, a single AS2 class that can easily be modified or extended for your needs.
The manger can control scaling and some basic align options of MovieClips you register to it, so you can scale a background MovieClip to cover the entire stage, and keep another MovieClip centered without scaling. It also adds default definitions for the Stage behavior (scaleMode: noScale, stageAlign: TL), though you can change those.
In order to use it, simply import the class and create an instance of the ResizeManager:

import com.adifeiwel.custom_ui.ResizeManager;

var rm = new ResizeManager();

Then, use method registerMC() to register each MovieClip you want to control (including MovieClips nested within MovieClips, make sure parent MC is x:0, y:0), the registerMC method expects the following parameters:
_parentName:MovieClip (the name of the MoviClip)
_widthUpdate:Number (scaling in percentage from Stage.width, 0 for no-scale)
_heightUpdate:Number (scaling in percentage from Stage.height, 0 for no-scale)
_centerUpdate:Boolean (align MovieClip to center of stage)
_middleUpdate:Boolean (vertical-align MovieClip to middle of stage)

for example (see it here):

rm.registerMC(portMC.mainBG, 100, 100, false, false);
// will scale to cover all Stage

rm.registerMC(portMC.middleMC.middleBG, 100, 0, false, false);
// will scale to take 100% of Stage.width

rm.registerMC(portMC.middleMC.middleContentMC, 0, 0, true, false);
// aligned to center

rm.registerMC(portMC.transMC, 0, 0, true, true);
// aligned to center, vertical-align to middle.

rm.registerMC(portMC.vClip, 0, 80, false, false);
// will scale to take 80% of Stage.height

enjoy : )

Update: You can download the example FLA here.