RHK8TECH - Motion Graphics

Coding a Motion Graphic

In this project you will create two digital mandalas using images of your choice and animate them using Scratch. Using the following steps.

Directions and resource videos on Google Classroom

Step 1

Search for a school appropriate image using Google image search.
The image needs to be a PNG file format and have a transparent background.
- Click tools -> color-> transparent
When you find an image that you like, right click or control click on the image and save to your documents.
- Make sure you save the image as a PNG file format.

Motion Graphics 1

Step 2

Open Pixlr image editor
Open new image, set size to 1000 x 1000 pixels, SELECT TRANSPARENT

Step 3

Resize image: Edit -> free transform
Grab the corner and drag to resize.
- HINT: hold down the shift key to maintain the aspect ration of your image when you resize.
Click on the open area next your image and click "yes" to apply changes.
Control click or right-click on the layer and duplicate.
Resize image: Edit -> free transform
The new image layer is on top of the first.
Select the move tool and move the image over
- Position the mouse close to the corner until you get the rotate tool.
- Plan your rotation so the images stay inside the image frame.
  - Anything outside of the image frame will be cut off.
- Once your image is in position, merge the layers together.
- Repeat the process until you have a full circle.

Directions and resource videos on Google Classroom

Step 1

Step 2

Step 3

Step 4

Save your image circle to your computer as a PNG file format.

Directions and resource videos on Google Classroom

Step 5

Import your image into scratch and code for the motion.

HINT: Once you have one image with the motion code, just duplicate and change the size % and direction by replacing the move with a "-" (negative) number.

Step 6

Once you have many images nested with different sizes and spinning in different directions, it's time to save your work as a .mov and upload to the Classroom assignment.

Motion Graphics 2

Step 7

Upload your .png from pixlr and the .mov of the TWO motion graphics, to the Google Classroom page.

Done?

If you have uploaded your TWO motion graphics, you can explore SketchiO and inspirARTion. If you create something you want to keep. You can save the files to your computer to use in later projects. Remember to save the files as a .png.

Here are some exemplar student examples. These examples show what is needed to reach a proficient level.

Student Examples