Web-App Animation Lesson

Animation

Essential Questions:

  • How is animation used in everyday life?
  • Explain how ANIMATION creates the illusion of movement?

Objective(s):

  • Students will be introduced to Photopea for the purpose of creating web based animation.
  • Language Objective: Students will be able to create animation from scratch using Photopea.

  • Animation: Brings a picture to life.
    An Animated Gif contains 2 or more frames that are played back in sequence by an Internet Browser or other programs capable of displaying animated GIF’s.
starrollSpeaker_notes
STARROLL.GIF: 8,086 bytes, 59 by 59
25 frames of animation. Blue star spins 360 degrees. No pauses in this one. Color rediction to 2 bit could save some. (http://members.aol.com/royalef1/gifstogo.htm)		A dozen frames. Colorful notes float out of pumping speaker. Ideal for a WAV/AU download button. (http://members.aol.com/royalef1/gifstogo.htm)

Photopea Animation Introduction

Hint:

  • Change file name to include _a_ at the start of the file name
  • Change the speed: at the end of the file name add a number (example: _a_Picture1, 1000)
  • Animation layers start from the bottom layer and go to the top
  • File, Export – Gif (make sure you know where you save it to.

Online Gif Animators

Go Online and find a Gif Animator website you can use for free. (Example: http://gifmaker.me/)

Create an animation

A website for ideas: http://www.techsupportalert.com/best-free-animated-gif-maker.htm

Assignment:  In Classroom

Attach: Your online animation (add in comments the URL of the website you used to create it)

Attach: Your own creation/animation

Save both animations

Student Sample Animation

Imageready:

ImageReady Introduction:

RIPPLE Effect Lesson

 expanding animated image.

Creating an animated banner

OK assignment

Animation divider source: http://clipart-library.com/clipart/945617.htm