Your Name Animated

To start off the school year, I thought it would be great to have 3rd graders work on a Scratch project and I’ve been wanting to try the animated name project from Made with Code for a while now.  You can find the resource cards here. (I printed a couple of sets) Animating your name seems like a good beginner project but not one that I do in Code Club.  And who wouldn’t want to play with their name in code?

Screen Shot 2017-11-01 at 7.29.49 PM

We started off by creating a backdrop for the Stage with the drawing tools in Scratch. I didn’t want them using one from the library, but to make their own.  Then we brainstormed ways to animate the letter Sprites – bouncing, turning upside down, changing color, spinning, growing, making a sound, etc.  This got them thinking about the possibilities. Next, we started adding letter Sprites.  Each Sprite was coded to be interactive by using the “when this Sprite is clicked” event block and adding an action to it.

 

Screen Shot 2017-11-01 at 8.37.28 PM

Example of 2 different letters interactivity

 

I used the resource cards to support students who preferred directions to be written out or visual or struggled to keep up with the general pace of the class.

Each third-grade class added their own flair to the project. One teacher decided to take photos of the students with a green screen background.  The students added themselves as a Sprite to their name project and animated themselves.

Screen Shot 2017-11-01 at 8.36.46 PM

I can’t share any of the actual student works as they include both the name and photo of the students.  We are going to record a video of the project like we do with our cloud project and include it in the students’ digital portfolio.

Another third-grade was finishing up the name project so close to Halloween that we incorporated the Trick or Treat project in with the animated names.  I didn’t present this part very well.  I needed to explain the difference between adding a costume to a Sprite and adding a separate Sprite. A lot of students made this mistake and there was general confusion.

Screen Shot 2017-11-01 at 8.55.42 PM

My next task is to finish the rubric for this project (which I should be doing right now).  The students enjoyed this project but we need to wrap these up.

Advertisements

Superhero Remix

The art teacher and I collaborated again this year with our superhero animation project.  3rd-grade students sketched their ideas for a superhero in art class then we used computer lab time to draw their superhero and background in MS Paint.  The next step was importing the files into Scratch and adding the code to animate them.

The students were engaged and worked hard. They could see where the project was going because they had seen last year’s example videos.  Some of them were familiar enough with Scratch to add a bit of flair (or music) to their animations. I saw more color effect changes and even helped implement other effects like this use of the whirl effect to animate Red Jelly Man:

One improvement that I tried to implement this year was the use of additional costumes to create the illusion of animation along with the moving of the Sprite across the screen. This was most easily accomplished by duplicating and then modifying.  Modifications generally included a slight rotation of the whole Sprite or to just an arm or other body parts.  Little changes really enhance the overall effect of the animation.

 

Screen Shot 2017-05-17 at 5.52.58 AM

Boring man has 2 costumes to look like he is walking

 

 

Screen Shot 2017-05-17 at 5.59.17 AM.png

Only Snakewoman’s rattle changes in the costume changes.

 

 

Screen Shot 2017-05-17 at 6.04.08 AM

Mr. Moo deploys his mini-moo with costumes varying the distance between hero and sidekick.

 

Another student’s Animal Man had 8 different animal costumes, all drawn by the student for his shape-shifting superhero.

Another technique we added this year was some simple backdrop animations.

 

Screen Shot 2017-05-17 at 6.03.21 AM

Thundergirl moves in front of lightning that comes and goes via code on the Stage

 

I’m very pleased with the second round of the Superhero project.  You can find all the movies here on my YouTube playlist.

Note: The students were able to add the project video of the animation to their digital portfolio without having to convert from the .flv format.  The actual Scratch projects are not shared online but completed using Scratch 2.0 offline editor.

A New Start

My two Code Clubs have started up again. There are 20 students and 2 high school volunteers for each club.  The first meeting has happened. Students learned about Scratch, had fun and I’m excited for both clubs.

This is my 3rd year. It’s session #6 & #7 of Code Club for 4th graders in my city. I know all the students from my school but only 2 of the students from the other side of town.

One thing I worry about, now that I have been coaching Code Club and teaching Scratch to elementary students for three years, is forgetting what it is like not to know how to program in Scratch, not to know what a Sprite is or know that the Stage has no movement blocks, etc.  I don’t want to assume that they know what I know and I want to present concepts that will be relevant to what they do understand. (I realize this concern is not unique in the teaching profession).

I have on the calendar for the first session of Code Club: “First meeting – Rules & Goals, Intro to Scratch”.  So I decided to morph the Rules & Goals and include a bit of the first step in thinking like a programmer.  Defining rules & goals is a big part of what a programmer really does.  I tried framing the rules in pseudo-programming language with the students as well:  If the day is Wednesday and the second bell rings, then it is time for Code Club.  When you open up Scratch, forever have fun.  I’m not sure I got my point across.

screen-shot-2016-10-11-at-2-42-41-pm

I presented the Maze game to Wednesday’s club because I knew they had used Scratch before as 3rd graders. They struggled a bit.

screen-shot-2016-10-11-at-2-44-01-pm

Most of them were able to get their Sprites to move around using arrow keys and set up the maze background.  Some were able to get the conditional sensing color code working.

screen-shot-2016-10-11-at-2-47-12-pm

Puff magic, a working maze game

And this one below added a squirrel that spins around the screen changing colors of the hero. Cool.

On Thursday I introduced Scratch concepts to 3rd & 4th grade programming newbies and blew their minds with the possibilities Scratch offers through simple blocks of code. The energy was thrilling and left me pumped.

screen-shot-2016-10-11-at-5-22-51-pmAfter introducing the same concepts of defining rules in code, (and Code Club) the first thing we tried was Motion blocks (ie moving a Sprite with the spacebar). And then we added Looks (ie change color).

 

screen-shot-2016-10-11-at-5-18-03-pm

screen-shot-2016-10-11-at-5-26-41-pmAnd finally, the awesome: Sounds forever!

screen-shot-2016-10-11-at-5-20-03-pm

In reviewing all of Thursday’s projects, I found those kids had some serious fun with Scratch last week!

I can tell I haven’t blogged in a while and I struggled to write this coherently and in a timely fashion.

Cloud Project

With the success of the 3rd grade Superhero Scratch project in March, I decided to see if 2nd graders could make a similar project and be successful.  They study cloud types as part of their science curriculum so that’s the direction I went.

Screen Shot 2016-05-04 at 7.17.20 PM

This project was very similar to the 3rd grade project but the drawing was easier – simple background and a white cloud – although even that turned out tricky.  I trimmed down the code required to 5 lines.  Still it took a while to complete.  I have 2 of the 3 class videos completed.  The other class just needs to Record Project Video and I’ll have all of their clips ready to put together.

Step 1:  Introduction to the project:  I showed the class what the project was going to look like and laid out the steps we were going to take.  Many were excited that they were going to be on YouTube.

Step 2:  Draw the Background: In the computer lab we used Paint to draw the background.  I modeled drawing a horizon line, then using the fill bucket to fill in the sky and the ground. This could be done in Scratch as well.  Save the Paint project and research clouds while everyone finishes up.

Step 3: Draw the Cloud: We used Paint to draw the cloud.  I modeled filling in the background with gray or light blue and then using different Paint brush types in white to draw the cloud they had chosen: cumulus, stratus or cirrus were the 3 types that we ended up using.

Screen Shot 2016-05-04 at 7.13.45 PM

 

Here’s where Paint and the different brush types helped add texture to the clouds.  Save again.  (I basically did one step per lab time, just so I didn’t lose anyone)

Step 4:  Import the Assets into Scratch 2.0 (offline editor) – this was their first time in Scratch so we had to look around and notice the Stage and Sprites, code blocks… etc.  Then we “cut” the Scratch Cat away and imported our background to the Stage (our Paint file didn’t quite fill the Stage, but that turned out not to be important when the video was cropped to  wide-screen in production)   Next we added our cloud Sprite.  The Sprite included the gray or blue background but we removed that with the fill bucket by filling in “nothing” or “invisible” over the background.  I’m not sure what is the best term to give to setting the alpha channel. This was a bit of a tricky part.  Also resizing the cloud. Save the Scratch project – I had them save it in their picture folder where the background and cloud files were.

Screen Shot 2016-05-04 at 7.12.58 PM

Step 5: Coding the Animation: It’s only 5 lines of code.  When the green flag is clicked, the clouds says it’s name and then floats to the left or right forever (bouncing off the edges). When I modeled this, we noticed that 10 steps at a time is too fast for a cloud.  1 step is more cloud-like. I made half-sheet printouts of the 5 lines of code.  I wrote the cloud names on the board so they could spell correctly.  Saving really seemed to be our biggest issue.  I did spend some time troubleshooting clouds not to flip upside-down or go off screen.

Screen Shot 2016-05-04 at 7.18.18 PM

Step 6: Record Project Video:  The last step.  I wrote up a detailed step-by-step for my sub, hoping it would happen. The other two classed did a great job but occasionally would forget to click the green flag, so we got 20 seconds of a un-animated cloud.  Having the 2nd graders do this step is a big time saver for video production.

Screen Shot 2016-05-04 at 7.14.47 PM

The next step was for me to convert the project files from .flv to .mov or .mp4, (I used Free MP4 Converter  software) put them together in movie making software (I use a iMovie at home, but WinMovieMaker at work), find some cloud music –Ferde Grofé’s Grand Canyon Suite seemed to fit the bill. And finally, upload to YouTube.  I showed one class their video today and they were pleased, although some couldn’t pick their cloud out of the group.  -hmmm, maybe a bit more customization of the background…

 

Here are the links to the YouTube videos:  MacNeil’s Class Video & Horne’s Class Video

I will see next year when these students are 3rd graders if making the Superhero project is easier or if we can do more with it.  I wasn’t able to do this project with all the 2nd grade classes, but it is a start.

Point of View

I am quite pleased with the variety of projects that my Code Club students are creating for our showcase in May. Everything from a maze, pong, virtual pet, dress-up to adventure and sports games.  There’s even a game of games project idea that will be interesting to see develop.

One duo was wanting to make a game where the hero stays mostly in the center and the background scrolls before he gets to the edge.  Something like Power Pete (or Mighty Mike) from Pangea Software  (those were good times, hours wasted)

maxresdefault

At first I recalled the scrolling demo project from Colleen Berekey. There are over 50 remixes of this project.  I showed the pair this project but it wasn’t quite what they had in mind.

Screen Shot 2016-04-23 at 9.29.11 PM

So I went home and thought about it and consulted my consultant – my spouse who’s a software engineer.  Like with other tricks to animation, coding this was a matter of changing perspective and looking at the problem from a different point of view.

If your Sprite stays in the middle, the background and chaser Sprites will have to move with the arrow keys. Or more specifically, against the arrow keys.

Here’s my quick take on the point of view problem.Screen Shot 2016-04-23 at 9.12.04 PM

Scratch Cat stays in the center and only points in the direction of the arrow key.  The stars move in the opposite direction briefly and then move back to center.  This took some fiddling with to get it to look half way decent.  In addition the octopus has to move in the opposite direction while still moving forward towards Scratch Cat.

Screen Shot 2016-04-23 at 9.12.28 PM

Octopus moves in the opposite direction of the arrow key pressed while still forever chasing Scratch Cat

Screen Shot 2016-04-23 at 9.12.47 PM

For added fun I included additional bad guy clones.