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 : )

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.

scrollPane background customization – as3

I was trying to customize a scrollPane component (as3) and ran into some difficulties, I wanted to change the background of the panned area. The default background is kinda gray with rounded corners, I wanted it dark and strait corners.

scrollPane default backround

After far too much time searching Adobe’s Livedoc (what a shame, didn’t find the answer there), and reading countless posts, I eventually found the answer via Flash Help Panel.

scrollPane customized backround

Apparently the only way is to change the default skin of the component, to do that you simply prepare a MovieClip to serve as skin and give it linkage name, then set the component instance style to use the skin you prepared, like this:

aSp.setStyle( "upSkin", newSkinClip );

upSkin is the default skin class, and I’m setting it to use the skin I made.

Adobe really should find a way to make those livedoc easier for use and orientation, it takes too long for pages to load, and I keep finding my self clicking in loops..

window.onblur – strange behavior on browsers

About a year ago I posted an example for using externalInterface to start and stop sound inside flash, based on focus and blur events in the window. After recently receiving several comments and questions about strange behavior on different browsers, I decided to test the script on the browsers I have on my Mac and PC.

Originally I was using the onFocus & onBlur events, attached to the window object, I found out that each browser can deal with these event when attached to a different object, I started testing which object works for each browser, and added browser sniffer for the listener definition, these are the objects for each browser:

Browser Object
Safari, Opera, Omniweb window
Firefox window.document
IE7 document.body (* partially working)


And here are the results:

Mac OS X 10.5.2 Leopard
Safari All working fine.
Firefox onblur is only fired when loosing focus to another Firefox window, not to another app.
Opera All working fine.
Omniweb All working fine.

Windows XP
IE7
  1. With Tabbing enabled: onblur is fired upon focus event, no event corresponds with blur.
  2. With Tabbing disabled: onblur fires properly if clicked on title area, once clicked on body (content of page) behaves the same as with Tabbing enabled..
Firefox onfocus is fired twice when clicked on body, once when clicked on browser title.


The situation on Mac seems to be much better than on Windows XP (sorry, I did not test Vista, so if someone can try this on Vista and send me the results – it would be great), currently both IE7 and Firefox on XP have strange behavior.
With IE7 it gets even weirder, when IE7 has Tabbing enabled, it can’t handle onblur event for body object, while without tabbing, onblur works if clicked on the browser title area, once clicked inside the window (Html body) “something” goes crazy and both onfocus and onblur are fired together upon focus event.

Here is the test page, you will find the events I tested for IE7 commented in the page source.

Does anyone know a way around this strange behavior on IE7 and Firefox?
any way to make this listener compatible with all browsers?

New year upgrades

After many troubles with my (old) hosting provider, along with the new year I finally moved to a new one, hopefully no more down times and mail issues..I grabbed the opportunity and also upgraded the blog’s WordPress to the latest version, and customized a K2 theme to fit my orange look (this is really simple, K2 supports customized style sheets on top of the standard css, so you do not have to deal with many definitions – change only what you want).I will probably fine-tune the theme during the next couple of weeks, and when I’m done – I will probably change it completely : )

WordPress blog in flash – in SWX contest

I was going through the SWX PHP contest entries, and was so happy to find an entry under the API category for the WordPress platform by Benjamin Wiederkehr, it is something I was considering to do my self ; ), and can be really handy for small personal sites or blogs that prefer a customized experience over the standard Html themes – portfolios, galleries, open for commenting – you see the potential..These APIs are best demonstrating the power of SWX, allowing us – flash programers to expand our possibilities and offering without messing with server-side too much – just what Aral was talking about.cool.

Hunting swf memory issues – take ‘em down!

In one of my current projects I’m experiencing a ‘memory waste’ issue, after a basic efficiency re-writing did not solve the problem, I began reading about how flash handles scope chains and memory, and found this very interesting article ‘Scope Chain and Memory waste in Flash MX‘ by Timothée Groleau.Now I am going to re-attack the issue with better understanding of what to look for. thanks Timothée.Another good resource to refine your coding practice is Adobe’s AS2 best practice article.Be ware, avoid driving after reading these two : )

Cool recycled MacbookPro stand, do it your self!

Few days ago my good old 17″ Studio Display monitor died after almost 9 years of devoted service. It’s been about two years that my main computer is a MacBookPro, and the old G4 is nothing more than a file server & itunes jukebox.One thing that I wanted to change for a long time is the angle of the display when I am working with my portable Mac on a table. There are few professional solutions out there, mostly by Griffin, but I wanted something more practical, and yes, cheeper..Here I saw an opportunity – the cool stand from the CRT display, that was never equaled in any model by any brand (at least that I saw) can serve just this purpose, lifting the portable and making air flow easy for cooling the burning machine, tilt-able and even aesthetic.macbookpro_stand_1.jpgmacbookpro_stand_3.jpg
If you want to try this at home, here’s a little tip: after disassembling the stand from the old monitor, you should change the spring direction, to support the portable weight which has the opposite direction from the CRT. to do that, remove the center screw, and the screw that holds the spring, remove the white anchor, and rotate the top of the stand, front to back.Put the white anchor back, and now the string will be facing the other side of the stand.macbookpro_stand_4.jpg
Now hook the spring on the plastic handle. that’s it – you’re done.