Assignment 2 Sketches

As I didn't take all of the photos in my draft, I'll retake most of them for the final version. However, before I start taking photos, I thought I'll do sketches and finalize my ideas first so I won't have to trouble my friend to take for me again.

The part on "readings" and "bidding" will be the same as "food" and "greenery", i.e. montages of the photos.

I hope the sketches are clear enough, I'm not very good at drawing. Also, the ken burns effects may change as I do the assignment, so this is more of a guide to the photos. (If the sketch is too small please click on the image and zoom in.)

Assignment 1 Justifications / Reflections

I thought I'll write this before I forget, and I'll probably use this for the video recording of my website for the portfolio.

After deciding on the template for my website, I used it as the background image and placed the title, contents and navigator on top. Initially, I wanted to make the background image center and relative-positioned, so that the website will look more balanced regardless of how the user changes the browser window. However, I didn't want my contents to be relative-positioned as well, because they'll move when the user adjusts the browser window, which is distracting, especially for the text-wrap to change. I couldn't keep only the background image relative-positioned, as the contents will then be misaligned with the background. As a result, I decided to make everything absolute-positioned.

Also, I wanted to use tables for my layout initially, but I had problems positioning the elements inside. I guess I could have read more tutorials, but that was very time-consuming. Thus I used AP Div tags to contain my contents, as I could then drag them around, as in Photoshop or Illustrator. I did read in one tutorial that this is not a good idea as some elements may be misaligned if they are relative-positioned or in tables, but I did not encounter this problem as I put everything in AP tags, so they'll all stay where they are.

As a result, I only used CSS for the links color and the font, as well as for the print.css. I hope this is enough to meet the requirement.

For the color of the links, I only used orange on rollover, as I felt my website is simple and does not need to indicate visited links for the viewers. They can probably remember which pages they have seen. Inactive links are gray in color.

I did not want to risk using an obscure handwriting font which the end user may not have on their computers, so I used the common Arial font for the text. However, I kept the handwriting font for the navigator as I wanted to keep the same style / feel of the website template. I used rollover images for these, as I didn't want to spend time looking for another handwriting WOFF font, as we have learned in Presentation 1. I am also not confident of using WOFF.

I wanted to remove the background image for the print version initially, until I realized that the browsers (Safari, Firefox and IE) all remove the background image automatically. Hence I just removed the title from the print version (as the top left hand corner already contains the name of my website), and moved the contents and navigator higher up the page. I kept the navigator as the title of my works are not included in the contents. To make the printed page more coherent, I added a divider between the contents and the navigator. However, there is no divider for the “About” and “Contact” page as the contents are short. I also changed the font from Arial to Times, a serif font that is easier to read on paper.

I thought if users want to print my web page they'll probably want the text as well, so I neither created a print.css with just the image of my works, nor increase the size of my works for the print version. If users just want an image of my works, they can simply right-click on the image itself and print that. They can also scale the image if they wish to.

On a side note, I realized IE doesn't print the navigator, unlike Firefox and Safari, but since we're designing for Firefox I guess that is not a big issue...

For website navigation, users can click on “Works” where the sub-menu appears and they can view my design process. They can click on the “>>” arrows to navigate the design process. However, if they wish to go straight to the final design, they can click on the link “skip to final design” at the bottom of the image. I didn't want to start with my finals as I thought less people will look through my design process otherwise.

I changed the background image for the storybook as the storybook has to span across two pages, partly to mimic people reading a physical book, but also due to some of our illustrations spanning across two pages. Hence for the storybook page, the link “Little Peanut” in the text opens a new window with a wider piece of “paper” in the background image. A new window is used because the wider “paper” does not allow space for the navigator. Thus if users want to access the navigator after reading the storybook, they can either close the new window, or click on the title, which brings them back to the home page (i.e. “About” page).

Unable to access server

Julian, I am having problems accessing the server...  in case you missed my email but are checking our blogs, help :S

On the other hand, I'm only left with the printing css for the website. I plan to simply remove the background and keep only the title, contents and navigation (I decided to keep the navigation as the contents don't indicate which assignment the viewer is at). Hence the printed version will look like a standard blog layout with minimal design. I hope this is not too simple, since I remember someone said printing our portfolio should save ink ;)

Presentation 3 (Part 3)

III. What are the differences between scripts before production and scripts which are ready for production (if any)?

Scripts may be original, or inspired by a book, a play or a true story. Before production, a synopsis of the story is written, and the story is developed as a narrative. Next, a step outline breaks down the story into numbered one-paragraph scenes. This includes indications for dialogue and character interactions. 

Scripts ready for production are more detailed. Also known as screenplay, these scripts contain detailed description of every event and detail which will be seen on the screen. Characterization, dramatization, and the overall style and feel is included.

Presentation 3 (Part 2)

II. Write the script for your assignment II (Ken Burns).

I'm not sure how I should write the script for scenes with titles only. I used the opening titles of Harry Potter and the Deathly Hallows Part 1 as reference. Also, I may change my script as I work on the assignment.

NM3208 Assignment 2 Ken Burns Effect

Written by

Chan Xin Yi

FADE IN:

INT. HOME - DAY

ZOOM in to my matriculation card in the NUS lanyard, which lies on a table.

SUPERIMPOSE: My life in NUS

DISSOLVE TO:

INT. HOME - DAY

A clock, which DISSOLVES a second time to a photograph of the same clock, taken at a later time. The clock TICKS quietly in the background.

SUPERIMPOSE: is about waiting…

EXT. BUS STOP - DAY

Me, standing in a long queue of students waiting to get on bus 96 to go to NUS.

SUPERIMPOSE: Waiting for the bus…

EXT. MRT STATION - LATE AFTERNOON

Me in a long queue of commuters waiting to get on the MRT after work or school.

SUPERIMPOSE: Waiting for the train…

EXT. NUS - FASS - DAY

Me looking up a long flight of stairs to the lecture halls or tutorial rooms. PAN UP and ZOOM in to the classrooms.

SUPERIMPOSE: Waiting for lessons to start…

EXT. NUS - FASS - NIGHT

Back view of me walking down a slope to the bus stop.

SUPERIMPOSE: Waiting for lessons to end…

FADE IN:

TITLE - AND MOST IMPORTANTLY…

INT. NUS - CO-OP@FORUM - DAY

Me staring longingly at the commencement lion.

SUPERIMPOSE: Waiting for graduation…

FADE IN:

TITLE - LIFE IN NUS IS BORING 

TITLE - OR SO IT SEEMS

TITLE - BUT WHEN THE WAIT IS FINALLY OVER…

TITLE - I THINK I'LL MISS

INT. NUS - THE DECK - DAY

Me posing happily with a bowl of yong tau foo.

SUPERIMPOSE: the food

INT. NUS - OUTSIDE CENTRAL LIBRARY - DAY

Me studying at the tables under the shade of the trees.

SUPERIMPOSE: the greenery

FADE IN:

TITLE - EVEN

INT. HOME - DAY

Me sleeping beside a pile of readings. PAN UP and ZOOM in from me to the top of the readings.

SUPERIMPOSE: (complaining about) the readings

INT. HOME - DAY

Back view of me in front of the computer, looking at CORS.

SUPERIMPOSE: and bidding

FADE IN:

TITLE - AFTER ALL, THESE MAKE MY NUS EXPERIENCE SPECIAL

TITLE - BUT, MOST IMPORTANTLY

INT. NUS - DAY

Happy faces of me and and my friends.

SUPERIMPOSE: I'll miss my friends! 

SUPERIMPOSE: They make me special :)

INT. HOME - DAY

The same clock at the beginning of the video. ZOOM out.

SUPERIMPOSE: And so the wait may be worth it...

DISSOLVE TO:

INT. HOME - DAY

My matriculation card in the NUS lanyard lies on a table at home.

SUPERIMPOSE: but the wait, in itself, is worth it…

FADE TO BLACK.

THE END

Presentation 3 (Part 1)

Select minimum 5 pages (each) of the two scripts you selected and analyze them.

Harry Potter and the Deathly Hallows Part 1 (http://www.imsdb.com/scripts/Harry-Potter-and-the-Deathly-Hallows-Part-1.html)

I chose this movie as I just watched it recently and I feel I may be able to relate better to the script. The pages I chose are 3 to 9, before Snape enters Malfoy Manor. I excluded the introduction as I feel there are no major characters included, although it sets the overall stye and feel of the movie.

Characters

- Hermione Granger

- Mrs. Granger

- Mr. Granger

- Ron Weasley

- Ginny Weasley

- Mrs Weasley

- Arthur Weasley (Mr. Weasley)

- Severus Snape

Voice Over

Camera Movement

Transition

Place and Time

Place and time are presented in the sluglines (a.k.a. scene headings) as firstly, stating if the scene takes place indoors (interior) or outdoors (exterior); secondly, naming the location; and thirdly, stating the time of the day. Weather is specified in parenthesis, after time, for some scenes.

Kung Fu Panda (http://www.imsdb.com/scripts/Kung-Fu-Panda.html)

Although I watched this movie a few years back, I remembered I liked the line "Yesterday is history, tomorrow is a mystery, but today is a gift. That is why it is called the present." Unfortunately, that is on page 37 and there are no voice overs near the page. Thus I chose pages 3 to 13, where the tournament is about to begin. Again, I've excluded the most of the introduction as I feel there are no major characters included, although it sets the overall stye and feel of the movie.

On a side note, I think the sequel's coming soon ;)

Characters

- Po / Warrior

- The Five (Monkey, Tigress, Mantis, Crane, Viper)

- Po's dad

- Pig (watering flowers)

- Po's customers

- Shifu

- Zeng

- Oogway

- Tai Lung

- Palace geese

- Bunny fan #1

- Bunny fan #2

- KG Shaw

- Jr Shaw

- Palace Pig

Voice Over

Camera Movement 

Transition

Place and Time

Place and time are also presented in the sluglines (a.k.a. scene headings) in the order of indoors (interior) or outdoors (exterior), location and time of the day. The difference between flashback and the present is added before INT. / EXT. for some scenes.

Assignment 1 Web Template (Version 7)

The previous version was too crowded, so I only kept the maple leaves for the top right corner of the navigator. To make the design more interesting but keep it simple at the same time, I replaced the letter "o"s of the navigator with a single maple leaf. I've also added a maple leaf behind the arrows (beside "thumbnails") for the contents.

I've also decided to change the font color (at the navigator) to indicate the page where the user is at, instead circling the word. This is to prevent the navigator from looking too messy.

The bottom part of the background image is also made more transparent, so as to let the papers (contents) stand out more.

Hope this is better:

Assignment 1 Web Template (Version 6)

This version is no longer bottom heavy as I copy and pasted the photograph on top of the black background. This makes the website look more coherent.

Also, I decorated the pieces of "paper" so that they don't look so plain anymore. However, the "leaves" on the branch Julian mentioned in the feedback are actually a kind of moss (I think... but they really aren't leaves). Hence I had difficulty using it to decorate the paper. Instead, I decided to use another photograph of maple leaves which I took. As the leaves are of a different color from the moss (more red/orange), I made the hue yellower to match the moss. I also made the leaves more transparent for easier reading.

Initially, I wanted to make the leaves on the left paper (where the main contents are) opaque, since the leaves will be placed behind my works, so they can serve as decoration to my works as well. On the other hand, as I decorated both sides of the paper (for balance), the leaves on the bottom right corner will interfere with the text. Hence I decided to make all the leaves translucent.

I did not change the font color to match the moss's as I think orange text is easier to read than yellow.

Hope my theme is more obvious now. Here's the latest version:

Assignment 2 draft

(The video is too large for me to upload... I'll show it in class?)

Since we had to start on this assignment in the middle of chinese new year, I didn't go back to school to take photographs. Hence those in the video are just drafts, for explanatory purposes, of the angles and ken burns effect. Thanks to google and some of my previous photos.

The theme for my video is "waiting". This is because school can be boring at times (or most of the time :p) so we really can't wait to graduate. Nevertheless, when we do graduate, we'll start to miss school. Even if we don't, we'll still miss our friends and miss complaining about school together. At least I do, which is why I changed the more negative tone about waiting to get out of NUS to a positive one, about missing NUS. (Moreover, our assignment is supposed to be promotional? ;)) 

The first two photos (of the clock and the lanyard) are curved in the same way, to show that NUS = waiting. I hope the crossfade can show this well. (I had problems making the crossfade longer, I'll  explore iMovie again.) 

Also, "waiting for lessons to start" is zoomed in, to portray a person going to school, and the opposite is true for the end of lessons.

I wanted to do a montage (similar to split screen) for the "miss NUS" part (about food, greenery, etc). However, I couldn't do so in iMovie (I found a forum which confirmed that it cannot be done), so I split the montage into different scenes. 

Although I didn't have time to add music, the music will synchronize with the mood of the video, and change from a slower tempo (probably just a solo piano and simple chords) to a more upbeat one (probably with percussion added). This is to show that the long wait to graduation is not that boring after all.

This is my first time using iMovie, I hope I can get better at it, especially the export options, I'm not very sure about that. Hope my storyline is fine too :S

Assignment 1 Web Template (Version 5)

This is the newest version, as the previous template was out of proportion (the branch took up too much space when the focus should be on our works).

I shifted the branch up, which resulted in more black space. Unfortunately, the photo ends shortly after the branch, and I thought repeating the image will make the background messy.

The different parts of the website still follow the rule of thirds, with the work taking up a bigger proportion. Hope it is fine, I need to start doing the website soon :/