Digital Guyana

Posts Tagged ‘The course

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.

This morning workshop was split into two parts. The first part looked at finding and downloading images; the second editing and improving the images with the open source image editing programme GIMP.

We started with a quick exercise using a Google Image search to illustrate how easy it is to search and download all kinds of images from the web. I then explained that it’s not really sensible to take images from other people’s websites willy nilly. This is still a bit of a legal grey area but it is technically a civil infringement to take someone’s images from their website without asking their permission. (Useful links on the subject: http://forums.digitalpoint.com and http://answers.yahoo.com)

So, the only way to be sure you’re not being naughty is to A) use your own images or B) downloads images from a free image library – of which there are many. I then asked the students to search and download an image of their choice from one of these libraries.

In the second part of the workshop we looked at image editing. Photoshop is the obvious brand leader in this field but because we wanted to foster skill sharing in the most sustainable way possible we choose to go for a free alternative to Photoshop, of which there are many. We chose GIMP because it has a similar interface to Photoshop, is quick and easy to download and is relatively easy to use.

To save time we had already downloaded it but shared the link for downloading GIMP in case our groups wanted to download it onto their own computers. We also directed their attention to the GIMP user manual, explaining that, although it is very long, it contains simple instructions to all aspects of the programme.

After opening up the programme we demonstrated the two main windows: the toolbox and the image window. We then opened an image up in GIMP and demonstrated tools including the move tool, crop tool, scale image and zoom.

We then underlined the importance of Undo (Ctrl+Z) in using such a programme and explained how pixels work before getting our groups to resize their images to a specific size using two methods. The first method used the crop tool (remembering to adjust the ratio of the crop by clicking on fixed aspect ratio and entering the required pixel dimensions). The second way saw us creating a new window of the required pixel size and copying and pasting the image into it before resizing it with the scale tool, not forgetting to select ‘Keep aspect’ – or hold ctrl – to keep the dimensions of the image.

We then asked our groups to insert their resized images into their HTML CVs and their WordPress blogs as a new picture post.

After demonstrating how to flip and rotate images we looked at enhacing pictures using the Colour Tools.

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.

HTML stands for Hypertext Markup Language – the tags and attributes that are used to explain to a web browser how to display a page on the internet.

In the first lesson of the course we introduced the students to HTML and got them to build a very basic personal website with a homepage and separate pages for links and contact details.

Firstly, we asked them to open Notepad and create an html page using the <html> and <body> tags. The importance of closing all tags was emphasised.

<h1> tags were used to indicate the title and <p> tags were used around a lump of text. The file was saved as ‘index.html’ and viewed in a browser to show how the page displays.

Links were demonstrated next, along with html attributions. The students were asked to add a link to another website to their web page.

We then asked the students to use Notepad to create a document called ‘links.html’. In this document they listed a set of links to other websites.

The exercise was repeated, creating a third page called ‘contact.html’. The pages were then all edited to insert links between them.

To demonstrate how to add images into a web page, we took photos of the students and gave them the file to insert into their homepages.

We introduced the students to the following HTML tags:

  • <html>
  • <body>
  • <h1>
  • <p>
  • <strong>
  • <em>
  • <a>
  • <img>
  • <ul>
  • <li>

We demonstrated HTML tag attributes using:

Further attributes to style text included:

  • font-family: arial
  • font-weight: bold
  • background-color: yellow
  • text-align: center
  • size: 100%

In compiling the course materials we were indebted to the HTML tutorials provided by W3Schools.

(For links to further Web Skills course content please go to The Course)

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+)


Bringing web skills to Guyana

A volunteer project from CYEC (Commonwealth Youth Exchange Council)

Guyana on Flickr