May 15, 2011

Gallery








Introductory Video

This is my project's introductory video:)

Presentation Seminar

This is slides for presentation seminar:)
Presentation seminar

Poster

This is poster for my project:)

[click to enlarge]

Manual

[Offline Mode]

Let's experience this, please follow these instruction ;

1. Touch the yellow dots.
2. Drag the botom area.
3. Touch the question mark button and see what happens.
4. The tree are clickable.
5. Drag the sky, and feel it.

Synopsis

The unplanned development such as construction building that destroy natural habitat (flora and fauna) and expose our life to pollution and global warming. The construction of building makes the flora and fauna lost in their natural habitat beside the urban area will lost the beautiful of the flora and fauna scenery. Animals and plants will have to travel to keep up with shifting climate belts caused by global warming. Everyday sickness of pollution lead me to have an interactive way for people to have a new way of informative education.

Awareness Flora Fauna is an interactive installation about the awareness of extinction flora fauna in our mother nature. This interactive installation combines an animation of flora fauna, info graphics about trees, some effects and cool sounds. This project is to give message and to create awareness for public about extinction of flora fauna. The extinction of flora fauna becomes worst and this interaction wall installation will let people experience the mood of flora fauna, create awareness about extinction of flora fauna, let people realize meaningful time spent with flora fauna and to educate people to love environment in interactive way.


Interactive wall installation is a technique under the category interaction with user when the users have ability to touch, drag and feel the real situation in the forest. In this installation, i use interactive white board to let people interact with my project. No limit of interaction for user, because every single space in the interactive white board have own function.


It starts with alert sound to drag people’s attention, a lot of black particles (represents pollution) floating in the air and red sky means increasing the earth temperature that causing the extinction of flora fauna. Users need to touch the land area and a tree will grow up. When there are more trees, the sky will become less reddish and clear. It means that if more people participate tree planting with less deforestation, it helps reduce extinction flora fauna.

After the tree grows up, the users will touch the tree and animation of dragonflies and butterflies fly freedom will appear in the screen. Users also need to touch the bottom area, and a lot of random flower will appear. It means when our environment is not polluted, the flora fauna will have a great life. The users need to touch the question mark to see the info graphic about the importance of tree. Besides, when there is no interaction with user, the alert sound will be heard and the sky will become reddish. It showed that if we are doing the deforestation, continuing with the development without thinking our nature, our mature nature will lack of oxygen and drowning with pollution.

Apr 20, 2011

Actionscript 2 (part 2)

Script for detect no interaction and it will proceed to first frame
Script for rollover movie clip and load movie
script for load movie (animation tree)
Script for cursor (butterfly)
After published, the butterfly following the cursor
Script for flower garden, using math random
After published, click in the bottom area random flower will come out

Apr 15, 2011

Interactive Whiteboard II

Today I meet Mr Kok Yong to see the interactive whiteboard. Mr Kok Yong brief a lil bit about the function of interactive board and demo how gonna use the interactive whiteboard. Its kinda interesting with the interactive whiteboard, it is a multitouch screen that allow we to click, drag, touch, write and many more.

interactive whiteboard
I also test with my work (not done yet, still in progress). Mr Kok Yong said that I should change the content info about tree which is boring pop up info with infographic, dynamic animation about save tree (insert some action if people don't save tree) and story telling to convey information about saving tree. It will be more interesting, achieve the target of interactive installation and informative for audience.

p/s : Thank you so much sir for the comment and I'll work on it:)

Apr 14, 2011

Actionscript 2 (part 1)

Print Screen of Coding and references for my content.



Script for attach sound
Script for go to the next frame

Script for particles (intro)
The result after published
Load movie from swf file


Script for click on the tree and butterfly appear


References:
http://www.ici-valenzuela.com/blog/she
http://www.actionscript.org/resources/articles/125/1/Simple-Particle-Effect/Page1.html
http://www.bigresource.com/FLASH-loading-mc-with-buttons-hEZBF9CatA.html
http://www.kirupa.com/developer/flash/index.htm

p/s : And thank to Mr Hafiz for helping me with the coding too:)

Working in Progress

For the process of making the content, I used Adobe Flash to animate it. Here some print screen for making of the animation.

1. Intro, instruction

Doing the intro for Awareness Flora Fauna, using gradient for the background and animate using classic motion tween.
2. Info About Tree 


Doing the box in Adobe Illustrator and animate the box in Adobe Flash. When click the question mark, there will be a sound click and the box appear.
3. Tree 
Some changes from what I have done before, Mr Hafiz said I must use mask to create animation for the tree. The tree that I have create before is not smooth and so ugly.

Create a new layer for masking and different keyframe for the movements of tree growing 
Doing a masking for the leaf in a new layer

Mask using motion tween to have smoothly movements of leaf grow
Change the color of tree using gradient
4. Butterfly

Doing different movie clip for each part of butterfly's body
 Make a new movie clip to animate the butterfly
doing different movement of butterfly, using classic motion tween
 full animation of butterfly fly freedom

Mar 30, 2011

Sound

There are a few sound that I will use for my project, list of sound music and sound effect are:-

Sound effects
- alarm (intro Awareness Flora Fauna)
- alert (tree growing)
- buzz (info button)

Credits to Hungarianz Rhapsody 2 by Liszt and Waltz of the Flowers by Tchaicovsky, both of these song from album VA - 100 Materpiece - The Top 100 of Classical Music. ( music background of butterflies and dragonflies animation )

There will be another sound, I'll upadate later :)

Gantt Chart


(click to enlarge)

Final Proposal

Title: Awareness of Flora Fauna.

Theme: Body, Identity and Sensors

Background:
Nowadays, many countries are trying to achieve a modern country without thinking the impact to the environment. The unplanned development such as construction building can destroy natural habitat (flora and fauna) and expose our life to pollution and global warming. The construction of building makes the flora and fauna lost in their natural habitat beside the urban area will lost the beautiful of the flora and fauna scenery. This study is creating the interactive wall in order to make environmental scenery in town.

Problem Identification:
• Greenery in urban environment is lost
• Construction that lead us to loss our beautiful scenery of flora and fauna.

Aim and Objectives:
-- To let people experience the mood of flora fauna.
-- To create awareness about extinction of flora and fauna.
-- To let the people realize meaningful time they spent with flora and fauna.
-- To educate people to love environment in interactive and fun way.

Motivation:
I want to create the flora and fauna view in urban place because I love to see greenery scenery and keep the environment in a place that can be enjoyed by others people.

Design Approach:
Interactive wall installation

Ideation and Concept:
When people enter the projection area, the system tracks motion and generates real time 2D art/graphic animationart/graphic which is projected onto the interactive whiteboard. The intention of this study is to create a dynamic visual experience within the space.


Funky Forest
Interactive ecosystem where children create trees with their body and then divert the water flowing from the waterfall to the trees to keep them alive.

Content

Below are the content for my project. My project require a lot of animation using Adobe Flash and design in Adobe Illustrator. So, there are some print screens of work that I have done.

 the making of intro Awareness Flora Fauna
 the making of tree grows animation using flash.

The complete animation of tree growing

Complete design of dragonfly using flash

the making of butterfly animation using flash

 Background info of information about tree and its rollover button

I do the animation separately, so I only have to combine everything when all the animation is settled:)

The animation that have been published.



Animation of dragonfly


 
Animation of dragonfly

  
Animation of tree growing

Mar 29, 2011

Final Contract

Floor Plan ( side view )

Floor Plan ( top view )

Flowchart

Storyboard

Interactive Whiteboard

I had meet Mr Kok Yong on 22nd March 2011 and he suggested for me to using an interactive whiteboard for the project, due to others are not using the interactive whiteboard. I am not familiar with that, I hope I do not have any problem with it. Keep thinking how my project will be :)


What is Interactive Whiteboard?

An interactive whiteboard is a piece of hardware that looks much like a standard whiteboard but it connects to a computer and a projector in the classroom to make a very powerful tool. When connected, the interactive whiteboard becomes a giant, touch-sensitive version of the computer screen.

Instead of using the mouse, it can control computer through the interactive whiteboard screen just by touching it with a special pen (or, on some types of boards, with your finger).

Things that needs to be along with the interactive whiteboard


Link : http://www.pearsonlongman.com/IWBsolutions/what-is-an-IWBs.html


Mar 16, 2011

Consultation

Regarding to submit the final contract on Thursday (17th March 2011), I had consult with Mr Kok Yong about my floor plan, flowchart and storyboard.  Mr Kok Yong said that my floor plan and storyboard is ok but my flowchart needs to change a lil bit.

Too messy right? I need to rearrange my flowchart.

I also had meet Mr Hafiz to ask about the difference between zone trigger and Kinect. It looks like the Kinect is more interesting for my project because my project uses more interaction points of user, but I need to invest to buy the Kinect. Oh no! I need to think back:p

Mar 11, 2011

FYP 2

Welcome FYP 2! 

Here we go. On the first week, the task was given for us to submit our Floor Plan, Flowchart and Storyboard. But we need to consult first with lecturers. Keep looking to finish my FYP 2.


Feb 9, 2011

New Development

INFO ABOUT TREES
 
This info will be pop up to create awareness of people about the important of trees in our life in order to decrease the extinction of flora fauna.

Trees are important, valuable and necessary to our very existence. It's not too hard to believe that, without trees we humans would not exist on this beautiful planet. Still, trees are essential to life as we know it and are the ground troops on an environmental frontline. Our existing forest and the trees we plant work in tandem to make a better world.

1. Trees Produce Oxygen
Let's face it, we could not exist as we do if there were no trees. A mature leafy tree produces as much oxygen in a season as 10 people inhale in a year. What many people don't realize is the forest also acts as a giant filter that cleans the air we breathe.

2. Trees Clean the Soil
The term phytoremediation is a fancy word for the absorption of dangerous chemicals and other pollutants that have entered the soil. Trees can either store harmful pollutants or actually change the pollutant into less harmful forms. Trees filter sewage and farm chemicals, reduce the effects of animal wastes, clean roadside spills and clean water runoff into streams.

3. Trees Control Noise Pollution
Trees muffle urban noise almost as effectively as stone walls. Trees, planted at strategic points in a neighborhood or around your house, can abate major noises from freeways and airports.

4. Trees Slow Storm Water Runoff
Flash flooding can be dramatically reduced by a forest or by planting trees. One Colorado blue spruce, either planted or growing wild, can intercept more than 1000 gallons of water annually when fully grown. Underground water-holding aquifers are recharged with this slowing down of water runoff.

5. Trees Are Carbon Sinks
To produce its food, a tree absorbs and locks away carbon dioxide in the wood, roots and leaves. Carbon dioxide is a global warming suspect. A forest is a carbon storage area or a "sink" that can lock up as much carbon as it produces. This locking-up process "stores" carbon as wood and not as an available "greenhouse" gas.

6. Trees Clean the Air
Trees help cleanse the air by intercepting airborne particles, reducing heat, and absorbing such pollutants as carbon monoxide, sulfur dioxide, and nitrogen dioxide. Trees remove this air pollution by lowering air temperature, through respiration, and by retaining particulates.

7. Trees Shade and Cool
Shade resulting in cooling is what a tree is best known for. Shade from trees reduces the need for air conditioning in summer. In winter, trees break the force of winter winds, lowering heating costs. Studies have shown that parts of cities without cooling shade from trees can literally be "heat islands" with temperatures as much as 12 degrees Fahrenheit higher than surrounding areas.

8. Trees Act as Windbreaks
During windy and cold seasons, trees located on the windward side act as windbreaks. A windbreak can lower home heating bills up to 30% and have a significant effect on reducing snow drifts. A reduction in wind can also reduce the drying effect on soil and vegetation behind the windbreak and help keep precious topsoil in place.

9. Trees Fight Soil Erosion
Erosion control has always started with tree and grass planting projects. Tree roots bind the soil and their leaves break the force of wind and rain on soil. Trees fight soil erosion, conserve rainwater and reduce water runoff and sediment deposit after storms.

10. Trees Increase Property Values
Real estate values increase when trees beautify a property or neighborhood. Trees can increase the property value of your home by 15% or more.

Content Development

1) This is my rough flow of my installation


 

1) Starts with the video intro.
 
 2) Then, there is a screen with an alert sound to draw audience's attention. Many black particles are floating which is represents the pollution. Red sky represents increased Earth temperature that causing the extinction of flora fauna.

3) When the user's hand drag upward the wall, a tree will grow up. The more user drag upward, the taller and bigger will be the tree. The more hands drag upward at the same time the faster will the tree grows. 

When there are more trees, the sky will become less reddish and the alert sound will slowly disappear. It means that if more people participate in tree planting with less deforestation, more carbon dioxide can be absorbed from the atmosphere and it helps to reduce the threat of global warming and extinction of flora fauna.

4) After the tree grows up, and the sky is clear (means no pollution) there will be some animation of dragonflies and butterflies fly freedom in the screen. It means when our mother nature is not polluted, the fauna will have a great life.
When the user touch the question mark, there will be a screen pop up which is the info about the importance of trees. The screen will pop up a few seconds, and then it will disappear.
**When there is no interaction with the user, the alert sound will be heard and the sky will become reddish. (It showed that if we are doing the deforestation, continuing with the development without thinking of our nature, our mother nature will lack of oxygen and drowning with pollution)
---------------------------------------------------------------------------- 



2) This is rough sketches of my flow content for the introduction of my installation. It will consist of some typography and images of causes extinction flora and fauna. There are also some music background for the video.






----------------------------------------------------------------------------