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.
