rodriguezbrian100.github.io/112assignment4.html at master · rodriguezbrian100/rodriguezbrian100.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
  <head>
    <title>Assignment 4: After Effects GIF</title>
    <style>
      body {
        text-align: center;
        font-family: URW Chancery L, cursive;
        background-color: thistle;
      }
      h1 {
        font-size: 100px;
        margin-left: 200px;
        margin-right: 200px;
        padding: 15px;
      }
    </style>
    <body>
      <h1>After Effects GIF: "Space Frog"</h1>
      <img src="spacefrog.gif" alt="spacefrog.gif">
      <br></br>
      <div style= "font-size: 30px; margin-left: 100px;  margin-right: 100px; background-color: mintcream; padding: 15px;">
      <p>
      At first I was going to make a gif of a frog jumping from lilypad to lilypad in a small lake, but I decided that making it an alien frog leaping in outer space through a wormhole would be hilarious so I went with that instead.
      The sitting frog, leaping frog, and lilypad images were made in Illustrator then imported into After Effects.
      For the sitting frog image, I made a duplicate and changed the visibility so that the original would begin on the middle (pre-jump) and the copy would land on the left (post-jump).
      The leaping frog is just one image that moves its position from right to left in an upward curve.
      For the lilypad image, I made a duplicate so that the original would begin in the middle and float off to the right, and the copy would come in from the right and stop at the middle.
      The sitting frog layers were parented to the lilypad layers so that they would just copy the movement of the lilypads and give the appearance that they were sitting on them.
      The wormhole video in the background was a stock video that I found.
      </p>
      </div>
    </body>
  </head>
</html>