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.

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:

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 "".$line["time"]."\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.