Unit Two Assignment: Say It Like Peanut Butter

How_to_be_Fabulous_Party_Monster

Directions: “Make an animated gif from your favorite/least favorite movie capturing the essence of a key scene. Make sure the movement is minimal but essential.”

10 years ago I had a mild obsession with the movie “Party Monster.” In this scene the main character, Michael Alig (Macaulay Culkin) is a newbie in New York and James St. James (Seth Green) has just taken him under his wing and is teaching him how to make a memorable entrance at a party. The movie chronicles the fabulous yet incredibly tragic rise to notoriety of Club Kid Michael Alig. The movie is anything but inspirational yet as a young impressionable 20 year old I took the advice in this scene to heart and it certainly dictated how I worked the crowd at events through most of my 20s. Oh memories, haha.

______________

Being self critical in regards to the assignment specifically, I don’t know if the movement in this gif qualifies as “minimal but essential.” Fluttering hands are hard to boil down to one specific move. ?

I’ve No Aversion to GIFfing

Aversion-Therapy300_256_SegmentB0 Aversion-Therapy300_256_Segment2
Aversion-Therapy300_256_Segment3 Aversion-Therapy300_256_Segment6
Aversion-Therapy300_256_Segment5 Aversion-Therapy300_256_Segment7b
Aversion-Therapy300_256_Segment7a Aversion-Therapy300_256_Segment8

I had a instant case of GIF-eye-tis when I saw the poor Resident twitching away in the Aversion Therapy room in the episode A Change of Mind. This one little moment says so much about how The Village seeks to control the individuals and require them to conform to the stated norms. The carrot (“like Number 2″) and the stick (“avoid Rover,” be mutual) are conditioning of the worst kind. That the man progresses from a state of stillness to a  state of completely unrestrained fear within a few short seconds and at the whim of Number 2 says so much about the lengths to which “the community” will go.

And as a GIFfing opportunity, a static camera with limited changes in the viewfinder made this a perfect subject.

GIFfing Process

In selecting an excerpt from the scene to start with, I captured about 20 seconds of frames (8 seconds per frame, ~ 160 frames), and as I looked at them more and more, I realized that while the single panel GIF of the resident was something to isolate, the larger story was also important.

My editing process had me working towards a single GIF, but despite a considerable amount of masking of unchanging parts of numerous frames to reduce the file size, the GIF was still way too large for my liking.  In the end, it seemed like a candidate for Animated GIF Assignment 880: Multi-Frame GIF Story, and so I chopped it up with a bit of judicious re-ordering of a couple shots to capture and emphasize this little segment.  (4 Credit Units!)

The Multi-Frame GIF Story allows you to re-present appreciate aspects of a sequence by juxtaposing and repeating in a way that is not so possible with a solely linear presentation. Rather that following a flow in sequence, your eye and mind can jump around and appreciate contrasts in elements such as tempo and emotion.  I think it works better in the 8 frames above than the larger single GIF format (you can compare below).

Factors Influencing the File Size of a GIF

Back in the early days of the Internet, small image file sizes were paramount when everyone was on dial-up with super slow modems. Despite high bandwidth and high speed connections in this age, there is still a philosophy of economy that can lead one towards optimizing the file size.

The file size of a GIF is influenced by a number of factors:

  • Dimensions LxW of the GIF. Decreasing length and width by 1/2 decreases the pixels by to 1/4. (Think area.)
  • Colour depth of the GIF. GIFs are restricted to a maximum of 256 colours per frame,  but you can use less. Fewer colours means a smaller file.
  • Number of frames. More frames increase the file size.
  • Consistent content from frame to frame. If large areas do not change from one frame to the next, the GIF can economize. Limiting the animated portion of the GIF through techniques such as masking and transparency can significantly reduce the file size.
  • Time intervals between frames may also be a factor. (Or at least they used to be for Tumblr.)
  • Other factors such as interlacing and various colour reduction and dithering algorithms can all influence both the image quality (positively or negatively) and file size (again, positively or negatively).

Experimentation can result in finding the best compromise between file size and image quality. If the GIF dimensions get too small, it can be really difficult to appreciate the detail.

Here are some numbers for those of you who might be interested in seeing how some of these various factors can influence the size of a GIF.

• Initial GIF • 631×480 pixels, 256 colours 9.9 MB
• Reduced dimensions and colours • 600×456 pixels, 64 colours 5.9 MB
 • Reduced dimensions • 300×228 pixels, 256 colours 3.4 MB
• Panel 1 • 300×228 pixels, 256 colours  385 KB
• Panel 2  244 KB
• Panel 3  677 KB
• Panel 4  339 KB
• Panel 5  131 KB
• Panel 6  421 KB
• Panel 7  437 KB
• Panel 8  111 KB
"Aversion Therapy, 631x480 , 256 colours" 9.9 MB

“Aversion Therapy, 631×480 , 256 colours” 9.9 MB

"Aversion Therapy, 600x456, 64 colours"

“Aversion Therapy, 600×456, 64 colours” 5.9 MB

"Aversion Therapy 300x228, 256 colours" 3.4 MB

“Aversion Therapy 300×228, 256 colours” 3.4 MB

My #ISTE2015 Animated GIF Day

lonely higway gif

For many years I protested that I had no clear need to attend the annual International Society for Technology in Education (ISTE) Conference. From the social media streams and vendor receptions, it has the appearance of an ostentatious event focused on selling the latest and greatest gadgets, apps, and technology solutions to educators. Many of my colleagues and educator friends have protested, “but Ben, the connections?! How can you be missing out?” Truth be told, I’ve been intentional about the individuals that I’ve networked with; I’ve prioritized developing relationships with educators that I have the opportunity to collaborate with face-to-face at state-level or regional events. Many in the ISTE crowds would likely see my actions, and choice not to attend in previous years, as shortsighted, professional unsound, and otherwise snobbish of me.

All of that may be true. Regardless, I didn’t want to attend this major event until I had something to offer to the collective whole. I’ve been to conferences with national scope before, but they’ve all been smaller gatherings focused on specific topics (games, STEM, social activism, etc.) and I’ve played a role in either presenting, volunteering, or leading a workshop. This last year, I finally found a hands-on presentation model that I felt was unique enough to bring to the bigger ISTE table without using the words “best, app, tools, or epic” in the title. On a professional level, I’m prouder than I should be about that.

I’ll be writing about the presentation, and reflecting on how it was received by attendees, later in the week. For know, I wanted to have a bit of fun documenting my first ever day at the ISTE conference with a classic “Animated GIF Day” post! If you’re curious, check in on this post throughout the day for updates.

shaving gif

3:34 AM – I got up at what I like to call “stupid early” and took care of shaving, showering, and heading out for the airport. The last time I can remember getting up this early was for an ill fated attempt to score a Black Friday deal several years ago…looking back, the crummy free webcam I got from Best Buy really wasn’t worth the dark circles under my eyes by 10 am. I’m guessing ISTE will prove to be a much more worthwhile reason for getting up so early.

lonely higway gif

4:30 AM – I can’t remember the last time I drove down such a lonely stretch of road. Other than a few garbage trucks getting an early start on the day, the road was rather empty. I live 45 minutes away from the South Bend Airport, so I had a nice peaceful drive, caught up on a bit of This American Life listening, and fought the urge to stop at McDonald’s (fast food is not good food).

Prisoner 106 in a spin

I guess this is ds106 Assignments: Say It Like the Peanut Butter.

I am not going to describe my methods, as I’ve done that before.
Tools: Handbrake, MPEGStreamclip, Fireworks.

I’ve not really touched base with others in the village, I am now 4 episodes in, head in a spin:

the-prisoner-ep-4-spin

Wondering if I am going to be left hanging, or is there a chance of escape?the-prisoner-ep-4-swing

I am caught in a rut, need a new plan

Be Seeing You.

Making GIFs with IMGUR

giphy

I’m not really good enough at making GIFs to be a snob, but for the last four years I’ve pushed the process of making GIFs with a combination of a lightweight video editing tool like MPEG Streamclip to edit and export the video clip as stills and an image editing program like GIMP, Photoshop, etc. to actually make it. What’s more, this process assumes you’ve already ripped or downloaded the video from a DVD or YouTube. I’ve been so sold on this method I wrote a tutorial a number of years ago that somewhat codified the process for ds106 (at least with free and open tools like GIMP).  Wanna make a GIF? Embrace it…fear it!

Embrace-DS106

Amy Fanghella’s latest GIF implores you to embrace and fear the difficulty :)

Don’t get me wrong, I am still a fan of GIMP and Streamclip for GIFs, although noir106er Amy Fangella’s brilliant tutorial for making GIFs for #ds106 she published today illustrates there are many ways to skin the GIF cat. [As an aside, Amy’s post is as much a way of understanding her ds106 experience through the GIF, as it is a tutorial—and it’s reflections on how we learn through these forms that are the true gold of that course.] But when Michael Branson Smith came to UMW a couple of weeks ago to lay down some GIF magic (more on that Special Presentation in a blog post coming soon), he turned Zach Whalen and I on to IMGUR’s Video to GIF—a SPLOT-like feature of this image service. And let me tell you, it is very, very slick.

Screen Shot 2015-04-25 at 9.07.31 PMIt allows you to copy and paste the URL of a video hosted online (although the video has to be less than 1 GB), and provides a dead simple way to grab the scene and make a GIF using YouTube, Vimeo, your own uploaded video, etc. No downloading, no GIMP, no Photoshop, no nothing!

Screen Shot 2015-04-25 at 9.17.16 PM

As you can see from the screenshot above, you just drag the editor to the in and out points of that video, and it will automatically create an animated image of the selection. It obviously can’t do the finer GIF work that requires timing, masking, etc. But for quick and dirty, it’s quite impressive.

Screen Shot 2015-04-25 at 9.18.25 PM

What’s more, it gives you the GIF in a number of ways: HTML, Markdown, GIF link, GIF video, etc. While I think getting into a more robust image editor and understanding the art of the GIF can be valuable on many levels, it’s hard to argue with the fast, free, and out of control possibilities of IMGUR’s Video to GIF tool when you are trying to turn people on to the art of the GIF.

Say it like the peanut butter

This assignment was to “Make an animated gif from your favorite/least favorite movie capturing the essence of a key scene. Make sure the movement is minimal but essential. ”

My favourite movie ever is Cloudy With a Chance of Meatballs. Say what you will, but this movie is brilliant to me. I never read the original books, but the humour in this movie is perfectly pitched and actually hilarious. The voice cast is also killer and the animation & character design fit the story perfectly.

So what is a key scene in this movie? I thought a lot about what my favourite part were, but in the end decided that the real key scene has to be the one where Flint first sees food (hamburgers) raining from the sky.

This was my first try:

cloudy with a chance of burgers

Which is fine, but then I though about the directions of the assignment (particularly the minimal movement part) and cut out the beginning, creating this:

CWACOM2

Shame you can’t distinguish what exactly the burgers are without that closeup image afterward :

Ray Lewis’ Greatest Hit

This is the first submission of the Highlight Reel Assignment. For this assignment you were to simply create a GIF of your favorite sports moment worth being replayed over and over like a highlight reel.

I chose this hit by the Baltimore Ravens linebacker Ray Lewis. He was always known as a hard hitter so I knew he wouldn’t disappoint. He has always been one of my favorite players, because he has mastered his position and holds a position of respect in the locker room. He’s the one everyone goes to for motivation in tough moments. It also doesn’t hurt that he plays for my favorite team. Enjoy this earth shaking tackle!

Happy ThanksGIFing

cereal-eater

I’ve been known to GIF my day on special occasions. Alan Levine even created an honorary #ds106 assignment in my name for the practice. And in honor of the the upcoming Thanksgiving holiday here in the United States, I thought I’d take a day to share what I’m grateful for using the one of the media formats I’m most thankful for; the animated GIF! I’ll be revisiting this post through the day with updates, so stay tuned :)

cereal-eater

I’m thankful for my son, his unending appetite for curiosity, LEGOs, and breakfast cereal.

GIF the Portrait!

Dear Students, We love the individual blog posts that are being generated about the GIF the Portrait project! Please do not forget to E-MAIL to me your final GIFS from the exercise! Aside from the GIFs living on your blogs, … Continue reading

The Party Don’t Start ‘Till I Walk In

Darcy Arrives GIF

Created in Adobe Photoshop

These GIFs were made for the Say it Like Peanut Butter Assignment from the DS106 Assignments site.

The first version here was made using Adobe Photoshop. Here are the steps I took to make this GIF from the movie Pride and Prejudice:

1. I imported my video clip into Photoshop using the import video frames to layers option.

2. Next, I opened up the timeline at the bottom of the screen and selected New layers Visible in All Frames in the small Timeline drop down in the upper right corner of the timeline.

3. After that, I cropped all of my frames by clicking on the first frame, holding down Shift and scrolling to my last frame and clicking on it to select all of my frames, and then using the Crop Tool (5th tool on the side tool bar).

4. Then, I resized all of my frames by clicking on the first frame, holding down Shift and scrolling to my last frame and clicking on it to select all of my frames, and then resizing my image under the Image tab and selecting Image Size.

5. I then deleted a bunch of unnecessary frames by selecting several of the frames on the timeline and clicking the trash button at the bottom of the timeline in order to make my final GIF file size smaller.

6. Lastly, under the File tab I clicked on Save for Web… and selected the Optimized version as well as made sure it was saving as a GIF (drop-down under the Preset drop-down). I did not play around with any of the other settings.

twitterredditpinterestlinkedinmail