{"id":4756,"date":"2020-09-14T12:22:29","date_gmt":"2020-09-14T16:22:29","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=4756"},"modified":"2024-02-01T14:14:38","modified_gmt":"2024-02-01T18:14:38","slug":"3-part-animated-story-part-3","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=4756","title":{"rendered":"3 PART ANIMATED STORY: PART 3"},"content":{"rendered":"\n

The End: <\/h2>\n\n\n\n

The final animation will conclude your story and resolve the conflict(s) that arose in the middle. For the final part of your story you will utilize a spite animation that loops, so your first frame and last frame must be the same.<\/p>\n\n\n\n

Process:<\/h2>\n\n\n\n

Picking up from the middle of your story, move into either photoshop or illustrator to create the final artwork. As you did for the zoetrope, the frames of your animation will be placed side by side. These side by side frames when used for digital animation are referred to as a sprite. Your sprite should use a minimum of 24 frames and a maximum of 48 frames. <\/p>\n\n\n\n

To set up your sprite, decide how large you want a single frame of animation to be. For example, my demo is 100 pixels wide, and 200 pixels high. Then multiply the width by the number of frames you need or think you need for your animation. My demo used 20 frames, so my file needed to be 200 pixels high and 2000 pixels wide. If you need to add more frames just add the width of one frame to the width of your document.<\/p>\n\n\n\n

Once your sprite is finished, it will be brought to life using a little HTML and CSS.<\/p>\n\n\n\n

Download my files from the demo in class <\/strong><\/a><\/p>\n\n\n\n

The HTML will be simple, in the body of your document add the following:<\/p>\n\n\n\n

<div id=”sprite”><\/div><\/p><\/blockquote><\/figure>\n\n\n\n

In the <head> of your document add the following css, change the values marked in purple to match your sprite:<\/p>\n\n\n\n

<style>
#sprite {
width:FRAME_WIDTH<\/mark>px; height:FRAME_HEIGHT<\/mark>px;
background:url(sprite<\/mark>.png) left center;

animation: go NUMBER_OF_SECONDS<\/mark>s steps(NUMBER_OF_FRAMES<\/mark>) infinite;
}
@keyframes go { 100% { background-position: –WIDTH_OF_SPRITE<\/mark>px; }
}
<\/style><\/p><\/blockquote><\/figure>\n\n\n\n

Bringing it all together:<\/h2>\n\n\n\n

Due for critique on week four are all 3 parts of your story. Please digitize parts 1 using the scanner in the homework lab or the Dragonframe setup in the AMC to capture each page of your flip book, once each page is captured export an animated gif or mov file.<\/p>\n\n\n\n

Grading:<\/h2>\n\n\n\n

Part 3 will be graded on the following for criteria:<\/p>\n\n\n\n