Archive for the 'action script' Category

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.

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..

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

SWX PHP – takes only 3 minutes to set up

I am working on a new project that requires serverside development, using Apache, MySQL and PHP. However I didn’t want to change my current personal webserver configuration – the one that comes with OS X, and I remembered my friend Eran’s tip about MAMP – an independent standalone webserver, but never got to download it.Then, few days later, Aral released SWX PHP 1.0 (remember SWX?), and offers a very convenient way to start playing with SWX in minutes, using no other that a MAMP bundle, already configured with a useful Start Page linking to the SWX Service Explorer & Data Analyzer , can’t be simpler than that.. try it out!Great work Aral! I liked the Screencast explaining how to set it up, Aral simply explode you with knowledge : )
swx.jpg
I also find the SWX icon very amusing in my dock..

FIVe3D – a new Flash ActionScript 3D package

five3d.jpg
A new open source vector based 3D animation engine for ActionScript called FIVe3D has recently been shared by Mathieu Badimon. Thanks Mathieu!It is a ActionScript 2 classes package, enabling 3D rotation and position control over objects such as movieclips and text fields.For setting up a simple 3D environment, with simple objects and basic interactivity it is indeed fast and pretty simple, as described by the author. I am sure in few months it will pick up some more advanced functionalities, we should be proud that such exiting initiatives are emerging in the open source sphere.I was impressed by the thorough (and beautiful..) documentation he provides with the source code, neatly packed in a pdf file. that’s the way!

Learning someone else’s code – what is it good for?

actionscript.jpg
From time to time I get to work on someone else’s code, could be shared classes I download or a client that brings his own program for treatments, anyway it is something that nobody likes.The difficulties are obvious to anyone that deals with code this way or another, (hey, sometimes I have hard time understanding my own code from six months ago..) But there are also great advantages if you’re trying to improve, although the learning curve is often steep, it’s faster than learning from books.Sometimes, definitely not most of them, it can even lead to a real leap, in term of understanding new styles and patterns, I never stop learning new things : )At larger scales, translating ActionScript classes into UML would be a blast, making sense in a glimpse and not through lines of code.And an answer to this need (and more!) is about to be born – Saffron UML by Samuel Agesilas, built for AIR, has a cool UI design, and platform independent – you have to see it!Looks amazing ha?

Flash – Highlighting a string in a textfield

Jack Doyle at greensock shared a really cool AS2 class he calls ‘TextMetrics’ – sounds promising ha?The class calculates x/y coordinates of a string in a textfield, allowing highlighting it or calculating rows width.. nice.Check out his example. Thanks Jack!