Finalise of the Cart

I had decided which cart that I will use for my final piece, I found this design is the one that I can manage to create it in 3D max. Then I end up with a finalize drawing of the cart.  

The bottom of the cart I will use a black box, because most of the Japanese's chair are without the chair legs. (refer to my previous entry). 

Cart and Entrance

In today’s seminar, it was about designing a cart and entrance for our haunted house. As the theme of my ride is Japanese Haunted house. I decided to use Japanese chair as the cart. For the entrance, I will either research an image from the internet or drawing my own one. The following are some drawings and research that I done so far.

 

 

Model of my track

I decided to use the plan that showed above as my final track.

In order to make it easy for me to create a 3D track in 3D max, we have bee told to create a 3D model before create it in 3D max.

This wasn't the final design of my cart, it was an example.

Theatre Visited

On Friday seminar, it was about the design concept: audience, theme, style, use of colour. The size of the theatre is L9m x W20m X H6m. When I visited the theatre, it wasn't as big as I thought. The following is the video that I took when we were visiting.

After the visited, I have come up some ideas of track plan.

Theme of Ride- Brainstorming

This is the mind map that I did for my theme of ride. I chose the Japanese House as my project theme, the idea was inspired from a Japanese 3D film theme called "Shock Ladyrinth" and I watched couples of horror films that filmed at Japan, most of them are pretty scare. Therefore, I think if my theme of ride is about a Japanese House, it will be interesting and scary. But the problem that I am thinking is that possible to me to create 3D person in 3D Max.

Amusement Park Haunted Castle Ride- Moodboard

The initial ideas of my Haunted House...

Carousel 1 Finished!!!

Home Page

Info

Gallery

Portfolio

Contact

Interactive Menu

To be honest, I did not know what to put in my index page, and I remember before when I researched for the layout of my website. Most of the portfolio page either start with a short paragraph to tell the visitor that what is it about, a HELLO page or a big navigation menu.

Therefore, I decided to put an interactive menu on my home page. I created this in Flash. This was another task for me that I have to spend more time to finish my website. I did lots of research of how to build an interactive menu. To build it and make it interact with the users is easy. The difficult section was how to make it link with the html pages that I created in Dream weaver. The principle is the same with Dream weaver “code edit”, but the format of the code is totally different. For a link in Dreamweaver with use the <a> tag to represent a link but in AS3 it is the following:

button_3.addEventListener(MouseEvent.CLICK, to_info);

function to_info(e:MouseEvent):void {

var url:String = "info.html";

var request:URLRequest = new URLRequest(url);

navigateToURL(request, '_self');

}

We have to set a name for the button in order to make it link with the action.

Before the action add and buttons create. Flash allows us to import Photoshop file. Therefore, I had used the lasso tool to cut the objects that I want interact and separate them in different layers then import it in Flash. Layers are automatically separate once import.

Then I have to convert the object that I cut out into a button. Once button create, go back to the scene then add the action. Save it and insert it into Dream weaver. Done!

Flash Gallery

I have created a flash gallery in my portfolio. You can say it is easy or not, but I found it was quiet simple. I can create a gallery either in Adobe Bridge,

in other software that will generate a flash gallery

or downloading example template from the internet then edit the html and xml files.

I chose downloading example template from the internet, because once told the xml file where my photos locate, it will appear in the gallery (the example html file). 

And then, I just need to copy the code from the example template and paste it in my html. 

If I paste these codes inside my div tag and change the height and width of the gallery. 

The gallery will  present where I want. I found this method will achieve what I want compare to Adobe Bridge.

Designing for specific content- Text, illustration, video & 3D

In today seminar, it was about text, illustration, and video for web. For example, how can we have quality illustrations for our web? Size file of illustrations? The size file and quality of video? What font type we use?

Illustrations

There are many different formats of images (JPEG, GIF, and PNG etc.) They are divided into two separate categories of compression: Lossless and Lossy.

Lossless- allows media to be represented without any loss in quality or information.

Lossy- may result in a loss of quality and information.

For web design, we usually save images as “save for the web” which can be done in Photoshop. I will save my images either in JPEG or PNG-8 or 24. JPEG is great for photographs displaying millions of colours at a very small file size. PNG-8 this works best to retain crisp detail in simple illustrations that less than 256 colours, good for web graphics containing text. PNG-24, although larger in file size, is a good choice that I don’t wish to lose any quality in photographs. And PNG is transparency that allows designer to designate the background of the image transparent. This means that if you place a transparent PNG in a blue table cell, the background color of that image will turn blue.

Video Compression

Nowadays, we use video H.264 as our video format, because H.264 is an industry standard for video compression. The H.264 standard offers substantial performance improvements over its predecessors. For example: A standard DVD can hold one two-hour movie compressed using the MPEG-2 (the popular standard for DVD movies) codec and four hours of movies using an H.264 codec.

The biggest advantage of H.264 over previous standards is its compression performance. Compared with standards such as MPEG-2 and MPEG-4, H.264 can deliver better image quality at the same compressed bitrate or a lower compressed bitrate for the same image quality.

Typography

After the seminar and read the article that present in the ilovetypography.com. I understood the importance of typography including contrast, size,  hierarchy and style.

Contrast

Size

A web designer must consider everybody, so the text must be set to the minimum of 12px. We have to think the size of the monitor e.g. from the ilovetypography.com it stated “65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook.”

Hierarchy

Varying type size is one of the best ways to differentiate content, but we can also use different styles; for example, all-caps, or using bold or italic for sub- headings.

Style

There are various types of font that I can be used in my website. And using different font is the best way to differentiate content. In my website, I only used one font for all area, because too many fonts mix together will make the user confuse. Generally, 2 fonts are sufficient in any design. The typeface that I decided to use is Tahoma, because this is a common available sans-serif font and it is an ideal font for presenting information on the screen.

During the seminar, some of my classmates have given some comments to Shaun that we are confusing what we supposed to do. Therefore, Shaun gave us a website template that allows us to mess around with it. For me, this is a very good practice that I can use the layout design and paste it on the template to see what will it like.

The following is what I had done during the seminar session. However, that is an error appears. The navigation bar was separated. I have looked through each section of the CSS. 

I realised that the position of the navigation ID, it was fixed. To solve this, I changed it to absolute. Now, when I scroll down the page, the navigation bar won’t separate.

After this practice, I have the basic concept of how to create a website. Once I have gathered all the information that I need I will start to create my website, hopefully I will finish it next week.