The following project draws on stories from the bible that can teach lessons about the 7 deadly sins. The Tower of Babel is a famous story about pride. I choose to go with a simple design that used an “icon” to represent the story. The tower is the symbol for this story. With the design of the tower, I chose to use layers of metaphors to allude to both the story and “pride.”
The tower is unfinished and is composed as “detached” because I wanted to represent something that was unaccomplished. This is what happens in the story. In a sense, I am trying to tell the story before one actually reads the story.
I chose to use variations of purple for this project. Purple is a color that represents pride. Color acts as another layer of metaphor to allude to the sin. My goal was to create something that could “say pride” even if the word did not appear on it.
The interactivity is simple. Two things are clickable. The cloud leads you to the bible story, and the word pride leads you to the virtue lesson for the sin. My audience is younger and therefore, I didn’t want to complicate it.
I believe all the elements of this project work well together to not only convey the sin of pride but to also teach a lesson on how to overcome that sin.
The concept for this piece changed over time, many times, until I decided to make another infographic about the nuclear powers and the amount of nuclear weapons that each of them possesses. It is a topic that is always in flux, so I wanted to show the most current information (July 2013) in a simple way. I did so in a dark-humored sort of way, that might lend to the unease of the topic.
In order to elicit this dark humor, I decided to make things rather rustic and roughly done. However, I needed it to still be simple and easy to understand. To do this I used the basic and well-known shape of a bomb and some color organization of the countries throughout. The radioactive symbol at the beginning starts the whole piece off on a darker tone as well.
When it came to the colors and type, it all had to reflect back on wrath and the topic of nuclear weaponry. The colors were an easier element to implement, as one of the first colors that comes to mind when wrath, or nuclear war is uttered is that of red. In order to make the colors easier to differentiate, however, I extended the mix into oranges and pinks as well. They are all still in the warmer range of colors, but bright and pop against the crumpled paper background.
For the type, I eventually decided to do a handwritten type. To do this, I made my own typeface that was hand drawn and then implemented it for all of the type. It is rough and mainly in all caps so as to define hierarchy and also to make it bolder, as if the information is screaming at you.
Finally, the imagery was very simply done, but informative and powerful I believe. It not only provides information visually, but verbally as well through some hard numbers. The radioactive symbol at the start gets the user in the frame of mind for what will come next. Then the bomb I used is the typical little-man bomb that one often sees in association with 1950’s bomb types. The color blocks then emphasize what powers in the world hold the most nuclear threat, and it is made very clear with the interactivity.
Overall, I think that the animation illustrated the point of wrath when it comes to world powers and the threat of nuclear weapons. It communicated this information simply and with hierarchy so that the user can focus on the message that it is communicating.
My actual concept for design changed. However, I stuck with the same principle that I wanted to show the inner effects of wrath rather than the outward aggression. Therefore, my design was more focused on how wrath affects people internally by making their hearts and souls dark. I also wanted to show the opposite of wrath; that is why the heart begins red before turning black and that the ending message of the animation is “Be Kind.” I wanted to have a handwritten feel to my animation, so I put the animation on a paper background. I wanted my animation to be simple and clean.
To represent the sin pride, I choose to depict it through reflective surfaces. My concept was that someone who is overly proud, to a point of vanity, would go out of their way looking for reflective surfaces in day to day items. Things like spoons and windows become ways to admire yourself. For design style I choose a subdued color pallet and simple silhouette illustrations to keep all the items unified and give the graphic an antique vibe. The typography I choose is Jubilat, a slab serif that matches the aesthetic of the images. I was inspired by Saul Bass’s movie opening credit scenes like in Anatomy of a Murder.
For my Seven Deadly Sins project I got envy as my topic. I wanted to convey the danger of envy in this short animation. I created this feeling through using the inverted photos and flashing back and forth between that and the normal image. This reminds me of old horror movies and creates a sense of suspense and fear.
I wanted to focus on the eye because envy is seeing what others have and being jealous of that. I chose to break up the parts of the eye and animate them in separately. I think that this helps capture the audience’s attention because they cannot tell what it is at first.
As for the color scheme I wanted to keep things simple and mostly black and white. Envy is generally associated with the color green so I want to stick with that as the accent color to highlight specific things. . I wanted the background to be dark to convey that envy is a deadly sin.
I added the part at the end where the grey swirls animate in to show that envy can consume you and take over. I think that overall it came together nicely and I am happy with the finished product.
The sources I used were just handouts from previous classes because I did not do any animation that I had not previously tried.
Knife is displayed on screen and is animated to move up and down.
Click it and the stage animates in blood, first slowly, then quickly. The screen fills with blood until the whole thing is covered. And then WRATH appears. You can click the white knife to replay the animation.
Magical Weather iPad App
I picked this application for it’s simple typography integrated with icons and photographs- it explains the weather to the user in 3 different ways all at once. The purpose of the app is to give weather forecasts for anywhere in the world.
Because the app isn’t free (though it is only about $2.30/1.79 euro), the user is probably an older adult in a business profession who travels frequently and would have a use for such an extensive weather application. Their technical abilities are novice- the app only uses taps and swipes and is very simple with large touch sensitive areas.
The use of photography really brings this app to the next level compared to other weather apps. The white typography works 95% of the time, but when put in front of a lighter image it can get lost in the background. The icons are simple but convey what they need to and the grid layout when looking at multiple locations is really nice.
The functionality is straight forward for those used to iPad applications, but a couple more calls to action might make it easier for the less experienced user. Overall I think the app knows that the content it’s delivering is simple, and reflects that in the design and the functionality.
List of tutorials used:
Greensocks- Tweenmax on Complete
Rationale of Audio
The audio I used for this project are bits of interviews from Andy Warhol. They talk about his design technique, how he chooses images, why he repeats images and the particular process he goes through to create his art work- from the use of a certain camera to the different colors he uses.
I previously designed the life page so that the windows would house the main interaction. Now three of the windows have different interview audio clips that the user can play and pause.
The work page also includes a short clip on his process of pictures/art work which is also able to play and pause.
I used the interview clips because I thought they gave direct information about Andy’s personality and design style.
Most of the animation from project 2 remained the same.
ZIPPED UP FILE:
List of Tutorials Used:
Photoshop Masking and Compositing: Fundamentals
Flash Professional CS5 Essential Training – esp. Chapters 10 (Working with Motion Tweens), 19 (Adding Interactivity with ActionScript)
ActionScript 3.0 in Flash Professional CS5 Essential Training
Video/audio chapters: 11-12
Movie Clip As Button Tutorial
Greensock – TweenMax – esp. onComplete
Rationale of Design
I went through several different designs before arriving at this one, which is very different from previous ones. I wanted the entire site to have a scrapbook feel as if items are being painted in. The main “navigation” is the circle, though the user has to click into each scene, which plays a movie. I wanted the user to have some control over their use of the site, but also be – in a way – forced to “follow the path” of Peter’s life by exploring the three separate video scenes. I wanted the entire site to seem like one seamless piece of watercolor paper. I hoped to achieve a sense of visual consistency throughout the site through my use of typography and painted elements.
Rationale of Animation Technique:
Each scene first requires the user to click on a drip. The scene then animates to a video of a scrapbook. Once the user leaves the video, they are brought back to the scene in which an arrow (with text) appears. Once you click the arrow, the circle animates to a new position and Scene 2 begins. Like Scene 1, a drip first appears. When you click on the drip, a line is animated that brings the user to a video. Once the user leaves the video and is back on Scene 2, an arrow (with text) appears that – when clicked – again moves the circle to a new position. Once in this new position, Scene 3 begins. The drip appears. When clicked, the line appears and brings the user to the final video. Once the user leaves the video, an arrow (with text) appears that brings the user back to the beginning.
Rationale of Video/Audio
From the beginning of this iteration of the website, I knew I wanted video to be a main component. My site has three videos of me “scrapbooking” eras of Peter’s life before his death. The first video, which is accessed by clicking a drip in Scene 1, is a scrapbook page of his childhood. The second is a scrapbook page showing him in his early 20s as a mountain climber in Yosemite. The third is a scrapbook page that is meant to be a kind of memorial. Each video has audio that I felt was appropriate for the scene. The first video is 50s music, the second video is a hit from the 1960s and the third has wind sounds that evoke a feeling of being outside, perhaps in Yosemite. The audio for each video plays until the video is complete. If the user navigates off of the movie, however, the audio will continue into the next scene. If another movie is clicked while other audio is still playing, the first song fades out and the second song fades in.
Student Examples | ZIP
So I finally love flash. And for the most part it has really been cooperative lately. So there are a good number of changes from the last submission but still a bunch left. So first, I added a music player to the lower right hand corner of the page. it has 4 working buttons (play, pause, forward and back). The trackes are saved in an external folder named “audio” and the track and artist names are dynamic text fields and are called from an xml file.
I also simplified the introduction and changed all the typefaces to a hand pressed label maker look. Then I went off and tried to find a better way to make heart and head items. So if you click on the heart it unfortunately isn’t 3d but 6 movie clips (which act as buttons) appear and on hover you can see a description and on mouse out it disappears. I am going to do the same kind of thing for the head but for the head buttons if you click they will send you to an external url (facebook, my blog, whatever).
I am also going to work on the transitions. I need to make it so you can go from the head to the heart and vice versa without having to go home first. Also, I want to make the head/heart compartments close before going to the next section.
Zip:: Azar Project III
For some reason it takes about 45 seconds after my .swf loads for the music features to actually work. When they do, clicking on Tom makes him sing (click on the wheat to make it stop), then there is a traditional music player on the Music page.
I made some changes in this version of my Tom Waits site.
- Player on music page is redesigned, the buttons actually function by playing, pausing, and resetting the song. The volume slider also works.
- The music player is no longer tied to the bobbing gramaphone– it remains on the screen at all times. No more glitches and weird disappearances.
- Redesigned the tour location cards on the tour page. They are simpler and easier to read. They should link to maps on a new page, but for some reason the _blank linking is making the text look weird…so maybe that will be in version 4…
- More subtle animations to come…
Stuff posted on the blog
Chris’s crazy player that didn’t work because .xml files were saving as rich text. My bad.
Miller | Zipped Files
Download project ZIP:
Maxx Berkowitz – GRA 500 Project 3 Rationale
My goal for this project was to create an a web presence that represents me. At the beginning when I thought about what aspects I thought were relevant to me, I came to a list of contrasting ideas, edgy, artistic, grungy and messy, but also clean and professional, that is how I see myself. To achieve this look, I decided to do a mixed media type of site, photography and composites mixed with sketched styles. I want to incorporate animation elements (“Easter eggs”) throughout my site to keep it entertaining and interesting for the viewer.
As I have learned more about flash, there are definitely some things that I realized I should have done differently (e.g. flatten masks, and adjustment layers, reuse aspects more, trim layers to screen size , and think about different states better). There has definitely been a bit of an evolution with this project, although I’ve stuck fairly close to the original concept, I unified the skies so there is one sky across all states, re thought the home page and tried to simplify the portfolio page a little.
Motion items: “rcPlane_mc” flys across the screen slowly, with a tail banner with “Maxx” waving behind it. The numbers and ribbons on around the plane will also animate and change
The clouds and “Hot Air Balloon” slowly float around, and the Birds (Sky/“Birds”) will flap their wings.
On hover the “Moose” will turn its head, the “Wind Farm” rotates their propellers. “MaXx Leaping” jumps between mountains and elements in the scene, and the “Maxx Pop up camera” will pop up and flash a picture.
NAVIGATION (across all pages):
When someone hovers over portfolio (“Nav Portfolio Hover”) the triangle hinges open and all of the text and the picture fall out and arrange themselves, small popping noises are heard when each word pops up, “Nav Home Hover” makes the top triangle swing; when hovered over. When hovering on about (“Nav About Hover”) my eye shows up and blinks on the sign . When hovering over contact the triangle (“Nav Contact Hover”) it falls out and a phone falls on top of it.
Each medium has its own unique display method, to get to each section you click on the area and you zoom in on the given area, to get out of an area you can either click a red “X” in a circle (“Exit Button”) or just click a page from the navigation.
Motion/video: zooms to the TV in the tree, to navigate within the videoFocus you hover over the circle thumbnails, and the name of the project will appear above the dials. When a video is clicked it comes up full screen on the TV, the movie controls fade in and out when the mouse is over or off the screen there are custom play, pause, back/stop, seek bar, mute, and volume buttons. THE ACTIVE VIDEO IS THE SKATEBOARD VIDEO, there is no sound in the video until the skating starts.
Photo: (not currently active)
is hung up on a line in the tree, when you click on a picture it is brought up to the bigger viewing area (Big Picture/“Picture Viewer”), which ever picture is selected the Polaroid will overlap the “Picture Viewer” box, and slightly change color.
Print: comes up on the easel, you can select different categories of print by clicking on the various boards, and then see different samples of my work by clicking on the Polaroid’s on the left. Information about each piece comes up in the “Info Panel” at the bottom, and can be toggled on and off if you click the “image info click here”
Web: when going to web, it shows up on my computer in the chrome browser, I based this interface off of the chrome browser, one of my websites shows up first, and a user can either click on the left/right sides of the screen (arrows appear), or they can click on one of the tabs in the top of the browse.
I have always liked hot air balloons and they often fly over my house in CT during the fall, we used to run out to watch them whenever we heard the big whoosh of the flame. Games have always been a big thing in my family, so I thought it was appropriate to put the tic-tac toe, chess, boggle and tetris on the surface of the balloon. The balloon moves gently, maxxLeaping_mc jumps over the balloon periodically. The text about me comes across dragged by the rcPlane_mc, and every 3 passes the plane makes a bird swoops up and defecates on the banner.
Motion to be done:
all sketched lines will animate as if they are being drawn, Birds will fly around, and the cloudDinosaur_mc will roar and move a little.
To get to information the “RC Plane” from the home page will fly around, and pass by with messages, with short bio text (RC Plane/ “Tail message”), also every once in a while a bird (RC Plane/Tail Message/Bird Poop State/“Culprit”) will swoop up the screen and “poop” (…/“Bird Poop”) on the tail banner.
Future expansion Ideas:
Every square on the balloon will glow or have an action when the mouse is hovered over any part of it.
I wanted to have smooth motion zooms and pans between pages.
Between Home and About – the balloon either rises or falls between the two states.
Between Home and Portfolio – there is a quick pan and zoom.
About and Portfolio the balloon will come down and bounce before sliding and changing places with states.
LINKS Used or Referenced:
ActionScript 3.0 Language and Components Reference: Timers http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/utils/Timer.html#event:timerComplete
AS3 Events Explained: Using Event Listeners: http://gamedev.michaeljameswilliams.com/2009/02/06/using-as3-event-listeners/
AS3: The “If” Conditional:
TweenMax Getting started:
I’m sure that there are more too, but forgot to write them down.
So, my file has changed quite a lot since the last time you all saw it. The most obvious change is the fact that it actually WORKS now. I managed to get rid of the ridiculously large linked files that were causing WordPress to be unable to upload it and all of my tweens not work. I also simplified my design so that everything runs more smoothly. (ie-my lilypad navigation became a cloud, and I got rid of the frog, among other things).
For Project 3, I added a video into my portfolio section. It is a kinetic type video. I also linked the PDF of my resume to the image of my resume that appears in my portfolio (It can be downloaded by clicking the large resume image in my portfolio).
In this folder, I have attached 3 pngs that show my states, and my flash file. I had intended this to be a redo of projects 1 and 2, as well as the submission of project 3. I apologize for the fact that my illustrator files are not included. They were simply too big… I spent an hour waiting for my .zip file to upload, only to have it tell me it couldn’t be written to disk. If you need to see them, I can place them on the server or bring them on an external hard-drive.
Notes for posterity (ie-some problems I had in Flash):
1. If you have a tween with a stop at the end of it more than 4 layers deep in your flash file, it will not play. This can be fixed by breaking your movie clips apart so that the tweens are closer to the surface. Of course, by the time this class is taught again, CS5 will probably be out, and this bug will probably have been fixed.
2. If you are working with linked bitmap images in Illustrator, make sure you either rastorize them when they are brought into flash, or make sure that the files are small. Otherwise, you end up with a massively large file that will continually crash Flash and make it so that your Tweens won’t load properly.
The latest version has a few improvements and additions. I added a simple audio player to play a song I’ve been really into lately, which would theoretically change weekly.
The giggling egg is no longer an animation without a cause. It is now a link to my facebook page.
I removed a stray leaf that would appear when it wasn’t supposed to. The bird now flies back to the branch from the rope when one navigates from the portfolio state to the home state. Also, my bio is now handwritten and the navigation in the About state have larger hit areas.
Admittedly, the “online” won’t work because somewhere in the two lines of code something isn’t happy and certain things are still throwing errors. Grrr…
To top it off, after I uploaded the swf and before I zipped all of my files, I tried to tweak something and now a whole bunch of links in my fla aren’t responding and no amount of control + Z is ameliorating the situation. I pinky swear I keep at it and re-post when all is well.
ZIP:: Carrick Project 3