AnimatedGIFAssignments920

Tina Sounds

Yesterday my friend Tina told me she liked the way I gave Jim some music to dance to. I though I’d show her, and anyone else how to play a sound when a gif (or anything else) is clicked.

I made a quick gif of a scene from Tina’s work that shows what a committed and brave actor she is, I believe she does all her own stunts.
tina_stairs

click the image to hear the soundtrack.

Video grabbed from ▶ Talky Tina — Living Doll — Two Minute Twilight Zone Project — Season 5, Episode 6 – YouTube just a screen capture using ScreenFlow.
A few frames extracted with MPEG Steamclip, pullined into fireworks and exported as a gif.

I then searched Freesound for a sound of someone falling down the stairs that was cc licensed: Freesound.org – “Falling Down Wooden Stairs.wav” by Benboncan.
In Safari I viewed the source of the page, searched for .mp3 to find the link to the low quality preview:
www.freesound.org/data/previews/80/80916_634166-lq.mp3 (I took the http:// off here as wordpress embeds if I do not)

I knew that Freeview provides previews in mp3 and ogg so that we can play then with html5 and do not need any plugins (Firefox on mac needs ogg other browsers handle the mp3, this is a moving target). the ogg files have the same url but with the .ogg extension.

I started this blog post, switching to the Text (html) view in the editor and put in an audio tag:


	<audio id="tinastairs" preload loop>
	  <source src="http://www.freesound.org/data/previews/80/80916_634166-lq.ogg" type="audio/ogg">
	  <source src="http://www.freesound.org/data/previews/80/80916_634166-lq.mp3" type="audio/mpeg">
	  Your browser does not support the audio tag.
	</audio>

If you are going to do this more than once on a page you need to give the audio a unique id here I used tinastairs.

You could copy the block of code above, replacing the id and the urls.
Update: The way wp adds paragraphs, it is best to take out all the line breaks when you use this.

This addes the audio to the post, it is preloaded, and will loop when played, but it does not show on the page (I’ve left out the controls parameter).

I then added the gif in the normal way. In the text view this gives me:
<img src="http://johnjohnston.info/106/wp-content/uploads/2013/08/tina_stairs.gif" alt="tina_stairs" width="420" height="260" class="aligncenter size-full wp-image-854" />
I added a snippet of JavaScript to play the sound when the gif is clicked:
onclick="a=document.getElementById('tinastairs');if(a.paused){a.play()}else{a.pause();}"
As a parameter of the image tag like this:
<img onclick="a=document.getElementById('tinastairs');if(a.paused){a.play()}else{a.pause();}" src="http://johnjohnston.info/106/wp-content/uploads/2013/08/tina_stairs.gif" alt="tina_stairs" width="420" height="260" class="aligncenter size-full wp-image-854" />
You can see I use the id of the audio tag, again you could copy this code and use a different ID.

Hopefully Tina will love this?

tinaeyes

I used the same process here, with different IDs but exported mp3 and ogg from Audacity, after recoding the sound from youtube.

Trapped in the Zone

trapped in the odd zone

A quick gif after yesterday’s daily create. I am looking at you #DS106 | Flickr – Photo Sharing!.

I think this one hits Talky Tina’s ds106 Assignments: From the Twilight Zone, and Beyond … assignments.

I also think a much better job could have been done with the levels if I know a bit more about them. The idea is better that the execution.

Screen capture in Quicktime, my own hand knitted gif extraction. Edited in Fireworks to flip and add the background images.

8 Gifs in search of a title

8gifs-5characters_2

So I am trying to get an idea of the twilight zone before the next round of DS106 starts. It looks like you can watch any of the first 3 seasons on The Twilight Zone Video CBS.com if you live in the USA. I may have to investigate some sort of fake us ip device to see these.

In the meantime I’ve been wandering round youtube. Watching the odd fragment and episode. I’ve watch a couple but Five Characters in Search of an Exit was the first to make me pay attention. According to Wikipedia the title at least is based on Six Characters in Search of an Author and No Exit it has been a while since I saw 6 Characters or read No Exit, but the links, especially to No Exit are clear.

I am beginning to get into the zone, but I found the exposition from Rod Serling a bit much, great voice but I think this episode would be better without the explanation.

On second watching I grabbed gifs as I went through. There is plenty of banging, ringing and the idea of repetition in the tale, I hope some of this comes over in the combi gif above.

The gifs are all short, 7 frames. I combined them by importing them into fireworks.

I am pretty sure there are a few good pun titles for this gif just beyond my grasp… can’t get out of the zone, sort of thing.

After knitting together the gif above I though that two of the frames would work, here is the major begging Rod not to talk so much.

please_rod

I am wondering about redoing this one with Jim Groom in the Rod Serling position.

I guess this is a Multi-Frame GIF Story as well as a From the Twilight Zone, and Beyond … Assignment.

I though the gif at the top looked better on a black background, so wrapped it in a paragraph:
<p style="background:#000;padding:45px">

Once you are on the DS106 Train

A new chapter of ds106 is starting.

ds106zone is an idea Dr. Garcia had about framing the Summer session around a Twilight Zone inspired thematic

from: bavatuesdays | a “b” blog

I’ve not idea about the twilight zone, well off my culture radar, so I am speed reading wikipedia and it looks like I’ll need to take a youtube trip. But DS106 is irresistible! A quick check to see if my blog is still in the mix: