Tutorial – Page 3 – 106 drop in

A Diverting Week Two

The scheduleHeadless ds106 Week 2: Getting Through Bootcamp / Personal Cyber Infrastructure steps things up a wee bit.

I’ve spent a fair bit of time thinking about No Digital Facelifts: Thinking the Unthinkable About Open Educational Experiences and watched the video a couple of times (luckly my car was in the garage for an MOT and I was on the train on Thursday). I had planned, in notes and my head a fairly detailed response. As I started to write it up I searched this blog to see my previous response, it turned out I’d not really had any new ideas since DS106 Assignment 2 A personal digital space. I would recommend anyone interested in educational technology to watch this video. It is a wonderful talk filled with rhythm and humour.

I was thinking I’d manages a few daily creates this week, but looking back not as many as I thought:
I did manage a Keychain video. Cris Crissman left a nice comment about liking the line: “I don’t keep my stories locked up in my keychain.” which is what I started with when thinking the video out. Could have been better if I’d tried more than one shot.

Here are my other tdcs on flickr:

Please specify a Flickr ID for this gallery

My other daily creates ended up diverting me a little. I had commented on Stefanie’s wonderful Animated Skull Chain which provided the first major diversion, blender.org – Home of the Blender 3D I lost a good few hours on that this week, luckily the first tutorial (145 pages of pdf!) gave me the submarine daily create this week, and eventually I finished the project:

I lost most of Saturday morning on tutorial 2, getting stuck quite near the beginning. I think I’ll play with blender a bit more but might wait until I’ve a bit more time.

I also left the tracks with headless ds106 portrait ending up with a gif and now a tutorial on how I did it:

One thing I’ve been aware of this week is how time poor I seem to be. I am making sure any daily creates I do take no longer than 10 or 15 minutes, I would have liked to do Create an exciting movie trailer for your ds106 web site. Use The Voice. but didn’t even have time to think of a good idea.

My final activity was the animated gif I posted earlier today. I might as well add a few gifs I made along the way.

replicant-eye

One Way to Photo it Like Peanut Butter

A quick screen cast showing how to make an animated gif for the photo it like peanut butter assignment:

Rather than making animated GIFs from movie scenes, for this assignment, generate one a real world object/place by using your own series of photographs as the source material. Bonus points for minmal amounts of movement, the subtle stuff. See a bunch of examples at http://cogdogblog.com/2012/02/10/photo-gif-peanut-butter/

from: ds106 Assignments: Photo It Like Peanut Butter

Same procedure for the ds106 Assignments: Say It Like the Peanut Butter

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.

So this is a double tutorial;-)

I like Fireworks for giffing as it clearly separates layers and frames in different palettes. I’ve not used multilayer frames in this video, but it is handy for other gifs.

The video does not really show how to opne the different palettes, I didn’t plan it that well. I added text to explain a couple. Basically I used the Frames.
, layerers and optomise palettes. All open from the Windows menu.

Unfortunately Adobe is discontinuing Fireworks. I am still using the one that comes with CS3. It works fine on mac 10.8.

Although I’ve done a fair number of these to assignments I have no idea why peanut butter is involved.

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.