Presentation2
View more presentations from Jack Tan.
FYP 2 - Remake of the video
This is the remake version of the teaser last time, to put in the home page of InfectionOfSmile.com.
-redraw most of the graphics, and added color to them
-changed background music and some sound effects
-changed the logo and the link behind
-redraw most of the graphics, and added color to them
-changed background music and some sound effects
-changed the logo and the link behind
FYP 2 - A2 Poster
This is my A2 poster design. I am using a earth that pop up tons of smiling face to show the results of "Infection of Smile", which is the world full of happiness.
FYP 2 - Progress
For the Home page, i successfully done the footer that taking random photos from the gallery. I am using Flash with the way that i mentioned last time, which is using php to get the photos data from MySQL database first and then echo into xml and then use flash to get the data from xml.
I also changed the width of layout to 1366px to support wider screen.
*After critique 3, Mr.KY suggested me to change the copywriting to make the project looks professional but not as a final year project. So I changed it.
For the Join page, I changed the webcam size to square as Mr.Hafiz suggested and added a logo of "Infection of Smile" at the right bottom of the photos as Mr.KY suggested.
and I also changed a bit the font and color.
For the Gallery page, I made the photos thumbnail size smaller and added border and users name to it. For now it doesn't have a pagination but I will add in when it needed.
For the Photo Details page, I also improve a bit the copywriting and added the users message with a big quote symbol.
I also changed the width of layout to 1366px to support wider screen.
*After critique 3, Mr.KY suggested me to change the copywriting to make the project looks professional but not as a final year project. So I changed it.
For the Join page, I changed the webcam size to square as Mr.Hafiz suggested and added a logo of "Infection of Smile" at the right bottom of the photos as Mr.KY suggested.
and I also changed a bit the font and color.
For the Gallery page, I made the photos thumbnail size smaller and added border and users name to it. For now it doesn't have a pagination but I will add in when it needed.
For the Photo Details page, I also improve a bit the copywriting and added the users message with a big quote symbol.
FYP 2 - Layout Improvement
Recently I changed my laptop and the screen are become LED screen, and the yellow color of my layout design become too bright in LED screen, so that I started to improve it.
This is the final outcome, I darker the yellow color and added texture to it, hope that it is not too bright now but still can bring out the cheerful feeling.
Here are some different version in the progress:
At last I choose to not use any shadow to keep the design in simple minimal style.
I am still improving all the design because I prefer to settle the scripting part first.
By the way, I had purchase a domain for this project to go live,
check it out at: www.InfectionOfSmile.com
This is the final outcome, I darker the yellow color and added texture to it, hope that it is not too bright now but still can bring out the cheerful feeling.
Here are some different version in the progress:
At last I choose to not use any shadow to keep the design in simple minimal style.
The HOME page:
The ABOUT page:
The JOIN page:
I am still improving all the design because I prefer to settle the scripting part first.
By the way, I had purchase a domain for this project to go live,
check it out at: www.InfectionOfSmile.com
FYP 2 - Programming Progress 3
After done the basic HTML layout and Flash function, I started to combine them and make the whole site dynamic with database.
First I convert all the html file to php file, created a config.php to connect to database and include in all the file.
Then I created a table called "photos" in phpmyadmin, used to store all the photos data submitted by users.
The structure for this table:
PhotoID - Unique ID for each photos, set as AUTO_INCREMENT
Name - The user's name
Description - The user's message
IsActive - To allow control for the data, which can set the photos that do not want to show as not active but no need to delete it, because maybe need it in future.
Created - The time that the data was created, using CURRENT_TIMESTAMP that can automatically use current time.
Then can started to try to insert data into the photos table.
I write the following script in the php file that integrate with the flash to create the jpg file:
When the file is accessed, the "INSERT" query insert dummy data into the photos table in the database. PhotoID as NULL because it can AUTO_INCREMENT and the main purposely is to let it generate a new id for the photos that going to save.
After insert the data, I used the "SELECT" query to get the data back to the php file, to use the PhotoID that just generated as the name for the .jpg image that going to save.
And it worked fine! So I can continue to the flash to create 2 input text for the users input.
And send the data to php file using "sendAndLoad" function in flash.
After that I get the data in php from the POST variables:
And use that variables to insert it into the database using the INSERT query justnow:
Then check the database, the data successfully inserted!
After that I need to get the data from database in the gallery page using the "SELECT" query.
and arrange the photos using css float properties so that it will arrange automatically.
First I convert all the html file to php file, created a config.php to connect to database and include in all the file.
Then I created a table called "photos" in phpmyadmin, used to store all the photos data submitted by users.
The structure for this table:
PhotoID - Unique ID for each photos, set as AUTO_INCREMENT
Name - The user's name
Description - The user's message
IsActive - To allow control for the data, which can set the photos that do not want to show as not active but no need to delete it, because maybe need it in future.
Created - The time that the data was created, using CURRENT_TIMESTAMP that can automatically use current time.
Then can started to try to insert data into the photos table.
I write the following script in the php file that integrate with the flash to create the jpg file:
When the file is accessed, the "INSERT" query insert dummy data into the photos table in the database. PhotoID as NULL because it can AUTO_INCREMENT and the main purposely is to let it generate a new id for the photos that going to save.
After insert the data, I used the "SELECT" query to get the data back to the php file, to use the PhotoID that just generated as the name for the .jpg image that going to save.
And it worked fine! So I can continue to the flash to create 2 input text for the users input.
And send the data to php file using "sendAndLoad" function in flash.
After that I get the data in php from the POST variables:
And use that variables to insert it into the database using the INSERT query justnow:
Then check the database, the data successfully inserted!
After that I need to get the data from database in the gallery page using the "SELECT" query.
and arrange the photos using css float properties so that it will arrange automatically.
FYP 2 - Programming Progress 2
After done the basic html, I started to working with the flash webcam function, which is the most complicated function in this project. The function required the integration between flash, php and mysql.
At first, I was searching related tutorial about capture image in flash and save as jpg but there are no much results for it. (Although using webcam in flash are quite common but wonder why there are no much tutorial for it, maybe is because save as jpg image require php knowledge)
Fortunately, I found some tutorial with source file provided:
- Access Webcam with Flash
- Captures images from the webcam and save them to the desktop
- Photo Booth – Flash Webcam Image Capture
Most of them are using AS3.0 but the "Access Webcam with Flash" tutorial by Kevin Musselman is using AS2.0 so I decided to refer to that because I am more familiar with AS2.0
The tutorial divided to many parts and explained each section of it, but some part are still quite hard to understand. The author was using script to create the button but I choose to create directly in flash stage.
To fully test the function, it required a server (I don't know how to call it) for the php file, so I installed XAMPP for apache localhost server. But I am having a big problem and stuck at there for a long time, the problem is no image are saved after clicked the save button. After keep on research and testing, I found out that was a stupid mistake. The author didn't provided the php file but provided the php code in his website, and I just copy paste it into my php file but forgot to put in the php tag ( < ?php ?> ), sure it won't work. After added the php tag, it worked!
After that, I started to add the "Free Transform" function that posted before into the flash.
Firstly I tried to put the object that can be transform directly on the stage in flash, but it can't be saved in the image. Then I tried to put it in the movieclip that hold the bitmap data when the image is captured, but it still didn't work.
After tired many way to fix this problem, I found a way to solve which is attach the movieclip dynamic into the movieclip that hold the bitmap data, and now it can be transform and save in the image.
At first, I was searching related tutorial about capture image in flash and save as jpg but there are no much results for it. (Although using webcam in flash are quite common but wonder why there are no much tutorial for it, maybe is because save as jpg image require php knowledge)
Fortunately, I found some tutorial with source file provided:
- Access Webcam with Flash
- Captures images from the webcam and save them to the desktop
- Photo Booth – Flash Webcam Image Capture
Most of them are using AS3.0 but the "Access Webcam with Flash" tutorial by Kevin Musselman is using AS2.0 so I decided to refer to that because I am more familiar with AS2.0
The tutorial divided to many parts and explained each section of it, but some part are still quite hard to understand. The author was using script to create the button but I choose to create directly in flash stage.
To fully test the function, it required a server (I don't know how to call it) for the php file, so I installed XAMPP for apache localhost server. But I am having a big problem and stuck at there for a long time, the problem is no image are saved after clicked the save button. After keep on research and testing, I found out that was a stupid mistake. The author didn't provided the php file but provided the php code in his website, and I just copy paste it into my php file but forgot to put in the php tag ( < ?php ?> ), sure it won't work. After added the php tag, it worked!
After that, I started to add the "Free Transform" function that posted before into the flash.
Firstly I tried to put the object that can be transform directly on the stage in flash, but it can't be saved in the image. Then I tried to put it in the movieclip that hold the bitmap data when the image is captured, but it still didn't work.
After tired many way to fix this problem, I found a way to solve which is attach the movieclip dynamic into the movieclip that hold the bitmap data, and now it can be transform and save in the image.
FYP 2 - Programming Progress 1
*I accidentally replaced this post with Programming Progress 2, so need to rewrite again :(
------
I decided to convert the layout designed previously to HTML first to see how it looks and feel, and may help to improve the design.
At first I plan to do in XHTML & CSS which is the trend lately, but I found that my layout are very simple, using table should be enough for it.
So I started to do slicing in Photoshop, just simply slide out the images because the layout details will adjust in HTML.
Then I started to working on the HTML in Crimson Editor, a good free source editor.
- added < body style="margin:0;"> to make everything align in the center of the browser, no matter in what resolution.
- set the font family as Verdana,san-serif and font size as 16px which is quite big if compared to other common website, but I think bigger font size is easier for users to read.
*Feel like quite hard to do the bottom part which is grab random photos from the gallery and arrange it like the planned design, due to the irregular placement. But will try to find and think of some way to solve this problem, if cannot make it maybe just arrange it nicely or do it manually in Photoshop.
For the photo details page, I decided to use Facebook social plugin such as the Like Button, Share Button and Comment system, to make the users more convenience because no need to register an account just for vote or comment.
To integrate the Facebook social plugin in website, it required us to create a Facebook App first to get the appId
Then just using the script provided in http://developers.facebook.com/docs/plugins/
For the Share Button, I choose to use plugin from http://www.addthis.com/ to support for more services like tweeter and email.
------
I decided to convert the layout designed previously to HTML first to see how it looks and feel, and may help to improve the design.
At first I plan to do in XHTML & CSS which is the trend lately, but I found that my layout are very simple, using table should be enough for it.
So I started to do slicing in Photoshop, just simply slide out the images because the layout details will adjust in HTML.
Then I started to working on the HTML in Crimson Editor, a good free source editor.
- added < body style="margin:0;"> to make everything align in the center of the browser, no matter in what resolution.
- set the font family as Verdana,san-serif and font size as 16px which is quite big if compared to other common website, but I think bigger font size is easier for users to read.
*Feel like quite hard to do the bottom part which is grab random photos from the gallery and arrange it like the planned design, due to the irregular placement. But will try to find and think of some way to solve this problem, if cannot make it maybe just arrange it nicely or do it manually in Photoshop.
For the photo details page, I decided to use Facebook social plugin such as the Like Button, Share Button and Comment system, to make the users more convenience because no need to register an account just for vote or comment.
To integrate the Facebook social plugin in website, it required us to create a Facebook App first to get the appId
Then just using the script provided in http://developers.facebook.com/docs/plugins/
For the Share Button, I choose to use plugin from http://www.addthis.com/ to support for more services like tweeter and email.
FYP 2 - Idea Development
I had search the internet and found some example for what I plan to do, which is the add graphics in the photo after taken it.
But it doesn't really looks funny right? and I think if it is really funny, that is not the feeling that i want for. I will prefer a simple and warm feeling instead of this kind of funny. So again I decided to back to simple, cancel the add graphic function. But, there are some replacement for it, which is add in some texts to it.
I think text can help to convey the message or feeling more clearly in supporting the photos. After some consideration, I decided to do this in a way that users can click a button and it will generate random quote in the photos. Because some users may not have the idea for the texts and I want to make the process as simple as possible, which can done easily.
But it doesn't really looks funny right? and I think if it is really funny, that is not the feeling that i want for. I will prefer a simple and warm feeling instead of this kind of funny. So again I decided to back to simple, cancel the add graphic function. But, there are some replacement for it, which is add in some texts to it.
Something like this：
I think text can help to convey the message or feeling more clearly in supporting the photos. After some consideration, I decided to do this in a way that users can click a button and it will generate random quote in the photos. Because some users may not have the idea for the texts and I want to make the process as simple as possible, which can done easily.
FYP 2 - Programming Research
Research about the integration between flash and mysql database, and found out the progress are as below:
When need to take data from mysql, we need to use php to get the data and put in a xml file, and then only flash can get the data.
When saving data from flash to mysql, it can directly send to php and insert into mysql table.
Below is the sample script for php to get data from mysql and generate a xml file to save the data:
Below is the sample script for php to fetch the data from flash and insert into mysql table:
Below is the sample script for flash to save and load the data from mysql.
When need to take data from mysql, we need to use php to get the data and put in a xml file, and then only flash can get the data.
When saving data from flash to mysql, it can directly send to php and insert into mysql table.
Below is the sample script for php to get data from mysql and generate a xml file to save the data:
require "connectdb.php";
$query='SELECT * FROM myguestbook order by id desc';
$result=mysql_query($query);
echo "\n";
echo "\n"; \n";
while($line=mysql_fetch_assoc($result))
{
echo "- \n";
\n";
echo "".$line["name"]." \n";
echo "".$line["comment"]." \n";
echo "\n";
echo "
}
echo "
mysql_close();
Below is the sample script for php to fetch the data from flash and insert into mysql table:
require "connectdb.php";
$name=$_POST['uname'];
$comment=$_POST['ucomment'];
$Today = date("Ymd,l,H:i");
$id=date("YmdHis");
$str_sql="INSERT INTO myguestbook (name,comment,time,id) VALUES ('$name','$comment','$Today','$id');";
if(mysql_query($str_sql))
{
$info= "Save data success!";
}
else
{
$info= "Save data failure!";
}
mysql_close();
echo "&backinfo=".$info."&";
Below is the sample script for flash to save and load the data from mysql.
stop();
var canSend_boo:Boolean=false;
function checkText()
{
if(trim(_nameTi.text)=="")
{
mx.controls.Alert.show("Name is empty£¡");
}else if(trim(_commentTa.text)=="")
{
mx.controls.Alert.show("Message is empty£¡");
}else
{
canSend=true;
}
}
function trim(s:String):String
{
var new_str:String;
new_str=s.split(" ").join("");
new_str=new_str.split("¡¡").join("");
return new_str;
}
state_var="";
var myXML:XML=new XML();
myXML.ignoreWhite=true;
myXML.onLoad=function (success)
{
if (success)
{
loadData();
state_var+="Load XML success.\n";
}
else
{
_outTa.text="Load Data Failed¡£";
}
}
myXML.load("datatoxml.php?n="+random(9999));
function loadData()
{
_outTa.text="";
var nodes=myXML.firstChild.childNodes;
_numLbl.text="Message"+nodes.length+;
for(i=0;i<"nodes.length";i++) ()="" (cansend)senddata();="" (success)="" );="" +="Failed to Load\n" ;="" _commentta.text="" _outta.text="_outTa.text+"Name£ยบ"+nodes[i].childNodes[0].childNodes+"\n";" _savebtn.onrelease="function" checktext();="" data_lv.onload="function(success)" data_lv.sendandload(="" data_lv.ucomment="trim(_commentTa.text);" data_lv.uname="trim(_nameTi.text);" data_lv:loadvars="new" datatosql.php?n="+random(9999), data_lv, " datatoxml.php?n="+random(9999)); _nameTi.text=" else="" function="" if="" loaddata();="" loadvars();="" myxml.load(="" post="" senddata()="" state_var+="Send data......\n" state_var="" var="" {="" };="" }="">
FYP 2 - Layout Design
After the failed on the previous idea, I started to think from beginning, what is the feel that my project give to people, what design style should I use for the layout etc. I also asked friends opinions to understand from other perspective.
Then I recall back the most simple concept I had when the starting of this project which is just to share happiness. Finally I decided to use minimal swiss design style to make the layout as simple as possible but carry out happiness feeling to users. After that I keep on research and finding references in this direction, and found out using warm color is a good way to bring out cheerful and energetic feeling in a design. Then i decided to use yellow color as the main color for the layout and directly experimentally to design the layout in photoshop because I feel that sketching are hard to testing with color and feeling.
Minimal header design, short introduction and a introduction video. The photos below are planned for random photos from the gallery that will change every time refresh the browser (for now I just used images downloaded from internet to see the effect)
The design are compatible with different screen resolution such as wide screen 1280x800 or standard screen 1024x768, as both of the resolution having great amount of users.
This layout will be use for other pages also, with adjustment depends on the page content.
Then I recall back the most simple concept I had when the starting of this project which is just to share happiness. Finally I decided to use minimal swiss design style to make the layout as simple as possible but carry out happiness feeling to users. After that I keep on research and finding references in this direction, and found out using warm color is a good way to bring out cheerful and energetic feeling in a design. Then i decided to use yellow color as the main color for the layout and directly experimentally to design the layout in photoshop because I feel that sketching are hard to testing with color and feeling.
So this is the outcome:
Minimal header design, short introduction and a introduction video. The photos below are planned for random photos from the gallery that will change every time refresh the browser (for now I just used images downloaded from internet to see the effect)
The design are compatible with different screen resolution such as wide screen 1280x800 or standard screen 1024x768, as both of the resolution having great amount of users.
This layout will be use for other pages also, with adjustment depends on the page content.
FYP 2 - Failed Layout Sketches
Below are some of the sketches for layout design. But after consideration, I feel that it is not good enough and cannot bring out the feeling that I want. But I still post it here as the record of the progress.
The main concept is to create a realistic environment and combine with interaction. As the main objects in this project is smiling photos, so i decided to create a top view layout, and simulated that everything are put on table, such as the example below:
The main concept is to create a realistic environment and combine with interaction. As the main objects in this project is smiling photos, so i decided to create a top view layout, and simulated that everything are put on table, such as the example below:
Okay here are the sketches:
Home page planned for short intro in text and video. Some random photos saved in the gallery will be show beside, users can move the photos around by mouse to see the photos below.
About page is the introduction written on papers.
Gallery page is putting all the saved photos in a photo album, users can flip it like a real book.
The Join page planned to make the photo taking function has a visual of a real camera.
FYP 2 - Research on transform function
Research on the part of "adding graphics to the photos after taking it", and found transform function for it. The transform function can move, scale and rotate movie clip.
Demo: (click on the blue box to activate the transform option)
The script grab from: http://proto.layer51.com/d.aspx?f=636
Demo: (click on the blue box to activate the transform option)
The script grab from: http://proto.layer51.com/d.aspx?f=636
FYP 2 - Page Structure Planning
In FYP 1, I had been thinking the site need to be done by:
Flash - for the webcam capture image & add effects functions
mysql - to create a database that can save users captured images
php - to integrate with database and create functions such as users comment system
But I am not sure about, is to create a full flash site and include php/html function in it, or to create a php site and embed the flash on the page that need the functions.
After some research, I found that Flash has very limited support to html code, so I can only use the second way which is embed the flash in php pages.
But I feel like if the whole site is using php and only embed the flash in the "Join" page which has webcam funtion, it will be lack of the advantages of flash layout, such as button roll over effect and other motion things. So I plan to divide the page into few parts, some parts embed flash such as top navigation menu and some parts using php such as users comment.
The following picture show the division of site into flash and html:
Flash - for the webcam capture image & add effects functions
mysql - to create a database that can save users captured images
php - to integrate with database and create functions such as users comment system
But I am not sure about, is to create a full flash site and include php/html function in it, or to create a php site and embed the flash on the page that need the functions.
After some research, I found that Flash has very limited support to html code, so I can only use the second way which is embed the flash in php pages.
But I feel like if the whole site is using php and only embed the flash in the "Join" page which has webcam funtion, it will be lack of the advantages of flash layout, such as button roll over effect and other motion things. So I plan to divide the page into few parts, some parts embed flash such as top navigation menu and some parts using php such as users comment.
The following picture show the division of site into flash and html:
FYP 2 - About Page Content
For FYP 2, the Floor Plan, Flowchart and Storyboard remain the same as last time planned, no big adjustment to it.
Then I decided to create texts content first, but found out there is only "About" page need it for people to understand about this project.
So this is the draft content for the About page: (may make changes later on)
First explain the basic concept of "Infection of smile" and then introduce about what is the project about and using "call to action" to invite people to join the flashmob of changing their social media profile picture to the smiling photo that taken on the site.
Then I decided to create texts content first, but found out there is only "About" page need it for people to understand about this project.
So this is the draft content for the About page: (may make changes later on)
Welcome to “Infection of Smile”, this is a final year project for my education. My name is Tan Jaw Yuh, a student of Multimedia University and major in Media Art.
What is “Infection of Smile”?
"Smiling is infectious, you catch it like the flu. When someone smiled at me today, I started smiling too."
Smiling is indeed important in our everyday life, both in our personal lives as well as within the workplace. There is the saying "Smile and the whole world smiles with you." Well, sayings like this are actually grounded in fact. When you smile, it does tend to trigger off smiles in others around you. Even in extremely stressful situations, a smile can easily brighten up everybody's mood.
The value of a smile is priceless. It can't be bought, begged or borrowed. It costs nothing to give, but is the most sincere gift that one might be able to give to another. A smile brings rest to the weary, and is the best antidote for discouragement. It brings sunshine to the sad and hope to the hopeless.
What is this project about?
The goal and aim for this project is to encourage people to smile more and share their smile to others. The basic concept is to create a happiness environment on cyberspace which is full of “smile”. This application allowed you to take a photo of your smile, and customize it in your way, and then send to your friends and family to “infect” the smile to them.
Other than that, there is a “flashmob” on cyberspace for this project. After taken the photo of your smile, please use it as your profile picture of Facebook or other social networking sites, to share your smile and try to influence others to do the same and make the cyberspace full of smiling faces
So what are you waiting for? Start to share your smile now!
If you have any suggestion or comment for this project, please contact me at: zzzjjack@gmail.com
First explain the basic concept of "Infection of smile" and then introduce about what is the project about and using "call to action" to invite people to join the flashmob of changing their social media profile picture to the smiling photo that taken on the site.
FYP 2 - Finalized Proposal
RESEARCH TOPIC
Infection of Smile
BACKGROUND
"Smiling is infectious, you catch it like the flu. When someone smiled at me today, I started smiling too." by Karen McLendon-Laumann
Smiling is indeed important in our everyday life, both in our personal lives as well as within the workplace. There is the saying "Smile and the whole world smiles with you." Well, sayings like this are actually grounded in fact. When you smile, it does tend to trigger off smiles in others around you. Even in extremely stressful situations, a smile can easily brighten up everybody's mood.
The value of a smile is priceless. It can't be bought, begged or borrowed.
It costs nothing to give, but is the most sincere gift that one might be able to give to another. A smile brings rest to the weary, and is the best antidote for discouragement. It brings sunshine to the sad and hope to the hopeless.
PROBLEM IDENTIFICATION
Nowadays people are facing a lots of stress and unhappy things in life and most of them can't be avoid. Everyday I see my Facebook full of complaint from everyone, complaint about their friends, complaint about their life etc. But what if there are full of happy things, everyone is sharing their happy experience instead of complaining, I think in that way will make everyone more happy. So I think we might need a media/platform/places for us to share our happiness only, such as our smiling photos.
AIM AND OBJECTIVES
- to encourage people to smile more and share their smile to others.
MOTIVATION
Those complaint at facebook always make me think of what happened in this world, is the world really so unhappy? So I am thinking to share happiness to others and gain happiness from others also.
IDEATION AND CONCEPT
The basic idea is to create an online application and platform that let people share their happiness and infect to others. Through the application, people can take pictures of they smiling and it will saved in database and other users can browse through gallery of smile and gain some happiness from there. Beside that, users will be encourage to send their smile to they friend and family to “infect” the smile to them.
Other than that, there is a “flashmob” on cyberspace for this project. After taken the photo of the smile, the users will be encourage to use it as their profile picture of Facebook or other social networking sites, to share their smile and try to influence others to do the same and make the cyberspace full of smiling faces :)
REVIEW, ANALYSIS AND PRECEDENCE STUDIES
A smile is a facial expression formed by flexing the muscles near both ends of the mouth. The smile can also be found around the eyes (See 'Duchenne smile' below). Among humans, it is customarily an expression denoting pleasure, happiness, or amusement, but can also be an involuntary expression of anxiety, in which case it is known as a grimace. Cross-cultural studies have shown that smiling is a means of communicating emotions throughout the world. But there are large difference between different cultures. A smile can be spontaneous or artificial (when people feel obliged to smile). Happiness is most often the motivating cause of a smile. Among animals, the exposure of teeth, which may bear a resemblance to a smile, is often used as a threat or warning display—known as a snarl—or a sign of submission. In chimpanzees, it can also be a sign of fear. The study of smiles is a part of gelotology, psychology, and linguistics, comprising various theories of affect, humor, and laughter.
DESIGN APPROACH
An online platform that having a minimal swiss design style to make the focus point on the smile photos.
Promotional Teaser
The teaser created using simple black and white style, briefly introducing the effect of "Infection of smile".
Final Synopsis
The A3 poster created using comic style to show "Infection of Smile", one people smile can make another people smile and finally make all people around smile.
The "boxes" of comic represent the "square" of a photo also, which the application is about taking smiling photos and share to others.
Conceptual Diagram
Content Acquisition
Infection of smile is about one simple smile can trigger the smiles of other people around. "When someone smiled at me today, I started smiling too." Smile is very important in our life, it can make people happy, encourage other people, bring hope to the hopeless person. Nowadays people are facing a lots of stress and unhappy things in life and most of them can't be avoid, smiling face are decreasing now. In cyberspace, social media platform such as Facebook are full of complains and unhappy things instead of smiling. The goal and aim for this project are to encourage people to smile more and "infect" the smile and happiness to the people around them.
Content Development
After a lots of brainstorming and precedence studies for ideas, I think it is time to combine all the ideas and decide what to do for the final output.
The main concept for this project is about influence smiles to others and give cyberspace a happiness tone. I think this is more to a experimental based project, experiment the "infection of smile" that happened real life (when a person smile, it can trigger the smile of another person), by moving it to cyberspace and achieve it using new media. If this could achieve, I believe it will create bigger effect on cyberspace rather than real life that maybe will just influence the smiles within a room, due to the characteristics/advantages of new media.
The final output should be a website that can really access online, targeting all country of people. The website should be done by flash, mysql database and php, for function such as webcam taking photos, gallery, leave comments etc. I had some sketches of the basic layout to help me in finalizing ideas:
I think I need to come out with a better title or maybe a logo for the website, and a tagline also, a good tagline can make things better. For now i come up with 4 main pages which is Home, About, Gallery and Join. For the Home page, it is something like gallery, showing a lots of smiling photos with different size, so that people can directly get the feeling and some thought when they landed on the website. Beside the photos will be some basic introduction of the whole things. Maybe the photos part can replaced with a video of introduction, or making a splash page before the Home page, show some animation for introduction.
Gallery page showed all the smiling photos, 3 top rated photos with bigger size placed on top to encourage people to share their "smile" and influence to more people. Click a photos in gallery will then go to photo details page as shown below.
Photo details page will show the original size of the photos and some description beside it. Also a "like" button and a "share" button for people to share the "smile" to more places such as facebook, myspace etc. The "like" button may change to "This made me smile" button, when the user saw the photos and smile, and click the button, it will trigger the webcam to take a photos, so that may get a photos that the user are truly smiling after saw other people "smiles".(but need to solve a problem which is the notification before access the webcam)
At the bottom is the comments, which can make the whole site more lively and interactive.
Join page is for people to taking their smile photos and join this "activity". People can directly access webcam and taking photos, after that they can choose to add effects to the photos or skip next stage which is save the picture into gallery for view. Add effects can let people show their creativity and make their photos more funny, included 2 kind of function. One is add in prepared graphics in the photos, another one is pencil tool for free writing and drawing. (If can make it, if not will put only 1 function)
Write out the flow for a clear mind of the actual things: (sorry for bad handwriting)
For the about page, I plan to introduce the basic concept, the goal and aim of this project, for people to have more understanding in order to encourage them to participate. Besides the basic part, I would like to encourage people to use the picture of "smile" which they taken in the website as their facebook or other social media's display picture. This will be a "flashmob" on cyberspace, which change their profile display picture to a smiling picture, and influence others to do this also, in purpose to make the cyberspace full of happiness. For this, I think need to come out with a sentences that can let people copy and paste in their status, included the link to this project website. For example, few weeks ago Facebook had a "campaign" that asking people to change their display picture to their favourite cartoon character in childhood and given a period to it (a weeks or so). The Facebook message: "Change your FB picture to a cartoon from your childhood. The goal is not to see a human face on FB until Monday (Dec 6th) Join the fight against child abuse & copy and paste to your status!". Their facebook page had 96,514 people liked about it now.
The main concept for this project is about influence smiles to others and give cyberspace a happiness tone. I think this is more to a experimental based project, experiment the "infection of smile" that happened real life (when a person smile, it can trigger the smile of another person), by moving it to cyberspace and achieve it using new media. If this could achieve, I believe it will create bigger effect on cyberspace rather than real life that maybe will just influence the smiles within a room, due to the characteristics/advantages of new media.
The final output should be a website that can really access online, targeting all country of people. The website should be done by flash, mysql database and php, for function such as webcam taking photos, gallery, leave comments etc. I had some sketches of the basic layout to help me in finalizing ideas:
I think I need to come out with a better title or maybe a logo for the website, and a tagline also, a good tagline can make things better. For now i come up with 4 main pages which is Home, About, Gallery and Join. For the Home page, it is something like gallery, showing a lots of smiling photos with different size, so that people can directly get the feeling and some thought when they landed on the website. Beside the photos will be some basic introduction of the whole things. Maybe the photos part can replaced with a video of introduction, or making a splash page before the Home page, show some animation for introduction.
Gallery page showed all the smiling photos, 3 top rated photos with bigger size placed on top to encourage people to share their "smile" and influence to more people. Click a photos in gallery will then go to photo details page as shown below.
Photo details page will show the original size of the photos and some description beside it. Also a "like" button and a "share" button for people to share the "smile" to more places such as facebook, myspace etc. The "like" button may change to "This made me smile" button, when the user saw the photos and smile, and click the button, it will trigger the webcam to take a photos, so that may get a photos that the user are truly smiling after saw other people "smiles".(but need to solve a problem which is the notification before access the webcam)
At the bottom is the comments, which can make the whole site more lively and interactive.
Join page is for people to taking their smile photos and join this "activity". People can directly access webcam and taking photos, after that they can choose to add effects to the photos or skip next stage which is save the picture into gallery for view. Add effects can let people show their creativity and make their photos more funny, included 2 kind of function. One is add in prepared graphics in the photos, another one is pencil tool for free writing and drawing. (If can make it, if not will put only 1 function)
Write out the flow for a clear mind of the actual things: (sorry for bad handwriting)
For the about page, I plan to introduce the basic concept, the goal and aim of this project, for people to have more understanding in order to encourage them to participate. Besides the basic part, I would like to encourage people to use the picture of "smile" which they taken in the website as their facebook or other social media's display picture. This will be a "flashmob" on cyberspace, which change their profile display picture to a smiling picture, and influence others to do this also, in purpose to make the cyberspace full of happiness. For this, I think need to come out with a sentences that can let people copy and paste in their status, included the link to this project website. For example, few weeks ago Facebook had a "campaign" that asking people to change their display picture to their favourite cartoon character in childhood and given a period to it (a weeks or so). The Facebook message: "Change your FB picture to a cartoon from your childhood. The goal is not to see a human face on FB until Monday (Dec 6th) Join the fight against child abuse & copy and paste to your status!". Their facebook page had 96,514 people liked about it now.
