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:
require "connectdb.php";

$query='SELECT * FROM myguestbook order by id desc';
$result=mysql_query($query);

echo "\n";
echo "\n";
while($line=mysql_fetch_assoc($result))
{
echo "\n";
echo "".$line["name"]."\n";
echo "".$line["comment"]."\n";
echo "\n";
echo "
\n";
}
echo "
\n";

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.

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:


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

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:



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)

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.