I recently used the TransitionManager class to get some ready-made animation in a project I am working on. The problem was I needed to know when the tween ended so I could dispatch an event to tell my application to allow user interfacing again. I checked the Adobe API on TransitionManager and there were no events to respond to be found there. Not even a useful inherited event. So I decided to poke around in the class file itself just to see what was going on in there. In case you don’t know, never edit these classes. They are essentially part of the Flash application. If you need extra functions it’s always better to make a subclass extending the class and write your own methods and properties. That what OOP is all about.

There are 2 events that can be responded to in their without editing the code to do so. The two strings that you can add a listener for are these.

const ALL_TRANSITIONS_IN_DONE:String = "allTransitionsInDone";
const ALL_TRANSITIONS_OUT_DONE:String = "allTransitionsOutDone";

Of course, these events don’t carry any TransitionManager specific properties, it just dispatches the generic Event telling the application that it happened. I don’t know why this wasn’t included in the API, as it is something that is useful for this the implementation of this class. Maybe I’ll get around to writing a TransitionManagerEvent class one day. Until then, this works.

import fl.transitions.*;
import fl.transitions.easing.*;

const ALL_TRANSITIONS_IN_DONE:String = "allTransitionsInDone";
const ALL_TRANSITIONS_OUT_DONE:String = "allTransitionsOutDone";

var currentSlide:Slide = new Slide();
addChild(currentSlide);

var tm:TransitionManager = new TransitionManager(currentSlide);
tm.startTransition({type:Blinds, direction:Transition.OUT, duration:2, easing:None.easeNone, numStrips:10, dimension:0});
tm.addEventListener(ALL_TRANSITIONS_OUT_DONE, outTransitionsDone);

function outTransitionsDone(event:Event):void
{
	trace("done");
}

You can get the FLA example file here.

This is the new Photoshop CS4 sleeper feature. It doesn’t quite have the bling-bling of the 3D features added or the groundbreaking content aware scaling feature but it subtly affects the way you interact with the application. OpenGL runs off your video card (if your card has it) and allows for these new interface upgrades.

The pixel grid makes the division between pixels more obvious at higher magnifications. I think this could be very useful for creating pixel icons. I personally map out my pixel icons out in Illustrator. It is really tedious, using the move command to move and duplicate a 1 pixel square rectangle to make the shape. I like pain. I must. I guess I just like the idea of them being scalable vector icons. Even though they’ll never be larger than 100% size. This feature may make me rethink my pixel icon workflow. Read more …

An Associative Array can be made in ActionScript 3 by using an Object instead of an Array. You use the Object to make a name/value pair. Name/Value pairs consist of a name and a value and are separated by a colon. The name is what you use to reference the value. When you reference what is in the Associative Array you just write the name as if it was a property on the Object. Here is an example of how to make an Associative Array.

var info:Object = {name:"Tony", occupation:"Bouncer", iq:80};

trace("My name is " + info.name + " and I am a " + info.occupation + " with an IQ of " + info.iq + "." );

You could also write it out long-handed and the effect would be the same. Below is the same thing but the names are added as dynamic properties of the newly instantiated Object.

var info:Object = new Object();
info.name = "Tony";
info.occupation = "Bouncer";
info.iq = 80;

trace("My name is " + info.name + " and I am a " + info.occupation + " with an IQ of " + info.iq + "." );

They only problem with this is that you lose the length property on this Associative Array. If you try getting the length property it will come up as undefined. I looked this up and found that Senocular actually has a class that fixes this. That class is called AssociativeArray and it can be found here. When I first tried it I got an error at line 32. I didn’t read the class to figure out what was wrong, but I commented out the line throwing the error and it seems to work fine. Here is an example of that class in action. Read more …

Remember when you were a kid? Doing kid stuff like eating paint chips and huffing glue. Do you remember when you got caught doing that stuff and Mom told you to play with something that didn’t make you see Jesus Christ in your Fruity Pebbles? Sometimes she would ask you to play with Spirograph instead.

It seems that the Illustrator team at Adobe got caught with a lot of paint in their mouths because they decided to add the game they grew up with as a little known feature in Illustrator. So now it’s really simple to make these kind of designs free-form and a lot faster than with some plastic gear template.

First, select pretty much any drawing tool: Line Segment, Rectangle, Ellipse, etc. I chose the Star tool. Now drag a star out and while doing that hold the tilde (~) key and the shift key. You will see the edge hinting stick as you drag. When you release, the edge hinting will remain as artwork. The shift modifier allows the shape to be constrained at center. Holding option with the Line Segment tool will allow free movement at center instead of at the end of the line. Holding shift with a circle can make a quick tunnel effect.

The modifiers is what makes this interesting. Try every combination you can think of. If you want to go for extra credit try this finger-cramping configuration. Try starting the shape then pressing the space bar. It will make a trail across the screen. If  you have a star going it becomes a shooting star. Go ahead, make a wish, you paint-licking dreamy-dreamers.

When you use the keyboard shortcut to zoom in (command +) or zoom out (command -) in Photoshop the window scales along with the image. If you haven’t gotten used to this quirky default behavior yet there is a one-click fix to get it out of your life forever.

Well, at least until the next time you have to drop your preference file. Go to Photoshop > Preferences > General (command K) and click off “Zoom Resizes Windows”. Now the keyboard commands behave the same as the zoom tool. If your missing the good times you used to share with this behavior, take solace in knowing that you can bring it back just by moving your thumb over. You can use the alternate zoom behavior by adding option to the key command. Simply press (option command +) for zoom in and (option command -) for zoom out to bring back the glory days of window scale and zoom.

I got the new Creative Suite 4 at work the other day. My boss tells me I am one of four who got it this early. He was one that got it too. I asked him why they wasted a copy on him. From what I gathered, so he could open the program and then say he’s got mad skills.

Disc 1, Disc 2. Once it installed I was on my way to going through all the new features. Still had to setup. I can’t touch a new version of CS without setting up all my panels just like the previous one. Then I think about how the new feature panels fit into it. As I went to put the Help panel where it goes in my workspace I am redirected to Safari! I thought I was in Flash a second ago? I looked all over for a new place for the Help panel and came up with squat. Then (because Flash so generously opened my browser for me) I looked for others that were up-in-arms about this change as well. Google let me know I wasn’t alone.

I found this post where there is some kind of workaround for it. This doesn’t keep it in the IDE though. It just makes the help be local instead of on the internet. Which is faster, but doesn’t address the real problem. I like to look at the help and the code the same time, my Workspace is based on the premise that the Help panel is on my right side.

Apparently, Adobe has no intention of putting this back in the IDE. Looks like they are making the big push to get developers out of Flash and into Flex. Sure, it’s more money. Hey Adobe, I’ll use Flex because it is a better editor, not because you hack shit out of other programs to corral me into using it. All I can hope for now is that someone will develop an extension for Flash, basically an internal web browser like Flex, that can display help.

This is a great shortcut that has been a long time coming and has finally arrived in InDesign CS3. When typing in a text box press ESC to lose focus on the text frame and switch to the Selection tool. I can’t tell you how many times I have typed a “v” or “a” in text being such a keystroke freak. Thankfully, I am also aware that it is a habit of mine and so far I have never had a “v” stick around long enough to see a printed piece.

This is probably the reason why Quark made such user-unfriendly keystrokes. Just to prevent this kind of thing from happening. It is a sensible thing to do, but this is why proofreaders exist. And spell check. I would rather have the option to make that mistake than to be limited to whatever the keystroke is for all of Quark’s tools. I’m pretty rusty, but I think it was (option command TAB) to cycle forward and (shift option command TAB) to cycle backward. That gives me Carpal Tunnel just thinking about it. Read more …

Sometimes after putting a design together you decide that it might benefit from some rounded edges. Instead of deleting the rectangle in the design and redrawing a new rounded rectangle to the proper size and position you can simply run a filter on the existing rectangle and get a rounded rectangle. Go to Filter > Stylize > Round Corners. This filter allows you to add rounded edges to the existing shape. When most think of rounded corners it is usually for rectangles. But rounded edges can easily be added to anything that has a point, so a polygon like a octagon or a triangle can be rounded just like a rectangle would.

The filter is a good method, but it is a destructive process, meaning that it cannot be edited after it has been applied. For a non destructive version of the filter go to Effect >Stylize > Round Corners. The result will be the same except the instance of this effect can be edited with the Appearance panel. It also can be applied to any shape that has a point.

Referencing the document class can be done in two ways. The first example uses brackets and a string. The brackets allows whatever is inside it to be ignored at compile time and used at runtime. If dot notation was used the compiler would try to find the function. It wouldn’t find the function and you would get a compiler error. The brackets hide it from the compiler and this is taken care of at runtime instead. The string, or the text in quotes, inside means that it is handled literally, letter for letter. This technique can also be used with a variable. This could be helpful if getting information at runtime. For example, if you are retrieving the name of a function from an external data source such as a XML file.

//example 1
root["functionReference"]();

The second example uses the Document Class name. This is very similar to dot syntax except the root keyword is put in parenthesis after the Document Class name. This technique can be used with properties and methods in the Document Class.

//example 2
DocumentClass(root).functionReference();

The Loader class is the Actionscript class made specifically to get JPG, GIF, PNG and SWF files from a remote source and load it into the main SWF file. The LoaderInfo class gives you specific information about the file being loaded. By using the bytesLoaded and bytesTotal properties of the LoaderInfo class it is possible to display the information in a number of ways.

Before it is displayed in these ways the preloader has to be written. Below is the step by step of a simple preloader. Two objects are required to start. A URLRequest and a Loader. The Loader is a new Loader instance. The URLRequest object accepts a string. The string is the file path to the file. Read more …

Flash has some features to make coding easier. Some of the features include code collapse, code hinting, and commenting buttons. One of the other features is auto format which is extremely satisfying if your copy and pasting and your tabbing gets crazy.

If your code has no syntax errors auto format will indent it properly, add spaces and put your curly braces where you would like them to be. For even more control over auto format, you can change how it auto formats under preferences. Go to Flash > Preferences > Auto Format. There you can check off the auto format behaviors that best suit you.

There is one caveat to using auto format that could drive you to near madness if you can not prepared for it’s evil. It could add a line termination “;” to the class definition line. I’ve had it happen several times and I don’t know what makes it happen. I was unable to replicate it in a test. If it happens it will give you a 1084 error code in the Compiler window. It’s easily resolved, but it happened more than a few times to me, so I’d rather just be careful and use the tab key.

There are 2 classes that deal with color. There is the appropriately named Color class and the ColorTransform class. Color is a subclass of the ColorTransform class. The Color class adds a few more features to the ColorTransform class such as control over brightness and tint.

A new instance of the ColorTransform accepts a lot of parameters. There is redMultiplier, redOffset, greenMultiplier, greenOffset, blueMultiplier, blueOffset, alphaMultiplier and alphaOffset. Personally, I find these values very counterintuitive. Give me good old HSB any day. All these crazy, meaningless numbers are additive, which means they are appended to the target’s current color value. If you have an exact color value in mind you can circumvent trying to figure out how to use all this stuff with the color property. The color property can be used with the Color class and the ColorTransform class. Below are simple examples of the usage of this. Read more …

To make a custom right click menu, you will need to use 3 classes. First, use the ContextMenuItem class to make new contextual menu items. Then, make an empty context menu with the ContextMenu class. Lastly those contextual menu items need to be passed to the Array class.

Create a new variable and data type it to ContextMenuItem. Make as many new contextual menu item vars as you want. The new ContextMenuItem takes 4 parameters. The first is a string, written in quotes. This is the text that will appear in the menu. The rest of the parameters are determined by Booleans, true or false. The next parameter is separator before. False means no separator, true means include one. Then the next is enabled. Default is true or enabled, this parameter is optional. Last parameter is visible, default is true. Read more …

I am an Actionscript beginner. I am a novice, a noob if you will. This is all true, but I am going to write about Actionscript anyway. Why you ask? Why would you write about something you are not an authority on? The reason that I am starting this documentation early is for posterity. I want to see my progression from an Actionscript beginner to an Actionscript badass. Notice I didn’t say guru. I am not peddling holistic Tibetan Goji Berries. Badass is the appropriate term. Which is what I would like to be one day.

I am not a total novice. I have background in Web 1.0. I even got the Web 1.0.3 update. Before Actionscript 3.0, I even put together some Flash sites with AS2. Those successes were generally what I would call copy and paste programming. I could find something that someone made close to what I wanted to do and then tweak the code a bit to get it to work. The logic of programming escaped me, but the sites got done and no one got wise to my programmatic fumbling. Read more …