Art 382: Introduction to Interactive Media

Neal McDonald, M.S., M.F.A. mcdo@umbc.edu

First Lecture

Introductions

•  I am Neal McDonald – Production Experience: Lamb & Company – Game Industry: Half-Life total conversion,

Greenhouse Software CEO

– mcdo@umbc.edu •  Call me “Professor McDonald”

– That’s what my boss wants. – Sounds funny!

Emergencies

•  Campus Cops: •  Tornados: go downstairs •  Fire: get out •  Earthquakes: get out

Class Goals

•  Learn some Flash •  Learn some programming

– starting with HTML – moving on to ActionScript (Flash language)

•  Learn some interface design fundamentals •  Do some illustration

Why Programming? •  Why? Why? Why???

– Animators: the story of Tonya Ramsey – Game kids: duh – Designers: JS, CSS, ... – Many, many other jobs are design+code – You can't make buttons work without it

•  Not much programming – And not until after midterms.

Syllabus

•  All grades are weighted equally •  The class's web site has vital materials

– www.umbc.edu/~mcdo/382/ – assignments –  these notes

•  Get 3 x 4-8GB Flash drives– the cheapest possible – Hard drives are delicate – Your classwork for me won't be >500MB

What is Flash?

•  A tool for making ".swf" files, which can contain –  vector drawings –  motion –  sound –  programs

•  These objects can be "played" like sound files in web browsers or stand-alone applications

“But Flash is Dead!”

Short answer: he hated it, because he didn’t own it. CF: Silverlight

Why Flash, part 1 •  Job skill •  Huge user community •  Likely to be around for a long time •  Useful in other classes •  Cheap way to distribute animation •  Cheap, sufficient game development

environment •  AS3 is a real programming language

–  Knowing some AS3 makes learning (Java, C, C++, JavaScript, MEL, Python, Ruby, Perl, Lua, AppleScript, Visual Basic, pd, Max) much easier.

Why learn Flash, part 2

•  Integrated 2D vector animation system for <$200

Alternatives

•  Xcode: too buggy, too code-centric, no animation tools, no drawing tools.

•  Toon Boom Studio: $1500? •  HTML5: fragmented, code-centric, no

animation tools, no drawing tools! •  Processing: code-centric, no anim tools. •  Unity: 3D: you don’t have the math. •  Corona: Objective-C wrapper; fine until

there’s a bug.

Bigger Issue: 3 parts to class

•  Disposable Knowledge – Obsolete in 3 years –  IDE’s, OS’s, Flash– how programs work

•  Background Knowledge – Obsolete in 20 years? – What to do with the programs

•  Artistic Heritage – Never obsolete – How to tell a story, how to draw.

How to Tell the Difference?

•  If the answer to your question is a specific action by the computer, it’s disposable knowledge. –  “menu:edit:history:delete history” – Try to learn as little as possible; it gets

changed– or discarded! •  If the answer is about something you need

to do, it’s background. –  “Make the drawing bigger”

For Example: Objective-C

•  I wrote an OpenGL wrapper class for may iOS games and apps. – Used OpenGL 1.1: backwards compatibility. –  It worked fine for 2 years.

•  Apple made GLKit; now the default OpenGL project uses only OpenGL 2.0. – My expertise with OpenGL 1.1 is now useless. – But I didn’t have much to begin with.

Expertise

•  Control your acquisition of technical expertise!

•  Some jobs need deep expertise – Engine programmer, Maya Rigger – People who live in that domain all day. – What do they do when the tech is replaced?

•  Learn as little as possible & use the internets to fill in the gaps.

Why are we here again?

•  You are going to learn 2 development environments. – Flash: Animation, some interaction – Something else: HTML5

•  You will use the internet to gather specialized knowledge.

•  You will learn about making legible interfaces.

•  Also, a lot of illustration.

Why Illustration?

•  By illustration, I mean drawing style •  You need to be able to control your

drawing style – animators: fit in with a production's art

direction – game designers: same thing

•  It's not okay to only have one style – you can't control it – you get fired

Illustration content

•  Talking about how styles are different •  The meanings of different styles

– you must control your meaning •  Collecting examples •  Trying to duplicate styles

What's the difference between

and...

and ... ?

and...

You need to collect styles

•  Online – sites – games – art-related social sites

•  Magazines •  Keep in a journal

Who are you? Why are you here?

•  Let's introduce ourselves •  How's your drawing? How's your

programming?

Let's run Flash

•  Run it. •  Main Menu->File->New.. •  Make a new Flash File (AS3.0)

Anatomy of the Flash Interface

•  A: Timeline •  B: Stage •  C: Layers Area •  D: Tricky Bar •  E: Tools Palette

For next time:

•  Show up with a Flash drive.