WebSpaceInvader

Video Transition Tutorial in Flash

Mark — Mon, 19 Jul 2010 05:09:03 +0000

If you intend to use video as a transition between two content areas in Flash, then to save you bandwidth you really want to be able to play the video backwards as well as forwards. This way your transition can flow both ways, the alternative would be to reverse the video in a video editing app and insert two video’s in Flash. This tutorial for Web Designer magazine shows how to code the video to play backwards and how to avoid the annoying stutter that can ruin reverse video playback.

Click here to view the project. Click on either the telephone box or billboard to see the video transition.

Motion Graphic Showreel 2010

Mark — Wed, 30 Jun 2010 15:19:54 +0000

As I produce most of my Motion Graphic / Animation work for Sequence Post Production, Ben Foakes has put together most of my Motion Graphic work into a Showreel for 2010. Many thanks to Ben for putting this together.

Most of the work was created using Adobe After Effects and Maxon Cinema 4D.

2010 Animation / Motion Graphics Reel from Mark Shufflebottom on Vimeo.

Myth Chasers Title

Mark — Mon, 28 Jun 2010 13:14:14 +0000

This is an early draft of a title graphic sequence. The light and 3D test have been produced using Cinema 4D, while the overall production was put together using After Effects. The sequence is being produced as part of a pitching process for the production to ITV so will go through some much needed polish for the final version. This draft version introduces vital themes of the series, with a crack in reality and a recurring concept of the eye icon.

Myth Chasers Title Draft#1 from Mark Shufflebottom on Vimeo.

Adobe Webinar

Mark — Tue, 15 Jun 2010 21:11:58 +0000

Following my recent visit to NAB 2010 I was asked to present the same presentation to the education community. I was at NAB to speak about my practice in title sequences using Adobe After Effects and how this is used as a tutorial on the Mixtape Masters degree programme at Bournemouth University.

View the recording of the Adobe Webinar here.

Speaking for Adobe at NAB

Mark — Sat, 15 May 2010 20:24:57 +0000

As part of my role as an Adobe Education Leader, I was invited by Adobe to speak at NAB (National Association of Broadcasters) 2010 in Las Vegas. I was speaking on my own practice within Adobe After Effects, showing my work done in title sequences for the BBC and how I use this as an excercise for training the BBC as part of the mix tape masters degree at Bournemouth University.

Also available at Adobe TV.

Cu3er Tutorial

Mark — Sun, 18 Apr 2010 08:07:53 +0000

Cu3er is a Flashed based image rotater that does not require Flash to edit, it just requires any application that can open and edit XML documents to point to the images and then it will do all the rest. When the images change, the cube rotates using one of many transition effects that can be customized and changed. You can set the cube to slice into pieces and then rotate one at a time and even add shading to the effects. This creates some really nice eye candy that is sure to capture your visitors and bring attention to your site.

The tutorial uses Adobe Dreamweaver as the XML editor, but you can use any plain text editor and Adobe Photoshop to create the slides.

This tutorial was written for Web Designer Magazine.

Click here to get the tutorial files.

Tweener tutorial

Mark — Thu, 04 Mar 2010 18:58:09 +0000

This tutorial was commissioned by Web Designer magazine to show off the wonders of the amazing Tweener AS3.0 library for Adobe Flash. This library allows you to tween easily between any two values for any property. This is very handy when you want to fade content in and out, or slide in and out to the stage. There is a really handy function that can be called either when the tweener is called or when it completes so if you need something else to happen at the end of a tween then it can easily be called.

Click here to view the tutorial.

Click here to get the tutorial files.

Sequence Post Production Redesign

Mark — Thu, 04 Feb 2010 19:10:54 +0000

As video has become so prevalent on the web, creating a site for a video post-production company had to rely on a creative solution. After much to-ing and fro-ing with the client we agreed on filling the site with video that stretches to fit any size monitor. This would make the video the complete focus of the site, pushing the creativity of Sequence Post-Production in front of potential clients, rather than them having to rely on explaining through text.

“We approached Mark to re-design and build our Sequence Post website from the ground up. We work in the creative sector so our clients expect the highest standards and are also very visually aware. The concept Mark came up with centred around showing off our visual effects and editing work as soon as a user hits the homepage. He designed a fantastic, re-scaleable flash player which shows off our video work as the main backdrop for the site. The general design and layout is simple, clean and easy to use. We worked collaboratively every step of the way on editorial and we couldn’t have been happier with the service. We have already had numerous clients and site visitors comment on the quality.” – Ben Foakes, Creative Director, Sequence Post Production

View Site Here

The site was built using Flash CS4 and Adobe Media Encoder.

Adding animation to still images

Mark — Thu, 14 Jan 2010 09:38:29 +0000

When designing websites in Flash that use still images, we can make them so much better than on a regular HTML page by using the power of Flash to animate the images on the site. This tutorial for Web Designer magazine, explores the possibilities using fade in techniques, blurring the background and just generally assembling the image in a more stylish way.

Click here to view the finished image.

Click here to get the tutorial files.

Dark Places Interface Design

Mark — Sat, 28 Nov 2009 19:34:09 +0000

This web interface was design for the Office of Experiments and their Overt Research Project. The site was designed specifically for the Opera web browser as the target destination was for an installation. Opera was chosen because of it’s kiosk mode and was installed on a touch screen in a specially created booth by artist Neal White.

The site was running from the Drupal Content Management System, so the interface had to be created so that it could be easily dropped into place. Click the image below to view larger.