AFTER EFFECTS and WEB INTEGRATION PROJECT
“ANIMALS AND INSECTS”
This assignment asks you to create two After Effects animations and integrate them into the Web, using the theme “animals and insects” as inspiration. It is 30% of your grade.
A. ANIMATION #1--10 seconds
Your first AE animation must be based on selected parts of a photograph. Your work can be inspired by the animations of Isaac Campbell, animating images within a scene, or you can work with separate png selections (e.g., a bee, cut out from another public domain or CC image) and carefully animate these photographic objects in your own unique “collage.”
FOR SOME RE-ORIENTATION WITH THE PEN TOOL, PLEASE GO HERE.
Carefully choose high resolution images (+ 1500px) from the following resources:
- FORTEPAN IOWA
- FLICKER CREATIVE COMMONS (here is a short article of how the British Library just released 1 million images into the Flickr creative commons).
- Smithsonian Open Access (all Public Domain).
You’ll work with Photoshop to separate parts of the image to create movable layers. You will either bring the entire PSD file into AE, or already-selected pngs. You will animate with key frames. You are free to bring in as many effects as necessary to make the 10-second scene effective. You will be rewarded for challenging yourself and by the level of ambition of your animation. Try to work to expand your knowledge of AE by trying something beyond the basic animation, such as lighting effects, presets (like bubbles or, snow), 3D effects. Do NOT pile on effects gratuitously for no apparent reason. Your animation should be beautiful and poetic.
Here are some wonderful AE tutorial selections:
Lynda tutorials: log on through UNI’s portal: lynda.uni.edu
B. ANIMATION #2-10 seconds
Your second animation needs to relate to the first animation conceptually, as if it’s the continuation of a story. This animation must employ the Green Screen in Rod Library. You will learn how to integrate Green Screen footage into After Effects and how to manipulate backgrounds. You are encouraged to experiment with AE presets, watch videos to help you achieve a particular visual result, work with text and a variety of video and background images, and push your creativity levels. Please have fun with this!
- HOW TO IMPORT A GREENSCREEN MOVIE CLIP AND KEY OUT THE GREEN AND SAVE IT AS A TRANSPARENT MOVING IMAGE.
- HOW TO MAKE AN ANIMATED GIF
Again, here are some wonderful AE tutorial selections:
EXPORT YOUR AE VIDEO. Here are VIDEO INSTRUCTIONS.
C. OPTIMIZATION
Once your videos are done, we will learn how to optimize them with a video converter or compressor.
Media Encoder is part of the creative cloud, and this is recommended.
Devon Mettlin forwarded this fantastic “Larry Jordan” tutorial on the Media Encoder--it’s 8 minutes long and really great. Thanks Devon!!! https://www.youtube.com/watch?v=BtrqJX3vH0g
https://larryjordan.com/articles/adobe-media-encoder-compress-for-youtube/
Please save your video as H.264 (ideal for the web) or Mpeg4 (Legacy) using Media Encoder.
Please output your video so that you are mindful of file size. You will likely NOT want your video to be output at full size (i.e. 1080pixels) but more likely 720, 480, or 360 pixels. Having HUGE video files will mean you have to reduce the file dimensions with code, but then the browser will have to work extra hard handling and resizing these large video files. So make sure both your file size and video size are small to begin with. Ideally, you’ll have designed your project in illustrator and have a very precise size--you can output from AE in any size/dimension you want.
You may want to compress your video some MORE using additional compression software (this is what we do for Proud and Torn, and this is how we output the video to the Webm format, which is no longer required for you guys--I just want you know what it is and how it works).
ADDITIONAL FREE CONVERSION/COMPRESSION SOFTWARE (as always with free software, be wary of malware)
Convertilla (for PC)
Freemake (for PC)
MIRO (for Mac--this may have been discontinued)
Handbrake (for Mac or PC)--does not support WebM
If you can, optimize according to two web video formats--you will be fine if you just have mp4 (or H.264):
- Mp4: video format supported by Internet Explorer, Safari and Chrome
- webmSD: video format supported by Mozilla Firefox, Opera, and Google Chrome
Optimize your 2 videos (2 separate ways) and place them into two separate folders within a larger folder called “AE_yourname.” HERE IS A SCREENCAST SHOWING MIRO IN USE--YOU ONLY NEED TO CONVERT TO MP4 AND WEBSD; THE VIDEO ALSO SHOWS OGG THEORA.
AE_yourname
-page1.html
01.mp4
01. webm
-page2.html
02.mp4
02. webm
We will be integrating the video to the web so your AE_yourname folder will hold your video files as well as your HTML and css files.
D. WEB INTEGRATIION
- Go to eLearning, CONTENT/FILES FOR WEEK 16/hover.zip and download all the files. You’ll find 2 pages in HTML: page1.html, and page2.html, and their accompanying CSS. You will also find page1a.html and page2a.html, and accompanying CSS--this is if you get stuck. Let’s analyze the code.
- Next we’re going to build button hover effects using code from the Codepen community.
Take a look at these! - If you go to Codepen and type in “hover effect” in the Search Bar, you’ll see a number of effects to choose from. Many of them have HTML and CSS; some of them have SASS (Syntactically Awesome StyleSheets), which is an extension of CSS, and others have Javascript. We will not be working with javascript. Our goal is to put a different button effect on page1.html and page2.html, and link between the pages. SOMETHING LIKE THIS: https://sites.uni.edu/fabos/hover/page1a.html
Here is where you can find the code
Button 1: http://codepen.io/honglio/pen/FKyxG
Button 2: http://codepen.io/berdejitendra/pen/ypsFf
In class we will add the code to our HTML and CSS in the folder provided for you.
During class and then after class (on your own), your job is to experiment.
Change the size and color of the buttons. Change the svg graphic in Button 2. Play with the length of the effects.
Extra points will go to anyone who finds a different button altogether and substitutes it in the code.
Extra points as well to anyone who pushes themselves further by adding some hand-coded CSS animation to your video (fade it in, for example), using @keyframes or some animate.css (the file is provided for you , and for a refresher, go back to WEEK 2.
HAND IN: Zip your finished folder and hand in via eLearning.
GRADING RUBRIC
AE 1 video 40 points
AE 2 video 30 points
Video optimization for the web 10 points
Button animations and video integration: 10 points
Overall ambition and cohesiveness: 10 points