The brightness editing

After keep Google-ing for the tutorial of making my editing page, i ended up with the tutorial on how to change the brightness of the picture.

Am trying to follow the tutorial given and this is the outcome :

Just move the slider to change the brightness

This is also ActionScript 3.0

*Sorry Cik Sal for using your photo again :P*

Creating FB apps

I have tried to experiment with the step of creating FB apps. I am using an application called "Create My Apps" which I found on Facebook. This apps is only applicable for those who want to create a simple game based on template given.

And this is the steps :

1. Click "Go To Application" to go to application page

The interface of Create My App's page.

2. Allow application to access your account

Request for permissions interface

3. Choose the category of your application - either quizzes, mini games, etc

The choices of categories

4. I have chose mini games category. So, I need to fill the information about my mini game.

The basic information form

5. If you click on search icons, it will automatically search for icons according to your application name using Google images.

The result of search

6. The application then will ask for ur permission to integrate with Facebook.

Permission to integrate

7. You need to enter Application Secret as authentication for your application.

Your application secret has been provided in the red box

8. If u have entered the wrong Application Secret, they will tell you that u have invalid OAuth 2.0 Access Token

Error Page

OAuth 2.0 is stands for open standard of authorization. It is a protocol that provides a method for making authenticated HTTP requests using a token - an identifier used to denote an access grant with specific scope, duration, and other attributes. Tokens are issued to third-party clients by an authorization server with the approval of the resource owner. OAuth defines multiple flows for obtaining a token to support a wide range of client types and user experience.

9. After you are done with authentication, you need to save the details of your application.

Check it before save

10. After you save it, your details of application will be showed. You may check it and edit it later.

Basic information

11. You need to invite your friends to use your application. You can choose to invite your friend from the list provided.

List of your friends

12. You then need to reconfirm your invitation list before sending it to your friends.

Invitation conformation

13. Your friends then will accept your request to ask them to use your application

Application request

14. They need to allow the application to access their account

Request for permission

15. After everything is done, they can start to play your game.

mini game from the templates

So, this is my first attempt of creating a Facebook apps. I will try to do a harder one later. I have visited http://developers.facebook.com and found out that they are providing Facebook PHP SDK in order to help the developer to develop their own apps.

p/s i already download the SDK and now in process of understanding on how to use it :)

Save and Load

I am trying to make the image captured to be able to save n load for editing. It will somehow looks like this.

So, after trying few tutorial on net, i am able to save the picture. To load it back, i might need web server. I think Apache web server will be appropriate to solve this problem.

And this is the example of what I have tried to do..

the screen capture of my trial..

left : live cam

right : saved image

the saved image will be save in index.php..in order to make it working properly, i need to install the server.

Adding Effect

By using ActionScript 3.0, i might be able to add effect on the webcam as the effect of Mac's photobooth. The example of the effect are available here.

This is the example on how i will creating effect on my project..

Step 1 :

Create an .fla file

Step 2 :

Create an ActionSript file, rename as same as .fla file. In the script area, copy this script.

basic/root scripting

Step 3 :

creating the ActionScript file for media, webcam and the effects.

Step 4 :

Run your application

Example of mine

Storyboard

Due to some changes in my idea, i have done a new storyboard to describe the detailed flow of my project.

*The idea have been changed due to technical disability.

And this is my new finalized storyboard

1. User will enter interactive area to interact with the application.

2. User then can activate the program by clicking on "ENTER" button.

*This intro page will provide title, basic description, and also title to the user.

3. User then will be directed to instruction page. After done and understand the instruction, user may proceed to the next page.

4. Terms and condition are applied in order to keep this application on the right track. User need to agree with T&C in order to proceed to the next page.

5. User can click on their image to change the effect. The effect available is mirror, squeeze, fish eye and so on. If user like the effect applied, they can click on "SNAP" button.

6. The image taken will be shown on the screen. User will be asked either they like the picture or not.

*If yes, proceed to next page

*If no, back to previous page

7. User then can edit their pictures with features provided :

*brightness, saturation, contrast, color

*rotate, move, resize

8. When done with editing, they may choose either want to download the pictures via email or upload it on Facebook.

9. If the user choose to email it, they just need to provide the recipient's email address and a message to them. The email will be sent by MyTweetFace email.

10. If the user chose to upload their image on Facebook, they need to login on their account first.

11. They will be directed to MyTweetFace Facebook Application. The apps will first asked their permission to access their profile.

12. The photo then will be upload upon the permission granted by user.

Finalized Floor Plan

As mention in my previous Contract Submission post, here is my final floor plan that has been change from the one that i proposed in FYP 1.

Click image to enlarge

Keys :

1. Webcam

2. Monitor

3. CPU/server

4. mouse/keyboard

5. user

6. Interactive area

Gantt Chart

click image to enlarge

This is my gantt chart for FYP 2. The progress will be done in 2 months.

I have create this Gantt chart using Tom's Planner. I found that we can easily create chart in this site because they have user friendly navigation and interface. Btw, this site have free access and no download or installation require.

Finalized Proposal

Title:

MyTweetFace

Theme:

Social innovation and new media

Background:

An interactive photo-installation usually will works with realtime images and face recognition software. The aim of this installation is to bring people closer together in a playfull way. Like many social networking tools on the internet, this installation enables you to connect with other people. It plays with the idea that the virtual world is replacing our social life and therefore wants people to connect in the real world again.

Why I choose this topic?

Camwhore is becomes a new trend in Malaysia. Definition of camwhores in Malaysia is differ from foreign country. Camwhore means anyone who is addicted to taking countless pictures of themselves to post on the internet. Pictures range from conservative face shots to explicit nude photos complete with visible sex acts. But in Malaysia, its means someone who likes taking pictures of himself/herself in all kinds of places. Self obsession is definitely there, but skin showing is not necessary in this context.

Source : Google Image

They are like to share their images on net and sharing it with public. This is proven by what I found ob net by simply type-in some keywords.

Uploading photos to internet means no privacy applicable on those photo anymore.

Problem Identification:

People who like camwhoring usually like to seek for attention and will use online social network services such as Facebook, MySpace and Friendster as their medium.

what is a social network service?

"A social network service is an online service, platform, or site that focuses on building and reflecting of social networks or social relations among people, e.g., who share interests and/or activities. A social network service essentially consists of a representation of each user (often a profile), his/her social links, and a variety of additional services." -Wikipedia

Aim and Objectives:

• To experiment how users react on camera
• To let users share the fun with the world
• To provide high technology experience to users
• To experiment on different ways of communicating and interacting
• To give users new experience of photo sharing

Motivation

Camwhoring activity and social networking services are much related to today's trends. So, I am trying to adapt this pop cultural into my project.

Ideation and Concept

User need to take their picture in a photobooth. They can choose the effect that they want to apply in their picture (swirl, firery, watery, etc). The picture taken will be immediately downloaded from the camera to the server and been shown on the screen. User then can do simple editing on their picture like change the color and saturation,rotate as well as rotating the picture. After done with editing, user can choose either want to save the picture through email or uploading their image which user need to log in to their Facebook (FB) account later. This application can be access through FB apps too. User can have fun while taking picture either alone or with friend and share it in their FB account.

Review, Analysis and Precedence studies

The Images

The example of editing page

Mac's Photo booth interface

(Source : http://www.apple.com/macosx/what-is-macosx/apps-and-utilities.html)

The example of picture taken by Mac's Photo Booth

Courtesy of Cik Salmiyati

example of photobooth

Design Approach

Photographic, real-time interaction

Introduction

For introduction, i'm using some animation to make it more interesting.

I will animate the wings to make it looks like it flying around the page..

this introduction is still in progress :)

M.A.L.L

As Mr. KY request us to provide few logo design for our new lab, MALL - Media Art Living Laboratory, i come out with these idea..

1st idea - modified MMU logo

2nd idea - Typography + modified MMU logo

3rd idea - Typography + perspective + 3D cube

4th idea -same wt 3rd idea..blue and orange is the color of FCM's logo

My idea is simple and not really nice. But i hope Mr. KY will like 1 of these design :)

.Knowledge Sharing Session.

This is the video that i showed in the 24/03's knowledge sharing session..enjoy this video =)

n thx for watching this video..hope u can gain something from it..

-Cik Meow (=^_^=)v

Consultation wt Mr. Hafiz

After submitted my final contract, i seek Mr. Hafiz for his advice and suggestion. Mr. Hafiz reviewed my contract and told me that it is possible for me to use AS 2.0. and to make the thing easier, he suggested me to use Snagit and Zone Trigger.

Snagit is a software to capture the screen, developed by TechSmith. We can use this software to captured the area that we like to.

Other than that, Mr. Hafiz also suggested me to use gmail SMTP server for email function. As for FB apps, i'm still thinking the solution for it :)

Final Contract Submission

Template has been given for our final contract submission. For this contract, we need to submit 3 items :

1. Floorplan
2. Flowchart
3. Storyboard

Basically, i have done 3 of these in FYP 1. So, i just use my previous work for this submission except for floorplan. As the lecturer told us that the exhibition space is limited, so, i redesign my booth and end up with 2ft x 4ft area (including interactive area). For storyboard and flowchart, i just use from my previous FYP 1 (has been approved by Mr. KY during consultation).

*As i forgot to scan my new floor plan before submitted it, i'll upload the plan later. :)

FYP 2~~

Today is the first day of FYP2 class.. The lecturers brief us about the progress level that we need to show and also about the submission.

I'm happy that I passed FYP1 even i can't get the score that i expected..but its ok..i just need to straighten my direction and find back my lost motivation due to the long break n health problem..hope i'm able to get it back before its too late..

wish me luck for FYP 2.. Gracias.