Creating Audiovisual Resources for World Wide Web

Project Brief

For this project I must develop a digital video clip for an interactive media production. The client will be the School of Computing, Math’s and Digital Technology at MMU, who wants me to design and create resources for video with audio, for a looping advert between 30 to 60 seconds long.


  • The web videos dimensions should be 512 x 288 pixels.
  • The encoding video files should be H.264/AAC.
  • Suitable for insertion into websites or ads that will promote the product and explain the advantages and reasons of enrolling to study Computing at MMU.
  • Web poster “Why enrol at MMU”.

Ideas, Planning and Pre-production

Firstly it was important for me to decide what overall style I want my video to be. Should it be something calm and informative or fast and dramatic? Because of my interest in animation and motion graphics using Flash and After Effects I knew it would be a great idea to incorporate these elements into my video, which would also give me great experience using After Effects as I am new to the software, through this I can create an eye-catching piece that is colourful and full of life.

I knew the target audience would be people who are considering enrolling at MMU, with most of these people being young adults, so I decided that making a fast and dramatic piece and keep it informational as well as entertaining would appeal to many of these people. A large challenge of using eye-catching motion graphics in my video is trying to balance out the amount of film and animation used, and not using too much of one with not enough of the other.

Now that I knew what style I wanted my video to be it was time to decide on the music. Deciding on the music was probably one of the most important choices in my video as I wanted most, if not all, movements and animations to fit with the music, really bringing everything to life. It took me little over a week to try and find a good song which I was legally able to use that would be fast and dramatic, allowing me to animate many movements on screen to it. I bounced around the genres of Drum and Bass, Dubstep and Drumstep because of their fast paced and dramatic melodies. I eventually decided on WAV35HAPERS – Euphoric which is Royalty Free and I was allowed to edit it down to 60 seconds long –


During the production of the video I mixed around with various styles and animation techniques using Flash and After Effects. Many parts of the video were changed from their original form being either slightly altered or completely redone to fit into the speed and theme of the overall video and to just be much more appealing and fluid.

Some examples of the design and alterations of my project are as shown.

OLD – Made with Flash and After Effects:

NEW – Made with just After Effects:

OLD – Flash & After Effects

NEW -Flash & After Effects
(The audio waves and camera movements(shakes) are synced to the music in the final video, so they move in time to the beat)

Digital Video Delivery

The final rendered video is fairly small in size having being encoded in H.264 CODEC and contained as an MP4, to reduce the size of the video and to allow the video file to be compatible with various playback and delivery platforms, giving size of 39.5 MB  this should allow a fast stream to the user.

My video has a maximum bitrate of 8 Mbps allowing the video to have no visible quality loss but giving it a much faster rate at which the data is transferred.

The video’s audio encoding is AAC with the audio bitrate at 128 kbps.

My video will be uploaded on Youtube as they offer a good bandwidth for digital video steaming. However I will also upload a version of my video to also be hosted on a shared host, which may offer less of a bandwidth speed.  I will upload a 512 x 288 version for this project and a full 1080p version for personal purposes.


With the example of my video, there are three main parts to producing the final version. These are:

  • Footage recording
  • Editing and creating clips from the footage
  • Animating motion graphic animation for video and transitions

In the real world a team of various people may work on each task, hiring professionals in video recording, motion graphics and effects, and video editing. For this project I have carried out all three tasks, with the help of my classmate Parham Majdibadi for footage recording.

Due to each task requiring a certain level of professionalism the cost will be split into certain sections of the project.  For example, the motion graphic animation isn’t a great deal of professional quality but may cost around £150 to £450 depending of how long it would take to create. It could take a few hours to a week or so depending on the quality of the animation, however the animation in my video would now only take me a few hours to make due to my advancement in After Effects.


Storyboarding is an important process in video creation, recording, editing and animation. For my piece however I did not plan out the entire video, as I knew most of what I would be creating would be experimental as it was also a means to improve of my motion graphic and animation design.  For an experimental piece I am pleased with the overall flow of the video, but admittedly if I were to plan out every scene from beginning to end It could have looked much better, but as I said, many scenes and parts get changed and mixed and parts of my video I deleted entirely (even if it took me hours to animate) as it just didn’t work.


CCI16012014_00000 CCI16012014_00001AEfx

In processes designing the effects with After Effects – many attributes were tweaked and changed to achieve the desired result.

In conclusion I am pleased with my final video as an experimental ‘starter’ to motion graphics and video editing. Through this project I have gained many skills in the use of After Effects, Premiere and Audition, and it has brought my passion in motion graphics to new heights.

Having now finished the project, if I could change something about my video I would go back and plan more. Having boosted my abilities though this and other personal projects since the start of this one I believe I can create a video much better than this, with the use of more stoaryboarding and allowing my new skills to be of greater use.  I would also most probably not use Flash in the future for a video like this and create the animations entirely in After Effects.

Final Video

My final video is exactly 60 seconds in length, the maximum allowed video length for this project.

Sized at 512 x 288 / 240p for project.

Sized at 1920 x 1080 / 1080p HD for personal use.

Final Poster

For my poster I decided to go for a minimalist approach. This allows the poster to keep a clear layout, highlighting the key main points listed and allowing the viewer to focus on the important aspects while also taking in an eye-catching light and a minimal design.

multimedia poster 5

That layout of any poster or advert is very important as viewers tends to take a specific approach to reading any poster. I knew that the way the viewer’s brain subliminally reads (in the Western world) is from Left – Right  Top – Bottom as shown in this diagram:

This is why I have listed the main title at the top, the key points centred and the MMU logo and web address at the bottom right as it will be the last thing they read.

I have used various technique in Photoshop to achieve the desired effect. Using a ‘Hard Light’ filter on the photograph to blend into the background and using an ‘overlay’ filter of a multicoloured stripy image I created when designing a part of my video, which I tweaked slightly and extracted the image of – all with a slightly lowered opacity so as to not stand out too much from the rest of the design.  To create the colours on the title I overlayed the same multicolour image over the words then used the ‘magic wand’ tool to select everything around the text to delete so that the colours only show on top of the text. For the text in the centre of the photograph I have used a ‘linear burn’ over a low opacity white box and for the particles in the background I simulated the effect in After Effects and extracted it as an image, then lowered the opacity slightly.


One thought on “Creating Audiovisual Resources for World Wide Web

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s