Flash is just a fancy comic book – Teaching Visual Thinkers to Code
Created
15 August 2010
Requirements
User level
Beginning
When I use the line about a fancy comic book with my students in the Academy of Art University's beginning Flash class for the Computer Arts & New Media Graduate department, they look at me a little funny. They want to do fancy interactive stuff, php and mysql, cascading and swirling animations. Of course, I want them to be able to do all of this too, but first we have to get through the basics.
Most of my students have bought a couple of Flash books and then gotten frustrated. Flash can be an overwhelming application to learn since it includes not only tools similar to Adobe Illustrator, but also a timeline, and a programming language that looks like Geek Greek. Like myself, most of my students spent eighth grade Algebra drawing cartoons and staring out the window. None of us ever planned to be programmers.
My goal is to teach Flash from the ground up -- from a simple timeline animation to the loading of external assets in Flash. In the ActionScript class we learn the basics of programming and begin to tackle more complex projects. This fall I'll teach object-oriented programming with Adobe Flex for the first time.
Our students
The Academy of Arts New Media Graduate program attracts a wide range of students. Typically they have some experience with Photoshop and Illustrator. Many have been out of school working in the design industry from one to five years. They are returning to school for an advanced degree because they want a wider range of skills.
The Computer Arts & New Media program covers a broad spectrum of skills— from creative thinking to the nuts and bolts of usability. Our students use all their hard won skills in their final thesis projects. And our students are visual thinkers. Like most visual thinkers, they tend to think in terms of perfectly composed single pictures, so using comic books as a metaphor for interactive media teaches them a new way to think.
Writing and logical thinking is a problem for right- brained people
Amazingly, writing and organizing is closely related to how you build a web site, or learn programming, these days, and that's a part of what is expected of artists. As I know from my own career and that of colleagues in the Graphic Artist Guild, many of us in the visual arts face this problem of dealing with the linear thinking required for programming.
An interesting study for anyone who wants to pursue this is at http://www.longleaf.net/ggrow/WriteVisual/WriteVisual.html
Interactive media for both sides of the brain
Comics tell stories with words and pictures. Comics involve both left and right brain activity: the logic and structure of a story with the drawing of numerous visuals. Integrating the two into a storytelling medium is what gives comics its power.
Comics have a plot, a good guy and a bad guy. In the end someone wins. The plot is the structure for comics. In interactive media and Graphic Design this is often called the Creative Brief. In writing class it's called an outline. We always start here.
For comics the artist creates thumbnails and pencils. The artist always draws the story in little boxes. In new media, these are called the storyboards. The difference is that in comics we always thought of this as the first version. And it's a complete overview of the story.
In comics the work gets scripted, inked colored and lettered. In the fancy new media jargon, this is an "iteration."
Right is the visual, Left is the Logical
The creative brief starts as a logical organizing tool. It includes a goal and its visual influences. This encourages my students and assures them that the project will fit their interests and skills. The Left Brain is working.
Anyone can draw, so I force students to do storyboards, laying out the whole project. The Right Brain is drawing while the Left takes a nap.
I always ask students to build a prototype by importing the storyboards into Flash and organizing them on the timeline. If they comp up their project with a storyboard, it's an easy way to introduce the structure of MovieClips. There is no focus on the fancy art that students love so much to create. But this is the first time their Right Brain drawings meet the Left Brain logic of organizing in Flash.
The MovieClip is a key element of the whole first semester. It helps students understand what object and how to manipulate its properties with the Flash interface. At this point, they don't yet need to worry about scripting. I'm always intrigued with comments from programmers about how weird the MovieClip's timeline seems to them. Clearly it's too right-brained for them but often too left-brained for visual thinkers.
In the end there can't just be one...
My Flash class covers four projects
- Text Animation
- A slide show
- A Story
- An eLearning project
So four times they get to have the Left Brain organize, and the Right Brain draw storyboards. The Left Brain cuts them up into MovieClips and the Right Brain polishes them into art and animation on the timeline. Finally the Left Brain makes it all work.
Each project gets more complex as we go, but by the end students can load SWFs into an interface and do a basic pre-loader so they get a tantalizing exposure to some of the power of ActionScript.
ActionScript the left brain's Hulk, smashes puny right brainers–my second course
Coding is a complex craft that quickly can overwhelm design students. Initially in teaching I thought you just showed students cool code and had them copy it. You tell a few jokes and you were done.
Because this is Masters Program our students do a thesis project with teachers as advisors, so I worked with many of my students a semester or two after they took my first class. Most of the students acted like their brains had been washed clean of anything I had said. It truly was like the Hulk smashing my teacher ego. I had to re-evaluate my teaching strategy. As always, comics came to the rescue.
The graphic novel of ActionScript
We began to draw comics in class, as a group project, for every problem. I present the class with a pre-made Flash file, and they get to look at the underlying SWF files. One-by-one they have to march up to the white board and draw out a panel of what is happening in the SWF.
Once they have drawn out the events, they have to write out what the user is has clicked on, where s/he has put the mouse. Then they have to write a script for what the Flash file or system is doing in response.
It becomes a great community process, for both quiet and boisterous students. They all help each other if they get stuck. If a student is totally lost, I can stage whisper hints, and pay a little bit more attention to make sure they don't fall behind the rest of the class.
The Gamma rays of ActionScript
In the end ActionScript and other code is a left-brained beast to be mastered or at least understood if you're going to be a visual artist in today's society. It helps to tell my student over and over again, "I used to draw superheroes and I learned to code, you can too."
Understanding that my students are visual, not logical thinkers cleared a major hurdle for me in teaching them. Applying the logic of a story and the relationship between images and words has made the problems of code much smaller.
If I can find any cheap trick to turn a coding concept into a visual I do. Visuals make more impact on my students than just a lecture. For example, I illustrate variables as a coffee cup. I make my class as goofy as possible, so they learn as much as possible.
The Academy's success ratio
Imagery from Wanderer's Wonder by Abraham Lee
The Academy's Graduate program has set itself a high set of standards, not only in Flash and ActionScript, but in visual design and usability classes too. Our students get good jobs at high-end studios. Over the last four years, Academy students have won first prize in the SIGGRAPH student competitions.
Jin Young Kim's CD-ROM was the first winning submission and others are online at ...
Abraham Lee went through my ActionScript class and the rest of the Academy program, He spent a year working on his thesis project, wrote the script, did all of the programming, and created all of the visuals for a game. He created a fully working isometric game for teaching children how to cope with their emotions. With six sections, his project has about 40 minutes of playing time in it.
The rewards of teaching
I have to say teaching is pretty neat, you lay a foundation, throw your students into the deep end and then stuff like this comes back.
Great students can make you look like a great teacher pretty easily.
After he passed his final review, one of my students said to me, "You know you're really the one who got me started on this programming thing".
I can only imagine the Algebra teachers out there laughing.
Tutorials & Samples |
