The Conclusion

This semester has been a huge learning experience for me. One of the first obstacles I faced is coming up with and proposing an idea for Experiential Design. I felt that I wanted to make something different from what I usually make. Many of my works are fictional and story-based, so this experience was completely different, since I was making an educational PSA about poverty.


Some of the pros while developing my design is that it was different from others because of its use of keyboard controls and I was also not indecisive about what I wanted to add to each page. The cons of developing my design is that it did not turn out as interactive as I had planned.


My strength is that I have experience in drawing human figures and characters. My threats while producing this design is, first of all, it was very difficult to find tutorials for using keyboard movements to control both the character and background in Adobe Edge. When I had finally succeeded in using keyboard controls, another problem appeared, which was the main character walking out of the frame. Fixing this problem required me to change the java codes that I had learned from a tutorial, but I had never learned javascripting before so it proved a challenge. Another problem that I faced was that Adobe Edge does not work well for Windows users. There was a consistent lag every 5 minutes and the moment I restarted Adobe Edge, a message would pop out saying that I had to reinstall it. But since Adobe Edge is unavailable in our mac/computer labs, I was forced to keep working on my project with this issue. An opportunity that I gained during this project is that I am now able to use Adobe Illustrator more efficiently. Since I had rarely used Illustrator before, I found that this was a good opportunity for me to use it more, which was what led me to using Illustrator more than Photoshop when developing my designs. My weaknesses are time management and lack of experience in Adobe Edge.

Trying out technical aspects in Edge

Since my design involves facts about poverty, I decided to add a question mark above a homeless person's head and showing the information when hovered on. I feel this would be better and piques the curiosity of people, rather than just having the facts pop out of nowhere.

This is the tutorial that I used: http://www.adobe.com/inspire/2013/12/symbols-interactive-edge-animate.html

And here is the result:

http://www.youtube.com/watch?v=DXy9z47rnbA

Using keyboard movements for walk cycles

As I was looking up tutorials, I discovered another way to use keyboard movement for walk cycles. This is the tutorial:

http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/episode-10-controllable-characters-in-an-interactive-environment/

Referring to this, I managed to make the character walk while the background is moving, but one problem is that at one point the character walks out of frame.

Here is how it looks:

http://www.youtube.com/watch?v=6ULp3pprGRg

Character progress

These are my character designs for the homeless people. I decided to mix two different softwares: Illustrator and Photoshop. Since I rarely use Illustrator, I decided to experiment more on this software. Here are the designs:

Walk cycle (main character)

I discovered that a walk cycle should have 8 frames (not including the repeated last frame), like this:

(from http://www.newgrounds.com/bbs/topic/1358971)

So I worked on my own walk cycle for the main character. This is my result:

The last frame is the character standing still so it would not look weird when the character stops walking.

Background 4 and 5

I wanted the last 2 pages to show an alleyway, so I came up with one with windows and another with just brick walls. Here they are: 

Background 3

I wanted to go for a simple street view, so this is the background I came up with:

Art progress 2

Background progress for another page:

Art progress

Background progress for one of the pages:

Coloring progress for the main character:

Walk cycle and audio

After the keydown trigger test that I did, I have found more tutorials relating to my final outcome. The first one is a walk cycle tutorial:

(Walk cycle tutorial)

To start off, I need a spreadsheet like this:

For now, I used this sample spreadsheet for testing.

The second tutorial I found is to add audio:

(Tutorial for adding audio)

Here is my result using both tutorials:

Character design

Since I plan to have a cartoonish look for the characters, I sketched a few characters to suit this style.

I also practiced on coloring by using gradients and a soft brush for shadowing.

Keydown Trigger Animation

Since my design requires you to press a key to trigger the animation, I used this tutorial:

http://www.heathrowe.com/adobe-edge-simple-keydown-trigger-animation/

This was my result:

https://www.dropbox.com/sh/6p2k6oxtma3t46d/8CdXJWpjbC/keytrigger

Proposal Presentation

This week, I proposed my idea for our final project. I got good feedback, but Mr. Muzamir commented that my experimental concept is more of an interactive informative website rather than a game. Following this concept, I will be finding some tutorials on how to make this possible on Adobe Edge. Here are my presentation slides: 

Inspiration

In case my concept is too confusing, here is an example of how it will look like! :D

http://kohlsplayitforward.org/

Refined idea

Based on the idea from my previous post:

 - As the character walks on the street he walks past many homeless people. Informative facts transition into the background. The facts are:

1. 'About 21,000 people die every day of hunger or hunger-related causes'

2. 'People suffering poverty lack the money to buy enough food to nourish themselves, thus becoming weaker and often sick.'

3. 'This makes them increasingly less able to work, which then makes them even poorer and hungrier.'

4. 'This downward spiral often continues until death for them and their families.'

While the player reads the facts, the background changes into the daily life of a poor person. For example, when the 2nd fact pops up, the background will show a poor person trying to buy food but the shopkeeper shakes his head because he doesn't have enough money.

When the 3rd fact appears, the background changes and the character walks past the poor person sitting on the streets with a pale face.

When the 4th fact appears, the character walks past a corpse.

Finally, the character stops walking as a poor person walks up to him and asks for spare change. He holds up a tin can and the character reaches into his pockets for his wallet. The player will then be asked to click on the tin can. When clicked, the character will put money into the tin can. The words 'Spare some change. Save a life.' will transition into the screen.

Week 4

This week we learned how to make something called 'augmented reality' using the Metaio software. Augmented reality is when you make something appear that isn't there. To do this, first we need a marker. The marker I used is a piece of paper with a vector image of Mario. Then, we need to open a trackable object in Metaio. The trackable object in my case is the vector Mario.

After that, we drag and drop a 3d object onto the 'recources' panel. 

Finally, we click 'quick preview' and hold up our markers. Here is my result:

Idea part 2

1. A controllable character in an interactive environment

- The character can be controlled using the left and right arrow keys

- The background animates only when the character moves

- The player will be able to take a look at poverty. As the character walks on the street there will be a poor person who asks you for spare change. You can click and choose whether or not you want to give him money. If you click yes, the background slowly changes into a happier environment. The poor people on the streets become healthier and happier. If you click no, the environment becomes darker. The poor people start looking thinner and thinner until they are all dead.

Ideas

1. A short supernatural story using parallax scrolling. The story is about a boy who hears rumors about a forest that will turn humans into supernatural beings. The boy was curious so decided to enter the forest and in the end, he steps out of the forest with a half-wolf form.

2. An informative animation about how important it is to conserve trees using parallax scrolling.

3. Something similar to this http://edgedock.com/market/basic-game-template-edge-animate. A story will play in the background as the character keeps walking.

4. A comic-book style animation similar to The Walking Dead website: http://www.cabletv.com/the-walking-dead

Week 3

This week we started using a new software called Adobe Muse. The exercises we did involved the basics of Muse, such as creating different pages and forms, and also learning how to animate text and objects with Muse.

Exercises 5 & 6

Today we learned about parallax scrolling. In this lesson, we learned how to make the image and text appear while we are scrolling down.

We also learned to make a simple drag and drop game where we dragged clothing accessories to a man's face and made the clothing animate when we drop it on the man's face.

Exercise 4

To make a responsive page we have to change the stage height and width to 100%. We can also make the objects remain at a certain position even when we change the size of the browser.

Exercise 2 & 3

After that we practiced more on animation and using the blur filter for animation.

We also learned how to make the objects animate with different timings and how to reverse a playback, along with the stop action to prevent it from looping.

Exercise 1

Today we started using Adobe Edge. We learnt the basic tools and how to animate in Edge. Our first exercise was to animate 3 boxes and make them clickable.