Anti-alias when scaling images and video in Flash

Here’s one of those tips that you stumble upon, and feel embarrassed that you didn’t know this years ago.

Notice when scaling a bitmap or video up and down the image is subject to serious aliasing. Especially with a transparent background. Everything looks pixelated and choppy. Right?

Here’s the solution. In the properties of your image in the Flash library you will see the following setting.

Smoothing

Note that “Allow smoothing” is checked. This allows Flash to re-sample the image when it is scaled up or down, naturally there is some quality  loss but essentially it solves your problem. Used sparingly it may help with your bitmap manipulation.

What about video? No problem. The same principle applies, but you have to use ActionScript.

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);

myVideo.attachVideo(ns);
ns.setBufferTime(0);
ns.play(“mymovie.flv”);
myVideo.smoothing=true;

The last line is the killer!

Seamless Flash audio loops.

Here’s a tricky little issue that I’m sure a few of you Flashers have come across on your travels.

Problem: You have an audio loop, like a clock ticking. You produce a perfect loop in your sound editor of choice and export it out as an MP3. You then import the sound onto your timeline in Flash and no matter what you do, you can’t get it to loop properly. It’s as if Flash has somehow added a fraction of a second of silence to the start and end of the sound clip, making it impossible to loop seamlessly.

Solution: Export a wave file instead of an MP3 – Not sure why, but MP3s behave differently to wave files in Flash. Wave files loop perfectly. Don’t worry about compression because there’s an MP3 compression option inside Flash anyway, so you still get the compression benefits that the MP3 format has to offer without the loop problems. Loop perfection!

Masks in Flash

Ever tried to animate the masking of multiple areas of an image and found that everything goes wrong?

Well here’s a simple tip.

Flash hates a mask that’s in pieces. Sometimes it’s fine but sometimes it messes up, for example if you have an animation of eyes blinking, using masks to hide / show the pupils, either use one mask that is connected out of the area of interest or two separate masks for each eye.

Note: Beware of strokes or the remains of partially deleted strokes in masks. Select the entire mask frame and switch of all strokes from the selected vectors to ensure that those pesky bits of corners or minuscule remnants don’t get in the way of your masking genius!

Mostly Flash CS4 Bugs

Here’s a subject I’ve always meant to spend some time on. While I’m a big fan of Flash there are things about it I hate.

1) CS4 – Web browser based Help system, and fancy making it an online system by default! I really miss the facility to select an action, hit the question mark and get instant usage examples. It helped me a lot. I actually find myself running CS3 when doing something in AS1.0 or AS2.0 just for the old help system.

2) CS4 – Seems to crash a lot!

3) CS4 – Sometimes when I select a frame label or a link in the properties panel – the content vanishes!

4) All Versions – When working with vectors, sometime if I drag a selection around a small part of the vector – the entire vector shape disappears. Usually when tidying up an untidy edge.

5) CS4 – I like the default timeline on the bottom, like After Effects or FCP but why does my context sensitive right click pop-up menu have to scroll?

FlashContextMenu

6) CS4 – In CS3 I could embed a Quicktime video clip directly into the timeline and Flash would convert it. In CS3 I can only do it with a FLV. The problem is that the compression isn’t as good. Guess what I have to do. I do it in CS3 copy the resulting converted video and paste it into my CS4 project. It still works, it’s just that CS4 won’t let me do it directly anymore. What a hassle.

iPhone annoyances

I’m annoyed by my iPhone’s headphones, I presume because I bought a phone, that the headphones included are designed to give the user a hands free device while driving, the problem is I’m in England and I have a right hand drive car. The headphones are clearly marked L and R to ensure I have the right in the right ear and the left in the left ear but the control device hangs beneath the right ear. I suspect that the control is designed to be used by the gear lever hand in the US not the mainstay steering wheel hand? If it’s designed to favour the right handed, then shame on Apple, why not have the control in the middle to cover both left and right and both sides of the Atlantic? It’s picky I know, but these things bug me.

A blagger’s guide to multimedia goes public!

After a while of adding the odd article here and there whenever I could I’ve finally got this site to a level that I think is worth visiting more than once.

So I’ve check the box that allows search engines to index it, and look forward to my first visitor. Is it you?

The page design is a bit rubbish, I really do intend to spend a little more time making it look special but that’s not the point. It’s the content that matters.

I’m not a trained graphic designer or developer. I never went to University or studied life drawing in Florence. I’m a regular bloke from Manchester, England with a background in Marketing who after not some considerable time and effort managed to blag his way into a career as a full-time employed multimedia web graphic designer, developer jack-of-all trades and master of everything. Well not quite.
The aim of this blog is to encourage people following a similar path to me, to keep going and to share a few observations and crumbs of wisdom picked up along the way.

Enjoy!

My own private Sennheiser office

There is a debate raging in my office at the moment about headphones!
I use them as a tool to get into my own personal space for concentration and focus, especially when developing.
There are others who argue that they stilt conversation and make for an isolated and non-communicative team.

Discussions about web portfolios

At work we’re currently putting together a new website. As we search for ideas we’ve naturally been turning to other similar websites for inspiration. One of the things we noticed was the tendency for design agencies – even really big and successful ones to chuck everything they’ve ever worked on, on-line.

I argued that any old shit will not do. Too much visual information dilutes the impact – everything gets homogenized and blurred. Much better to include a small cross section of really great work that whets the potential client’s appetite than to beat them over the head with a too much visual stimulus?

Not everyone agreed – thoughts appreciated.

Default Publish Settings – SwfObject

It’s been bugging me for a while that I can export HTML with the AC_RunActiveContent.js embedding method directly from Flash CS3. I can replace the RunActiveContent HTML with a SwfObject Template but I can’t get the Flash IDE to export a copy of the swfObject.js file.

Here’s the solution.

Navigate to:

Library>Application Support>Abode>CS3>en>configuration>HTML>Active Content Files
Backup AC_RunActiveContent.js by renaming it or moving it somewhere else. Paste in a copy of the latest swfobject.js and rename it AC_RunActiveContent.js.

Annoying that it has to be called something else, so I add the following comment after the tag:

//re-named swfObject default export

I’d love to find out how I can use swfObject without having to rename it first.

Pixel Aspect Ratio (PAR)

I had an unpleasant experience recently with a director who told me too late that the fine composition I’d done was too small.

I’d worked to 1024×576 (SD) but he’d filmed in 1920×1080 (HD)

Here’s some info about how to manage this kind of problem – thanks to Artbeats for two very useful PDFs

Because video often uses rectangular pixels and computer monitors use square ones circles and peoples faces look fatter on your monitor in NTSC and skinny in PAL.

In After Effects there are two places where you need to set the pixel aspect ratio: for the source, and for the composition where you are combining layers. To set the pixel aspect ratio (PAR) for a source, select it in the After Effects Project panel, and type Command+F on Mac (Control+F on Windows) to open the Interpret Footage panel. In the Other Options section is a popup for Pixel Aspect Ratio: Set it to match the format of your source. After Effects does a reasonably good job at auto-sensing the correct PAR for a footage item when you import it, but it is always good to double-check this popup – especially when using widescreen footage.

To set PAR for a composition in After Effects, select the comp and type Command+K (Control+K) to open the Composition Settings dialog. It too has a Pixel Aspect Ratio popup; set it to match your intended output format. This happens automatically when you pick a Preset in the Composition Settings, but is easy to miss when you manually set up a comp. As long as you set the PAR popups for every footage item and composition correctly, programs like After Effects will then know which images to stretch and which to squash to correct everything as needed for your final video.

A NOTE ON PHOTOSHOP

You may know that there is an option in Photoshop to change PAR to rectangular. This is not advised because changing the PAR tag on a file does not re-scale an image; it just changes the tag! To give an example: If your photo started out with square pixels, changing the PAR tag to DV will not give your photo non-square pixels – it will just give your photo an incorrect tag.
Therefore, many advise creating all of your non-video elements using square pixels. Rather than try to match any particular size, the safest approach is create the element 25–100% larger than you need it to be; that way, you can also scale it down or reposition it as needed in your video program.

pixel-aspect-ratios

If you create still images at these sizes, and tag them as having square pixels in a program like After Effects, After Effects will automatically adjust them to be the same size as their corresponding video frame.

Hope that helps!