The panel was moderated by Jason MacIsaac of Electric Playground fame, late himself of a small Ontario game studio from the Niagara region called Cerebral Vortex Games.

My fellow guests on the panel were (from right):

• Ian Kelso, head of interactiveontario
• Leslie Phord-Toy, a producer at UbiSoft’s new Toronto Studio
• Ryan MacLean, formerly of Pseudo Interactive and a founder of Drinkbox Studios (also both the second Mac and the second Ryan on the panel)
• Philippe McNally, from Longbow Digital Arts, who recently released their PC RTS Hegemony: Philip of Macedon

i was thrilled to see that the line-up for the talk was substantial. A Fan Expo staff member asked us if we were okay with people sitting on the floor when we ran out of seats. Of course, Ubi Soft was the big draw, as many of the audience members wanted to know how to get a job there working on their favourite triple-A console franchises. i made a point to mention that UbiSoft also developed the Nintendo DS Babiez/Petz/Horsez games, as well as a number of cash-in movie licenses that have failed to pull in the same acclaim as their more well-known blockbusters.

i’m doing my best to end this (apparently prevalent) notion that working in the video game industry is the ultimate fulfillment of this masturbatory Tom Hanks in BIG fantasy everyone has. Bills gotta get paid, and you may be asked to (gasp!) work on something you don’t like, such as a (shock!) video-heavy bank website instructing visitors on the various retirement products available to them (as we did last year).

Half-Remembered Q & A

i admit, i’m having a hard time remembering what went on at the panel. There was a girl in the second row wearing an incredibly distracting Slave Leia costume, so i think most of what i had to say was along the lines of “hummina hummina hummina.” (Slave Leia costumes don’t usually do it for me, but this one was worth strangling your hutt over.)

So the pro reporters will definitely cover the panel better, but here are a few questions and answers that i can recall:

Q:Why develop games in Toronto?
A:Lesley’s answer was no secret – Ubi was attracted by the tax credits and government funding. Ian hinted that interactiveontario and the government are trying to secure at least one more “whale” to move into the province. For the three small developers, the answer was “intertia”. Our families are here, we live here, and for folks like me who have young kids and ties to grandparents, it’s very difficult to seek our fortunes elsewhere. Ian added that the work they’re doing to attract big companies helps heal the brain drain; if Lesley were to leave UbiSoft (for example), he wants enough studio muscle here to retain top talent in the province.

Q:Does your choice of school make you more or less employable?
A:Ryan M seemed to be more impressed by educational pedigree, saying that it was not the only thing he looks for, but that it is an indicator of a qualified applicant. The only “good” Ontario schools mentioned were Waterloo, Sheridan, and University of Toronto. There are many, many schools that aren’t on that short top-of-mind list, including yours. Reflect on that.

i took a few digs at the International Academy of Design and Technology, saying that nearly everyone i’ve known from that school – both students and faculty – bad-mouthed the place (and forgetting that the moderator had been an instructor there – oops). Despite the school’s rock-bottom reputation, i’ve hired two programmers in my stint as a studio owner, and they’ve both been IADT grads. For me, individual excellence beats a school’s bad rep.

Q: Why aren’t more studios embedding themselves in schools to cherry-pick the best talent?
A:(no one really weighed in on this, but i gave it a shot at a local community college this year with disastrous results)

Q:How do you get a job in the industry?
A:The panel agreed that portfolios were really important. Ryan M said that demonstrated capability trumps a fancy CV. Philippe liked to see evidence of problem-solving ability. i said i’d much prefer a candidate with a portfolio of a few finished games he’d created himself, rather than a student project he completed with a number of classmates.

Q:Why don’t more companies take interns?
A:The three indies – Philippe, Ryan M and myself – said that interns were a risky proposition for small studios, due to the resources they demand. Leslie said that Ubi takes interns (theirs was in the front row taking pictures), but that the intern would have to have something valuable to commit to the organization.

One thing i didn’t get a chance to say was that people should be very wary of schools that offer internships. Picture it: you’re a college program head, and your school has guaranteed this placement program. You’ve got a few great students, a handful of middling ones, and two or three absolute morons who have barely managed to squeak by. Do you really want your school’s reputation stymied by those guys? Do you really want to risk damaging your relationship with industry by sending them out on a placement? No, you don’t.

Add to that the fact that there are very few shops in town, compared with the number of schools cranking out game-trained grads (Humber, Waterloo, George Brown, Durham, U of T, UOIT, Ryerson, Trios, Sheridan, Seneca, York, and Max the Mutt off the top of my head). Some schools churn grads as often as every six months. There’s a clear internship supply-and-demand problem here.

That’s why in my personal experience (and from what i’ve heard anecdotally from others), when you enroll at a school that promises a great placement program, they’re lying. It’s often a marketing ploy to get you in the door. You’ll certainly have to complete a placement to earn class marks, but you’ll have to hunt down the placement yourself. When i was a student at Seneca College here in Ontario, the school had two or three placements in industry for their favourite sons, and the rest of us scrambled. One girl got a job at her uncle’s trucking plant. i found an internship on my own at the Durham Board of Education, working in the computer lab with students in junior kindergarten. This was the final program requirement for 3D computer art and animation students.

The type of school you really want to attend is one that has high entrance standards, and that fails students early and often. There are very few that do this, but i heard an apocryphal tale that Sheriden will refuse to graduate a 4th-year student with a weak portfolio/art thesis presentation. (Note that Sheridan was on the panel’s very short list of prestigious schools.)

Q:How do you choose the right school?
A:Most of the panelists were too political to answer frankly. i don’t toe the same line, because i feel that many of the schools in this province – particularly the community colleges – are doing the industry and their customers a great disservice, and should be held accountable. i warned against schools with very new programs (which is most of them), because they often work out the kinks at the expense of their initial student intakes. i also took issue with schools whose teachers have very tenuous connections to industry. i was speaking to a colleague of mine not long ago, who suggested that every two years, the colleges should kick their instructors back out into industry to ensure they’re keeping their skills up to date.

Ian mentioned that organizations like io in other countries have partnered with (bullied?) schools into an arrangement where the trade association has to approve its course offering in order for the school to earn a passing grade from industry. As a prospective student, you just look up which schools the association recommends, and apply there. i like that idea, but i worry it’s prone to abuse in the name of politics and playing nice.

Party On and Be Excellent to Each Other

If there was one main takeaway from the conversation, it was to focus on personal excellence. The very best stand out, while everyone else falls to the wayside, as in all things. You wanna make games? Then the barrier to entry is so low, as Jason said and as Ian reminded us, that you should already be making games. Don’t wait on UbiSoft or some small indie shop to give you your big break. There’s a golden opportunity for you right here, right now that didn’t exist when the rest of us were getting our start.

The panelists spoke about a number of groups, technologies and resources. Here’s a non-exhaustive list:

Groups

• Hand Eye Society Where Toronto’s indie developers meet.
• IGDA Toronto Chapter This group places more emphasis on professional development than the HES.
• Artsy Games Incubator Artists who want to make games, but have no programming ability, get together to … make games! Closely tied to Jim Munroe’s efforts at the HES.
• TOJam The Toronto Indie Game Jam, an annual event where the city’s pros and hopefuls get together over one weekend to make games. A fantastic event.
• FlashInTO The Toronto Flash user group.

Technologies

• Unity 3D Create 3D video games in the browser, with a (comparatively) low learning curve.
• Adobe Flash A relatively inexpensive program for creating 2D and quasi-3D browser games. Lots of books and tutorials – join our ranks of over two million developers!
• Game Maker A free game creation tool, and the favourite of many indies.
• Scratch An easy-to-grasp game creation tool from MIT
• UDK The consumer version of the Unreal Engine. i don’t recommend this one because of its eventual high cost (despite an initially free download)

Resources

• Unity by Example, a book written by me that is coming out very shortly. It’s a great resource for new game developers that teaches you how to make small, simple games, and how to approach your game dev career so that you don’t give up on it. Send an email to info [the at symbol] untoldentertainment.com and i’ll send you a note once it’s available.
• MochiMedia, Kongregate, FlashGameLicense, HeyZap Four places (of MANY) to distribute and monetize games you create with Flash.
• Wooglie A unity game portal.
• TIGSource The de facto site for indies.
• Pimp My Game Our own series on making money (or not) with Flash games. Includes tons of sites that spill the beans about the financials on their games.

Were you at the panel? Do you have anything to add? Was there anything you wanted to ask that you didn’t get a chance to ask? Leave me a comment and we’ll have a great discussion.

Thanks to dendritejungle and Jason MacIsaac for the pics!

• Basic Flash Project Setup
• Drawing with Strokes and Fills
• Groups and Layers

Begin

Flash wasn’t always this difficult to get your head around. Before it was hijacked by codemonkeys, the software was a very capable animation program. The focal point of Flash animation is the Timeline, and all the wonderful things it can do. This lesson is a primer on how to move around the timeline and to figure out how it works. In a future lesson, we’ll delve into different animation styles you can pull off using the Timeline.

Start a project as described in Basic Flash Project Setup, or continue from an existing project. Make sure that you can see the Timeline in your screen setup. In the menus, click Window > Timeline.

1. Time moves from left to right.

This is an obvious point if you’ve used any other timeline-based software like Premiere, Audacity, or Director. Those numbers stretching off into the distance are frame numbers. A frame is a single picture in your movie. Play the pictures one after another quickly enough, and our persistence of vision creates the illusion of motion.

2. FPS Determines how fast your frames play.

Your default .fla file makes frames whizz by at 30 frames per second.

To change the frame rate of your Flash movie, type a different number into the FPS: field in the Properties panel (Window > Properties).

note: The Properties panel is context-sensitive, which means that it shows different options depending on what you’ve selected. To see the FPS setting, click on any blank area of the stage.

30 FPS is standard for most video. Classical animators used to work at 24 frames per second for feature films, and 12 frames per second for television and lower-quality animation. 12 fps is sometimes called working “on twos”, because the camera man would photograph each drawing twice to bring it up to 24 fps. The fewer the drawings you use in your animation, the choppier your animation will look.

3. Understanding keyframes

The word “keyframe” is inherited from animation. A common technique for animating a scene – especially involving a character – is to draw the key frames in the action. If you’re animating a bouncing ball, you might have three key frames: the ball at the top of its drop, the ball at the bottom as it squishes against the ground, and the ball at the top again. Keys are the most crucial drawings in the action. A person should be able to completely understand what’s going on just by looking at the keys.

Once you’ve drawn the keys – the most important drawings – you draw the in-betweens. Without these drawings, we can’t create the illusion of motion. They are the pictures that “move” us from one key to the next.

Computer animation packages like Flash enable us to set up key frames, and to draw our own in-betweens. Flash can also draw in-betweens for us using a process called interpolation. We’ll look at interpolation, or tweening, in another tutorial.

4. Understanding frame symbols

There are important symbols that appear on frames. Understanding them is the key to understanding the Timeline, like learning to read music.

1. Blank keyframe

   

   An empty circle indicates a blank keyframe. There is nothing on the stage on this layer on this frame.

2. Keyframe

   

   A black circle with a grey background indicates a filled keyframe. There is something on the stage on this layer on this frame.

3. Empty frame

   A blank white frame means that our animation will play to at least this point. The animation continues to play until it reaches the latest keyframe, blank keyframe, blank frame or filled frame in the Timeline.

   

   Even though the stage is empty, this animation will play past frame 30 because the blank frames stretch at least that far.

4. Filled frame

   A frame with a grey background means that the contents of the preceding keyframe appear on stage to at least this point.

   

   The contents of frame 1 stay on stage well past frame 30.

5. Terminal frame

   This white rectangle marks the point after which the contents of the preceding keyframe stop appearing on-stage.

   

   The contents of frame 1 persist on stage from frame 1 to frame 20. After frame 20, they stop showing up.

5. The function keys insert frames.

The F5, F6 and F7 keyboard keys are crucial when using the Timeline. Used on their own, they insert various frame types. Hold down the SHIFT key and press one of these function keys to delete that frame type.

F5 – Add a frame. They will be either blank or filled depending on whether they’re preceded by a blank or filled keyframe.
SHIFT+F5 – Delete a frame.

F6 – Add a keyframe. note: If you add a keyframe to a blank range of frames, you’ll drop in a blank keyframe.
SHIFT+F6 – Remove a keyframe.

F7 – Add a blank keyframe.
SHIFT+F7 – Remove a blank keyframe.

Sample usage: If you have something on stage, and you want it to disappear at frame 25, add a blank keyframe to frame 25.

You can click and drag to range-select a chunk of frames to delete them, or to convert them to empty or filled keyframes.

note: If you insert frames, they don’t overwrite your existing frames. Rather, the end of your Timeline on that layer gets pushed out farther.

6. The Playhead controls frames on all layers.

If you want to add or remove different frame types through all layers of the timeline simultaneously, first click on the pink rectangular Playhead. Then when you add or remove frames, they’ll be added to or removed from all layers at once.

7. Scrub or play your animation.

Click and hold the mouse button on a frame and move the mouse around to preview your animation. This is called “timeline scrubbing”.

To scrub the Timeline without fear of moving your keyframes around, click and drag the pink Playhead back and forth.

To play your animation within the Flash IDE, press the ENTER key on your keyboard.

To compile your movie to a swf, hold CTRL and press ENTER (Command+Enter on the Mac). Notice that Flash automatically loops when the Playhead reaches the end of the timeline.

note: In order to drag your empty and filled keyframes around, first click on the keyframe to select it, then click and drag to move it around.

Finish

This basic Timeline lays the foundation for the actual animation exercises we’ll be doing. We’ll learn how to do “straight-ahead” or “frame-by-frame” animation, as well as how to get Flash to draw the in-betweens for us.

• Basic Flash Project Setup

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.

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:

Now we’ll zoom into both images:

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.

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)

   

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.

   

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

   

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.

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.

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.

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.

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.

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.

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.

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.

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.

• none.

Begin

So you want to start creating games with Adobe Flash? Here’s the very first step.

You’ll need two pieces of software: Adobe Flash, and a program to in which to write your code. (Code is a list of instructions you give to the computer to make it bend to your steely will.) You can write your code inside the Flash program, but Flash is always playing catch-up with the great features available in other programs that make coding easier. And i like easy.

1. Download the Software

You can download a number of programs to help you code. The one we recommend (and use here at Untold Entertainment to create all our games) is called FlashDevelop. It’s free, but if you like it, consider tossing a few clams to the creators.

• Download a free 30-day trial of Adobe Flash
• Download your free copy of FlashDevelop (PC-only)

note: other popular programs that professionals use to create their code include FDT, Flash Builder (formerly known as Flex Builder), and even a fancy text editor like Notepad++. (i’m told that if you use a Mac, you’re iShitOutOfLuck on this front, but perhaps the commenters can recommend something?)

Once you’re finished downloading the two pieces of software you need, install them into the default directories, and we’ll get started setting up a project.

What is Flash?

The term “Flash” is confusing. You may have heard that some online video “is Flash”, that some games you play in the browser “are Flash”, that some websites “use Flash”, and more recently that Flash runs or doesn’t run on this device or that device. The word “Flash” is used interchangeably for both the authoring tool, the content that you create with it, and the plugin that displays that content to the end user.

The Adobe Flash software is also called an authoring tool, like a paintbrush or a table saw. With it, you produce Flash content (games, video players, websites, etc), which a person usually views in a web browser using a plugin called the Flash Player. Most often, when someone says you need to “download Flash”, he means you need to download the Flash Player plugin so that you can view Flash content that was created with the Flash tool. What you’re downloading in the link above is the tool, which is sometimes called the Flash IDE (Integrated Development Environment). i prefer “tool”, because it’s only one syllable, and “eye dee yee” is not kind to the ear.

2. Create and Save a New Actionscript 3 .fla File

When you open the Flash authoring tool for the first time, you’ll likely see a splash screen. To create a new file, etiher click “Create New Flash File (Actionscript 3.0)”, or go to File > New and choose Flash File (Actionscript 3.0) from the list, and click OK.

Your Flash file opens up and is displayed in all its glory – tons of interesting buttons and panels all over the screen. Don’t be intimidated. We’ll explore them in future lessons.

Click File>Save As in the menus. Flash files have the extension .fla. Change the name of your Flash working file to myFirstGame.fla (or whatever you like), and save it to a folder somewhere on your computer. Remember where you saved it! i recommend against saving it to the desktop – if you want it there, first create a folder on the desktop called MyFirstGame, and save your .fla file in there.

3. Create a New FlashDevelop Project

1. Open FlashDevelop.
2. In the menus, go to Project > New Project.
3. Choose a name for your project in the Name field. (You can call it MyFirstGame. Seems logical.)
4. Use the Browse button to point to the MyFirstGame folder you created, where saved your .fla file in the last step.
5. Click OK.
6. If you get a message saying “The directory is not empty …”, click OK to confirm.
7. If FlashDevelop asks you the Author name, type your own name or a suitable pseudonym, like “Cap’n CrackyPants”. All of the code you write will be signed with this name.
8. Click OK.

When you’re finished, check out the Project Panel, at the right side of the screen. (If you can’t see it, click View > Project Manager in the menus.) You’ll see your Project name, MyFirstGame. Then you’ll see the .fla file you created in Flash, called myFirstGame.fla. All of the code files you write to make your game will be listed here, along with any other files you place in the MyFirstGame folder.

Behind the scenes, FlashDevelop creates an .as3proj file in the folder, which is a metadata file that keeps track of what goes into the folder. Once you create your Project file, you never have to save it like you would most other files – you can just open and close different Project files, and they’ll list the stuff that’s in the folder with them.

4. Link FlashDevelop to Flash

The last thing to do is to make FlashDevelop aware of the Flash authoring tool so that the two can play nicely together.

1. In the menus, click Tools>Program Settings or press F10.
2. Click ASCompletion in the sidebar list.
3. Click in the field labeled “Path to Flash IDE”, and navigate to wherever you installed the Flash tool on your computer. On my Windows system, it’s here:

   C:\Program Files\Adobe\Adobe Flash CS4

4. Click the Close button.

Finish

That’s it – you’re done! Now you’re ready to create Flash content using the one-two punch combo of Flash and FlashDevelop.

“Fwitter”. Deal with it.

Our Pull Twitter Updates Into Flash tutorials (Part 1 and Part 2) continue to be popular! A few folks were asking how i had taken my Twitter feed and rigged it so that people’s Twitter names and links were clickable. i promised to write tutorials on demand, so here we go.

Clickify Your Twitter Feed in Flash

Here’s the process in pseudo-code:

1. Take the chunk of text and split it up into individual words
2. With each word, figure out if it starts with “@” or “http:”
3. If it does, wrap it in html tags
4. Re-assemble the string
5. Set the re-constituted string as your dynamic text field’s htmlText property

So, let’s start with a simple chunk of Tweet text:

“Hey everyone – @untoldent’s blog is INCREDIBLE! http://bit.ly/cXX06r”

Note: this is just a tweet i pulled at random from the Twittersphere. It could have been anything. But my blog is usually a trending topic at any given time of the day.

We’ve got two things we want to make clickable: @untoldent, which should link to untoldent’s Twitter user page, and http://bit.ly/cXX06r, which should take us to that webpage.

Splitting the String

The String class has a built-in method called split. It takes an argument that lets us carve a string up, and the resulting fragments are put into an array.

So, for example, if we have a comma-delimited string:

var fraggles:String = "Gobo,Mokey,Wimbley,Boober,Red";

we can split it using the comma as a separator. The resulting fragments are returned as an array.

var fraggles:String = "Gobo,Mokey,Wimbley,Boober,Red";
var aFraggles:Array = fraggles.split(","); // use the comma to split up the string
 
trace(aFraggles.length) // 5
trace(aFraggles[2]); // Wimbley
trace(aFraggles[4]); // Red

So in the case of our Twitter string, we want to split it up into individual words. The thing that separates one word from another is the space character. So let’s use space as an argument to split up that string:

var aWords:Array = twitterString.split(" "); // use the space character to split up the string

Note: the split method is slow, so use it sparingly. There’s not a lot going on in our Twitter reader, so we can get away with it.

Now let’s loop through each element in the aWords array – each word in the Twitter post – and determine if it’s a Twitter username (which starts with “@”), or a URL (which starts with “http:”). We’ll create an empty string to hold our final output, and run each word through a separate method.

var finalString:String = ""; // Create a new string to hold our final output
var len:int = aWords.length; // store the length of the aWords array to speed up our loop
 
// Loop through all of the words in our tweet:
for(var i:int = 0; i<len; i++)
{
    var word:String = aWords[i]; // Store an individual word in a variable
    finalString += " " + checkWord(word); // Run the word through a checkWord method, and tack the 
    // return value onto the end of our finalString (along with a space character, to space the words out)
}

Note: We’re storing the length of aWords in a variable, instead of saying i

Obviously, what’s missing is the all-important checkWord() method. Let’s build that next.

The checkWord() Method

Our checkWord() method is going to do this, in pseudo-code:

1. Accept a word
2. If the word starts with “@” or “http:”, wrap it in href tags and return the string
3. Otherwise, just return exactly what was passed in

To check if a string contains a certain other string, use the String.indexOf() method. indexOf() will return the place in the string where the other string first appears.

For example, let’s find the indexOf the capital letter “W” in the string “NSFW”:

var str:String = "NSFW";
trace(str.indexOf("W")); // 3

The answer is 3, because “W” is at index 3 in the string. (Remember that strings and arrays are 0-based – the first element is at index 0, the second element is at index 1, and so on.)

If the thing you’re looking for can’t be found anywhere in the string, the indexOf() method will return an index of -1:

var str:String = "NSFW";
trace(str.indexOf("pictures of adorable kittens")); // -1

Substring

The last thing you need to know how to do is to grab just a piece of a string. This is because the twitter name comes through with an @ symbol at the front, for example @untoldent. But we need to link to http://www.twitter.com/untoldent. Notice there’s no “@” in that URL.

We need to extract just the username from the string, without the “@”. We can use the String.substr (substring) method to do that.

The way String.substr() works is that you pass it a start point and an end point, and it rips that section out of the string and returns it.

So, check it out:

var str:String = "manboobs";
trace(str.substr(3,7))); // boobs

The letter at index 3 of “manboobs” is “b”. (Remember – we start counting at zero.) We rip the section out up to index 7, which is that last letter, “s”. So what’s returned are the letters from index 3 to index 7 – “boobs”.

If you want to rip out a chunk of your string from a certain index point to the last letter in the string, you can use the String.length property.

var str:String = "manboobs";
trace(str.substr(3,str.length))); // boobs

If you’re on high alert and paying really close attention, you’ll notice that str.length takes us one index point past the end of our string. (“manboobs” is 8 characters long, and there IS no letter at index 8.) Flash just ignores us if we try to grab more of the string than actually exists. So technically, this is also valid:

var str:String = "manboobs";
trace(str.substr(3,5000))); // boobs

Armed with this knowledge, we can build our checkWord() method.

Let’s Do This Thing

private function checkWord(word:String):String
{
 
   if(word.indexOf("http:") == 0)
   {
         // This word starts with "http:" at index 0 (the beginning of the word)
 
         // Wrap it in html href (anchor) tags:
         return "<a href='" + word + "'>" + word + "</a>";
   } else if (word.indexOf("@") == 0) {
         // This word starts with "@" at index 0 (the beginning of the word)
 
         var justTheName:String = word.substr(1, word.length); // Remove the "@" from the username
         // We do this because we need to link to http://www.twitter.com/untoldent (for example),
         // not http://www.twitter.com/@untoldent
 
         // Wrap it in html href (anchor) tags:
         return "<a href='http://www.twitter.com/" + justTheName + "'>" + word + "</a>";
   } else {
        // There's nothing special about this word.  Return it as-is.
        return word;
   }
}

Note: Did you notice the use of single quotation marks and double quotation marks? You need to wrap you url in quotes, but since we’re already using double-quotation marks around our string, we need to use single-quotation marks to wrap the url, or they’ll interrupt our string definition and screw things up.

The Money Shot

So far, we’ve turned this:

"Hey everyone - @untoldent's blog is INCREDIBLE!  http://bit.ly/cXX06r"

into this:

"Hey everyone - <a href='http://www.twitter.com/untoldent'>@untoldent's</a> blog is INCREDIBLE!  <a href=''>http://bit.ly/cXX06r</a>"

The very last step is to use the htmlText property of your dynamic text box and stuff it with that fancy new string. Assuming you have a dynamic text box called twitterTxt, do this:

twitterTxt.htmlText = finalString;

You’ll now have clickable links inside your text field.

Extra Credit

If you’re super-astute, you’ve noticed that this code won’t actually work! That’s because the Twitter string says “@untoldent’s”, not “@untoldent”. The apostrophe-s is going to screw your code up, because you’ll be linking to http://www.twitter.com/untoldent’s, which is not a valid URL.

Using what you’ve learned in this tutorial, can you augment your checkWord() method to detect a “’s” at the end of a Twitter user name and rip it out?

Further Reading

i hope this tutorial was informative and helpful! For more Actionscript and Flash tutorials, thrill to our Flash and Actionscript 911 book.