Digital Guyana

Posts Tagged ‘teaching

Day 3 Morning – Beginning the Assignment

The project set comprised of making a short animation in which a character walks up to a car, enters, and drives off. I thought this was an apt choice of project as not only did it cover all the skills that the students had been learning (with the exception of lip-synching, which they had all mastered very well) but it also encouraged creative application of the skills they had learned. For example the car, in order to be animated more realistically, would need spinning tires – a use of the MovieClip symbol that I had not taught them, but could be figured out from what I had. The same goed for animating the character opening the door and getting in the car.

Most of the morning session comprised of me answering and questions the students had and assisting them with any problems they encountered.

Day 3 Afternoon – Further Reading Plus Inspiration and Group Assessment

In the afternoon session, whilst the students finished up their work, I introduced them to the popular website Newgrounds.com. Newgrounds is a web-based animation forum for animation mostly made in the flash environment. It is a completely user-generated content website, and so finding high quality animation can sometimes be difficult. However it is a great resource for seeing what the flash environment is capable of. Whilst the students worked I played a series of my personal favourite animations which showed various different styles and complexities of approach to animation.

I set a deadline for the projects to be completed, exported to Quick Time and on a memory stick for about 3:00pm. At this time I uploaded all the files onto the computer I had been using (which was hooked up to a data projector) and played the animations back for everybody to see. There were some impressive, creative responses to the project and I am very proud of the work the students did. Of course they are not quite professional quality yet, but for a week long project they did incredibly well. In addition they now have almost all the skills they need to, with enough passion for it, push the finesse of their animations toward professional quality.

I would like to take this opportunity to pass on my hearty congratulations to all the students who took part and to thank them for the opportunity to share my knowledge with them. It has been an absolute pleasure and I hope that got as much out of it (or even more) than I did.

I will include a list of resources and a few of the animations I showed my students in a further post at some point in the near future.

Day 3 Morning – MovieClips and Tweens

The first part of the morning was spent showing the class the two major tweens used in flash before CS4: Motion and shape. Tweens are a kind of shortcut for animation in flash. You put the object you want to animate in a position at the first and last frames you want to animate and flash does the rest of the work.

The students learned that a shape tween can only be applied to the area between two keyframes on a layer without symbols in them. Similarly, they learned that motion tweens can only occur between two keyframes on a layer that have only one instance of the same symbol in that frame.

The second part of the morning introduced the students to MovieClips. MovieClips are a type of symbol that instead of being a static graphic can be a looping animation. I showed the students how to put their lip-synched animations into a MovieClip and then animate that MovieClip using a tween.

Day 3 afternoon – Walk Cycles, Motion Guides and exporting to Quick Time

After instroducing looped animation using MovieClips I continued to show the class what a walk cycle was. A walk cycle is a looped animation showing a character walking. Making a walk cycle and then animation the movieclip with a motion tween is a great shortcut to get characters moving quickly and effectively.

We started off with a very simple walk cycle for a stick man – each arm and leg was a symbol, then each one was put on a seperate layer and animated using tweens in order to give the feel of a walk (even if it was very stiff and stilted). After they each had a simple walk cycle I got the students to break the arm and leg symbols up into forearm, arm, thigh and shin, so that the character would have working knees and elbows. I then got them to analyze somebody walking in order to find the best way to make the walk look realistic.

A lot of students at this point took the opportunity to use their lip-synched face animation as the head for their stick man. I commend their creativity.

Once everyone had a walk cycle completed, I showed the students motion guides. Motion guides are a line that can be paired with a layer in order to manipulate the path a tween follows – so that you can create a more diverse movement than just a straight line.

Finally, I taught the students the procedure for exporting an animation to the Quick Time .mov file format for use in video

The final part of the afternoon session was setting a quick one-day project for the students to consolidate the skills that they had picked up. Details to be posted in the day four post.

Day four will be posted up shortly.

The flash animation course was a precursor to the main web skills course which was taught as a week long ‘slab’ to a select few students.

The high intensity four-day course which was broken down into:

  • Day 1: Introduction to the flash interface and familiarisation with keyframes (simple facial animation)
  • Day 2: Lip-synching and introduction to tweens
  • Day 3: Walk cycles, advanced walk cycles, and motion guides
  • Day 4: One-day assignment: Create a short animation of a person walking up to a car, getting in and driving off.

Day 1 morning – introduction to the interface:

The morning section took the form of a lecture that introduced the main tools and elements in the flash interface, these include:

  • The stage
  • The toolbar, which included:
    • The selection tool
    • The free transform tool
    • The pencil tool
    • The line tool
    • The rectangle/oval/polystar tool
    • The paintbrush tool
    • The paintbucket tool
    • The inkbottle tool
    • The magnifying glass tool
    • The contextual menu
  • The properties bar
  • The library
  • Colour swatches
  • The timeline

Day 1 afternoon – familiarisation with keyframes and the timeline:

The afternoon was a more hands-on period where I got students to explore simple animation with pre-prepared artwork. First importing it into Flash, and then converting it to a low size, more animation-friendly format.

The afternoon session was broken down like this:

  • Importing images and trace bitmap
  • Frames and Keyframes
  • Keyboard shortcuts including:
    • Ctrl-C (Copy)
    • Ctrl-X (Cut)
    • Ctrl-V (Paste)
    • Ctrl-Shift-V (Paste in place)
    • Ctrl-Z (Undo)
    • Ctrl-B (Break apart)
    • V (Selection tool)
    • Q (Free transform tool)
    • N (Line tool)
    • k (Paintbucket tool)
  • Symbols
  • Simple animation: switching between different symbol instances between keyframes to create the illusion of movement (like smiling or blinking) using two static frames.

Day 2 to follow soon

We sadly had to say goodbye to one our team members on Friday. Pontus, who was only able to participate in the project for two weeks, is now back in London and his job with Futurebuilders.

Before he caught a bit of a kip on Friday night (his taxi pickup to the airport was at 2.30am) we had a few drinks and an unfeasibly large amount of food at a Brazilian restaurant in downtown Georgetown. At said eaterie (we’re not sure if the Brazilian restaurant is its actual name but that’s what everyone calls it) you can either pay 2,500 Guyanese Dollars (about £7.50) for an all you can eat barbeque buffet or pay by the weight. Unsurprisingly, the place is a hit with local volunteers looking to stock up on cheap (and light) veg. The caipirinhas ain’t bad either.

On Saturday, Chris, Matt and me and a dozen or so VSO volunteers travelled to the frontier town of Bartica on the Essequibo River for VSO-er Derek’s 60th birthday party. Derek and his wife Trudie, who also works for the charity in Bartica, had rented out a huge house owned by a logging company on the banks of the river. We shared the building with a nice mix of friendly local volunteers, colourful Barticans and eccentric ex pats, and, all greased by Carib lager and Five Year Eldorado rum, lazed by the pool and the river before dancing into the wee hours.

Swimming pool at large house in Bartica

A memorably fun time was had by all – even if it did feel slightly wrong partying in a former slave house on Emancipation Day with a group of mostly white people. And on the speedboat leg of the journey there and back we passed Eddy Grant’s pallacial residence on his private island – a highlight of the whole trip so far for me!

Teaching as a threesome on Monday felt a little bit strange. But with two of us leading and one of us floating between the two school groups things went really well. Sadly, the local IT technician we’d lined up to help support the last two weeks of workshops now has other work commitments, but if today is anything to go by we should be absolutely fine.

Expect to see this week’s course outlines (Further Blogging and Content and Design Skills) posted in the coming days by Chris and me.

In the morning of the second day we covered CSS – cascading style sheets.

In the previous week we had covered inline styles – (for example <p style=”font-family:arial,verdana,sans-serif”>.

We explained that that is one way of doing it but that it is really impractical as you have to define the style each time you use an element. A much better way of doing it is using an external style sheet where you only define the style of each tag once.

First we asked the students to go back to their index.html page that they had created during the first week of the course and delete all the inline styles. They were then asked to create a styles.css file using notepad and save it next to their index.html file.

We then showed how to set up a head with a <title> and a <link> to styles.css in their index.html file:

<head>
<title>Welcome to my website</title>

<link href=”styles.css” rel=”stylesheet” typle=”text/css” media=”all” />
</head>

Next the students were shown how to set up the style sheet with the basic elements and their CSS selectors:

body {
background-color: yellow;
}

h1 {
color: blue;
font-size: 170%;
font-family: arial, verdana, sans-serif;
}

p {
font-family: arial,verdana,sans-serif;
}

and so on.

We also explained borders, margins and padding and how to style the different states of the <a> tag: a, a:hover, a:visited and a:active.

With some of the faster groups we were also able to start looking at <div> tags with id’s and classes, for example:

<div id=”redborder”>

<h2>A second level header</h2>
<p>Some ccontent.</p>

</div>

The following CSS selectors were covered:

  • background-color
  • background-image
  • background-position
  • background-repeat
  • color
  • font-size
  • border
  • margin
  • padding
  • font-family
  • text-decoration
  • font-weight

With a few students we were also able to touch a bit on floats.

CSS specialism

In addition to the basic CSS course, we also ran a CSS specialism one Friday morning. In this course we went through a tutorial from subcide.com which built up to this two-column layout with a header and a footer:

From subcide.com

I Know HTML

We’ve just finished teaching the HTML and social networking part of the course.

We were really pleased with how all the groups took to writing HTML. For a handful the lesson was a refresher course; for most HTML was completely unknown to them beforehand.

However, each day we got through all the material we wanted to teach and we were impressed by how the students built on the basic information we gave them, experimenting and trying different things out.

In the afternoons we discussed the uses of social networking beyond the personal. We tied this in to the particular interests and experiences of the different groups – the school students, teachers and community groups all brought their own perspectives to issues such as crowdsourcing, online collaboration and community engagement.

We had some really good, wide-ranging discussions – it’s fair to say it went better than I had hoped.

Tomorrow we’re offering the first of our specialisms – a morning of more advanced HTML for those that want to learn more. Next week we’ll be moving on to tackle CSS and then blogging.

Incidentally, in due course, all the materials from the course will be going up on this blog and the wiki (for which the link escapes me just now).

(Pic – I Know HTML by kk+)