GWD - Basic Animation

1 post Page 1 of 1
Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

GWD - Basic Animation
smashapps
Hello,

I only just heard about it but thought I might try and be the first to post tutorials!

Download Google Web Designer from here: https://www.google.com/webdesigner/

Install it by following the installation (keep clicking next !)

After you've installed GWD, open it up and go to File > New File, or press Ctrl + N.

Image
This is the screen you see when creating a new file. For this tutorial we just want to create a new blank HTML file.

Be sure to set the Animation option to Advanced. This gives you many more tools.

Image
In the image above the selected tool is the draw rectangle. Selecting this tool opens up more options:

Image
These are the options given to you when selecting the rectangle tool. There are three types of drawing tools and that's oval (O), rectangle (R), and line (L).

Next to the Line tool are type colors, on the left is the stroke, which is the outlining of your shape, the next is your fill.

Stroke 1px is default, that is the thickness of the outlining for your shape.

Now, draw something on your canvas (the big white board in front of you :))

Image
Image
This here is the Timeline. If you've used Flash before you would recognise this. For animations/motion tweens you have keyframes. Each little box represents a frame, each drawing in every box represents a keyframe and Master layer and <canvas> are your layers. The options on the left allow you to lock the layer from being edited, choose if the layer is visible on the canvas or choose if the animation will repeat.

The layer we are using is <canvas> (note that the Master Layer just allows you to change the layers i.e. hide them all, lock them all etc.).

The timer on the timeline represents the animation in seconds. For this animation we are adding a second keyframe at about 5 seconds so right click the box on our layer at 5s and choose Insert Keyframe.

This will duplicate our 1st keyframe. Modify your new keyframe, change color, move it around and then click Preview > Your chosen web browser.

Your animation will come up in your web browser and automatically start playing.

Image
Look at the image above, that comes up bottom right and is one way you can modify the size of your shape.

That is the end of my basic animation tutorial.

GWD (Google Web Designer) is pretty fun to use. Try and play around with it and see what you can come up with! I'd love to see them.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
1 post Page 1 of 1
Return to “Tutorials”