portfolio - aaweb · 2.2 pitch and storyboard ... 315cr digital media technology 2 portfolio figure...

portfolio315CR Digital Media Technology 2Andy Abgottspon

April 2010 – Coventry University

315CR Digital Media Technology 2 Portfolio

Contents

1 Ident 21.1 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Advert 42.1 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Pitch and storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.4 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.5 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Alternative Animation using Processing 8

4 3D Compositing 104.1 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.2 Pitch and storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.3 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.4 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.5 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5 Poster Design 135.1 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.2 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.3 Choice of imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.4 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

6 Mobile Application Development 166.1 Marketing and statistics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Andy Abgottspon 1/20


1 Ident

1.1 Purpose

The task was to create a short ident clip for Creative Computing @ Coventry University.This could then be used to identify clips from CU on platforms like iTunes U or YouTube.

1.2 Techniques

The editing has been subdivided into several compositing steps:

1. The 3D animation itself has been created entirely in Cinema 4D. The stairs have beenre-modelled in 3D and a solver object containing a gravity object has been used tocreate a realistic behaviour. Following a tutorial [4], the background image could beimported to Cinema 4D. Also, the light source has been placed to cast shadows as if itwere the sun.

2. After rendering the 3D animation, the ball’s shadow is just on top of the backgroundimage (as shown in Figure 1). To solve this issue, another step in Adobe After Effectsis needed. A mask has been used to cut out the ball and copy it onto the backgroundlayer. This way, the ball is on top of the original video and the shadow get cast correctly.

3. The explosions in the beginning and the end, as well as the "smoke" following the ballhave been created using the program Particle Illusion.

4. The final compositing has been realised using Final Cut Pro.

1.3 Choice of sound and imagery

The concept behind this ident is to combine something real with a 3D animated content. Thescenario takes place in front of Coventry’s cathedral. A ball falls from the sky, leaps downthe stairs and becomes a part of the Creative Computing logo. Since Coventry University’slogo is a Phoenix, the fire ball explodes and the logo with Phoenix appears "from the ashes".

This particular background has been chosen because the cathedral is located right in theheart of the campus and for a lot of people it’s simply the landmark of Coventry. The storywith Phoenix is unique to Coventry and therefore particularly memorable.



Figure 1: Overlaying shadow after the first compositing step in Cinema 4D

1.4 Reflection

From a production standpoint, the use of multiple programs allows more freedom and theeditor is able to use specialised tools for each task. On the other hand it is a very time-consuming procedure requiring good planning and an optimised workflow.



2 Advert

2.1 Purpose

The goal of this task was the creation of a television advertisement. The team decided tomake an ad for Apple Inc., trying to underline the their strengths by showing rather badexamples from their competitors. Following Donald Gunn’s 12 Types of Advert and PeterEvery’s lecture notes [2] the ad would be considered a comparison, although it containselements of analogy and exaggerated graphics as well.

2.2 Pitch and storyboard

The pitch is Think different, suggesting to lay down the conventional thinking and start tolook at things with new eyes. The team put their ideas together and developed a storyboard(see Figures 2 and 3).

2.3 Techniques

1. The footage from the Canon XL2 has been transferred to the computer using SonyVegas.

2. The paper clip has been edited using Adobe Photoshop.

3. The 3D animation of the house is animated with Cinema 4D. Tutorials for the grass[7] and the roof tiles [1] were very helpful. Figure 4 shows the final result.

4. All compositing has been realised using Final Cut Pro.



Figure 2: Storyboard for Apple ad (part 1/2), drawing by Krystl Gill



Figure 3: Storyboard for Apple ad (part 2/2), drawing by Krystl Gill



Figure 4: Animation of the house including raising grass and tiles modelled in Cinema 4D


Apple is known to be very innovative and their products are widely beloved because of theirsimplicity and beauty in design. The scenes in the ad are chosen to show the opposite side,like Microsoft’s helping paper clip which by most people is considered rather annoying thanhelpful. Another example is the slogan Windows – Life without walls. The question is just:If there are no walls, what do you need windows for? It is not really well thought through.

The calm, idyllic sound (Adama Falls from the Album Battlestar Galactica: Season Three)and images in the intro sequence have been chosen to build up tension. The viewer mightwonder what this ad is all about and get excited. He might get confused at first, but thenrealise that the examples shown can not possibly be meant seriously. After all that, the idyllstops and the user finds himself back in reality with a blue screen.

Thanks to my friend Patrick Venetz (www.patrickvenetz.com) for his amazing work with thevoiceover.

2.5 Reflection

One of the difficulties was to transfer the footage from the camera to the computer. A lotof footage had to be handled and Quicktime with the H.264 codec turned out to be the bestcompression without losses in quality. In addition, the camera handling is not trivial andespecially the zoom has to be used with care.



3 Alternative Animation using Processing

The program takes the photographs from the data folder and creates a 3D transition effect.Pixels raise from the ground and their brightness determines how fast they grow. Using themouse (x and y axis), the user can interact and change the angle of the camera. In addition,a nice calm tune called Naval by Yann Tiersen is playing in the background.

With the pixel-by-pixel image manipulation being very CPU-intensive, the application canperform very slowly depending on the computer it is run on. To solve that, you can eitherdecrease the resolution and/or increase the variable cellsize in the script (default setting: 5).

Figure 5: Slideshow in Processing



Figure 6: Slideshow in Processing



4 3D Compositing

4.1 Purpose

For this key assignment, a one minute composited video with computer generated contenthad to be created. The idea was to create a video that advertises my iPhone game Roll it!.

4.2 Pitch and storyboard

The pitch is referring to the name Roll it! of this Yahtzee-like dice game and the fact that itis available worldwide via the Apple AppStore. The pitch therefore was: Roll it all over theplace. Now available on the AppStore. Worldwide.

From this pitch, the idea was further developed and the dice in the game actually shouldbecome real. The storyboard was basically very simple. It begins at a table where a personshakes his phone and the dice in the game pop out. One travels around the world before itfinally ends up back on the table. For the "world scenes", famous cities like New York andLondon have been chosen. The dice are shown on the table just as if he had thrown real dice.Then they disappear and the player is wondering what just happened.

4.3 Techniques

The camera has been kindly provided by former employer Radio Rottu Oberwallis whoseThomas Burgener also helped me with the shooting.

1. The footage from the Sony HVR-V1E has been transferred in HDV 1080i50 using FinalCut Pro. This format has also been used as the Sequence Settings for the final cut (seeFigure 7).

2. The background images for the "world scenes" have been edited (resizing, colour cor-rection) using Adobe Photoshop.

3. In the final scene, the dice lie on the table and the player covers them with his hand.The masking for this was done using Motion (see Figure 8).

4. All 3D scenes were animated with Cinema 4D. Using the "background" object, theoriginal footage has been placed in the animation space and the camera movementmatched manually. To render, the same settings as the original footage have been used(see Figure 9). This saved a lot of render times later editing.



5. Compositing and exporting (including de-interlacing) have been realised using FinalCut Pro.

Figure 7: Project in Final Cut Pro showing the different audio and video tracks, as well asthe details of the video footage.

Figure 8: Hand masking in Apple Motion. With the Shape Masking Tool, the hand contourhas been drawn and using the recording tool key frames get created wherever needed. Theanimation between is automatically created.



Figure 9: Render settings in Cinema 4D


For the sound, there were different options ranging from The Prodigy – Invaders Must Dieup to a song Apple already used in one of their iPod touch commercials Around the Bend.Also two songs from Ronald Jenkees were discussed. A lot of experimenting has been doneand finally, The Tempest by Pendulum has been chosen to fit best. It combines rock withelectronic sounds and gives the video a slightly dramatic and epic touch. Furthermore, afair amount of audio editing was needed in order to find the best segment in the sound. Inthe end, the 40 second movie contains more than 3 seamless audio transitions from the samesong.

4.5 Reflection

The workflow between Motion and Final Cut Pro is amazing. With a simple click, any givenscene can be sent to Motion for further effects like Particle Systems, masking, etc. Oncechanges are saved, the scene gets rendered within FCP automatically without further stepslike exporting and re-importing.

Using the same codec settings (HDV 1080i50) throughout all the programs saved a lot ofprecious rendering time.



5 Poster Design

5.1 Purpose

An existing poster had to be re-designed in a visually appealing style without losing infor-mation and following the basic principles of design – proximity, alignment, repetition andcontrast – from The Non-Designer’s Design Book [6].

5.2 Techniques

The poster has been designed fully in Adobe Photoshop CS4. The background image originallywas in a 4:3 aspect ratio. Using Photoshop’s Content-Aware Scaling function, the imagecould be stretched to fill the A4 portrait page without having to worry about reflectionand background gradient. Furthermore, the use of visual guides helped aligning the variousobjects (see Figure 10).

5.3 Choice of imagery

A 3D rendering of a plane has used as a background [3]. The image conveys the main messageand attracts a lot of attention even if seen from a distance. This is particularly importantfor posters, as well as big and clear typesetting for titles and all the details presented.

Figure 10: Poster in Adobe Photoshop CS4 with Visual Guides enabled



Figure 11: End Result: Poster for a fictional Model Show



5.4 Reflection

Due to a fair amount of experience using Adobe Photoshop, the production was very straight-forward and although the creation of all these little details take up a lot of time, the processwas still very efficient. Having a good naming and organisation of both groups and layershelps a lot in the course of the creation. The poster’s resolution is only 150 dpi (A4, 1240x1754pixels) because it does not go into print for bigger sizes and the background image used isnot available in a much higher resolution anyway. Also, this kept the file quite small and theprocessing time more bearable.



6 Mobile Application Development

The development and maintenance of a mobile application is a challenging endeavour. Idea,planning, design, implementation, testing (functionality and usability), optimisation, local-isation and distribution are just the beginning. Marketing, customer support, bug fixing,finances and evaluation follow. "Roll it!" went through these stages multiple times during itsdevelopment process. For example, to make the game more attractive to people all over theworld, it is available in 7 languages (as of March 10, 2010) and even more are planned.

The application is written in Objective-C using Apple’s developer tools. Graphics have beenproduced in Adobe Photoshop CS4 and 3D renders in Cinema 4D.

"Roll it!" is being sold on the iTunes AppStore for the price of $0.99 (from which Applegets 30% for hosting and distribution). The game can be downloaded directly on the mobiledevice, but also synced via iTunes (see Figure 12).

Figure 12: "Roll it!" on the iTunes App Store



In January, Apple revealed the iPad. The bigger screen offers even more possibilities whenit comes to graphics. The game has been ported and adapted already and is planned to bereleased upon the launch of the device (see Figures 14 & 13).

Figure 13: The new splash screen for "Roll it!" on the iPad, created in Cinema 4D

Figure 14: "Roll it!" on the upcoming iPad



6.1 Marketing and statistics

The application has been promoted via a variety of online media such as Facebook, Twitterand various blogs. Furthermore, the video from the 3D Compositing exercise (see Section 4)has been used as a promotional video.

A website has been created to present the app outside of the AppStore and offer people aform for feedback (see Figure 15). The traffic has been monitored and evaluated using GoogleAnalytics.

Figure 15: Website www.aaweb.ch/iphone with app description and download link

Since its initial release on December 2nd, the game has been sold nearly 2000 times in over25 countries (as of March 10, 2010). A web service like AppFigures (www.appfigures.com)allows the tracking of reviews, downloads, updates and ranks worldwide. It also featuresautomatic email notifications with detailed statistics every day .



Figure 16: Worldwide sales of the "Roll it!" app since its release in December

Looking at the numbers (see Figure 16), sales quickly reached an average of 20 downloadsper day, even with very limited promotion and no marketing budget. During the Christmasperiod, when people obviously have more time and are willing to explore and spend moneyon apps, sales even increased to up to 68 a day. While the average is stable at around 20,sales are usually the highest on weekends and drop rapidly during the week.

6.2 Conclusion

With more than 130’000 applications on the AppStore [5] and numbers still increasing, thishuge competition is putting developers under pressure, forcing them to lower the prices. Therange of free apps is enormous and people hesitate to spend money on applications they donot really need.

However, the domination of the iPhone OS as a platform in combination with the iTunesAppStore make it look very promising. The way in which millions of customers can buy anapp from everywhere at anytime with a single click is a unique opportunity for developers ofquality apps.



References

[1] archc4d. Cinema 4d tutorial - creating roof tiles. 2009. Available fromhttp://www.youtube.com/watch?v=ARIVB7OIoWY.

[2] P. Every. Lecture notes. 2009.

[3] Z. G. M. Factory. Plane model. 2010. Available from http://www.zs-gl.com/.

[4] MaxonC4D. Cinema 4d: Putting your 3d model into a real photo or movie. 2008. Availablefrom http://www.youtube.com/watch?v=ZaMooVuXoUs.

[5] Wikipedia. App store. 2010. Available from http://en.wikipedia.org/wiki/App_Store.

[6] R. Williams. The Non-Designer’s Design Book: Design and Typographic Principles forthe Visual Novice. 2003.

[7] A. Woodhouse. Cinema 4d tutorial how to create 3d grass. 2008. Availablefrom http://www.youthedesigner.com/2008/08/13/cinema-4d-tutorial-how-to-create-3d-grass/.


portfolio - aaweb · 2.2 pitch and storyboard ... 315cr digital media technology 2 portfolio figure...

Documents