Category Archives: 2D/3D 2017-18

Professional 3D Modelling

Now that you’ve got experience with a couple of great entry-level 3D Modelling options, it’s time to play with the big boys! Best of all, you can choose which program(s) you want to work with:

  1. Fusion 360 – probably the simplest and easiest option. Also the least professional option, but a great place to start. It’s made by Autodesk, the same folks who run Tinkercad, so you should already have an account and should be ready to go. All you need is to find some tutorials and you should be able to get started.
  2. Cinema 4D Lite – Great for animating 3D models and incorporating them into videos. If you’re interested in video animation, you want to explore here. Cinema 4D Lite is included in an Adobe program called After Effects, which is for adding visual effects to video. You already know Adobe applications, and with the limited feature set included in Cinema 4D Lite, this is also an easy way to get started.
  3. Cinema 4D – We can use a trial version of the full 4D program (**probably** This may need installation and assistance from our computer tech, which I can look into if you really want to use this program.) This offers more of a genuine, professional experience and will get you used to one of the programs used widely in the industry. Again, this one tends to be more for video animation than creating product models. Cinema 4D is used at Red River College for 3D video animation.
  4. Maya – THE professional design software. If you want to get into creating products and real 3D models, Maya is the program you want to use. Maya is widely used in the industry, and is used at Red River College. It’s also the most complicated program to learn and use. That having been said, my students have used this program for years, and after an initial learning curve, have come up with some pretty amazing models, so it is definitely possible for you to do well with it.
  • There is also another program that is widely used, called Blender. It’s free software for everyone, and as with everything, you get what you pay for. Amazing things are possible with Blender, but the program tends to have the most problems and drawbacks. You are welcome to explore this option if you wish, but the program will need to be installed if you want it. This is the program that I know the least about.

The first step is to choose which program to explore, and that’s totally up to you and how serious you are about learning this stuff. You have to learn and create a good model in at least one of these programs, but the rest of the semester can be spent getting to know one program really well or dabbling with different ones. It’s up to you!

I will set you up with whichever program(s) you want, so just let me know and I’ll help you get started!

The Hour of Code 2017

This week is Computer Science Education Week, and there’s a huge worldwide activity going on this week called The Hour of Code, where millions of people will learn how fun and easy it can be to learn to write computer code. Whether you’re trying to build or fix your own website, animate your designs, write an app for your phone or tablet, or just see what you can teach computers to do, learning code is really important and fun. You have no idea how much you’re capable of doing right now, until you try.

These skills will help make you part of a growing workforce of people who require computer science skills. These skills are becoming more important in almost every area of society, and sadly, there aren’t nearly enough people with those skills to fill important positions. By increasing your skills, you give yourself a far greater chance of landing a good job in the future, and unlock worlds of new possibilities now.

Please Join our class: https://studio.code.org/join/HBZGHC

OR you can try it out at Code Combat (a bit more challenging): https://codecombat.com/students?_cc=ZooGreenSize

OR you can try it out at CodeHS (a bit more challenging): codehs.com/go/21471

3D Modelling in Sketchup

One of the easiest and most common 3D modelling programs is Sketchup. It’s free, very versatile, and has a lot of tutorials and demos that you can access. This is a good place to further your understanding of 3D Modelling.

Sketchup is now web-based, so it can be used right in your browser. You can access the free version of the application here.

Here are some tutorials that you should work through to learn more about what Sketchup can do.

Self-paced tutorials

Learning tools

Tutorials & tips

video tutorials

 

3D Modelling with Tinkercad

At long last, you’ve reached the 3D modelling portion of the course! This skill operates on many of the same principles that you were working with in Animate, with one main difference, the addition of that third – depth – plane to work with!

We’ll start with one of the quickest programs to get started with and the easiest to learn. It will also help you to create your first 3D print in no time.

It’s called Tinkercad, and it’s all online and it’s totally free! You’ll have to create an Autodesk account, if you don’t have one already, in order to get started. Of course you shouldn’t give out too much personal information online, so feel free to make up anything except maybe the email address, which you might need in future.

There are some easy tutorials to get you started. Please access those here.

Once you’ve got the hang of the basic controls, I recommend taking a bit of a video course so that some things can be explained to you. The course accessible at this link is pretty interesting and informative, but the keychain is a piece of junk! Well, it’s not too bad, but the loop that attaches it to your keychain is too small, and it’s kind of weak so it’ll break off (trust me.) Can you improve on the design to make one that won’t break and will fit better? That’s your next challenge!

Make your own model to hand in and/or print out! I’ll show you how to share your project with me when completed. Have fun!

2D Animation Final Project

We’ve reached the end of the mandatory instruction for the 2D Animation portion of the course. Some may choose to return to it later, but this is the last project that you absolutely have to do.

For this project, you will combine all of the skills that you’ve learned so far into one, longer, animation.

You will include:

Different types of tweens (I’m looking for some variety here)

Animated dialogue

Action Script (original – not necessarily like the game that you completed)

It should include different scenes and characters/objects

Make sure that you ORGANIZE your layers and symbols in your library. You NEED to NAME your layers and properly NAME your SYMBOLS. Delete any symbols that are not used in your animation!

Take your time and do a good job!

Here’s a great example from a previous student:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/FinalAnimationAssignment.swf” width=”400″ height=”300″ targetclass=”flashmovie” allowfullscreen=”true”]

ActionScript 2: UFO Blaster

In this exercise, we’re going to create a different game with different functions. I’m going to create a game that has a little UFO that fires laser beams when the user presses a button. You can follow my example, but are certainly welcome to incorporate your own designs and elements.

Step 1 is to draw the scene. First, a background on the bottom layer. I’m not going to lie, I stole this off the Internet, but being the creative sort that you are, I’d encourage you to design your own:

Next, a layer on top with a button symbol that hides the instructions (>> Instructions)

And a separate symbol (I used a Movie Clip) containing some simple instructions for the game. (note: you could make this bigger block part of the same Button symbol, but I wanted to be able to position it independently and to show you an additional step.)

When you create a Button Symbol, you have a couple of options. To create, go into your Library

and push the New Symbol button at the bottom left of the Library panel

When you create a button, the Timeline header changes to display four frames labelled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe. Note that buttons can be text, objects, images, or even movie clips if you want an animated button.

If you add a keyframe in the “Over” column, you can change the colour or state of your button so that it changes when the user moves the cursor over the button. In my case, I want the buttons to change colour.

The “Down” frame is used when you want to change the button when it’s pressed. The “Hit” frame is the area of the button that the user has to press on to activate it. Basically, I don’t do much with those two.

I just want this button to hide the instructions when it’s clicked, so I’ll go into my Actions panel and under “Actions,” I’ll double click “Click to Hide an Object”

So the code says to watch for the instance of the play button (playButton) and when it’s clicked, it is hidden.

But I also want to hide the bigger block of instructions. You could either make this part of the same symbol as the button OR add those as a different symbol (I chose a Movie Clip and named it fullInstructions) and then add that you want to hide that as well.

We also need a Play button on a separate layer. It is also a Button Symbol.:

In this example, the button starts off red and changes to yellow when the cursor is placed over top

The tricky thing about this “Play” button is that it basically just brings back the instructions so that we can start again. So I’m going to take the code that we added to hide the instructions and modify it slightly so that when the playButton is pressed, the instructions come back!

And of course, we need a UFO that’s going to blast the lasers (again on a new, named layer). The UFO will be a movie clip symbol. That movie clip symbol actually includes 3 things. There’s a layer with the actual UFO body, on top is a separate movie clip within this movie clip, which makes the UFO’s lights blink (it’s a simple animation where the lights fade out and then when it restarts, they’re back on.) Hidden behind the UFO is the start of my laser beam:

light layer/movie clip:

and the beam is another movie clip, which starts hidden behind the UFO. It moves across the screen and makes a shooting noise as it travels:

There is a simple “stop();” code snippet at the top of my beam movie clip, so that the movement and sound do not happen automatically

My complete scene looks like this:

And my layers are named and organized like this:

To start adding the code for the game, place and select the UFO on the stage, then open the Code Snippets panel. Look under “Animation” and double click “Move with Keyboard Arrows.”

In my file, the instance name for the UFO movie clip is already specified as UFO_MC. Therefore, the instance name is not automatically generated when the snippet is applied. To confirm or add the instance name, you can select the UFO movie clip symbol and look at the name in the Properties panel.

From the code that was inserted, we’ll remove any lines of code dealing with the left arrow being pressed, since the Left Arrow key is not used. Delete the following lines of code:

var leftPressed:Boolean = false;

then scroll down to

if (leftPressed)
{
UFO_MC.x -= 5;
}

and then down a bit more to:

case Keyboard.LEFT:
{
leftPressed = true;
break;
}

and then…:

case Keyboard.LEFT:
{
leftPressed = false;
break;
}

Press Command + Return to test your movie and verify that pressing the arrow keys moves the UFO up, down, and right (but not left.)

[swf src=”http://misterjrobson.com/UFO1.swf” width=”600″ height=”400″ ]

Next, change the event that is attached to the Right Arrow key. Instead of moving the UFO to the right, pressing the Right Arrow key will shoot the light beam:

  1. Select the UFO movie clip symbol on the Stage.
  2. In the Code Snippets panel, double-click the Play A Movie Clip snippet in the Actions category. The Actions panel opens and the following instructions and code are inserted right after the Move With Keyboard Arrows snippet in Frame 1 of the Actions layer:

Here I would need to modify the inserted code UFO_MC.play(); because what I want to play is not the UFO movie clip. Instead, I want the beam movie clip inside of the UFO movie clip to play when the Right Arrow key is pressed. The beam movie clip is nested inside of the UFO movie clip so that it moves as the UFO moves.

  1. As noted above, there are three layers inside the UFO movie clip: light, body, and beam.
  2. The small orange dot under the UFO is the beam movie clip.

The instance name for the beam movie clip is beam.
This is the instance name of the movie clip I want to play when the user presses the Right Arrow key.

For me, the correct code is UFO_MC.beam.play();. Because beam is nested inside of UFO_MC; you use dot syntax to reference the beam movie clip.

Returning back to the main scene, and inside of the actions layer on frame 1, I just looked for the current action for what happens when the user presses the right arrow key. Right now, when I press the right arrow, my UFO moves 5 pixels to the right:

if (rightPressed)
{
UFO_MC.x += 5;
}
}

But I want to insert the above command to play the correct movie clip (within a movie clip).

In the case Keyboard.RIGHT statement, I replaced the lines above with:

case Keyboard.RIGHT:
{
UFO_MC.beam.play();
break;
}

The Up Arrow key moves the UFO up five pixels. The Down Arrow key moves the UFO down five pixels. The Right Arrow key plays back the beam animation.

[swf src=”http://misterjrobson.com/UFO.swf” width=”600″ height=”400″ ]

 

Interactive ActionScript

The final step that we’ll cover in our study of Adobe Animate is an aspect of the program called ActionScript, which allows you to add code to your animations and have the program perform different functions for you. This is also used to make your animations interactive, so the viewer can click on things, move things, input things, etc. This is how many apps and video games are made.

Open Adobe Animate

In the new file dialogue box, choose Action Script 3.0

Draw a shape. Any shape, any size!

Right click on the shape and Convert to Symbol

In order for something to have ActionScript code attached to it, it must be a MOVIE SYMBOL.

This symbol is going to be a link to a website, so I’m going to call it URLButton

In order to have code attached, it needs to be given an “Instance Name.” You can choose/modify this in the Properties panel. When writing code, instance names and objects in the code are usually written in something called “camel Case” in which multiple word names are put together with no space in between, and a small letter on the first word and a capital letter on the second word. So my Instance name is going to be “webLink”

*NOTE. If you don’t choose your own instance name, Animate will create one for you, but it’s always best to keep yourself organized and know what each item does.

In order to add and edit the code, there are two panels that you will want to open. Go into the Window menu and open Actions and Code Snippets

I have added those to the panel bar on the right so that I can easily open and close them as needed. Just drag the panel over onto the bar and wait for a white line to appear.

On your timeline, ActionScript code should always be added on top of all of your layers, so create (or wait for the program to create when you add code) a layer called Actions. My timeline looks like this:

Using the Select Tool, select the shape that you drew

Open the Code Snippets panel (looks like <>) and open the “Actions” section.

Double click “Click to Go to Web Page”

The Actions panel should open and you will see the Code Snippet that was added:

There are instructions at the top that explain what this does and what you need to do to make it work.

The code starts by identifying the symbol’s instance name (webLink), then adds a code that “listens” for a mouse click. When that click is “heard,” the “function” below is activated, which tells the computer to navigate to the specified URL (change adobe.com to whatever you want) and tells it to open the page in a new browser tab.

EXERCISE 2:

For the purposes of my example, I will be using a photo of the best looking, most wonderful, most brilliant, kind and generous person in the world. You may download it here: ex2Symbol

Create a new Action Script 3 file. The size and frame rate don’t matter too much, but I like my frame rate to be 25, which helps me keep track of how long my animation is.

Before you even begin, ALWAYS SAVE YOUR WORK with the correct name and in the correct location! I’m making a game where you have to blast a monster, so I’ll call mine MonsterBlast, and will save it in my Google Drive folder.

In my timeline, I have 3 layers: Actions, Character, and Background.

Choosing frame 1 of my Actions layer, I am going to add a Code Snippet that tells the animation to not play until I tell it to, because I want to add a title, instructions, and a play button. Go to Timeline Navigation, and choose Stop at this Frame.

On my Character layer, I designed a welcome screen

I created a new BUTTON symbol to act as my play button. You can design your own, but I got lazy and grabbed an arrow from this link.

On frame 1, in the Actions layer, I opened the CodeSnippets panel, went under Timeline Navigation, and chose “Click to Go to Frame and Stop”

The code pops into the Actions panel. All you have to do is change it so that it goes to the frame of your choice. In my case, I just need it to go to frame 2.

Looking at the code, it’s adding instructions to my playButton instance, and telling the animation to “listen” for a mouse click, and if that happens, it will go to and stop at frame 2.

Of course, in order for that to work, I need to actually have content on frame 2. I’m going to add a new frame on each layer

But on frame 2 I want those words to be gone, so, selecting the Character layer (where I’ve added the words), I’ll Insert Kayframe instead, and delete those objects from my stage.

I want this screen to have instructions on it, so I’m actually going to keep the playButton in the same spot. I went back to frame one, selected the button, and copied it. Then went to frame 2 and chose “Paste in Place”

Now for the moment of truth. Press Command ⌘ and return to test your movie! You should see the welcome screen

and if you’ve done it correctly, clicking on the playButton should take you to the next frame, which is blank except for the playButton

This screen is going to have the instructions, and the playButton will do exactly the same thing, except it’ll take us to frame 3 this time and it will Play the next stage of our animation/game.

Again we’ll need to add frames for frame 3

and add a key frame to get rid of the text and the play button.

I am going to import a new symbol (the one linked above, or again here) into the stage. You can draw or find your own if you wish.

Some import options will pop up. STOP and read the next set of IMPORTANT instructions.

We need this file to become a Movie Clip Symbol, and we’ll give it an Instance Name. VERY IMPORTANT: move the Registration point to the CENTRE. This will make it so that the player has to shoot me in the middle of the head to kill me.

Wait, is that a good idea? Nobody would ever want to hurt me! Oh well, it’s just a game. Hopefully they’ll play along.

Just like in real life, my head is too big.

So I’m going to right click on it and go to Transform, then Free Transform.

Hold down shift (unless you really want to squish or stretch my head) and grab one of the corners and drag it in.

My head is going to start off screen, and I’m going to animate it to move across the screen in an interesting pattern. You can animate this however you like. Make it go as fast or slow as you like (don’t make it too hard or too easy.)

On my Character layer (where your object should be), I’m going to add a Key Frame every second or so, and connect them with a Classic Tween, so that my head bounces around a bit. Here’s mine so far:

[swf src=”http://misterjrobson.com/MonsterBlast1.swf” width=”600″ height=”400″ ]

Now I’m going to add what happens when the user clicks on my head. In my case, I want it to open a webpage URL.

I’m going to add a Code Snippet: Click to Go to Web Page

And in the Actions panel, I’m going to add my own URL (the URL I am using is: http://misterjrobson.com/RIPJR.jpg

If you want to customize your own picture, create something and send it to me so that I can upload it, or just link to a site of your choice.

Now, my game looks like this:

[swf src=”http://misterjrobson.com/MonsterBlast2.swf” width=”600″ height=”400″ ]

Now I want to add a custom cursor, which will make it look like we have a gun pointed at the screen, and should make it a bit easier to hit the target.

It’s going to be a new Movie Clip symbol, and it’s going to be called “cursor”

Go into your library

and then press the New Symbol button on the bottom left of the panel

I’m going to use the oval tool + shift to draw a circle. My circle has a stroke, but no fill

 

 

 

 

 

 

Then I’m going to draw a line the same colour and thickness as my stroke. I’m again going to hold down Shift to make my line perfectly horizontal. Once I’ve drawn that, I’ll switch to the Selection Tool (click v on your keyboard) and then draw a box around both items to select them. Then right click, go under Align, and choose Horizontal Centre.

You can copy and paste the line, then hold shift or just use the arrow keys to move it down and into place

Paste a third line, right click on it, and choose Rotate 90⦁ (doesn’t matter whether it’s clockwise or counter clockwise, cuz, uh, it’s just a straight line.)

Eventually you should have something that looks kinda sorta like this

Returning to our scene, we’ll add that cursor BESIDE the stage on the Character layer AT FRAME 3.

With that selected, we’ll add the Custom Mouse Cursor code snippet.

We want our cursor to turn back to normal at the end of the movie, so we’ll take the last few lines of code and cut those. These lines are the ones we’ll cut:

//To restore the default mouse pointer, uncomment the following lines:
//cursor.removeEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor_3);
//stage.removeChild(cursor);
//Mouse.show();

Go to the last frame of your movie (mine is 357) and add a key frame on the Actions layer. Open the Actions panel, and paste in the code that you cut out of the original command. You need to take the // marks off of the code lines (starting with cursor.removeEvent…). It will now look like this:

//To restore the default mouse pointer, uncomment the following lines:
cursor.removeEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor_2);
stage.removeChild(cursor);
Mouse.show();

[swf src=”http://misterjrobson.com/MonsterBlast.swf” width=”600″ height=”400″ ]

Adding Sound & Animating Dialogue

Have you ever watched a cartoon without sound? It’s cool, but pretty boring. So let’s add some sound!

I’d like you to take a look at the tutorials linked below. They’re made with an earlier version of Flash (Animate) so the screen looks a little different, but everything should work the same.

You will be creating an animated character that syncs up with a little audio clip. I would recommend starting off by following along with the tutorial exactly, until you get the hang of doing these steps on your own.

In order to follow along with Joe, you’ll need the following files:

Flash file

“Adobe” sound

“Joe” sound

Mouth animation images chart

Once you have those files, you should watch the tutorials. Please DO NOT watch the entire tutorial at once. Watch a bit, switch to Animate and try what’s being demonstrated, then go back to the video and watch a bit more. Remember to go back and review any parts that you’re having trouble with or didn’t understand.

Step 1: Dialogue setup

Step 2: Animating the Dialogue

Once you’ve got the principles down, you’re going to create your own little animation. It doesn’t have to be long or complicated. You can use whatever character you want. If you want to record your voice and use that as your sound file, please do! I’ve got audio recorders that will make that super easy.

If you want something fun, I have a folder of audio files, featuring little clips of characters from The Simpsons, Family Guy, and much more that I can share with you.

Your animated clip should be at least 5-10 seconds, but if you want to challenge yourself and do something longer, please do! Have fun with this! Do something creative and interesting. Be silly and ridiculous if you’d like.

Animated Greeting Card

In a new Animate file, create an animated greeting card. Your card must be for a special occasion that would merit a greeting card. This can be a well-known holiday like Halloween or Christmas, or you can find obscure holidays (There are many online, here’s one list.) You can even make up your own holiday (Happy Buy Mr. Robson Lunch Day!) You could involve several symbols of that particular holiday (i.e. Christmas might use, elves, trees, snowmen, stockings, etc).

Although creative control is yours, you must do the following things to receive proper marks.
– The animation must be at least 250 frames (10 seconds) in duration
– Most objects/symbols in your animation must be drawn by you. You may choose to import a picture to your library to trace it in Flash or could choose to import a vector graphic if necessary, but the bulk of the scene/story will be created by you.
– You must use a variety of tweens so that different items move on screen.
– You must add text to help convey your message. Yes, there is a text tool in Animate…
– You must use layers properly (one object or background per layer, name your layers)
– Use a screen size of 800 (w) x 600 (h) and a framerate or 25 fps
– Remember to be creative and original.

For a challenge, consider adding music or sound effects! We’ll get into that more in our next assignment, but if you want to figure it out in advance, go for it!

Save your flash file as greetingcard.fla and be sure to test movie when finished to make sure that it’s smooth and interesting.

You can see examples from previous years here:

http://www.misterjrobson.com/student-work-samples/ (scroll down)

http://www.misterjrobson.com/2d-animation-3d-modelling-35s-s1-2015/ (scroll past the stories. Sorry about the annoying music.)

Samples from this year:

 

Graphics, Movie Clips, and Tweens, Oh My!

Your next animation project (after you dropped off a sample of your mad skills with the drawing tools and a first basic animation… you did those, right?) is to use a few key skills together to form one short animated video.

You will use GRAPHIC SYMBOLS to create a character/object that will move across the screen.

That graphic symbol will have a part of it (like wheels or legs) that will be a MOVIE CLIP symbol, which will have its own timeline, making it move independently of the main character/object.

You will include MOTION TWEEN(s) to make the character/object move across the screen. Duh!

You will also, somewhere, include at least one SHAPE TWEEN. A simple example might be clouds that change shape as the scene progresses.

The animation should be long enough to follow the scene (~10 seconds minimum?) and it should be fast and smooth enough to look ‘realistic’

Use those DRAWING tools to really illustrate your scene and make it interesting.