Interactive Video

By rob

A while ago Kokokaka lunched a great campaign for Wrangler. 
This consisted of a model you interacted with using the mouse, by clicking and dragging either left or right the sequence would animate in a liner fashion. An example of this was dragging to the right showed the model's shirt being pulled off in slow motion.

The Wrangler website has since been updated and a new system put in place but still using the core interaction with the user.
 http://www.wrangler-europe.com/blue-bell/collection-ss11/

An incredible piece of work by Less Rain recently on the Range Rover Evoque project Being Henry was lunched not long ago. 
http://www.helloevoque.com/beinghenry

This uses the power of user interaction to choose a journey for Henry, by dragging the mouse either left or right this showed an animated sequence of your choice. This was seamlessly integrated with motion video creating an incredibly user experience that you were heavily involved in. Really recommend you guys check it out!

For my R&D sesssions I've been tinkering with this interaction to video, I've looked into possible html5 and jquery solutions but my knowledge is lacking. More time is needed to nail this version so I hopped into flash and created a demo for myself within 10 minuets, still find uses for flash that completely trump html5 & jquery!

Anyway hopefully I'll nail this and have something to show in the near future.

HTML5 video storyboard, the makings...

By rob

Last week I managed to get multiple pop ups with video opening and closing using js timers.
After being happy with the tech progress I though I best start on the creative idea of what I'm going to show you interweb peeps as a demo...

As above is a quick snap of my brainstorm I hope to continue later and shoot very soon.

Stay tuned for the final demo and markup I used.

The tech behind Rome

By rob

Rome Tech

Rome 3 dreams of black behind the technology, a cheeky little look into how Chris Milk and the team put together the Rome project.

Using WebGL programming, 3D models and a touch of processing.
I find this stuff mind blowing! My aim's to break it down and get a better understanding of how to put together my own little web video project.

Check the link here to dive into the tech!
http://www.ro.me/tech/

HTML5 video, WebGL and Canvas

By rob

My current development has hit a bit of a stumbling block, I've been looking into how to create window popups in sync with the video player.

I've managed to sync the popup windows to the video timeline but some browsers aren't playing ball…
Argggggh!!!!! I can't get the window to popup in an external window using a timed script behaviour, this comes under the act of popup blocker! Need to find a work around but having no luck, might just leave a message to kindly ask 'Please switch off your shitty pop up blocker k thx bye…'

I'll carry on with some experiments, but for now check out these two awesome links:

Rome & 3 dreams of black

The Wilderness Downtown

HTML 5 Video on the web

By rob

Flash player is currently widely used to embed video across websites, I wanted to look at a different method of serving video to the masses.

HTML5 Video!

A new element introduced within the HTML5 spec for the purpose of playing videos or movies. This will work across the web within new browsers and Apple’s mobile devices.

I first needed to require a bit of video for my test purpose, grabbing my iPhone I quickly recorded away and transferred the video to edit.

The file I was holding was a standard apple format .mov... this wasn’t really helpful for web streaming unless I wanted users to download quicktime.

Firstly I needed to convert my .mov to a few different types to work across across all browsers. For Safari and Apple devices I needed an mp4/m4v file, using HandBrake for mac I selected my source file “filename.mov” then selecting the iPhone 4 preset I modified the following for better web results:

http://handbrake.fr/

Format: MP4 file
Web optimized: ticked
Framerate: Same as source
Average bitrate: 600
Tick 2-pass encoding and Turbo first pass
Keep aspect ratio (under Picture Settings)

Once these are set select Start and you’ll soon have your .m4v file.

For the other two formats to support webkit and older browsers I required .webm and .ogv.

http://www.mirovideoconverter.com/

Using Miro Video Converter I was quickly able to drag drop and convert to these formats.
I used the following under the drop down menu:
Theora (.ogv)
WebM (.webm)

I now had my three video files to serve up to the web, the next part is writing the HTML5 to display my videos.

Within the video controls block I’ve organised my videos so that the .m4v file is first. This is so that it is detected on Apple’s devices, Apple’s mobile browsers only see the first video source.

I then saved the file and started the testing process, firing up every browser on my mac to behold a glorious video of Simon swearing at me...

Firefox 4

Apple iPad 2

Demo to come soon...

iPhone keyboard trick

By rob

iphone keypad pro

Reading mashable last night and being a new iPhone 4 owner I found one of their latest posts most useful!

Using your iPhone keypad while typing tap and hold the '.?123' button, then slide your finger to the required key and let go! Instant update without having to tap to switch screens!

I found this incredibly useful with punctuation, tapping away for my message then sliding my finger for a comma, job done!

* So much so this has all been typed from my iphone :)

mashable.com

My ordeal with the iPad, iBooks and video embedding

By rob

Where to begin??

I recently received the company ipad to stack full of goodies and other little treats for presentations and events.

I have to say… wow! This little thing is a great device for showcasing and presenting work on. The screens incredibly crisp and picks up on every detail within the design.

Any way I'm not writing a ipad review here…

I'm writing to talk about my nightmare with integrating video into a publication to use within ibooks.

I'll firstly explain that I'm a creative designer with a long history of building front end development for websites too and that I'm pretty new to this ipad business!

Coming from the creative side of things I first fired up indesign cs4 and went to work with a case study, looked great, exported as a pdf and dropped it on the ipad using itunes. Took no time at all to transfer, quick swipe of my finger and a tap to load up the ibooks app. There and behold my pdf in all its glory! Tapped to open the pdf up to view the contents, simple easy to use dragging left and right to switch pages and using the multitouch pinching to zoom in and out.

Using indesign was a simple and effective way of getting PDF's onto the ipad in exactly the way you exported them as. The only gripe are the covers, my PDF was all landscape therefore creating a very small landscape book cover. The only way round this was to rotate the cover of the book or redesign the cover as portrait.

So how do I add video into this PDF?
Simple answer is you cant. (Adobe, Apple, sort your life out and make it happen!)

Hours and hours of hunting high and low on the web and reading various forums and blogs I came up with nothing, I tried absolutely everything. The only viewer that allows you to view video within PDF's is adobe's own acrobat reader which isn't available on the ipad. The apple ipad uses it's own rendering system therefore not allowing videos to be displayed. Within adobes acrobat reader the video is prompted with a potential security risk dialog which you have to trust to view. This might be another factor in apple leaving video out of PDF's, plus that acrobat uses quicktime.mov and flash.flv files to render the video is another issue that we all know about (flash support).

So how did I get video into the ibooks app?
Using html5 of course!!

This stage took me a while to get to, hours of exporting files and building files from indesign to realise that indesign doesn't attach the video on export no matter what you try.

So closing indesign and opening up TextEdit was the next step, yes I was going to create an ebook from scratch.

Epub files are nothing but a compressed wrapper holding the ebook together, within this epub file you'll find all the chapters, images, css and contents. Change the .epub filetype to .zip then extract the zip file to view all the contents.

I created my chapter using dreamweaver with html5 video keeping the code incredibly simple. Updated the opf and ncx with the chapters details. Converted the folder back to an epub by compressing and changing the filetype again. Dragged and dropped this over to the ipad using itunes, quick swipe of the finger and tap brought up the ibooks app. There it is!! The epub book I created, tapped it to view the contents… fail… either I got prompted with an unknown error or that was there was only text no video?

Why's this? It's all correct, or isn't it? Going over all my code again, trying multiple versions till everything was streamlined and perfect but still no video or unknown errors.

It turned out to be the smallest, most overlooked thing I could of possibly imagined. The Mac compression of the folder back to a zip then epub file, the mac threw in all sorts of code and files like '.DS_Store' which the epub just went mental over.

I came across this little gem online ePub Zip 1.0.2.app.zip [mobileread] dragging and dropping my folder onto this applescript removed the dirt from the epub file allowing it to run on the ipad.

Another transfer to the ipad, swipe, tap, loading…

I couldn't believe it, finally working video within the epub ibooks application. It looked amazing, the video looked stunning using full screen.

I hope this shed some light on creating publications for ibooks on the ipad, I'll go into detail on my next post about all the files needed to hand create your own epub publication.

Robski

Street Fighter

By rob

This weekend is the street fighter tournament! Grab your favourite controllers, your favourite sticks and get button bashing!!
I'll be taking my camera to document the days events, who know's I might even compete! I'll definately be giving the casual gamers a run for their money!

Click here to read more about it!