Internet Explorer 6 is not supported.
Upgrade to view this site.

Blog Archive

Results for the blog tag tricks.

Get Loaded SWF File Dimensions

When externally loading a SWF, the file is casted to a MovieClip object. The top left position is preserved when it loads in but you lose a few things that could be helpful. First of all your background color is gone (As far as I know). This is the color that is set in the Properties panel in Flash or the SWF meta tag in Flex. The other thing is that the dimensions aren’t preserved either. If you trace the SWF file’s width and height it will return the width and height of content inside and not the bounding of the original SWF file. But there is somewhere that this information is preserved. Inside the LoaderInfo object. To obtain the size of the loaded object just write something like this. This short example is an example of snytax and is not actual functional code.

1
trace(extFile.loaderInfo.width + " " + extFile.loaderInfo.height);

There is the other information that the LoaderInfo object retains like actionscriptVersion and frameRate. A full list can be found in the reference guide. Like everything else AS3.

Using H.264 Encoding For FLV Files

Today I was asked to fix a problem with an existing website where a FLV was stopping quarter way in its playback. This problem only occurred in IE 7 with Windows Vista. Every other browser seemed to work fine.

First step I took was to isolate the problem. I remade the FLV from source just to see that nothing like a cue point was in there that shouldn’t be. No dice. So I tried another FLV that I knew worked and sure enough it played all the way through. From there I opened Adobe Media Encoder and started getting creative with the encoding settings.

I tried it without audio and it played all the way through. That made sense, because the one that I tested with didn’t have audio either. So the problem was now isolated to an audio problem. Some forums had vaguely familiar sounding fixes, but nothing solid that worked for me. Once again I changed bitrate and channel settings for the FLV sound. No dice. The audio options for FLV are pretty limited and I was running out of things to test for. So I thought about who does this kind of thing successfully all day; they must have a process. I figured that if anyone was encoding things right it was probably YouTube.

I checked YouTube and using this Safari trick grabbed the FLV file that YouTube generates. In my test, the YouTube video worked in IE 7 with Vista. I opened the FLV in QuickTime player. You can only do this if you have a plugin like Perian installed. I checked the movie properties. It was H.264/AAC audio. Even the CS4 Media Encoder can’t make an FLV like that. The options are only Sorenson Spark or On2 VP6. It can make a F4V this way, whatever the hell that is. In any event, that F4V had the settings that I needed, so I encoded one of those. No dice. FLV player wouldn’t play a F4V. The hillbilly in me figured I’ll just change the extension. Why the fuck not? Holy shit, it worked.

So, if you want to make an FLV file that is H.264, just make a F4V file with Adobe Media Encoder and then change the file extension.

TransitionManager Events

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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.

Photoshop CS4 and OpenGL

pixelgridThis 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 …

Illustrator Spirograph

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.