Category Archives: Blog

It’s Going Well

i attended an industry event last night and fielded the same question over and over from my fellow game devs: “Howzit going?” We’re working on a word puzzle/adventure game hybrid called Spellirium. i’m happy to report that by all accounts, it’s going well.

NEW to Spellirium: Introducing the Dictionary Feature

We released a new playable prototype today with a cool Dictionary feature. Head on over to the Rubber Room and give it a shot!

Pictures, as Promised

i’m living out my boyhood fantasy of working at a studio with storyboards and concept art up on the walls. i can die happy. i’d like to share some of that artwork with you today.

Spellirium Barkeep Sketches

Barkeep concept sketches

Spellirium Barkeep Final

The Barkeep

New Newsletter

Newsletter #3 was sent out today to our subscribers. It contains a first look at exclusive artwork that you can’t see anywhere else. It contains concept sketches for one of the game’s main characters, and the design evolution of one of our creatures. Head over to the Spellirium website and sign up for insider access.

The latest newsletter also contains our first Meet the Team featurette:

Meet the Team – Phil Chertok

Spellirium Programmer Phil Chertok

Phil said knock you out.

Phil Chertok is the talent behind the great Spellirium prototypes you’ve been playing. Phil joined Untold Entertainment in late April as our game programmer, and he’s been banging out code like a champ ever since. Every new feature that winds up in the game is thanks to Phil, so … thanks, Phil!

Fun facts about Phil:

  • He’s a Brazilian Jiu-Jitsu blue belt
  • He’s fluent in French and English
  • He’s a two-time competitor in the Toronto 24 Hour Film Challenge
  • He’s a Flash instructor at Ryerson University
  • His highest-scoring word in Spellirium was a solid yellow QUIZ

Word.

Sign up for the Spellirium Newsletter to go even deeper into the creative process behind the game. The newsletter contains a first look at exclusive artwork and juicy details about Spellirium that you won’t find anywhere else!

How to License a Song for your Indie Game Trailer

So i thought it would be really cool to license a known pop song for the trailer for our upcoming game Spellirium. i realized there would be a cost involved, of course, but since i’m trying to run a legit bidness, i didn’t just want to snake the song and throw the trailer up on YouTube. That’s not cool. Pop stars, between the cocaine buffets and the week-long orgies with underage groupies, work just as hard as you and me. They deserve royalties … or whatever.

Glam Rock Band

Please, people: dig deep, and give.

i say “whatever” because until last week, i didn’t really know what this all entailed. Now, my friends, i have seen the beast face-to-face, and i’m here to report on what you’ve actually got to do to nab a pop song for your project.

First, let’s be clear that there’s a difference between using a song to advertise your product, and using a song IN your product. Most bands, i assume, are much more comfortable with having their song paired with meaningful visuals as the art unfolds on the screen, than they are with people crassly leveraging their celebrity to shill a service or product. Check that – it all comes down to who the artist is, how active (read: young) the artist is, and how much integrity the artist has. People scoffed when Bob Dylan licensed his (presumed) protest song “The Times, They Are a-Changing” for use in a commercial for a bank.

Bob Dylan DRM Sucks

But come on … you can’t take it with you. If i could get fat kicking back and cashing in on my own library of tunes without having to endure the stress of touring, i’d let Lockheed Martin print my lyrics on the side of a missile aimed at a third world orphanage.

Let’s also be clear about my own intended use for the song. i’m not exactly selling hemorrhoid cream here. We’re making a fun, exciting game where you spell words and defeat monsters. We weren’t proposing to change the lyrics to sell the product, a la DriveShaft’s “You All EveryBummies“.

Drive Shaft

Yes, i do think a band deserves piles of money for doing something like this.

There are three different license types at play here:

  1. Mechanical License
  2. Sychronization License
  3. Public Performance

Let’s handle those one by one:

1. Mechanical License

You need to buy one of these licenses from the copyright holder of the composition (realize that the song’s composition is an entirely separate thing from the recorded performance). If you want to manipulate the composition, or put it anywhere – stamp it on a CD, print sheet music, use it in a music box or greeting card – you need a mechanical license. A band who does a cover version of a song needs a mechanical license. You may require a mechanical license if you want to use the song in a game, and especially if the character needs to play the song on an in-game instrument … think Rock Band, for example. Most mechanical licenses can be purchased through the Harry Fox Agency.

2. Synchronization License

Purchase a synchronization license to slap a song on your commercial, game trailer, motivational video, etc. You see this a lot on YouTube, where young teens splice together their favourite anime scenes and set them to some song of choice. i have a sneaking suspicion they haven’t purchased a synchronization license to do that. If you want to use a song in a game trailer like i did, you actually need two licenses: one to synchronize the composition, and one to cover off your use of a given recording. So if i wanted to synchronize Joey Joe and the Jimbobs’s cover of Bob Dylan’s “Idiot Wind”, i would need to buy a synchronization license for Dylan’s composition, and then a separate license for the Joey Joe and the Jimbobs’s recording. In order to obtain a synchronization license, you usually have to track down the song’s publisher.

3. Public Performance

i always wondered if any money changed hands when i went to a concert and, say, they Barenaked Ladies did a cover of the title theme from Jesus Christ Superstar. Apparently so. There exists a public performance license that you need to purchase to do just that. i’m not sure if this particular license extends to things like musical theatre. It’s likely.

Detective Work

Columbo

Just one more question, Ma’am … how on Earth do i pay you money for your product?

Here’s the breadcrumb trail i followed to ask after a synchronization license for the song i wanted to use:

  1. i started at the BMI site. i found the band and the song listed in their database. The BMI site had a toll-free number to call to inquire about licenses. The guy on the phone was very helpful. He explained the three types of licenses i just described to you, and told me that BMI usually only handles public performance licenses – the publishers usually took care of synchronization licenses. So i needed to find the publisher.
  2. i googled the publisher’s name. Unfortunately, it was very similar to that of a popular teevee show for pre-schoolers, so my search was swamped with irrelevant hits. Dead end.
  3. i went to the band’s official page. There was no contact information on the site, so i tried tweeting their Twitter account. No response.
  4. i went back to Google and searched for the actual song title. The song was credited to something called UniChappell Music in a number of places. Aha! A solid lead.
  5. There were no results for UniChappell Music on Wikipedia, but Wikipedia asked me if i meant Chappell music. Sounded close enough, so i hit that page.
  6. According to Wikipedia, Chappell had apparently merged with Warner to form Warner/Chappell music. i visited the Warner/Chappell site and used the contact page there to reach one of their people in charge of synchronization licenses for advertising and video games.
  7. The Warner/Chappell contact confirmed i’d found the correct agency, and we went from there.

A salient Douglas Adams quote comes to mind:

“But Mr Dent, the plans have been available in the local planning office for the last nine months.”

“Oh yes, well as soon as I heard I went straight round to see them, yesterday afternoon. You hadn’t exactly gone out of your way to call attention to them, had you? I mean, like actually telling anybody or anything.”

“But the plans were on display …”

“On display? I eventually had to go down to the cellar to find them.”

“That’s the display department.”

“With a flashlight.”

“Ah, well the lights had probably gone.”

“So had the stairs.”

“But look, you found the notice didn’t you?”

“Yes,” said Arthur, “yes I did. It was on display in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying ‘Beware of the Leopard’.”

The Money

i explained to the Warner/Chappell contact how small we were – told her all about our project, and the details of how we wanted to use the song (in a video that we’d put up on YouTube and other video sharing sites). She contacted the band, and came back with a price tag of $65 000 for a 1-year synchronization license. (Keep in mind this is one of two licenses i’d need to purchase – i have no idea what a license for a given performance would have run me). She explained that the band is still pretty active, and that the song i wanted was an important one for them. To counter, i pointed out that the song had barely cracked the top 100 in the charts when it debuted twenty-three years ago. No matter.

Our conversation was pretty much dead in the water at that point. What was i supposed to do? Haggle? i can’t imagine talking someone down from sixty-five grand to the more manageable $29.95 (plus tax) that suited my budget.

If you want a song you can afford, there are a few routes you can take:

  1. Write and perform a song yourself.
  2. Blackmail a musician who is living in your country illegally.
  3. Hire someone to produce a sound-alike version. Then watch as Ryan embarks on a murderous rampage through the city streets, because sound-alike songs enrage him.
  4. Use the song without the license. Wait for YouTube to nix it, and run the extremely low risk of being sued.

So … what have we learned?

  1. If you have to ask, you can’t afford it.

…. aaaaand … that’s about it. i guess the only other conclusion i can possibly draw is that unless you know the band, or are the band, you likely can’t afford to license an even remotely well-known song for your indie game trailer.

My contingency plan involves a computer microphone, my 2-year-old daughter, and an assortment of pots and spoons. Clamorous!

Baby djembe

Word.

Sign up for the Spellirium Newsletter to go even deeper into the creative process behind the game. The newsletter contains a first look at exclusive artwork and juicy details about Spellirium that you won’t find anywhere else!

5 Words You Probably Misspell

It’s true: i’m a bit of a grammar nazi. i’m not, like, a high-ranking grammar nazi or anything. i’m no Grammar Goebbels. i’m more like a Hitler Youth. Of grammar.

So while the Anti-Defamation League drafts a strongly-worded email, let me list a few words that people tend to misspell or misuse, for the greater benefit of Beloved Internet.

1. Apropos

i’m not going to call you out too loudly if you fumble this one. It’s French, and it’s got that silent “s” on the end. But the problem with apropos, which means “fitting” or “appropriate”, is that it’s only used in English in a snooty context. People use it when they think they sound smart. “Apropos of nothing”, you say, looking down your nose at someone’s non sequitur.

So when you misspell something in that situation, you sound like the opposite of smart: you sound like an a-hole.

2. Per se

Again, this one’s not English – it’s Latin. But like apropos, it’s often said with verbal italics by someone who thinks he’s clever. When you try to sound clever on a blog, and you write “per say”, you don’t come off like a complete a-hole per se …

3. Biased

This is one of those words like “of” (could of [WRONG] vs. could have [RIGHT]), where because of people’s lazy diction, it gets misspelled.

WRONG You don’t like cheese? You’re bias.
RIGHT You have a bias against cheese. You’re biased.

3. Renege

This one surprises me every time i see it spelled. To renege is to go back on a bid or a promise. That unnecessary “e” messes me up … looks like you should say it “re-NEEJ”, but as you’re aware from college euchre tournaments, the word actually rhymes with “egg”. Indeed, when you are a person who reneges, you are a reneger (not a renegger). Bizarre.

4. Yeah/ya/yea/yay

i’ve been banging this drum for a long time.

Yeah: a lazy or casual way to say “yes”. Matches the “a” sound in “man”. Speaking of men, Kool-Aid Man, after breaking down the wall and terrifying all the children, exclaims “oh YEAH.”

Yea: Rhymes with “hay”. Opposite of “nay”. Used in voting.

Yay: Rhymes with “hooray”, and used in similar circumstances.

Ya: Equivalent to “ja” in some European languages. Rhymes with “raw”. NOT to be used interchangeably with “yeah”. i say nay to that plan.

Kool-Aid Man

5. Recuperate

i always thought this was spelled “reCOUPerate”. To boot, i thought “recoup” was an abbreviation of recuperate. In fact, they’re two completely different words. Who knew? To recuperate is to regain strength or lost finances, and to recoup is to do the same thing … or to regain an equivalent amount to what was lost. Even though they sound similar and have similar meanings, the two have different etymological roots.

i’d love to add to this list. What do you think should be on it?

Cooking with Flash: Groups and Layers

Prerequisites:

Begin

Let’s learn how to prevent Flash from doing the automatic cutting and melding that we saw in the Drawing with Strokes and Fills lesson.

There are three different ways to “protect” your shapes from interfering with each other. We’re going to look at two of them: groups and layers. The third method, encapsulating your shape as a MovieClip/Graphic/Button, we’ll save for another lesson.

It’s important to keep shapes separated in Flash. When you’re drawing the various shapes you’ll be working with, interfering shapes can be a disaster. If you come from a background in Illustrator, the need to keep artwork separated may seem foreign, but due to the speed that Flash and Fireworks offer they are, in my opinion, superior to Illustrator for drawing vector artwork.

1. Any Shape Can Be Grouped

You can put a “wall” around any shape to prevent it from being sliced, diced or melded by grouping it.

  1. Click and hold the mouse button on the Rectangle tool. The tool flyout will pop open.

    Flash Rectangle Tool Flyout

  2. Click on the Oval tool. You can also press the letter O key on your keyboard. The Oval tool works the same way as the Rectangle tool.
  3. Choose a fill colour for your new oval using the colour swatches in the Tools palette. Choose “no colour” for the stroke.
  4. Click and drag to draw an oval on the screen. Hold the SHIFT key to constrain it to a perfect circle (just as holding the SHIFT key constrains a rectangle to a perfect square).
  5. Click the Selection tool.
  6. Double-click the oval’s fill, or range-select the oval by click-dragging a box around the whole thing.
  7. Press CTRL+G on your keyboard to group the shape (or Command+G if you’re on a Mac).
  8. Press CTRL/Command+C to copy the grouped oval.
  9. Press CTRL/Command+V to paste the grouped oval.
  10. Click and drag one of the ovals over the other, then deselect.
  11. Click and drag one oval away from the other oval.

Flash Groups

A blue bounding box with no registration point (dot in the middle) indicates that the shape is grouped.

These grouped ovals are protected. They don’t meld together like they did when they were “naked”.

BONUS DVD PROTIP: Toggle the Object Drawing button, and Flash will automatically group all of the shapes you draw. If you actually use this feature, i will come to your house and personally murder you in the face.

Flash Object Drawing Button

The tooltip is actually describing the top button, the Object Drawing button. Regardless, please don’t use it.

2. Go “Inside” a Group to Edit the Shape

Grouped shapes don’t behave like naked shapes. They’re essentially protected from tomfoolery. If you want to tomfool with them, you can go inside the group to mess around, and then pop back out of it.

  1. Double-click one of the grouped ovals to go inside the group.
  2. Notice that doing this starts a breadcrumb trail above the Stage. “Scene 1″ is at the beginning of the trail, and now you’re inside a group within that Scene.

    Flash Go Inside a Group

  3. Mess around with the shape all you like. For example, click to select the fill, and then change its colour using the fill colour swatch.
  4. When you are finished tomfooling, click the “Scene 1″ tab in the breadcrumbs trail to jump back out to the Stage.

3. Groups Can be Nested

You can have grouped shapes within grouped shapes within grouped shapes. Try it:

  1. Click to select one of the two ovals.
  2. Press CTRL/Command+X to cut it. The deleted oval remains in memory.
  3. Double-click the remaining grouped oval shape to go inside the group.
  4. Press CTRL+V to paste the first grouped oval inside the second.
  5. Double-click the grouped oval you just pasted to go inside it. Notice that the breadcrumb trail changes again: Scene 1 | Group | Group . This means you are within a group that is within a group that is sitting on the Stage.

    Flash Nested Groups

  6. Click the first “Group” tab in the breadcrumb trail to jump back out of the nested group. Then click the “Scene 1″ tab to jump back out to the Stage. Alternately, you can click the “Scene 1″ tab to jump straight back out to the Stage.

Grouped shapes can contain multiple grouped shapes, each of which can contain grouped shapes, and so on. Using groups is a down n’ dirty way to protect your shapes, but it’s a beginner’s way to work. When i work in a file where a lot of the artwork is nested and grouped, i know the file was created either by a lazy person, or someone brand new to Flash.

4. Groups Can Be Broken

To break up a group, call Yoko Ono. Or follow these steps:

  1. Click on the grouped oval shape.
  2. Press CTRL+B (PC) or Command+B (Mac) to break the group.
  3. You wind up with one raw oval shape (this was the shape in the “parent” group), and one grouped oval (the “child” group).
  4. Click on the second oval and break the group, because it’s fun to do. Now you have two naked, raw shapes ready for some fusion (if you knowhutimean).

The Break command is used to crack other Flash things out of their shells. You can use it to convert a Bitmap image into a shape, or to break a MovieClip/Graphic/Button out of its MovieClip/Graphic/Button enclosure.

5. Groups On Separate Layers Stay Separate

The Timeline window contains Flash’s layer system. If you can’t see the Timeline, either click Window > Timeline, or CTRL/Command + ALT + T. Any shapes you paste in their own separate layers won’t interfere with each other.

Flash Layers

Here are some other facts about Layers:

  • Fact: Layers can be created with the “New Layer” button at the bottom left corner of the timeline.

    Flash New Layer Button

  • Fact: Layers are mammals.
  • Fact: Layers can be deleted with the “Delete Layer” button. It’s the trashcan icon near the “New Layer” button.
  • Fact: The topmost Layer has a higher Z-depth than the lowest Layer. This means that items in higher Layers will appear in front of items in lower Layers.
  • Fact: You can click and drag layers on top of or beneath each other to re-order them.
  • Fact: Double-click a Layer label to type a name for it. Unnamed Layers in a complicated project are sure signed of a Flash n00b, a lazy person, or someone who was in an awful hurry.
  • Fact: Layers can be locked/unlocked, hidden/unhidden, and outlined/unoutlinified by clicking the dots beneath the Show/Lock/Outlines buttons at the top left of the Timeline. (the eyeball/lock/square buttons)

    Flash Single Layer Controls

    Layer 4 has been hidden. Layer 3 has been locked. Layer 2 has been outlined.

  • Fact: All layers can be shown/locked/outlined by clicking the Show/Lock/Outlines buttons themselves.

    Flash Layer Controls

    All five layers have been hidden, locked and outlined.

  • Fact: You can click the New Folder button, between the “New Layer” and “Delete Layer” buttons, to create a Layer folder. Click and drag Layers in and out of Layer folders, then collapse the folders to save space using the little grey arrow. Layers that are inside folders appear slightly indented beneath the Layer folders.

Flash Layer Folders

Finish

Understanding Layers is a crucial part of working efficiently in Flash. Layers are preferable to groups, because they can be labeled, reordered, foldered, etc, while groups can only be nested inside each other in a somewhat invisible nightmarish structure. Groups are fine for fast drawing tasks, but they shouldn’t become a regular part of your repertoire – particularly because at a glance, they’re difficult to distinguish from MovieClips/Graphics/Buttons, which are a whole other ballgame.

Cooking with Flash: Drawing with Strokes and Fills

Prerequisites:

Begin

Let’s learn to draw with Flash!

Flash is not the most feature-rich vector drawing package available. During its development lifecycle, the creators of Flash listened more closely to programmers than artists. As a result, many new features for artists fell by the wayside, while Flash developed a (near) fully-featured programming language in its own right, ActionScript 3.0. Meanwhile, other software developers came along and ate Flash’s lunch – most notably Toon Boom Animation with its Harmony product, which is used in feature film production by Disney and other animation studios.

Toon Boom Harmony

Because Toon Boom listened to animators while bulding the product, Harmony embarrasses Flash as an animation production tool.

Still, Flash contains a great set of vector drawing tools, with some decent animation capabilities. In this tutorial, we’ll cover the unique way in which Flash handles vector drawing.

Vector vs. Raster

Before we begin, we should just cover off what the word “vector” means as it pertains to drawing software. Let’s take two images: a vector image on the left, and a raster image on the right:

A vector and a raster bunny

Now we’ll zoom into both images:

A vector and a raster bunny zoomed

Notice that the vector image remains smooth, while we can see the individual pixels (short for “picture elements”) that make up the raster image.

This happens is because the computer draws each image differently. Raster drawing is like painting on a canvas, while vector drawing is like describing shapes with math. The computer retains the mathematical calculations it needs to redraw a vector image at any size. But when you blow up a raster image, there’s only so much picture information the computer knows about the image. It can try filling in the blanks, but the results are usually mediocre.

The other big difference between the two comes when you want to move elements around. In a vector image, elements are separate, like fridge magnets. You can move them around, and put them in front of or behind each other, and all is fine and dandy. But when you move a piece of a raster image, it’s like you’re taking a pair of scissors to a canvas and cutting a chunk out of it – you wind up with a gaping hole. Modern raster programs often have a Layers feature that keeps elements separated, but this is just essentially like working with multiple flat images composited on top of each other. The problem remains.

Mona Lisa raster image

I’m sorry, Sir – we’re going to have to ask you to kindly leave the Louvre.

Some examples of raster image software include Photoshop, GIMP, and MS Paint.

Some examples of vector image software include Fireworks, Illustrator, Flash, and any 3D software (3D Studio Max, Maya, Blender, etc.)

Tricksy falseness occurs when you realize that many vector packages can import raster images. Many times, i’ve requested a vector logo from a client so that i can blow it up to a certain size without it looking pixellated. When i ask for the corporate logo “in Illustator”, i usually get an Illustrator file with an imorted raster image. Thees, of course, ees boolchit. It makes more sense to ask for a vector image instead of an Illustrator file, but not everyone knows what exactly a vector image is. Now you know! Spread the word, and share this tutorial.

1. Strokes vs. Fills

In Flash, the things you draw are called shapes. The outline of a shape (the “stroke”) is separate from the colour inside a shape (the “fill”). Witness:

  1. Open Flash.
  2. Click the Rectangle tool in the Tools palette, or press the R key on your keyboard. (If you can’t see the Tools palette, click Window > Tools in the menus, or hit CTRL/Command + F2 on your keyboard)

    Flash Rectangle tool

  3. Click and drag the mouse on the Stage (the rectangular white area in the middle of the screen) to make a rectangle shape. By default, you should see a white rectangle with a black stroke. You can change the stroke and fill colours before drawing by clicking the stroke and fill colour swatches in the Tools palette, and choosing different colours.

    Flash colour swatches

  4. Click the black Selection tool at the top of the Tools palette.

    Flash selection tool

  5. Click once inside the rectangle to select the white filled area. It goes “fuzzy”, indicating that it’s selected.
  6. Click on any blank area on the Stage to deselect the fill.
  7. Double-click on the black stroke around the edge of the rectangle. The stroke goes fuzzy too, indicating that it’s selected. (you may notice that you can also single-click the stroke to select one of the four edges individually)
  8. Click and drag to move the stroke away from the fill, independently.

Flash selected fill

A white rectangle on the stage with a selected fill …

Flash selected fill

… and a selected stroke.

Separated stroke and fill

You can pick up and move the stroke independently of the fill. (i’ve selected the white fill area so that you can see it against the white Stage)

The stroke and fill are two separate things! If at any time you want to select the fill and the stroke together, double-click the fill, and the stroke will be selected along with it.

2. Strokes Cut Fills

Strokes can behave like cut lines in sewing, or hot wires in clay modeling. They slice fills. Let’s see that in action.

  1. Press CTRL/Command+A to select everything on the stage, and then press delete to get rid of your last shapes.
  2. Click the fill colour swatch in the Tools palette. Click to select a non-white colour. i like yellow, because it reminds me of delicious snow.
  3. Click the Rectangle tool, then click and drag to draw a rectangle on the Stage.
  4. Click the Selection tool (the black arrow)
  5. As before, double-click to select the stroke around the rectangle.
  6. Click and drag the stroke so that it intersects the fill.
  7. Click the part of the fill on the inside of the stroke. Now click the part of the fill on the outside of the stroke. Click and drag to move either of these fills to another part of the Stage.

Flash strokes cut fills

Strokes cut fills.

The stroke cut the fill in half, and made it into separate shapes. For further exploration of this, try drawing a large rectangle, and draw wiggly strokes through it with the Pencil tool. Note that your wiggly lines split the fills up into separate pieces too, because the Pencil tool creates fill-cutting strokes.

Flash strokes cut fills

Here, i’ve used the Pencil tool to draw a wiggly stroke. It cuts the fill, so i can click and drag a wiggly-cut piece away as its own separate shape.

3. Working Without Strokes or Fills

How do you get a rectangle without a stroke, or one without a fill? In the colour palette fly-out, there is a small swatch with a red slash through it. Use this to cancel the fill or stroke colour for your next shape.

Flash no-colour button

You can find the no-colour button in the top-right corner of the colour palette for both the stroke and fill swatches.

4. Same Colours Meld

Two shapes of the same colour automatically fuse together. Try it:

  1. Clear the stage of old artwork. (CTRL/Command + A, Delete)
  2. Draw a red rectangle with no stroke (see above)
  3. Draw another red rectangle with no stroke overlapping the first.
  4. Click the Selection tool.
  5. Click on one of the two rectangles. Both rectangles are selected.

There actually aren’t two rectangles any more – there’s only one. Because they are the same colour, they melded together into the same shape.

Flash same colours meld

Two rectangles of the same colour meld together to form one shape.

You can meld two shapes of the same colour even without drawing them on top of each other. Draw one red rectangle over here, then draw another one over there. Using the Selection tool, drag one rectangle on top of the other. As long as the rectangle is selected, the two rectangles haven’t had colour sex yet – you can move the selected rectangle away without any fusion. If instead you click the Stage to deselect the overlapping rectangle, then BOWM-CHIKKA! What Flash has joined together, let no man put asunder.

Flash same colours meld

Order the VHS box set for $19.99.

5. Different Colours Cut

As with strokes, two shapes of different colours will cut each other when they overlap. Regard:

  1. Clear your old artwork (CTRL/Command + A, Delete)
  2. Draw a red rectangle on the Stage.
  3. Choose a new colour for the fill swatch. i chose green, because it’s the colour i turned after i ate that delicious snow.
  4. Draw your differently-coloured rectangle on the Stage, overlapping the first rectangle.
  5. Click and drag either of the two rectangles away from each other.

Different colours cut

Different colours cut each other, like the Jets and the Sharks.

Two differently-coloured rectangles automatically slice each other, in what i can only assume is Flash’s way of warning us about racially-motivated violence. Just as before, the two shapes don’t have to be drawn on top of each other for them to slice each other up. Try drawing two shapes at opposite ends of the stage. Then drag one on top of the other. Click on the Stage to deselect it – WHIPPOW!! That’s where the shanking happens. Now drag one shape away from the other to view the carnage.

6. Differently-Coloured Strokes are Distinct. Similarly-Coloured Strokes Become Fused.

Finally, we’ll see how strokes behave with each other depending on their colours.

  1. Clear your old artwork (CTRL/Command + A, Delete)
  2. Choose the no-fill option for the stroke colour swatch.
  3. Choose a colour for your stroke. i choose black, to reflect the rage and despair in my soul.
  4. Draw a rectangle on the Stage.
  5. Draw another black-stroked rectangle, overlapping the first one.
  6. Choose a different colour for your next stroke, like brown, which is the colour of chocolate when you poop it out.
  7. Draw another overlapping rectangle on the first one.
  8. Using the Selection tool, double-click the black stroke. The two black rectangle strokes get highlighted together, indicating that they are one shape.
  9. Double-click the differently-coloured stroke. It highlights independently, indicating that it cannot be part of the black rectangles’ undying love for each other. Two days later, the brown rectangle was found at the bottom of Lake Billingsly with a cinder block tied around its ankles.

Flash stroke boolean

The two black strokes band together, while the poor brown stroke is odd man out.

Notice, also, that strokes cut other strokes. Click on an individual line segment anywhere in your tri-rectangle shape. Any of these pieces can be moved away from the larger shape as a separate piece.

Finish

i prize the Flash drawing tools for their speed. You can draw all of the assets for your game right inside Flash, without having to buy other drawing programs to create your assets. And this cutting/joining stuff speeds up my drawing immensely. While it may seem unforgiving and awful at first, know that you can keep shapes away from each other by using layers and groups, which we’ll see in another tutorial. But when it comes down to it, the process for creating similar joins and cuts in a competing program like Illustrator is slow as molasses and unwieldy. The automatic cuts and joins in Flash, not to mention the stroke and point manipulation, are blazingly fast compared to Illustrator’s compound paths palette, and its finicky bezier handle-pulling. Once i adopted the drawing tools in Flash, i wondered how i ever got anything done in Illustrator.

Illustrator sucks for drawing

Each of those bezier handles and their control points are 4 pixels square. Heck of a job, boys. Heck of a job.