Cinemagraph Project
A cinemagraph is an animated hybrid of a still photo and a video... It contains elements of both. Good examples of cinemagraphs can be found here and also here. Below is my example cinemagraph:
A cinemagraph is an animated hybrid of a still photo and a video... It contains elements of both. Good examples of cinemagraphs can be found here and also here. Below is my example cinemagraph:
1. To get started, first select a video clip. You may use your own content or you can pull content off Youtube using a download site, app, or plugin. It is IMPORTANT to choose good content for this project. You'll want a clip where you can choose a bit of isolated movement for one to three seconds. By "isolated movement," I mean movement that happens only on one area of the video. A football arcing across a screen would not be good for this project, but a basketball being spun on somebody's finger might work well. You'll also want to consider looping... Can this project be played in a continuous loop, or will the motion jumping back to the beginning after ending be distracting? (Remember: You can always copy/paste your project and reverse the order of the copied portion to improve looping continuity. More about this later on in steps 4 and 5.)
2. Once your content is selected, open it in Quicktime and trim it. You're looking for no more than three seconds of film; less is better. Once trimmed, go File>export> then choose the best quality resolution available. Save it in a folder with your other content for this project.
3. Watch this and follow along. Now you'll open the project using frames as layers in Photoshop. Pay close attention to make sure you have your group layer selected when you're setting up your layer mask.
4. Export as a .gif file when you're done. OR, If you need to copy/paste/reverse to improve looping continuity, this is most easily done in Final Cut. If this is the case, export as a .mov file.
5. (Optional... You only need to do step 5 if you exported as a .mov file for the copy/paste/reverse loop contingency.) You should now have a completed 1-3 second .mov file that plays nicely in Quicktime. But you want a .gif file if you're planning to embed it on a web page. Open your .mov file in Final Cut. Copy and paste to create a duplicate clip. Hit command-J to go to the 'modify speed' panel and check the box that says 'Reverse'. Check playback to see if it's smooth. If it isn't, you may need to zoom in on your timeline and use the arrow keys on your keyboard to navigate frame by frame. You can cut out frames and close the gap on your timeline or you can copy and paste duplicates of individual frames to smooth out your playback. When you're done, export as a .mov file. Go to zamzar.com to upload your finished .mov file to convert it to a .gif.
6. Your finished .gif can then be embedded as an image file on your portfolio page. Please do so to turn your project in. Your finished .gif must be embedded on your portfolio page to be considered complete.
2. Once your content is selected, open it in Quicktime and trim it. You're looking for no more than three seconds of film; less is better. Once trimmed, go File>export> then choose the best quality resolution available. Save it in a folder with your other content for this project.
3. Watch this and follow along. Now you'll open the project using frames as layers in Photoshop. Pay close attention to make sure you have your group layer selected when you're setting up your layer mask.
4. Export as a .gif file when you're done. OR, If you need to copy/paste/reverse to improve looping continuity, this is most easily done in Final Cut. If this is the case, export as a .mov file.
5. (Optional... You only need to do step 5 if you exported as a .mov file for the copy/paste/reverse loop contingency.) You should now have a completed 1-3 second .mov file that plays nicely in Quicktime. But you want a .gif file if you're planning to embed it on a web page. Open your .mov file in Final Cut. Copy and paste to create a duplicate clip. Hit command-J to go to the 'modify speed' panel and check the box that says 'Reverse'. Check playback to see if it's smooth. If it isn't, you may need to zoom in on your timeline and use the arrow keys on your keyboard to navigate frame by frame. You can cut out frames and close the gap on your timeline or you can copy and paste duplicates of individual frames to smooth out your playback. When you're done, export as a .mov file. Go to zamzar.com to upload your finished .mov file to convert it to a .gif.
6. Your finished .gif can then be embedded as an image file on your portfolio page. Please do so to turn your project in. Your finished .gif must be embedded on your portfolio page to be considered complete.
Great job!
Flash Project
Below are links to a 9-part intro to Adobe Flash. Follow along, creating your own Flash animation as you go.
Follow Mr. Marsden's sequence to make a boat animation. This lays the groundwork for creating our own Flash animations. Please embed your completed .swf files (both your boat animation and your independent flash project) on your portfolio page. Your finished .swf files must be embedded on your portfolio page to be considered complete.
Pro tip: If you don't want ocean noises to loop on your home page, delete your sound effects layer and re-export a silent version to put on your portfolio page.
Follow Mr. Marsden's sequence to make a boat animation. This lays the groundwork for creating our own Flash animations. Please embed your completed .swf files (both your boat animation and your independent flash project) on your portfolio page. Your finished .swf files must be embedded on your portfolio page to be considered complete.
Pro tip: If you don't want ocean noises to loop on your home page, delete your sound effects layer and re-export a silent version to put on your portfolio page.
