.pdf SOI updated version is downloadable from here:
http://www.mediafire.com/download/2s61e97jb4ayc8r/SOI_CFE_V5_ChingHuey.pdf
Wednesday 14 August 2013
Tuesday 13 August 2013
Final Outcome
This project is about creating an interactive logo to promote an event of Macalister Mansion. The event that I chose to work on was "Wine Flights". Therefore, to match with the topic, I created the story based on the theme "flight". The logo without clicking is just a normal logo, which is the two M being placed on the side of the webpage.
After it's clicked, there will be a page that pops up and that's how the interaction starts.
The first page is the logo itself.
The user will have to click on the logo to start.
Below shows the sample screen on how it will look like on a browser.
The user can click on the "close" button on the top right corner if he/she wants to exit from the page.
The "x" button appears on the swf all the time. But in this case, I am just showing an example of how the placement of the button will look like. This is because coding the exact website is not the main point of the competition.
Then it zooms into an island view, which is the place that the kings are chilling at.
A moving arrow indicating the user to click on the canopy.
After the user clicks on it, the scene is blocked by two soldiers and a message prompts.
Click yes will continue the next scene, while clicking no will back to the first logo page.
After they user clicks to continue, 4 kings appears.
User can click on the 4 kings to interact.
The next button indicates the user to go to the next scene.
Suspicious alien music plays, and the kings are being sucked up.
It then appears this scene where the kings are inside a plane.
The kings are later being released by the plane.
Clicking next will lead to this scene.
User can click on the kings and a parachute will pop.
They landed on the front entrance of Macalister Mansion.
A sexy lady who is holding a wine glass passed by.
Curtain closed and this board appears.
Click for more information will lead to the information page of the event, while clicking back to home will back to the first logo page.
The curtain opens.
The information of the event.
User can click on the home button at the right bottom corner to go back to the first logo page.
After this project, I have gained more understanding on creating a new art style that I have never tried. Also, I understand more about relating the event into the artefact for generating content. In this project, I have demonstrated the use of logo with animation that makes a logo not only just a static logo. Overall, this project will be able to fill in the gap of graphic communication on branding and identity.
After it's clicked, there will be a page that pops up and that's how the interaction starts.
The first page is the logo itself.
The user will have to click on the logo to start.
Below shows the sample screen on how it will look like on a browser.
The user can click on the "close" button on the top right corner if he/she wants to exit from the page.
The "x" button appears on the swf all the time. But in this case, I am just showing an example of how the placement of the button will look like. This is because coding the exact website is not the main point of the competition.
Then it zooms into an island view, which is the place that the kings are chilling at.
A moving arrow indicating the user to click on the canopy.
After the user clicks on it, the scene is blocked by two soldiers and a message prompts.
Click yes will continue the next scene, while clicking no will back to the first logo page.
After they user clicks to continue, 4 kings appears.
User can click on the 4 kings to interact.
The next button indicates the user to go to the next scene.
Suspicious alien music plays, and the kings are being sucked up.
It then appears this scene where the kings are inside a plane.
The kings are later being released by the plane.
Clicking next will lead to this scene.
User can click on the kings and a parachute will pop.
They landed on the front entrance of Macalister Mansion.
A sexy lady who is holding a wine glass passed by.
Curtain closed and this board appears.
Click for more information will lead to the information page of the event, while clicking back to home will back to the first logo page.
The curtain opens.
The information of the event.
User can click on the home button at the right bottom corner to go back to the first logo page.
After this project, I have gained more understanding on creating a new art style that I have never tried. Also, I understand more about relating the event into the artefact for generating content. In this project, I have demonstrated the use of logo with animation that makes a logo not only just a static logo. Overall, this project will be able to fill in the gap of graphic communication on branding and identity.
Saturday 10 August 2013
Digital Version of Content - Characters
The "WHY"
Why are the characters in this shape?
The characters are in 'M' shape to represent the "initial" of Macalister Mansion, which is M.
Firstly, the following image shows the 4 main characters which are the kings.
The most noticeable difference between these 4 characters is the "king" of australia. It is dressed in that way to represent the prime minister because Australia doesn't have a king. (read here for more: http://en.wikipedia.org/wiki/Monarchy_of_Australia)
 |
| The animated characters in digital form. |
Also, I have other sub characters in my interactive logo, the soldiers and the sexy lady.
The soldiers are taller and larger compared to the kings. They are stronger since soldiers are trained frequently.
The sexy lady has curvy body shape. It is dressed in red because red is a seductive colour.
After I have all my characters in digital version, I shall now proceed to scripting and animating them using Adobe Flash.
Friday 9 August 2013
Digital Version of Content - Background
The art style that I am creating is based on photo montage technique. Therefore, in the making of the digital content, I spent a lot of time searching for images which are suitable, in terms of sizes, resolutions, angles etc.
#Scene 1
Images that I used.
This is the scene where I set for the 4 kings to enjoy their tea time. This is where these 4 kings spent their own sweet time together, chilling in the afternoon in a canopy. After I managed to get the island background that I wanted to use, I edit it into something more alive. This is because the original image just looks like a floating island, with very little green plants.
The outcome, it looks more alive now.
#Scene 2
Images that I used.
The second scene is the inner view of the canopy where the kings are in. In this scene, I encountered a major problem of adjusting the colour to make them match with each other. The challenge of creating this scene is that, I get different images with different kinds of tones, lighting and colour, therefore, the colour editing took a lot of time. Also, to create a scene from scratch is challenging because I have to make decision on the background, lighting and relevant details.
This is the outcome. It looks so much better compared to the first tryout that I have done.
The floor is in this greenish marble kind of texture to match with the scene that this takes place on an island. The colour is inspired by the fantasy feeling of "Life of Pi". Also, I tried to use a dull colour but I think it doesn't really look great on the picture, therefore, this colour is chosen.
#Scene 3
Images that I used.
So after the 2nd scene, the kings are being sucked up into a plane.
In this scene, I wish to create a simple scene with an aeroplane flying on the clouds.
So I chose a cloud view which pretty much looks like a 45° angle top view. Also, I found adding a scene under it will look interesting. So, to link it with the island, I decided to insert a hazy top island view under the clouds. I used another plane instead because I think the design of the plane is more suitable compared to the previous one.
Final outcome.
#Scene 4
Image that I used.
In this scene, the kings are released. I wish to create something which is simple and direct. So since it's just sky, I added lens flare and do colour correcting to get the colour that I want.
Final outcome.
#Scene 5
Image that I used.
The last scene where the kings dropped on the ground.
In this scene, I overlapped another sky view on the original background image. Also, I added garden chairs and light post. There are glowing light being placed behind the light post to make more believable.
Final outcome.
That is all for the digitalized background update for this time.
In the next post, I will be talking about the digital version of characters.
#Scene 1
Images that I used.
 |
| Image from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB48p_4r32iAFmySFzQF-V2LDIiHu1Xzyv1SX_mQ0qHZh11rRURYnmvl5PHARmVvHtdMIptWCLbwjOZG3SO2RXVEZdQaSL9UIwFSu_7UKTP1MrtnsFTvCIy3WgsxKjb30zEXyU3dpq9SU/s1600/TheaterCurtains.jpg |
 |
| Image from: http://www.b7v.net/uploads/green-grass.jpg |
 |
| Image from: http://screenshots.en.sftcdn.net/en/scrn/328000/328469/aero-rainbow-01-535x535.png |
 |
| Image from: http://2.imimg.com/data2/GK/YT/MY-624475/patio-garden-canopy-tent-500x500.jpg |
 |
| Image from: http://blog.blomming.com/wp-content/uploads/2012/12/Tropical-Island1.jpeg |
The outcome, it looks more alive now.
#Scene 2
Images that I used.
 |
| Image from: http://lawrl.files.wordpress.com/2012/02/texture___rock_wall_by_crossmirage.jpg |
 |
| Image from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB48p_4r32iAFmySFzQF-V2LDIiHu1Xzyv1SX_mQ0qHZh11rRURYnmvl5PHARmVvHtdMIptWCLbwjOZG3SO2RXVEZdQaSL9UIwFSu_7UKTP1MrtnsFTvCIy3WgsxKjb30zEXyU3dpq9SU/s1600/TheaterCurtains.jpg |
 |
| Image from: http://fotobg.ru/upload/img1347707312.jpg |
 |
| Image from: http://www.mayang.com/textures/Stone/images/Rock%20and%20Objects/flint_like_rock_4787.JPG |
 |
| Image from: http://images.monstermarketplace.com/party-decorations-and-wedding-favors/royal-blue-90x132-polyester-tablecloths-800x600.jpg |
 |
| Image from: http://jewelleryica.com/wp-content/uploads/2011/03/ancient-gold-bowl-d.jpg |
 |
| Image from: http://www.faziomarketing.com.php5-13.dfw1-1.websitetestlink.com/wp-content/uploads/2010/05/grapes_on_plate.png |
 |
| Image from: http://ecx.images-amazon.com/images/I/41eo6FKR79L._SY355_.jpg |
 |
| Image from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEIxJer7AO5toegIO7BopF0nsmAUOkUR-WQ6UD4rLRasY-qn9rwq5hVA4JcWZTCRLHn2Eco7B_W6-ifSvHWQZeGS_XdTPdd5VySNtzUuj34wRQBJ6IMo_jfHEhptpOQsQQAKi-Gk9z9dg/s400/shabby-chic-flowers-pots-ivory-pink.jpg |
 |
| Image from: http://www.againstthegrain.co.uk/images/collection/CH251_King_Chair_Back_zoom.jpg |
 |
| Image from: http://www.eventprophire.com/_images/products/superlarge/silver_throne_furniture_hire.jpg |
 |
| Image from: http://www.photo-dictionary.com/photofiles/list/472/852throne.jpg |
 |
| Image: http://www.stovkorn.com/wp-content/uploads/2013/03/throne-hire-11.jpg |
This is the outcome. It looks so much better compared to the first tryout that I have done.
The floor is in this greenish marble kind of texture to match with the scene that this takes place on an island. The colour is inspired by the fantasy feeling of "Life of Pi". Also, I tried to use a dull colour but I think it doesn't really look great on the picture, therefore, this colour is chosen.
#Scene 3
Images that I used.
 |
| Image from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWRRAtRGZCrWO6UdsaoyVYOZKpNKgzsSgIzPx7iDSD9zrx9dfy8tMw_mqaXvvq5q_7kjob7BX2rSqQwtIgC2Vej2vto03Pk3lYO792BxFD3XXMcI4v6YZYEl-DZSJojHts7vIQaLm9mupY/s1600/aeroplane+fly.jpg |
 |
| Image from: http://www.news.colostate.edu/content/photos/Cloud%20sample%202.jpg |
 |
| Image from: http://marioxiao.com/wp-content/uploads/2010/12/photo_manipulation_photo_art_sky_beach.jpg |
So after the 2nd scene, the kings are being sucked up into a plane.
In this scene, I wish to create a simple scene with an aeroplane flying on the clouds.
So I chose a cloud view which pretty much looks like a 45° angle top view. Also, I found adding a scene under it will look interesting. So, to link it with the island, I decided to insert a hazy top island view under the clouds. I used another plane instead because I think the design of the plane is more suitable compared to the previous one.
Final outcome.
#Scene 4
Image that I used.
 |
| Image from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY5rLQ0rfwsoD-ZsyJFzSDGbZcdIaf15yNB14JLFr72w6oJBzgevWg3zcehuh4159-2TmRDU5T-Zen4uRkcWAC2ScikKwq5i_BOHwJwLB-HXnwksW1f6vM6cMHkJYVh_zkC5HC1zS9Sw/s1600/sky+images+of+Pictures.jpg |
In this scene, the kings are released. I wish to create something which is simple and direct. So since it's just sky, I added lens flare and do colour correcting to get the colour that I want.
Final outcome.
#Scene 5
Image that I used.
 |
| http://simpsonsparadox.com/wp-content/uploads/2008/10/blue-sky.jpg |
 |
| Image from: http://www.orientdecofurniture.com/uploads/products/METAL%20FURNITURE/GARDEN%20FURNITURE/Garden%20Set/Garden-Set-2-CHR-345-chair,-TBL-332-Table-Base,-LMT-094-Top.jpg |
 |
| Image from: http://www.truegraphics.net/StreetLight_Large.jpg |
 |
| Image from: http://www.macalistermansion.com/images/album/03.jpg |
The last scene where the kings dropped on the ground.
In this scene, I overlapped another sky view on the original background image. Also, I added garden chairs and light post. There are glowing light being placed behind the light post to make more believable.
Final outcome.
That is all for the digitalized background update for this time.
In the next post, I will be talking about the digital version of characters.
Subscribe to:
Posts (Atom)