Animate (SOME) of the GIFs!

Not all GIFs are created equal. Some just need a little help.

I haven’t posted more than once in a day in a while, but I’m really excited about my little interactive images kick from earlier.

I got links to work on top of an animated GIFs. After cracking my knuckles, I decided to see if I could push myself a little more. Now, I want an image with some instruction text to play an animated GIF on the hover, not jump out to a link. This is all hobby for me, by the way. Lots of coding and refreshing going on to get it working.

The first thing I needed to do was lay out my HTML tree and CSS skeleton

Now, I needed some more information. Problem number one: get the first frame of an animated GIF to use as a static placeholder in the page. Not too hard. I hopped into GIMP, and then copied and exported my first frame as a jpg image to hang out on its own.

Now, the hard part was to get the text to show up in the right place. You can use absolute positioning, but then your div elements can get all wonky. On a static HTML page, it isn’t too hard to do because you control everything. On a blog, it can be messy because you’re fighting with your template’s CSS and if you don’t use the right attribute names or calls, you can end up with a poor layout. So, to make things easier, I just used GIMP to throw some instruction text on to my first frame placeholder.

Now came the tricky part. I had to make sure I layered my images correctly in the HTML and CSS. After adding the correct links and the correct frame sizes, I had the following code:

And the result is:

One thing I’m still trying to work out is how to get the animation to pause when you move the mouse. Because a GIF is just an image, I don’t think there is a way to have the loop paused without some serious coding in the background. I’ve already poked through StackOverflow a little, and can’t seem to find anything promising. With this method, the GIF will continue to loop in the background after the initial hover, so you’ll see a little jump.

Why? Animations can be annoying in the corner of your eye. Giving people control over whether or not they want to see some moving pictures is a courtesy. Plus, I wanted to see if I could do it. So there.

In ds106, Shark Jumps YOU

It was one of those days, and I couldn’t pass this one up.

The Headless ds106 is in full swing, and this week is Design Week. I love design work because it makes me think hard about how to communicate ideas both subtly and artfully. You can see some of my design work from the Twilight Zone theme this past summer.

Earlier today, Rochelle Lockridge posted an article in which someone (a colleague?) created an animated GIF for a presentation they were doing for work. This animation is great (and probably beyond my own GIMP chops) and it was a cool story to see them work through the struggle to learn GIMP to produce the image.

Later, Alan posted this tweet:

And BOOM. Sharks? Complicated animated GIFs of technical thingywhosits? I got to work.

I give you: “Make the shark jump you.”

In ds106, we don’t jump the shark. That bad boy jumps us.

Go make art.


This summer, I survived the ds106zone. There was a creative blitz that I’ve been wanting to carry through the fall. But life (literally) has come into my life, and I haven’t been able to carry the momentum.

Right now, the ds106 community is tracking through a self-inflicted “headless” course. No professor, no grades, no expectations. It’s pretty fun to watch the flow coming through Twitter, and I wanted to take a few minutes today to participate in the visual work they’re doing.

The assignment was a photoblitz: 15 minutes of photography around certain themes. I was able to do about 10 minutes here at my desk during lunch (not counting the writeup). In fact, I didn’t even stand up. It was all done from my chair on my phone, because that’s all I had with me. My five photos are below.

You can see other photoblitz submissions on Flickr.

Who is that guy?

My computer is getting pretty full of photos. I’ve been taking more, but it is also housing nearly every photo taken since my wedding in 2009. I know that is chump change to a lot of people, but it’s been bugging me.

I was going back through some of my kitchen remodel photos from earlier this spring and…well…I don’t know how I missed it, but some random guy is dancing in my back yard in one of them. I have no idea who it is. I also don’t know how the hell I missed it the first time through these photos.

Who the hell is that guy?

I haven’t finished going through my pictures, and I haven’t seen him since the tear out day back in May. But since seeing…whatever it is…I’m worried about walking past that window alone at night.

This assignment was tough because I needed to find a way to keep my image small (original is over 2400 x 3200, and over 2MB) and make sure Jim stayed outside. So, I converted my image to 64 bit and resized it to 650px tall (173KB final size, with all the layers). That dramatically changed the file size, which was awesome. To get Jim outside, I imported the modified GIF as frames (thanks Talky Tina) and then cropped, scaled, and positioned. I merged Jim with the background image.

To get the window frame, I used the lasso select to pull the glass part, being careful to cut around objects on the window sill to keep some depth perspective. Then, it was a matter of duplicating this cut window frame and merging it into each later of the project to sit on top of Jim.

I had tried to do this back during the summer #ds106zone sequence, but couldn’t figure it out or something. I don’t remember.

Don’t lose your head

Leading up to the headless ds106 planned for this fall, it’s an August GIF-a-thon. I managed to find some time tonight to get one finished and uploaded.

What you see below is a reconstruction of what really happened. We were able to get to the doctor in time to reduce the chance of major scarring. Today, you can barely even tell this occurred.

We reduced the scarring with quick action.

Don’t lose your head. It isn’t worth it.

The GIF is 11 frames long, which keeps its size pretty low. I also varied the length of each frame to give the illusion of the ball flying back at my face much faster than I threw it to Peter, because that’s what happened IRL. What a punk.

Roll it, baby

Two or three weeks ago, I was home alone, tasked with priming the new drywall in my kitchen. I decided to geek it up a little bit and film the entire process so I could come back and time lapse the work.

I tried using a couple different time lapse apps, but I didn’t really like the quality of the tests I did. So, I ended up filming on my iPad and then pulling the huge files into Camtasia to speed the clips up. Next time, I’ll probably spend more time researching time lapse apps so my files aren’t as big.

Here’s the video:

Would the REAL @IAmTalkyTina Please Stand Up?

My schedule has been picking up like crazy, and I’m afraid this may be my last ds106 post for the summer semester. Maybe I can get one or two more assignments in, but I don’t think it’s going to happen.

That being said, it’s time to clear the air.

I know Alan posted that he is the creator of @IAmTalkyTina, but I’m here to set the record straight.

As I was getting into ds106, Ben Rimes was telling me about all of the role playing and storytelling that happened within the narrative of the course. I loved that it spilled over into the online interactions, so I thought setting up a ds106 character right from the beginning based on the Twilight Zone would help me get right into the swing of things.

So, officially, I am the creator and running of @IAmTalkyTina. She isn’t going to disappear, although my work will…there are still some twists in the ds106zone Talky Tina story. Keep your eyes out. I’m still watching you…

Ben, I’m sorry if you’ve lost some sleep over me, but I sure had fun scaring the pants off you once or twice. I hope we can still be friends…

The Drive By

Short post this morning, but last night on my way home from work, I did a short drive-by reflection. I was thinking about connections and how those impact those around us. It’s in two segments, but edited into one file. The only major editing I did was to compress the files so the sound didn’t clip during playback. You can listen below.

[soundcloud url=”″ params=”” width=” 100%” height=”166″ iframe=”true” /]

How to: Record Google Hangout in High Quality

I’m working on a super-secret project right now (more to come this summer…bear with me) which will require me to record interviews via Google Hangout. Now, I know I’ve written before about how to screencast on a Chromebook using Google+, but the quality of those recordings, in particular the audio, can leave something to be desired. So, I went looking for an alternative.

I fell down the rabbit trail of apps that do this and that, but none of them really did what I needed. I knew I wanted to use Audacity to record and edit, but I couldn’t find an easy way to record both my microphone as well as the system audio for the people I’m speaking with.

Luckily, I’m currently going through ds106 with some radio geniuses who where able to help. I can’t go any further without giving ScottLo a MAJOR shout out for helping me work this out. Rather than type the entire process out, I’ve got a video showing how I set everything up to record the Google Hangout. Beneath that, you can see the tools (with links) and their settings written out.

The Video

Proof of concept mp3

The Setup – Links below take you to downloads if you don’t have the software yet.

System Audio


  • Input 1 – Soundflower (2ch)
  • Input 2 – Your microphone
  • Main output – Soundflower (64ch)
  • Aux output – Built in output/headphones (for monitoring)


  • Input – Soundflower (64ch)

Google Hangout – This works the same for Skype.

  • Input – microphone/built in mic
  • Output – Soundflower (2ch)

Again, if you need help setting this up, send me a tweet (@bennettscience) and I’m happy to help.

Twelve Pounds of Peanut Shells

I was able to squeak out another audio assignment today for the zone. While it isn’t Twilight Zone based, sometimes reading Craigslist can feel like its own alternate universe.

I chose to beat Craigslist because…well, because finding a ridiculous post was pretty fun. I made sure to stick local, so I humbly submit the following performance using material provided by my community:

[soundcloud url=”″ params=”” width=” 100%” height=”166″ iframe=”true” /]

This was pretty simple, as I stuck to GarageBand loops and samples. I recorded my voice right into the program and then added the radio voice effect to brighten the sound a little bit. It’s short, but it was fun.

If you don’t believe this post is real…I beg to differ.