Categories
Semester 1

Morning Routine

In this project, I have developed a video of a typical everyday morning in my life. As the overall focus of my video, I had chosen the proces of producing a fresh cup of filter coffee.

Method

As a start, I wrote a short script of clips I would like. Based on each scene, I categorized them by A-Roll or B-Roll. A-Roll are the important must have scenes and B-Roll extra scenes.

Keywords: Ultra-close, Focus on my actions

A-Roll & B-Roll
(B) Scene – the light turns on (slowly), the clock rings, I put my feet in my pacifier shoes (almost ultra near)
(A) Scene – walks to the kitchen (door frame, floor creaks)
(B) Scene – The light turns on in the kitchen and you see the coffee machine (the sound of the switch)
(A) Scene – Opens the cupboard, finds the right coffee and a filter
(B) Scene – Washing the filter
(B) Scene – 2 spoons of coffee
(B) Scene – Fills the jug with water
(A) Scene – Fills the Coffee Maker with water
(A) Scene – Turns on the shower
(A) Scene – Turns on the coffee machine
(B) Scene – Pulls shower curtain closed
(A) Scene – Slowly zoom in on the coffee being brewed while there is a shower sound in the background. (the sound of the coffee slowly gets louder the more zoomed in)
(B) Scene – Pulls shower curtain open
(A) Scene – Turns off the shower
(A) Scene – Finds a cup from the cupboard
(A) Scene – Placing the cup on the table in front of the coffee machine and pours a cup of coffee, Takes the coffee out of the picture … and The end

Sound recordings (scrapped)
Bad turn on
Bad sluk
Curtains for
Curtain from
Power outlet on
Coffee machine working
Coffee machine on
floor creaks

Initially I had plans to record various audio files, but after hearing the recordings from my phone, I chose to scrap them due their poor sound quality.

In addition to the scene descriptions, I also drew the A-Roll clips to visualize my ideas a little better.

Recording

After having drawn and decided my shotlist, I gradually started filming the various recordings.

Editing

While editing, I was pretty lucky considering my DSLR camera had a better microphone than my phone. Therefore, of course, I chose to use that sound.

The entire video was edited in Premiere Pro.

I also learned this clever Adjustment Layer trick to color grade, but I had some problems with it. I’ll go into more detail on this in the reflection part.

Final product

Reflection

Since my DSLR camera is not intended for filming, I had some problems with color grading due to the video quality & compression. If i had to do something similar again, I would probably have used some better equipment this applies to both camera & microphone. Even though it is bad quality and moody i still think its entertaining and gives it some kind of charm.

Otherwise, I am very happy with the process and the methods I have used to execute my final product.

Categories
Semester 1

CSS Animation

I dette projekt har jeg udarbejdet en sprite animation ved hjælp af Html, Css kode & Adobe Illustrator.

Storyboard

Before I started on my sprite animation, I decided to make a storyboard for how the animation should take place. This was very useful as I knew exactly what to draw in illustrator.

With all the frames and sizes calculated, I started drawing my animation in illustrator. I knew that I had 20 frames in total where all my frames were 300x300px therefore my whole artboard had to be 6000x300px. After I had everything drawn and adjusted correctly, I exported my sprite file from the artboard so that it retained its 6000x300px dimension.

Code

With my sprite .png file exported, I started setting up my code. Below is my html code containing the png image and a div with the class “bomb”. The div is what i’m playing my sprite animation in.

Further down I define the dimensions of the animation, where it is located , how long and how many frames / steps there are in my animation. Below my bomb class I’ve defined the width of the image above the sprite so it’s visible.

For the animation to play I used @keyframes start position that is 0px and then how to start return again that is -6000px

Final product

http://port.victorsehested.com/blogs/cssanimation/

Conclusion

Based on the 12 animation principles, I have used slow in & slow out, as the bomb drops with slightly increasing speed. I have also taken advantage of appeal & exaggeration when the bomb explosion suddenly becomes very colorful and violent with the text and illustration.

I think my final product has turned out pretty good and that I have completed the task without any major problems. If I were to use this for another time, I would probably use it in a more complex and Ui relevant situation. Otherwise, I have had a lot of fun working out the task.