4.1.2022 - 27.2.2022 (Week 1 - Week 8)
Chung Yi Ki / 0345014 / BDCM
Information
Design
Final Project
Lecture
Week 1 / Motion graphic
Motion graphic is a combination of graphic and movement. It relies on good
graphic composition and also animation skills. Composition is a combination
of graphics and typography while animation is a
combination of movement and rhythm.
Steps in making a motion graphic
Step 1: Write a script that tells a story
Step 2: Brainstorm and storyboard the visualizations
Previsualization
Before storyboarding the scenes write down visual notes based on the length
of the voice over for each particular scene.
Moodboard
A moodboard allows us to organize our inspiration and references for our
motion graphic style.
Instructions
Final Project
Idea development
Week 1
For this week, we are tasked with both individual and group task. For our
individual task, we need to recommend 3 professional motion graphics video
and write down our rationale on why we think they are good reference and
also how we can use them as inspiration for our group motion graphics
video.
For our group task, we are tasked to create a moodboard for our motion
graphics video and create style frames (sketches) for 3 of the most
challenging frames in our chosen script. We are given 2 scripts to choose from and my group chose the script titled "Your Body", which is about the female's reproductive system from puberty to pregnancy.
Individual task
Fig 1.1 Motion graphics video #1
What interest me about this video is that the visuals and animations are
kept simple, yet the message is effectively delivered in the outcome. The
timing keeps up well with the dialogue and each scene transitions smoothly
to the next one. There are rarely any long pauses which helps to keep the
audience engaged. All the statistical data mentioned are shown with a
combination of icons and typographical animation, which keeps people
interested in a rather boring subject.
Few things that could be used as reference for my group’s final project is
the animation of the icons and the transitions. Scaling an element up and
down, although a minimal animation, is able to keep people engaged if it’s
used in the right place. The camera panning transition through the video
gives a feeling of coherence which let people know that every data and
icons showed in the video are relevant to each other.
Fig 1.2 Motion graphics video #2
The shape morphing transition used in this video is very mesmerizing to
look at, which is what I think makes the animation very engaging to
watch. The colour palette choice is contrasting and texture is also
included in the graphical elements, which contributed greatly in making
the video appealing to look at. The video runs quickly and there’s
seemingly no pauses, but even in this speed, just by looking at the
graphics in each scene is enough to give the audience a general idea of
the message being shown.
The shape morphing transition style, although would be harder to
accomplish, would probably help in my group’s final project video. It
would be useful when it comes to complicated character movements, for
example it can be used to show the character changing from one place to
another rather than animating the movement intricately. The cutscenes
transition used in the starting of the video can be referenced too as
it’s able to keep the rhythm of the animation going.
Fig 1.3 Motion graphics video #3
Similar to Fig1.2, transitions of shapes are largely used in this video.
Though what is different from the other 2 videos is that the visual shown
are kept in the center of the frame, there’s hardly any elements that goes
out of frame. The variety of transition shape and style between each scene
kept it interesting. And although the illustration of the house is used
repetitively, the variety of other visuals between its scenes kept it
compelling enough.
Few things that could be referenced in this video are the coherent
transition styles which kept the rhythm and relevancy of the video, and
the repetitive but effective use of the house illustration, which can help
us save time when creating our motion graphic.
Group task
Fig 1.4 Video reference #1
Fig 1.5 Video reference #2
I went to search 2 videos references that's directly related to the topic we're doing for our final project for my group's moodboard and also for me to reference when making the style frames. Fig 1.4 has a full frame animation narrative approach to an infographic video, but its style of characterizing subjects of the topic can be used as reference for our final project. For Fig 1.5, how the data are shown especially with the rolling globe style would be useful to reference for our final video.
Further development of project in week 1
|
| Fig 1.6 Moodboard (8/1/2022) |
Moving on in the week, we also created a moodboard for us to determine
the kind of possible visuals and colours we would use in our final
outcome.
Fig 1.7 Frame 13 and 17 storyboards (8/1/2022)
Fig 1.8 Frame 13 version 1 animatic (8/1/2022)
Fig 1.9 Frame 13 version 2 animatic (8/1/2022)
Fig 1.10 Frame 17 animatic (8/1/2022)
Other than that, we’ve written down storyboard notes for each frames
indicating the possible visuals that we can use for each piece of
information. We then later divided the frames among ourselves and we
each sketch out the storyboards for the frames tasked to us. I chose to
sketch out frame 13 and 17. I sketched out 2 different versions of frame
13, so that we could see more possible options for us to consider. I
also made an animatic while sketching out the storyboards so that I
could see if it’ll work in animation.
Week 2-3 (Scene 6D updated on week 5)
Fig 2.1 Final project script breakdown template (4/2/2022)
These weeks, we are tasked to breakdown our chosen script in more
detail. We are given a template where we need to fill in the running
time for each dialogue and the visuals planned for them as well. I
helped to fill in frame 13 and 17 as those were the frames I
storyboarded. Scene 6D was updated after we received feedback from Mr.
Martin in week 4.
Week 4
Fig 3.1 Final storyboards for frame 13 and 17 (3/2/2022)
Fig 3.2 Frame 13 final animatic (3/2/2022)
Fig 3.3 Frame 17 final animatic (3/2/2022)
After receiving feedbacks from Mr. Martin, we decided to go with version
2 for frame 13 and I added arrows to indicate the motion planned for
both frame 13 and 17.
Idea Execution
Animation
Week 5-7
We started to divide works (sketching, line art, colouring, animation,
editing) between ourselves. I chose to work on animation for the project
alongside Adeline and from there, we divided the frames to animated
where Adeline takes frame 1-9 while I take frame 10-17. After receiving
the progress outcome from the other tasks, I proceeded to start my
animation work.
Fig 4.1 Frame 10 animation (15/2/2022)
Fig 4.2 Frame 11 animation (15/2/2022)
Fig 4.3 Frame 12 animation (15/2/2022)
Fig 4.4 Frame 14 animation (13/2/2022)
Fig 4.5 Frame 15 animation (14/2/2022)
Fig 4.6 Frame 16 animation (17/2/2022)
Fig 4.7 Frame 17 animation (17/2/2022)
After separating the layers in Adobe Illustrator, I imported the files to Adobe After Effects for animation. The animation was done simultaneously with the colouring process.
Fig 4.8 Reworked frame 10 animation (19/2/2022)
Fig 4.9 Frame 13 animation (19/2/2022)
Fig 4.10 Reworked frame 15 animation (19/2/2022)
After receiving feedback from Mr. Martin, I added a number counting animation for frame 10 so it adds more clarity to the video and also changed the clock in frame 15 to calendars with "X"s. I also finished animating frame 13 along with the other 2 videos.
Animation breakdown
Fig 4.1 Screenshots of After Effects workspace for some scenes
(19/2/2022)
Click this link to view the images in fullscreen: https://albumizr.com/a/h1qF
I used mostly position, scale and opacity keyframes for
each assets and focused on creating fast motion blur transitions between
scenes so it would keep up with the dialogue and also doesn’t drag the
video for too long. I also used masking tool and puppet pin tool for
some scenes.
|
|
Fig 4.2 Pumpkin Cheesecake typeface (19/2/2022) Source: https://www.dafont.com/pumpkin-cheesecake.font |
|
| Fig 4.3 Using shape path to adjust the shape of the calendar page for each keyframes (22/2/2022) |
|
| Fig 4.4 Slider control on the numbers (19/2/2022) |
|
| Fig 4.5 Liquify effect on man and woman and also adjusting the position (19/2/2022) |
For some scenes such as frame 10, I used shape path to create the keyframes for the flipping motion to create the animation. For the number counting effect in the frame, I used the slider control and a typeface called “Pumpkin Cheesecake” as it looks similar to how we line art the words in our scenes. For the woman and man merging together scene in frame 13, I used the liquify effect and position keyframes to create the motion of it.
I uploaded my parts of the animation to our group Google Drive folder
whenever I’m done with it and Adena then compiled all of them together
with Adeline’s part into one full video with added sound effects.
Final project outcome
Fig 5.1 Final sex education motion graphic video (22/2/2022)
Feedback
Week 4
The visuals are simple and the characters can come into scenes easily, but remember to keep in mind that the target audience is female, so the tone of the video should be set according to that. Also remember to be consistent with the art style, follow the mood board planned as well as the art direction that we discussed on. Don't have to worry about the visuals being explicit, but do think about presenting them in a way that it evokes a certain mood to the audience. Start making the animatic to plan out the speed for each scenes. For frame 2 and 6, we can use a zooming out transition, avoid using split screens when there's no comparison purpose. Version 2 of frame 13 is better than version 1, develop that for final.
Week 6
The "1 week 2 weeks" scene in frame 16 looks promising, if every frames will be like that, then the final outcome will turn out good. The animatics are very clear in visuals and animation. Good planning and starts arranging the tasks for the final outcome.
Week 7
The animation for frame 11 is subtle and nice, aim that for the animation in the other scenes. Remember to enable motion blur for every layer when animating. In frame 15, the clock can be replaced with the calendar in frame 10 flipping 3 pages to indicate 3 months, or use a calendar illustration with "x"s marked on it. In frame 10, a number counting animation can be added beside the calendar to make the information presented clearer. Make sure the background doesn't shifts abruptly and all the colours in every scenes are the same in the final edited video, also consider putting in sound effects.
Reflection
Experience
This was a big project and although it was hard to juggle between this and other individual exercises and projects, the process was nonetheless interesting and enjoyable to do. It was fun planning out the storyboards, making the animatics as well as the animations. Figuring out ways to substitute the visuals for the sensitive information was fun and I was able to learn a lot while making the animation, from practicing parenting to trying out new techniques.
Observation
I observed that creating visuals with a mood in mind helps to make everything coherent as well as keep the audience in the same mindset throughout the video. For example, a celebratory mood will make the information presented feels positive; an explicit approach will create a serious tone while a monotonous mood will end up with a boring and very straightforward video. By figuring out the mood, the visual style of the video can follow suit as well.
Findings
I found that visualizing information with an appealing and simple visual with effective animation can help engage viewers with the information presented and make it more memorable too. An effective animation doesn’t need complex animation to make the content interesting, but simple motions would be enough to communicate the message while keeping the video engaging. As anyway, motion graphic is about the delivery of the message rather than flashy visuals.
Comments
Post a Comment