Final Motion Model

.swf of my model.

Below are screenshots of the .swf. The first is what it looks like originally. The second is when you hover over the text. All of them changes color besides the context/environment one, that just shows the text when you hover over it. The third one is when you click on that button, the text shows up in the middle.

Something I couldn't figure out was how to make a button go away when you click another button. So right now, if you click on message, the text will show, but if you click output, the message text is still there underneath the output text. The only way to take it off is if you click the text itself or the button that trigger that text. That's pretty much the only downside. I think it is a bit boring but it presents the information and it's clear.

I think with the interactive piece, I have more space to put definition of things so that it would be clearer to the viewer. In my still image, there was just one word or short sentences, and with the action scripting, there was a greater chance to write sentences that better convey the message. I also put sound as my noise and that's something print can't do. I wanted to put some images it but it would've made the information repetitive and it would make the diagram look more busy so I didn't. I also think that with the interactivity, the viewer can look wherever first and control where they are looking, so there isn't an overload of information to take in.

Motion Communication Model

For the last project, we are animating our communication model that we made for Visual Language.

Originally, I wanted to have it zoomed into one word, like input, and then have the viewer click it and that would show the text underneath it. I would have the hover color another color so the viewer know to click it. From there, the lines would be drawn and it was stop at the next word and another click will show the additional information and so forth. Noise would also be able to click and that would sound and the viewer can click it on or off.

After the action scripting demo last Wednesday, some parts of my ideas are limited but I still want to try to get it to work. I can't figure out how to make it be in motion and then have an action and then it moves again. So since then, I've made storyboards for 3 different ways each message could show up. 

I focused more on one part of the whole scheme because that's what I originally wanted, but it could be applied if my screen was the whole schematic. The first idea is basically the viewer seeing the line being drawn and they click on the square by the word and that would expand and have the text and supporting images/videos. The second idea is to have text pop down and within the text, the viewer can click certain words that would bring up imagery. The third one is to just have the word pop up when clicked and have it stay there while the viewer moves on. Since I was thinking to make the whole scheme moving, I didn't really bother thinking if the screens would come off or not. If I do make the scheme the whole picture, I would have to take them off but if not, it might just stay there.

Final Ads

These are my final ads for this project. The first is the small version and then the big version is underneath it.


AfH Ad from Vi Pham on Vimeo.



AfH Ad 2 from Vi Pham on Vimeo.


You can see what I did since it is pretty straight forward. The big one aimed to convey the message of what the group is about while the smaller one aimed at getting people involved. This was the first time I made anything in After Effects so it was a good learning experience on how to create things in AE. It is A LOT easier than Flash, which I built my logo build in. I didn't change anything on that one so you can look at several post back for the final of it. After Effects was a bit tricky to do at first but watching tutorials while I did my piece helped. I also wanted to get away from being so text reliant since my past pieces were heavy on text. So it was hard coming up with images and ideas on how to make them interesting and now just boring but at the same time let them have a story/plot. Especially with the big ad, I wanted the footage to at least relate to the text and not have a disconnect. I didn't want to use sound because it is on a website and maybe I'll go back and ad sound once I learn how to encode it. It was also kind of hard timing the lines in the small ad because I wanted to keep these short at 10 seconds and the logo build is already 5 seconds so I only had 5 seconds to work with. I semi cheated with that one and made the logo build a bit shorter so that there was more time for the imagery and the text to show up. I timed the text on both to be short enough to fit but also long enough so that people have time to read it. In general I had fun with this project. I learned a lot more of AE and using imagery was a challenge for me.

Ad Storyboards

Storyboards for my ads. The first one is like 300x100 pixels? I wanted to go with a drawing idea and how it creates a home and then the logo at the end. I couldn't scan this in one piece so sorry, you'll have to piece it together, but you get the idea.

 

For my second one, it's a bit bigger. I was going to have the earth appear and then maybe rotate while having different background colors and then the logo appearing. Also split and cut off too, so sorry.

 

Those were my initial storyboards. Since then, I kinda progressed away from it and went with other ideas that you'll see in the final pieces.

AfH Ads Brainstorm

For the second part of the project, I had several ideas going. The first one I thought of was an opening for the website, so it would be a little film/animation that would play before people would enter the site. Within this opening, I wanted to use imagery as the main focus since I've relied on text a lot for the past projects. I was maybe going to incorporate live action somehow and it would be about the organization along with current projects that they are doing.

From that idea, I thought about making a series of ads that would appear on other websites, like AIA and Buildipedia, which are other architectural websites. This stemmed from wanting to get the word out there about Architecture for Humanity. This is kind of like the opening idea except now I'm limited to a space and probably like a 10 second animation. It would use images and color with minimal text and end with my logo build. This is the idea that I'm going forward with and I'm making two that focuses on different aspects of the group to get people to join them. One talks about what the group is about and I'm using stats for that, like how many chapters there are and how many people are a part of it. The second one is more like a call for designers to submit ideas and help build communities in places that need help.

Other ideas that I had was to make a scrolling, loop thing that would sit on top of the website and it would be like the ads, except it will be on the website itself. It would contain the basic information in one small loop and other loops would be like current projects and events. Every time the page refreshes or the audience goes to another page, the top animation would be different. I also thought about making a non-digital piece like a brochure that would inform people and get them to join the organization. Yeah. I'm going with the ad idea, like I said before and hopefully it will work.

Final Logo Build?

Final? from Vi Pham on Vimeo.


This is my "final" logo build. I'm not sure if it will change from now and final crit or not but that's what it is right now. I learned a lot about timing and how each picture, when it flashes, should relate to the actual logo somehow, like when it hits the corner and begins drawing a new line. It was also kind of dull at the beginning of building this so I tried making it more interesting in terms of text and the images I chose. Originally, I had a lot more images but decided to take out a few so that it aligned better with the logo and it didn't feel rushed or choppy. Perhaps it will change before I have to turn it in, we shall see.

Logo Build Rounds

Since the storyboards, I've made several versions of the logo build. I decided to go with the logo drawing itself out to play off of the idea of "designing" and drawing. I ended up putting the images inside of the logo in the triangular part because I didn't want it to be outside of the logo. I played around with timing and how the text enters to make it more interesting.

Round 1 from Vi Pham on Vimeo.

Round 1 pt.2 from Vi Pham on Vimeo.

Round 1 pt.3 from Vi Pham on Vimeo.

I also tried building the logo differently but I didn't like it as much.

Round 1 pt.4 from Vi Pham on Vimeo.

These rounds helped me picture how the text should enter. By doing several iterations, I was able to see what was working and what wasn't and taking that to the end product.