The Scribble Cel

I might be killed for telling you this.. but it's not really a secret, just something that isn't as well known as it should be in the Flash community, and something I'm sure everyone could benefit from. I mentioned it in my New Masters chapter, and teach it in every Flash class I give.

It's an old camera technique from the days of traditional animation and it has many applications. The scribble cel is a technique used to make water glisten with sparkles.. at its simplest, it requires no more than two drawings but in the hands of an experienced FX guy the results can be stunning.

So what is it?
The scribble cel technique gets its name from one of the two drawings.. a page of scribble, which in the old days of traditional cel animation, was inked onto a clear acetate sheet (cel). It has other names, all of which escape me. Yaye for selective memory!

So the two drawings in the Scribble Cel technique are:

1. Scribble
2. Dots

Yes, that's really all you need. Admittedly, this is the most basic implementation of the scribble cel and when you know how it works you can add your own little flourishes to it. Here's the guts of how it worked in traditional camera:

1. Scribble is inked onto a clear acetate sheet
2. Dots become holes punched into black card
3. Bright light is shone behind the black card (coming through the holes)
4. Camera captures this light

Press Play to see the demo:



Right before your eyes, this extremely simple and now very old traditional technique fakes a random glistening effect. The design of the scribble, combined with the design of the dots (holes) can be varied for different effects.

Check the Ween video (previous article). I've used this effect in almost every scene with water in it. Also check my other movies Prowlies at the River, Bitey of Brackenwood and Auld Sage.

How is this done with Flash?
Short Answer: Masking.

In Flash, a mask defines an area through which you see stuff. So we want to see the scribble through the dots. Therefore, the dots will be the mask layer. You then tween the scribble symbol slowly from one position to another. When it's masked, you get the glistening effect.

Although 30 frames makes a very fast glisten cycle, here's what the timeline should basically look like. Then it's just a matter of lengthening the scene to slow it down.



Result:


The animated example above is about 450 frames (18 seconds) in duration so it's very slow and smooth. You can experiment not only with the design of the scribble and the mask, but also with the speed, easing and duration of the tween. Don't forget, a higher frame-rate makes for smoother animation. The above is at 25fps.

Other Applications:
Experiment with the effect and using masking in this way. Another application would be for twinkling stars, glittering sequens on a dress, sparkling dew on a spider web or even some kind of shadow/negative of the effect for some magical spell.

For years I have been trying to find a way to make a windswept grassland effect in Flash, but haven't quite cracked it. If you happen to get something working, I'd love to see it!

Ween's Transdermal video

You can see the video at the end of this article. Fans of my stuff probably know the following story, but I thought I'd post it here and explain how it all came about.

In 2003 I created a music video for Ween. The song was 'Transdermal Celebration' from the album Quebec.



I had bought the album and listened through a few times.. I'd been a Ween fan proper for a few years by that stage, but listening to the new songs prompted me to check out their website for the first time.

There I saw a notice to fans saying "Transdermal video, looking for ideas". The third track on the CD "Transdermal Celebration" was one of the songs that I really liked, so I emailed Ween's manager right away with some sketches and a short synopsis.

He replied saying that unfortunately Ween had decided to go with a live video for the song, because they were about to go on a tour. I was gutted.. so after some thought I emailed back, saying that I would do the video free of charge, for the experience of it.

They gave me their blessing to go ahead, I got an email from Aaron Freeman (Gene Ween) with some explanation of the lyrics. Sadly the email was later lost in a hard-drive crash, but I'll always remember his opening line:

"Hi Adam it's Aaron, it's 3am I'm fucked up in Jersey City.."

So I got to work right away. At the time (October 2003) I was still working full-time for Disney.. I asked the studio manager for a month off so that I could do this music video. We were smack in the middle of crunchtime on "Return to Neverland", so I knew I'd be very lucky to get as much as two days off. To be allowed any time off during crunchtime was unheard of, so unfortunately I had to threaten resignation (actually that's something I'd never told anyone until now).

After a bit of negotiating I managed to get two weeks. Since landing my job at Disney, I saw this as the biggest opportunity life had thrown at me, so it was something I had to do.

I worked for around 12 - 14 hours each day on the clip and at the end of the two weeks I delivered it to Ween. I got another email from Aaron telling me how much he loved it, and how it captured the song perfectly. He told me it'd be the official video and that they wanted to pay me for it.

I rate that two weeks (and the month that followed) as the best working experience of my life to date. The video became a special feature on Ween's 'Live in Chicago' DVD.



Until today I've been aware of only one fairly low-quality version of the video on the net. But then while surfing YouTube, it suddenly occurred to me to do a search. I found several but I think the following is the best quality I've seen yet.

Enjoy Ween's 'Transdermal Celebration'..



These days I look at it and wish I'd had more time to fine-tune, but there's not much about the actual working experience that I'd change. Thanks Ween :)

Heraldic Christmas

Starting from the 25th November, the Heraldic Brackenwood t-shirt designs will go on sale. If you want a Bitey shirt, I suggest you wait until the price drops in a few days.
Remember, only the Heraldic designs are going on sale, and it'll be for one month only (25th Nov - 25th Dec):

Click the image to see the merch page.

The later you leave it to order a shirt, the less chance you'll have it by Christmas, so please allow up to two weeks for delivery. (Australian orders generally take no more than 3 days).

I won't be dropping the price of the Bracken designs just yet.. they're selling very well and stock is dwindling away fast.. there are still quite a few Small sizes, but the Medium, Large and XLarge will be sold out soon. If you want one for Christmas, better get in quick.

--- ------ --- -

A little Brackenwood delay
The stuff that pays bills has been falling away from me lately.. actually, I don't spend much anymore and it's bills that are stealing all my money. Anyway the sad fact is that almost all my savings are gone and I've found it necessary to pick up a freelance job.

This means the Brackenwood movie is on hold for a week. I gotta admit, I'm hungry for work and a week's pay isn't going to go far so if more comes my way I'll have to pick it up.

I always worked best under extreme pressure though, so in order to pay the bills and get a Brackenwood movie done by New Year, I'll probably fall back into my 'littleFoot' routine of 18 hour days, eating like a bird and sticky eyes.

I have a feeling that the on-again/off-again Flash book that I've been co-writing with Sham Bhangal for about 4 years, will rear its half-finished head in the near future too.

---- - --

Downloadable Animotds
Recently I put the word out to all my contacts in phone companies, television and online media about my 30 shorts. Basically I was fishing for any interest.. throwing out a line to see if I got any bites. I always hated fishing. Boring as bat-shit.. hours upon hours, any tiny window of excitement dominated by guts, stink, slime and flies.

Where was I? oh yeah.. I didn't get a single response, so screw em all. I'll make these 30 shorts downloadable for PSP and iPod, downloaded directly from my animation page. Coming soon.

Dark prelude

I've been working lately on the reworked Yuyu movie. For those who don't know, I want to enter the Yuyu into Annecy next year, in the short film section. The challenge is making it a standalone movie though, so I'm adding about 3 minutes of new stuff to the beginning (before the chase that we're all familiar with).

Hopefully when it's done we'll have a movie that needs no explaining, even for those unfamiliar with Bitey (what is that black cloud? why are they chasing him? Who's the guy with horns?).

I will post screenshots as I go, but anyone who knows me knows I like to keep story, new creatures, backgrounds, etc a secret until the movie is released. Therefore, the only things I'll be giving away here are a few screenshots. Maybe a .swf or two. Maybe a screencapture video of me doing a background.

I'm hoping to have this movie done by New Year so I can really get cracking on the next proper Brackenwood episode.

For now, here's a Yuyu image.. strictly for lovers of darkness :)
Remember the scene where Bitey glimpses the Yuyu world through the smoke, before he busts back into Brackenwood? Well this image is darker than that and if you have a CRT monitor, you may need to turn up the brightness to see anything at all. It's best viewed at night with the lights off I spose.

Also, unfortunately the gradients are badly banded. That's what happens with Flash so I might do some backgrounds in Photoshop someday soon and release them here.

You may have read that the Yuyu world is all dark, everything is in silhouette. So there are no prizes for guessing the setting of this image:



click the image to download Wallpaper (1280 x 1024)

--- -- -

Workmates' work

Some friends of mine (ex-Disney colleagues) have been churning out some fantastic stuff since the studio went down, which is great to see.

Derriman: Bernard's been working in Flash for years.. long before Disney Australia closed and I just had to post this hilarious new movie of his.. it was done especially for Sydney newspaper, the Daily Telegraph. It's a pity they didn't publicise it a bit more.. so it's up to us to spread it around. If you're a cricket fan you'll love History of the Ashes.

Cleary: When he takes time out from his new job in Tokyo, good mate Noel Cleary is also working on his film idea. Check out those sketches (fwoar!).

Deane: One of my best friends back at Disney, Steve Deane now lives in L.A. His post-it note sketches always made me angry (cos he's better than me), so drop by his blog: Minty Eyes and drool (bastard).

---

so much for that meteor shower.. I saw about 3 falling stars over the entire week

So quick it HURTS!!

Are you a keyboard shortcuts freak like me? If so, and you're also a Flash user, you probably wish there were shortcuts for a lot more stuff in Flash. Like resizing the brush tool (as it is with Photoshop), toggling the onion skin on/off, switching between brush modes, changing brush smoothing..

There are so many things I would like to see keyboard shortcuts for in Flash, but there are some things even Flash extensions can't help you with.

So the other day I discovered a (PC only) program that allows you to set keyboard shortcuts for any number of steps in any program. It's called QuickMacros and it works by capturing your mouse movements, key presses, etc and saving them as macros for which you can then set keyboard shortcuts.

For the uninitiated, a macro is a group of actions saved as one step.. Flash Commands are a type of macro, as are Photoshop Actions.

Remember this isn't just for Flash.. it can be used for any program, even multiple programs. You can even use it to enter long usernames, your credit card number or complicated passwords with just one keypress. Therefore by my (admittedly naive) reasoning, if spyware is logging your keystrokes, it can't get hold of your info because you're not pressing the actual keys. You're just using a shortcut that enters the info automatically.. (feel free to correct me or back me up if you're a tecchy).

So in QuickMacros, I have a macro called 'FlashRecent'. It is assigned the keyboard shortcut Shift+F10, which when pressed, makes all of this happen:

1. Start Flash
2. Open the most recent document
3. Select the Paint Bucket
4. Set 'Don't Close Gaps'
5. Choose the Brush tool
6. Select the smallest brush size
7. Toggle the 'Use Pressure' button (tablet pressure)
8. Open the Property Inspector
9. set Brush Smoothing to 20
10. Close Property Inspector
11. Click the Fill Color swatch - which opens the colour swatches.

All these steps are what I usually need to do each time I start Flash, because Flash doesn't remember these settings when you close/open (with the exception of step 9, which I always check manually anyway... this macro relieves me even of that simple check).

The entire process of setting up my workspace is performed with a simple key combination now, so first thing in the morning I turn on my computer, hit Shift + F10 and go away to make a cup of coffee (it all happens extremely fast, but it's as good a time as any to get coffee).

When coffee's safely on the desk beside me, Flash has the swatches palette open waiting for me to choose a colour and start drawing. NICE!


My macros in the screenshot are:

• FlashRecent as I described above. Notice in the right part of the screen, as well as certain other steps, it runs another of my macros: "Paint Setup". So this macro runs another macro.. which is just bloody lovely.
• Brush (Paint Inside and Paint Normal) sets the brush mode.
  
• Smoothing (20 and 100), sets the brush smoothing slider to these values.
• FFT_Flash is a filter for Flash, meaning that those keyboard shortcuts only work in Flash - very handy, cos I can set the same key presses for different macros in other programs.
• Signature types out my email signature.
  
• the ER_disneyMovs macro is for whenever anyone asks me which Disney movies I worked on. I press Ctrl + Num *, and the list types itself out :D

As you can also see from the screenshot, I'm using a fully functioning trial version, but after just 8 days I know I'll be buying this. It has increased my already lightning workflow by probably 30%. Bear in mind that I'm not the most tech-savvy guy in the world, but I picked this up in minutes. Very easy.

Finally, where can you get it? www.quickmacros.com - - and once again, no I'm not advertising for anyone. I'm simply sharing stuff with you that I've found incredibly useful.
Take the trial for a spin.. it has a Quick Start mode, the documentation is good and even has a couple of simple tutorials to get you going.

--- --- ---

So which Disney movies did I work on?
Now pressing Ctrl+Num*

---

Some of the movies I worked on when I was working with Disney are (as you'll see, we were mostly a sequel Studio). These are in the order they came into my head:

• Lion King 2
• Lion King 1.5
• Lady and the Tramp 2
• Little Mermaid 2
• A Goofy Movie
• An Extremely Goofy Movie
• Jungle Book 2
• The Three Musketeers
• Lilo and Stitch 2
• Bambi 2
• Aladdin 2
• Aladdin 3
• Peter Pan 2
• Tarzan 2
• and a whole bunch of Disney TV shows (for Saturday morning cartoons).

In most of those, you'll find my name in the Special Effects credits.

---

So if you recently asked me that question in an email and you received that reply, you now know that it took me about half second to type it!

--- -- ---

oh yeah and.. the other night when I said I was going outside to see the meteor shower, I closed down the computer and went outside to find it pissing down rain.. so didn't see any!

(pressing Ctrl Num -)

Adam

--- --- ---
Adam Phillips
www.biteycastle.com

Music and audio books

Today I did a full day's work on the new Brackenwood movie.. listened to The War of the Worlds - a 7 hr unabridged audio book (not the musical CD) read by Sean Barrett. Damn that's a good story.

I've been listening to audiobooks ever since I left Disney in 2004. I subscribe to audible.com and now have a library of about 100 downloaded books. Anything you get from audible btw, you can put on your iPod, which is perfect for long trips.

No, this isn't an advert for Audible.com.. (even though I have asked them twice to sponsor movies of mine and still have yet to hear from them).

While it is occasionally nice to animate in complete silence (one of the great benefits of working in the wee small hours when the world is asleep), I'm one of those animators who loves some good audio while I'm working, especially during the day when the neighbours just won't shut the fuck up. Whether it's music, a book, learning a language or some recorded lecture on physics, it's one of those things that I'd really miss if I didn't have it... along with my neighbour-cancelling headphones.

While I'm writing, storyboarding, designing characters or sometimes even keying out rough animation poses, it's impossible for me to take in music or an audio book without getting distracted. However, the more automatic processes of animation, cleanup, inbetweening and painting backgrounds is so much easier when I'm listening to something. At the end of each chapter, or at the end of a whole audio book, I look back and there's all this work done. Time really flies.

--- --- --

So anyway it's about 2:30am.. I'll head outside in a min because there are meteor showers supposed to be happening tonight, and all this week on the North-Eastern horizon between 2 and 5am. Apparently we're passing through a particularly dense ribbon of comet-debris and the most activity (between 100-150 shooting stars per hour) is forecast for Saturday night (18th Nov). My bedtime isn't usually until around 3 - 4am anyway, so I've been watching every night this week so far.. starting from 1 - 2 am until my neck gets too sore from looking up, or the mosquitos piss me off (coming into Summer here now).

Last night, to make it easier I tried lying down on the pavers in the back yard to watch the sky, but a spider crawled up on my neck. I didn't know it was a spider until I slapped it and turned on my little torch. Quite a big one he was.. wriggling about with a couple of legs missing, which I then found between my fingers. So I decided not to lie down again.
Not seeing much activity yet though.. about 2 shooting stars each night so far.

Anyway! My first attempt at embedding a YouTube video now :D



BTW, I know this kitten.. he's much older now. His name's Mong.. his fur turned green as he grew older and he stars in my first daily movie here: Animotd #1

Thinking about Light

As you can probably tell, lighting effects are one of my favourite animated 2D effects. I could look for hours (and I often do) at the way light behaves bouncing off, hitting or travelling through something.

I thought I'd explain what a penumbra is, and why it happens because knowing this can help you create more realistic artwork and animation.

So what the hell's a penumbra?

The blurred part of any shadow is called a penumbra. You can see it everywhere and it just takes a little bit of thought to figure out how/why it happens.

Imagine a man standing in a spotlight. The edges of the spotlight are fuzzy, but the shadow behind him is dark with sharp edges.



Now imagine a man standing facing a large window, but instead of a small point of light, he's illuminated by the natural daylight outside. The shadow on the wall behind him is blurred.



You may have already figured out that it's the size of the light source, but it's more than that. The type of shadow that is cast, and whether it's blurred or sharp is also determined by

• the size relationship between the light source and the object
• the distance between the object and its shadow

In the spotlight example above, he has a sharp shadow. The light source is a small point that is further away, so very little light can get in behind him to soften the shadow:



In the window example however, the light source is large and close. The window is a large area of diffused light, almost surrounding the guy. A larger light source being closer to the subject allows more light to get in behind him. Now for a very messy diagram:



The white lines are representing the rays of light from the window. You can see where less light is getting in behind him, and there's a spot directly behind where no light rays reach.. and this is the darkest part of his shadow.



So while our sun is a massive light source against which our earth is just a speck, it is millions of kilometres away (or so I'm told).. so it acts like the spotlight. Therefore, in sunlight, all our shadows that are close to the ground are sharp. Objects that are high in the sky cast fuzzier shadows (birds, planes, tops of buildings) because they're further from the shadow and closer to the light source.

On an overcast day, on the other hand, the sky is one huge area of diffused light that is closer to us (like the window example), so we get fuzzy shadows. When something leaves the ground in this case (like a ball bouncing high, or a person jumping), the shadow seems to disappear completely, simply because the shadow is swallowed by light from all angles.

---

A penumbra can vary if part of the object is close to the light source and another part is close to the shadow. A tall building is a prime example, where the shadow of the top of the building is fuzzy, but the shadow that meets the building on the ground is sharp.

Here's a photo I just took, to illustrate this effect.



The fingers that are touching the wall are casting the sharpest shadows because they're touching.. but the parts of the hand and arm that are further from the wall (and closer to the light source in relation to the wall) cast the fuzzier shadows.

--- --- ---

So next time you're making shadows for your characters/elements in a movie/illustration, ask yourself if the shadows are correct. Fuzzy shadows are much easier to do, because you don't need much detail in them. If it's a crystal clear sunny day, or a character under a bright spotlight, you'll need darker shadows with a higher level of detail.

Oh yeah.. "penumbra". The fuzzy part.

Optimising for Beginners - Part 3

In Part 2 of this article I demonstrated how to save a step as a command so you can repeat that action just by selecting it from the Commands menu.

Commands aren't limited to just one step though.. you can save several steps as a command. For example, I have a 'Centre Stage' command saved for centering my fade-to-black graphic symbol. Here's how that command is done.

1. Place a piece of artwork (symbol, or raw artwork - doesn't matter) on the stage and open the Align panel (Win: Ctrl K)
2. First make sure the artwork on the stage is selected
3. In the align panel toggle the 'To Stage' button ON
4. Now click the Align Vertical Center button
   
5. and the Align Horizontal Center button
   

Your artwork should now be in the centre of the stage (if it's made up of lots of little pieces, they're all clustered together in the centre) and with the above steps completed, those steps will be in the History panel (Window > Other Panels > History).

Hold down shift and select the two 'align' steps, then click the Save icon:



Give your new command the name Centre Stage and click OK. It's now in your commands menu.

My 'fade-to-black' symbol (a black rectangle the exact size of the stage) can now be dragged from the Library and dropped on the Stage. I can then go Commands > Centre Stage and it's dead-centre, ready to apply a fade tween.

Getting familiar with Commands and the History panel is the starting point for you to learn JSFL too: the language with which you create your own Flash extensions. An earlier article covered the work and links to some of the community's JSFL gurus, like Dave Logan and Warren Fuller.

- - -

Setting Keyboard Shortcuts

Any menu item in Flash can have a keyboard shortcut allocated.. some of us (*raises hand*) would be lost without them. In fact, I have a difficult time finding some Flash menu items because I rarely go through the menus and most of my workflow involves keyboard shortcuts.

Now that your commands are menu items, you can assign key presses to run those steps.
Go to Edit > Keyboard Shortcuts. First thing you need to do is press the Duplicate Set button (circled) because you can't overwrite the 'Macromedia Standard' set.


Give your personal set a name and click OK. Now you're free to create your own keyboard shortcuts. This is how:

1. Find the Commands menu in the list, and click the little (+) to expand the menu.
   
2. There you'll see your saved Commands, so select one of them.
3. Now click the 'Add Shortcut' button below:
   
   
   
   You'll be prompted to press the keys that you want for the shortcut. I find the Numpad keys are really useful for my most frequently used shortcuts. Numpad 5 is my 'Centre Stage' key. Another of my favourites is the tilde (~) key, just above the Tab key. It's my 'Optimise 8' shortcut key.
   
4. Once you've entered the desired shortcut for your command, click the 'Change' button
   
   
   

Note: If you try assigning a shortcut that already exists, you'll get plenty of warning.

Click OK to get out of the Keyboard Shortcuts box now and if you look in the Commands menu, you should see your commands and their shortcuts in there.

Here are my optimise commands and their shortcuts in the Commands menu:



'Opt 1' is the least amount of optimising possible, with the slider at 1. 'Opt08' is the one I use most, so I've got a one-key shortcut for that. The last two commands are named with a '+' because they had 'Use Multiple Passes' checked.. so they're the most powerful optimising commands.

-- - --

A Note on a Flash bug

There's a known issue in Flash that causes keyboard shortcuts to 'slip' in the commands menu, so that they activate the wrong commands. If this ever happens to you, the workaround is simple:

• Open the Keyboard Shortcuts window again, then click OK. Your Commands should now have their shortcuts in place.

--- ---

So there you go! If you've been following along throughout this 3-part article, you will have learned how to optimise graphics, save commands using the History panel and set keyboard shortcuts for them.

WEEEEEE! etc..

Optimising for Beginners - Part 2

In the last article I explained how to and why optimise. In this part I'll show you how to compress the entire process of optimising graphics into one single action. This helps you save huge amounts of time, especially if you're facing the daunting task of optimising an entire movie after it's done.

History and Commands

First things first: if you haven't got the History Panel open, you'll find it under Window > Other Panels > History. Open it now and dock it into the right-hand column of panels.

The history is a list of actions you have performed in Flash. For example, the following screenshot shows a list of things that I've just done on the stage:



Now first thing you may notice are the red Xs on some of the steps. We'll cover them in a bit, but for now, you can see how each item in this list represents some action that was done in Flash.

These steps can be saved, either as single steps or multiple steps. Once saved, you can run these steps at any time. So let's give it a try now:

1. With the Brush tool or the Pencil, write your name, or create some artwork on the stage (just a squiggle will do.. no need to draw anything in particular - even a single brush stroke will suffice for this exercise).
   
2. Now select this artwork and go to Modify > Shape > Optimize
3. Bring the slider down to about 1/8th
4. Uncheck 'Use multiple passes'
5. Click OK

After performing these 5 steps, you'll notice that in the History panel, your optimise step is listed. As I mentioned before, you can save this step and 'replay' it to optimise any artwork you have selected.

Before we save it though, you can view the code behind this step by selecting the Context menu of the History panel and choosing View > Javascript in panel:



Now I mentioned in Part 1 of this article that there's a reason I brought the slider values (1 - 64) to your attention. Take a close look at the javascript that performs the optimise step:


- - you may need to expand the docking column to see the entire line (see red circle)--

1. This number 8 was the position of the slider in the optimise window.
2. The word 'false' means that 'Use multiple passes' was unchecked (our earlier step 4).

The reason I've shown you this javascript stuff is so that you can have various levels of optimising saved as one step.

-------

Saving steps as a Command

In the lowest part of the History panel are a few icons, one of which is a disk icon which means, you guessed it: save.

Select the Optimize step in the list, and click the 'save' icon. You'll be prompted to name this new command, so call it 'Optimize 8'.



Done! Now with any raw artwork selected, you can optimise it by simply going to your commands menu and selecting your command in the list. For example:
Commands > Optimize 8

You will get a warning if you try to run this command without selecting the graphics first:

Important note: you can't optimise a symbol.. you can only optimise raw graphics. You must go into Symbol Edit mode to optimise the graphics within a symbol.

Finally, remember those red X's in the History panel? Those are steps that cannot be saved as Commands. It's usually because they're not definite steps with definable values.. in other words, they're different every time like brush strokes, select frames and so on.

Part 3 of this article will be setting a shortcut key for your new command.

Optimising for Beginners - Part 1

This article probably contains nothing new to anyone with Flash experience, so I'm writing a couple of 'FAQ' articles for people just starting out.

Beginners often email me and ask why their 2 minute .swf movie is 25MB in filesize, and the answer usually comes down to them not optimising their graphics.

Get into the habit of optimising your artwork as you go.

In Flash, to optimise graphics (Modify > Shape > Optimize) means to remove excess vector points. The following methods work for the pencil tool too, but I've written from a Brush tool perspective simply because that's my personal way of drawing in Flash.

If you draw using the brush tool, Brush Smoothing will help you create smoother lines, removing points as you draw but it can cause a few problems with line control.



To see this for yourself, choose the smallest brush size, then put the Brush Smoothing slider (found in the Property Inspector) up to 100. Now write the letter 'S' and you'll see the problems it causes.



The file size of this 'S' shape (if you could call it that) is now a tiny fraction of what it was, but you can see that the line has been optimised so much, that it's nothing like the line I wanted to draw.

So you can find your own Brush Smooth setting preference for drawing with the brush tool. My personal favourite setting is 20. It removes some points as I draw, but leaves my linework pretty much untouched. The only problem here, as you can see below, is that the lines look a bit 'knotty' or jagged.. and the file size is huge.


Left: a knotty line; Right: the points on that line make for some huge file size.

The process of optimising starts by selecting the artwork and going to Modify > Shape > Optimize. Here you get a slider with which you can control the amount of smoothing.

This slider, incidentally, controls a value of 1 - 64. In a later article you'll see why I've brought that to your attention.

After clicking OK, you get a totals message.





In the image above, you'll notice I had my slider about 1/8th of the way along. You can see in the image below how many points were removed:



The line is a little less knotty but still not as smooth as I'd like it. I could hit Ctrl + Y (Repeat last action), or I could go to Modify > Shape > Optimise and use the slider again. Yet another method of tweaking this line is to use the Subselection tool (A) to display the points as above. Those points can then be individually selected, manipulated or deleted.

----

These steps have allowed you to control the smoothing after you've created the artwork, rather than having that control taken from you as you draw. Don't get me wrong, the Smoothing slider is fantastic for many reasons (a future article) and the fact that it even exists in Flash allows us to customise the way we work.

Optimising your linework is a must if you intend to publish your Flash work on the internet. Compare the earlier unoptimised 'S' image, with the optimised one above and you can see that the difference is probably triple, or more. This translates directly to filesize and the difference between a 30 second download and a 7 minute download.

It's worth reiterating that drawing with the Smoothing slider on a higher setting will remove points and filesize as you draw, but as you'll see when you start experimenting, there's less control.

--

Next article will be about how to set a keyboard shortcut for optimising your linework. One keypress and your lines clean themselves up!

Managing Colour Palettes

In Flash the colour palette system is kinda limited. You can't organise or label your colours, but I thought I could share a particular method of working with character/element palettes using the library and the colour picker. Once you have mixed some colours for your character that you're happy with, create a graphic symbol that contains a grid of the colours. Here's my palette of Bitey's night colours in the library:



Notice the underscore in the name. As mentioned in the previous article, this keeps the item at the top of the library so it's always accessible.It helps to keep your library organised when you're working with large projects and you can see in this screenshot that anything I need to find is organised in just these few folders. Ignore the gaps in the folder numbers.. that's just to keep them in order in the Library.


OK so this grid of colours in the form of a library symbol can now be treated like a palette of swatches from which I can pick colours, just like the Color Swatches panel. Here's how. With the Library panel open and your swatch symbol selected, click your Fill Color swatch in the Tools panel (see image below).

This opens your palette of swatches and you can pick any colour here with a little colour picker.

This particular colour picker is different to the eye-dropper tool.

Unlike the eye-dropper tool, this colour picker allows you to choose colours from anywhere on the interface.. even the system bar and interface elements. So with this little colour picker, you can choose a colour from your library symbol. Fwoar. Ay?

This won't work for gradients, because it picks colours from pixels, rather than the actual fill values.. so to pick gradients, you either need to save them to your swatches palette and choose them from there, or use the eye-dropper tool on raw artwork.

Using Bitmap fills: Many of you reading this might be familiar with the following method, so this is for the benefit of those who aren't :)
This is another popular way of working with character palettes that you might like to try. It involves creating a 10 x 10 pixel bitmap or .png of flat colour (the colour you intend to paint your character with). You can do this in another program, or simply create it in Flash and export it as a bitmap, then importing it into your library as a bitmap.



Now you can paint your character using the Bitmap fill option in the colour mixer. The best thing about this sneaky method though, is that if your movie is almost done and you think "damn, I really don't like his skin colour", you only need to replace the colour in the bitmap you imported. Everything you painted with that colour throughout the entire movie will be updated automatically.

If you had used ordinary paint, it'd be a fairly tedious process of repainting every drawing and symbol throughout the movie that uses that colour.

Incidentally, Dave Logan has developed a Flash extension to automate the above process. It's called AutoColor and you can read more, near the bottom of this page.

--------

Colour management is one thing I really would like to see improved in Flash, but until then, if you have any sneaky methods of managing colour palettes, I'd love to hear em.

Before I end this article, I think everyone should know where to find the Grayscale palette that's built into Flash.

Windows:
C:/Documents and Settings/[[username]]/Local Settings/Application Data/Macromedia/Flash 8/en/Configuration/Color Sets/greyscale.clr

Mac (thanks aks):
/Users/[[username]]/Library/Application Support/Macromedia/Flash 8/en/Configuration/Color Sets/greyscale.clr

Painfully long path, but extremely handy.. you can load this into your Color Swatches panel via the context menu > Add Colors..