Final Project Proposal

Final Project Proposal
MM3301 - Interaction Design for Entertainment
Yu-Syuan Lin

For my final project I have decided to create a Flash website advertising people go to travel in Taiwan. I want to introduce Taiwan to people who don’t know this small island and never think and expect to have special experience then you travel to other Asian district. You will see Taiwanese fashion, high technology industries, big shopping center, and very convenient life style with quality in this small island.

Although Taiwan is only an island, actually can meet each person's different need. From the busy metropolis to explore the secluded mountain walk, stimulates exploration movement to relaxes mind’s hot spring, you may unrestrained to visit entire Taiwan from North to South during your 1 week vacation. You also may experience the marvellous feeling which the traditional Taiwanese / Chinese culture and the high technology life style. While you enjoy the natural forest between pleasurable mind and body, you may choose to stay with nature scenery perhaps return to the comfortable high-quality hotel. You will also enjoy the sea spray in South Taiwan – Kenting and the sunlight, visits the famous scenic spots, view and admire the Taiwanese ancient treasure from Taipei National Palace Museum. You will remember your happy time in this small island – Taiwan.


Goals and Objectives

• Make a travel information site that is easy for user to get most important information – such as useful phone number, famous spot.

• Most people are looking for information so making the site simple and clean.

• Video commercial about Taiwan is very attractive to catch user’s eyes and make them wanted to visit Taiwan immediately.

• This site will create by Flash. Navigation will be place in the top of website in horizontal. Basically, navigation is the text buttons, but I might put a small icon with each text button.
  

There will have a

• Several Video commercial to introduce Taiwan (from other website)

• Taiwan Map – when your mouse click each city will show famous spots information and images

• Night life (Night Market) – introduce the Taiwanese cuisine or restaurants

• Chinese language Cheat Sheet (simple sentence – ex: How are you?) - mouse rollover the text to hear Chinese pronunciation

• Picture gallery

• Traveling information

• A short history about Taiwan
  

Target audience
Age : 21- 55
Sex: Female or Male
Position: student, family, or retired people who are interested about Asian culture, Asian food, Asian life style and Taiwan.

Resource:
http://taiwan.net.tw

http://tiscsvr.tbroc.gov.tw/en/index.htm

http://wikitravel.org/en/Taiwan

http://www.yfps.tpc.edu.tw/Country/%A5x%C6W%A6a%B9%CF.jpg

http://commons.wikimedia.org/wiki/Image:Taiwan_Rauhe_Street_Night_Market.JPG

http://aes.iupui.edu/rwise/countries/taiwan.html

http://www.goto-taiwan.net/eng_2006/default.aspx

Style Guide

Style Guide
Create a simple clean website
Most are text basic with images
Flash buttons
Interactive map (if I have time)
Clean legible text
Simple layout

Color
Background: white
Text background: light orange, light blue, grey, light pink
Fonts
Verdana, Trajan

mock-ups

User Persona

User Persona

Name: Michael Turton

Age: 41

Occupation: English Teacher

Hobby: Reads, views, or accesses high-quality media like CNN, BBC, New York Times in his daily life. He is also interested in most 3C products in electronic consuming market. Besides personal computer, he uses PDA, GPS, Bluetooth earphone and digital camera. Another interesting is travel in Asia, because the Eastern culture is very different to Western culture.

Gender: Male

Computing and Web experience: Moderate

Bio: Michael just graduate from San Jose University and he study English as his major because he wanted to become an ESL teacher. His Taiwanese girl friend is going back to Taiwan, and she also asked him if he want to teach English in Taipei, Taiwan and it is also a good chance to know her hometown and learn Asian culture. So, Michael is going to teach English in Taipei, Taiwan with his girl friend. Actually, he is very interested about Asian cultural but he don’t know too much about Taiwan, he also plans to visit most famous spot in Taiwan.

Goals: Promote a travel information website to introduce Taiwan to people who is going to travel in Taiwan. Provided the most important information such as how to get the visa, before you go, useful phone number, famous spot, Taiwan map…etc.

References:
Web User Profile - User Persona
http://www.gdoss.com/web_info/web-user-profile.php

Week 10 - still working on final project

There are still lots of work to do for my final project – Taiwan travel information website.

I won’t make it too complicated but still having fun and gathering information.

I am thinking to put an interactive Taiwan map – but I am worry I may run out of time to do it.

Next Thursday I will flight back to my hometown – Taipei, Taiwan.

I am very excited to meet my friends and my family over there.

Week 10 - scrolling dynamic text example

I found an example of how to using dynamic text with picture from Internet, so you don’t have to call external xml files.

Step 1 – Create a symbol and double click the symbol to put Actionscript

Step 2 – Name the layer “Action” and put those ActionScript in frame 1,2,3

Frame 1 -
ifFrameLoaded(3){
gotoAndStop(3)
}

Frame 2-
gotoAndPlay(1);

Frame 3 –
stop();

Step 3 – Name layer 2 “Menu” and then make another symbol and double click the symbol to put dynamic text and stroller

First layer name “ Actions” and the SctionScript is

hdrName = "Scrolling Text";
// Script engine - Do not modify
boundry_mc._x = txt_mc._x-10;
boundry_mc._y = txt_mc._y;
boundry_mc._width = txt_mc._width+20;
boundry_mc._height = scrollBar._height;
txt_mc.setMask(boundry_mc);
scrollBttn.originY = scrollBttn._y;
scrollBttn.originX = scrollBttn._x;
scrollBttn.maxY = scrollBar._height-scrollBttn._height+scrollBttn.originY-2;
txt_mc.originY = txt_mc._y;
onEnterFrame = function () {
ratio = (txt_mc._height+15-scrollBar._height)/(scrollBar._height-scrollBttn._height);
if (txt_mc._height+15>scrollBar._height) {
destScroll = ((-scrollBttn._y+txt_mc.originY)*ratio)+txt_mc.originY;
txt_mc._y += Math.round((destScroll-txt_mc._y)/5);
}
};



Second layer name “TextClip”, here is where you have dynamic text (instance name: text_mc) and picture

Third layer name ” Scroll Bar”, here you create a track (instance name: text scrollbar_mc) and drag (instance name: text scrollBttn)

Forth layer name “Mask”, make a big white rectangle and put it to cover the dynamic text (instance name: boundry_mc)

You have to match your mask color as same as your background color.

Last step – test movie or test scene.

Week 9 - Making the ultimate dynamic image gallery in Flash 8

This is a very clear and complete tutorial to teach how to make a dynamic image gallery and I can use it to make one for my gallery page.


http://www.lukamaras.com/tutorials/actionscript/ultimate-dynamic-image-gallery.html

Week 9 - Insert image via xml into Flash

Week 9
Sharon helps me to figure out how to put image with dynamic text when you scroll them together.

Insert image via xml into Flash
http://www.actionscript.org/resources/articles/122/1/Loading-Images-Via-XML-into-Flash-MX-2004/Page1.html

I am still not very clear about this article.
I need some actual example to help me to figure out and make one for my own.

Week 8 - advertisement film

This is one of official site of travel information of Taiwan.
I found more videos and some of them are advertisement film in English.
so please take some time and watch it!! ^<^

http://eng.taiwan.net.tw/lan/Cht/movie/index_new.asp?sel=12#

Week 8 - Taiwan Fun

I am still looking for information and resource that I can use on my project.
This site is great resource and it already translate in English, so I can use it in my Taiwanese cuisine page.

http://www.taiwanfun.com/north/taipei/index.htm

Week 7 - final mock-ups

I like the one that without orange background on the text, because this one is more simple and clean style.

I also use the shape of Taiwan to make it as a drag to scroll the dynamic text.

but I am not sure how to put picture with the dynamic text. >,,<

Week 7 - 3 final project mock-ups

Final Project proposal with a Taiwan Song Video

Week 6 –Final Project proposal

For my final project I have decided to create an interactive website advertising people go to travel in Taiwan.

Taiwan still bears the stamp of Chinese culture. Its cuisine, music and practice of Chinese medicine reveal just how closely Taiwan's culture is tied to that of China's. Taipei, the megalopolis at the island's northern tip, has that distinctive mixture of tradition and economic boom that characterizes so many of the Far East's big cities. Smart travellers get away from Taipei and venture into the eastern reaches of Taiwan, where the mountainous landscape has rendered it an impossible area for development. Here, there are some beautiful, unadulterated wildlife areas offering up a striking contrast to the toxic air of Taipei.

There will have a

• Several Video commercial to introduce Taiwan (from other website)

• Taiwan Map – when your mouse click each city will show famous spots information and images

• Night life (Night Market) – introduce the Taiwanese cuisine or restaurants

• Chinese language Cheat Sheet (simple sentence – ex: How are you?) - mouse rollover the text to hear Chinese pronunciation

• Picture gallery

• Traveling information

• A short history about Taiwan

Target audience



Age : 21- 55



Sex: Female or Male



Position: student, family, or retired people who are interested about Asian culture, Asian food, Asian life style and Taiwan.

Resource
http://taiwan.net.tw



http://tiscsvr.tbroc.gov.tw/en/index.htm

http://wikitravel.org/en/Taiwan

http://www.yfps.tpc.edu.tw/Country/%A5x%C6W%A6a%B9%CF.jpg

http://commons.wikimedia.org/wiki/Image:Taiwan_Rauhe_Street_Night_Market.JPG



http://aes.iupui.edu/rwise/countries/taiwan.html



http://www.idea-taiwan.com



http://www.goto-taiwan.net/cht
 


http://travel.network.com.tw/main/travel

Week 6 - Final Project idea

Week 6 - My final project will be a site to introduce people to travel in Taiwan. I think Taiwan is one of best country to travel in Asia. Taiwan is my hometown and I want to introduce it to class.

Demonstrate a mastery of media integration

To demonstrate a mastery of media integration

Actually I have a hard time to get the idea of this homework.
I am not sure how to make .swf to call up the JavaScript… etc.

Flash transition

This is the component that I use to create the flash transition
http://www.jumpeyecomponents.com/Flash-Components/Skins-and-Patterns/MCTE-V3-Square-Pack-48/

You also can make some change in the ActionScript, like alpha, speed and how many pictures.

Here is my example: http://yl372.aisites.com/mm3301/MM3301_wk3.html

import mx.transitions.Tween;

stop();

btnPlay._alpha = 50;

btnPlay.onRollOver = function()
{
btnPlay.oTween = new Tween(btnPlay, "_alpha",Strong.easeOut, 50, 100, 15, false);
}

btnPlay.onRollOut = function()
{
if(btnPlay._alpha > 50)
{
btnPlay.oTween = new Tween(btnPlay, "_alpha", Strong.easeOut, 100, 50, 15, false);
}
}

btnPlay.onRelease = function()
{
var counter:Number = 0;
var btnPlayRollOut:Function = btnPlay.onRollOut;
var btnPlayRollOver:Function = btnPlay.onRollOver;

btnPlay.oTween = new Tween(btnPlay, "_alpha",Strong.easeOut, 100, 0, 10, false);

btnPlay.onRollOut = function()
{}

btnPlay.onRollOver = function()
{}

btnPlay.oTween.onMotionFinished = function()
{
var listener:Object = new Object();

mcte._targetInstanceName = "mc1";
mcte.transitionEffect("show");

mcte.addEventListener("onTransitionEnd", listener);
listener.onTransitionEnd = function()
{
mcte.removeEffect();
btnPlay.swapDepths(mcBcg);
btnPlay.oTween = new Tween(btnPlay, "_alpha" ,Strong.easeOut, 0, 50, 30, false);
mcte.removeEventListener("onTransitionEnd", listener);

btnPlay.oTween.onMotionFinished = function()
{
btnPlay.onRollOver = btnPlayRollOver;
btnPlay.onRollOut = btnPlayRollOut;
}
}
}
}

Developing the transition

Developing the transition

Transition is really help to make your website have the vitality.
This website offer different flash transition components.
You can download one to try it out, but the demo version is only working on the flash debug movie.

http://www.jumpeyecomponents.com/

I think this is an efficient way to improve the website. Some of transition is hard to make by your own at lease you know ActionScript very well.

ActionScript for photo website

This is the action script for the photo flash website

http://yl372.aisites.com/mm3301/MM3301_wk2.html

(Developing a compelling navigation/sequencing concept)
However, you have to figure out the x and y location for each photo


background_mc.targetX = background_mc._x;
background_mc.targetY = background_mc._y;
background_mc.onEnterFrame = function() {
this._x -= ( this._x - this.targetX ) * .23;
this._y -= ( this._y - this.targetY ) * .23;
};

background_mc.set_target = function( newX, newY ) {
this.targetX = newX;
this.targetY = newY;
};

b_0.onRelease = function() {
background_mc.set_target( -550, -500 );
};

b_1.onRelease = function() {
background_mc.set_target( 1200, 1550 );
};

b_2.onRelease = function() {
background_mc.set_target( -650, 1000 );
};

b_3.onRelease = function() {
background_mc.set_target( 1650, -550 );
};

b_4.onRelease = function() {
background_mc.set_target( 500, 400 );
};

Developing a compelling navigation/sequencing concept

Developing a compelling navigation/sequencing concept

I want to create a picture board, so I make 5 buttons.
When you click each bottom, it will move to the next picture.
Picture is coming from different side to the middle.
I think this is fun.

Identifying Modes of Online Entertainment

Week 2
We have to identify the modes of online entertainment website.
Band Website - http://www.bandofhorses.com/
Movie Website - http://www.panslabyrinth.com/
Short Entertainment - http://www.movieola.ca/
Cross-Media Promotion - http://www.cartoonnetwork.com/
MMOG (Massively Multi-Player Online Game) - http://www.eve-online.com/
Advergame - http://www.mms.com/us/fungames/games/
Webisodic - http://media.movies.ign.com/media/490/490104/vids_2.html
Blog orVlog - http://www.im.tv/vlog/
Interactive Portfolio Website - http://ichibod.com/

Advergame website

I love this Advergame website and it really promote it’s product and logo characters.
http://www.kelloggs.com/hollowtree4kids/