My deadly sin was lust. I began with a very straightforward concept and completely did a turn around. The idea behind my project was to evoke the users mind to think “dirty”. Once this was accomplished the user would see that what they thought was sexual actually wasn’t. My intentions were to make it a funny iteractive that would make the user laugh at at how provocative and unprovocative it was at the same time. I think I accomplished this but I have to admit I think I can keep working on this project to take it to its full potential. Overall as frustrating as it was to make the interactivity work it was really rewarding to watch it function when I figured out the technical side of it.
Overview: Every week I think I find the coolest portfolio site, and then the next week I happen to find something even cooler. Black Negative is a company website for directors, motion designers, photographers, web developers, etc. and their site is literally the coolest thing I’ve ever seen. Everything is interactive, and you go throughout the site by swiping to the left. The laid out all the different projects/cases they have worked on by each having its own individual page and some different form of interaction.
User Profile: The user of this website would be anyone that wants to check out the company’s work. There would be no age cap, just people looking for some cool multimedia/design work. I am pretty sure any person could enjoy the stuff that Black Negative produces as well as the beautiful website that lays out that work. I also don’t believe there is any typical audience member, but of course those visually inclined would most likely appreciate the work the most.
User Interface: The interface is pretty simplistic, but it gets deep, in that you can go so far into the interaction that you get off the path. But they have laid out the path pretty clearly so if necessary navigation on the bottom of the page can be used to get one back to the place they were at. The interaction is a bit all over the place, but I think that only adds to the amazing experience you have as you explore the site.
Functionality: As I mentioned above, the interaction goes deep, but because of the bottom navigation, it is okay. I love the side sliding of the website versus the typically up down scroll. All in all I think they did a beautiful job laying out their projects in ways that make people want to engage with what they created and not just look at it and move on.
Overview: Yodabaz is another portfolio site that I believe is beautifully well. It is a cool mesh of animation, interactivity and video clips that work together to show off all of the designer’s best work. He has a nice mix of graphic work with photo work that is displayed in a very easy to use simplistic manner.
User Profile: The user of this website would be anyone that wants to check out the designer’s work. There would be no age cap to the user that would be checking out this page but his or her interests would most likely include some form of graphic arts/photo or they would be the other side of the spectrum which would involve those clients looking for a designer for their job. The people viewing this portfolio would be from all walks of life, large age range, and a wide variety of occupations.
User Interface: The interface is extremely simplistic. I love how the page loads with the numbers popping up. The font choices used are beautiful sans serifs that are in caps to emphasize the word as well as be clear and easy to navigate for the user. My favorite part of the website is the background on all pages which seems to be a moving video/gif/image of the designer who does something different in the background every time something new is clicked on. It adds the personal touch and I definitely think it is what makes this portfolio stand out even more.
Functionality: Most of the website works because it is so simplistic and it’s not very hard to navigate. There is always a back arrow or understanding of how to get to the new page. I would only have about two complaints: 1) would be that the pages/pictures/designs load extremely slow, which makes me (and maybe other users) get annoyed and sometimes end up giving up and clicking on something else or going to a different website. And 2) Some pictures are slideshows and if you go to the way right or left your cursor becomes and arrow that is used to look through the pictures. I would never have found that if I had not by accident flung my cursor on the side, there is nowhere where directions are stated and I think that would cause some confusion with the user.
Overview: Bernard Testemale is a photography and this is his portfolio site. I picked this site because I loved the creative way of presenting his portfolio and how close the images and display of his work come to looking like real 3D objects. I love the use of wood, pictures, and random objects that bring his portfolio together into one creative masterpiece.
User Profile:I believe the user for this website is anyone interested in Testemale’s work. That can include students who are learning about photography, future employers or people that are looking to hire Testemale, and any person that happens upon the website and appreciates his art. I don’t think there is any exact age limit or occupation to the audience that would be viewing his portfolio site, but once again it would be a viewer that appreciated the photos he takes.
User Interface: The whole interface of the portfolio is what stood out to me. The way the details are dispersed throughout the various screens make the whole site one big experience. I love his use of sd cards, and lenses to really give you a sense that you are sitting at his table and you are looking at all the wonderful work he has produced.
Functionality: The functionality is pretty simple. There are some things that I don’t believe work quite well. I wish there was some other alternative way of viewing the images rather than having to click on each individual one. It makes viewing them very time consuming as well as annoying if you have to keep closing an image and then opening another one, rather than sliding through a slide show. I do like how you can organize and move the thumbnails on the table. At least this can help you put to the side the images you have already viewed so you don’t click them again. All in all I think Testemale designed a beautiful site that really helps him stand out in the photography world.
Overview: I picked this website because I found it will googling for interactive sites. I thought the audio and visuals really meshed together and made something that I normally would not give a second glance, quite interesting. I also like how when the page loaded the lines of the loading created waves when you would pass over them with your cursor. The purpose of the website is to educate users on water as well as give them a inside look at the documentary also titled Waterlife.
User Profile: I believe that the audience’s ages would probably be from the older teen into the adult. While the site is interactive, it is not interactive in the fun sense, but in a way of making the experience more interesting with special touches that you don’t really find on other websites. This is why I don’t think the website is targeted to young adults. The interests of the audience would most likely include biology or anything having to do with water; water life, sea life, etc. Someone who comes to this website is most likely very interested in the documentary Waterlife and wants to get more information on it. There is not much technical ability that you would need to look at this website. As long as you know how to click a cursor and be willing to explore the website by clicking all over the website, you will be able to use it.
User Interface: I do believe this is a good site that has many things that work; like the audio of water and the beautiful cinematography. I do think that there are things that do not work, such as the website looks a bit intimidating when you first see it because there are so many pictures and so many different things you can click on. I think the interface would be improved if the site pointed you to sort of a starting point.
Functionality: The website is functional. The buttons are simple and work pretty flawlessly. Like I said in the previous part, I think the experience would be improved if there weren’t so many places to click. But overall, I think the website is functional, and works.
I picked this site because when I came across it, it caught my eye as being really interesting. Websites that have really nice animation and graphics really pull you in, and this site definitely did that. What’s ironic is that I learned that this site’s purpose is to help businesses with latest technology web based solutions. They do consulting work with clients and help them with tools for things like advertising and selling for their business. They help with general merchandise portals, niche verticals, job portals, and community portals, also Search Engine Optimalization. I think it’s really cool that their site is so interactive and interesting because it shows that they know what they are doing!
I think the user would be any smaller business needing help with finding new ways to enhance their websites. I would guess that the user would be someone who is struggling setting their business apart and is looking for a way to make it unique, through use of the services offered by SensiSoft. I would guess the user’s age would be somewhere between early 20s-40ish. Occupation would include any smaller business, perhaps a personally owned business that doesn’t have an IT department. Any cultural background would be using this site I believe. I also believe they would have to have some sort of technical knowledge/ability if they want to make this happen for their business, and I’m sure they would have access to broadband as well.
My favorite thing about this site is the face that with each “page,” you enter a new time period/location. Starting with the About Us tab, you move through time to the future to the Contact Us page. The center holds all the information for the page you are on, and the background is a 3D image of a certain place around the world in a specific time period. This is a really unique feature that I was really impressed with. I love the background image in each page. I love how animated they are to make it seem like an actual moving place. It’s an interesting touch. I also like the navigation tabs and how you are able to click on the arrows to take you to the next page, or you can choose one from the tabs. One thing I might have changed would be the small area holding all of the information. If they needed to add more info, they most likely wouldn’t have room because the info is so cramped in that small space.
This site is pretty simple to use, especially because all of the information is in one place on the screen. The arrows moving to the next page make it really easy to navigate. I love how when you click on an image in the center, a box pops up allowing you to see the additional information. This is a nice touch that makes it easy to use. The site is pretty self explanatory which makes it more appealing. Like I said above though, I wish the information was a little more spread out since it’s feeling a little cramped, but I understand why it is that way in relation to the design and animation.
I picked this site because I really think it’s relevant to us as graphic designers. It is a website that promotes inspiration and creativity through various channels such as photographs, videos, and music. By tweaking the settings you are able to see and hear things that mimic the characteristics of the mood you choose. I think this website is definitely a helpful tool in aiding writers/designers/etc. block.
The user of this website would most likely be 18-35 years old. They would most likely be in some creative fields since they are searching for a site that gives inspiration and this website provides it in a different way than we have seen before. Once again, the users interests would also probably be in the art or writing fields. I think it the users would be similar to those who look at Pinterest for inspiration or use Murally to create mood boards. This website is just a new fun way of aiding the creative process. The likely technical abilities of the user do not have to be extravagant. All they literally need to do for this website is be able to tweak the settings to their liking. No special computer needs necessary other than knowing how to use a mouse and having the ability to listen to audio. The broadband connection does not have to be some special system as well.
I think all in all the website works as a whole. It is very simplistic so one needs to be very nit-picky if they want to point out things that do or do not work. I believe the simplicity plays in the favor of the website. Since the idea is to inspire, the settings want to be very small and unnoticeable so the pictures/videos and music stand out the most. I also like that they videos can be paused so one can choose to only listen to the music. On the other side, it is also nice that one can choose what images (and see the mood boards) as well as mute the music if one only wants to look at the images. I do wish there was a way to hide the settings on the left, so the user can get the full experience, but that is my only complaint about what does not work.
All the buttons as I mentioned above are very easy-to-use and so the website functions very well because there is no need for prior special internet knowledge. The buttons explain themselves and are easy to move and fit ones inspirational needs.
I picked this site because just like many others, I grew up watching Disney and being in love with Disney. So by finding a site that allows me to interact with Disney behind the scenes, is like finding a little piece of childhood. The purpose of the site is to give the users a fun filled interactive experience where they collect different symbols in each separate story. The site is an adventure.
The audience would most likely be a group of young adults, that know how to use a computer and like Disney. There will be some older users that, like me, want to relive a tiny little part of childhood and enjoy Disney, but I believe it is mostly focused for younger teens who want to interact with their fairytale stories. Interests of the audience will once again be the movies, theme parks, and full out Disney franchise. Someone who doesn’t enjoy Disney and has not watched any of the movies will not get the same experience as those who have. Since the audience is young, their occupation is most likely to be students, and their technical skills will be basic, since most of the interactivity involves clicking and listening to the story.
I think the website as a whole definitely works. It makes you feel as if you are watching a movie and really taking part in a little adventure to help your favorite Disney character. I do believe that the storytelling parts are a bit long, but once again, I’m not the target audience, and those younger than me would definitely appreciate the story being told. I love the graphics and the 3D way the images are made. I also enjoy the background music which adds that extra oomph to the experience.
While this may only be on my computer at the moment, the interactivity lags a bit, which takes away from the experience. The user would need to have a very good internet connection in order for the site to work flawlessly. Otherwise I find the site to be very simple to navigate and understand, which is good considering the target audience.
HERE IS MY FLASH PIECE: “ONE MORE TIME”
HERE IS THE MOVIE THAT PLAYS AT THE END OF MY FLASH PIECE: “ONE MORE TIME”
Vimeo: “One more time” by rebekah mackay <— click me
When I decided to tackle a new project I was happy to get away from the old start something new that I actually cared about. After fooling around in flash for the whole semester and not having my old project work I actually learned a lot of what to do and not to do…how to plan better and achieve a better outcome (faster).
This new flash piece is about what running means to me. When I thought about it, running means everything! So I had to focus my thoughts into one way of describing my feelings about running. Running is something very special to me because It has given me the opportunity to do things in life that I never would have without it.
Running has opened doors, and quite honestly it was all about timing – Running helped pay for my education at Syracuse University and with some set backs came another opportunity to stay for a 5th year and obtain my masters while still competing for the team.
(in this way running has given me a second chance – and one more time at achieving my goals both as an athlete and a student.)
My project is called “one more time” because my dedication and love for running has enabled me one more time to complete the goals I have set before me….I also presume this will not be the last time that running will be my “one more time” moment in life.
I have posted my multimedia piece that is embedded in my flash as3 on vimeo. This is my description when I had to describe/rationalize my video.
“What does running mean to you?” A question I was asked by my professor when I was assigned this project. So I thought…I like to live in the moment and look towards the future…so… to answer his question: right now running means “one more time”–one last chance to compete for Syracuse University xc and track. Time is ticking, and I want to make sure I enjoy every moment of it…&… Run for it, One more time.
As for my flash AS3 project :
I Chose to have a picture that I took while on a trip at Stanford university as my background. It may seem simple or cliché but its really not – the two shadows to the right are of my two coaches: Coach Fox and Coach Bell: they are an important part of my running because they have not only coached me to be a better runner, but also a better person. My shadow is the lower left – I like to think of it as resembling a relationship without being tacky.
The stop watch that drops down and is ticking was hand drawn and brought into illustrator and psd – I wanted it to have a ticking noise to have the audience know to click it. It is kind of like a sneak peak to the multimedia piece in the end.
When you click the watch it brings you to the page where my favorite quote is displayed in a timely fashion—and describes how I race and live life.
After the words exit the main piece (movie) slides in to the stage to give a final conclusion to the actual assignment.
p.s. no tutorials.
For my redo of project 4, I decided to improve my knowledge of actionscript 3 using a set of Cartoon Smart’s tutorials for constructing flash games. Prior to taking on this challenge, I was really struggling with code, so it made sense to try to do something that would force me to interact with the more complicated aspects of actionscript. I ended up getting more than I bargained for.
- To improve my understanding of actionscript of a whole
- To learn some of the elements of code that allow for multi-player games and how to toggle back and forth between players
- To improve my understanding of complex conditional statements
- To move my coding to the next level (which, given that before I could only fade things in and out, is not saying much)
- To work through a couple of Cartoon Smart tutorials, starting with one on controlling objects on the stage using actionscript alone and working my way up to doing a complex game, in which I am certain to encounter complex actionscript.
- Using the knowledge that I absorb from doing the complex game, to construct a simpler game of my own (without a tutorial as a guide). With this second step, I will hopefully be transforming passive knowledge into active knowledge.
Step 1: Follow a Tutorial, Construct a Game
First of all, let me start out by saying that I got a little bit more than I bargained for, but I think I managed to learn a lot more than I was expecting, as well, so things evened out in the end. For my complex game, I chose to follow the tutorial for a darts game (which actually ended up being three darts games in one. I worked my way through some really complex code, and it was a major moral victory when I finally got everything to work, even with a tutorial to work along with. The tutorial came with a starter file, so I worked using Cartoon Smart’s artwork. Even so, just doing the code work was enough to keep me busy for days. The buttons at the beginning of the game and the end of the game are mine, however. I put those in myself and linked them to the appropriate variables to allow the user to select which game he/she wanted to play.
Things I learned (This is a shortened list; I learned more things than I could keep track of):
- How to include external as3 code, allowing me to separate my code, while still making the individual sections findable through naming conventions.
- How to create variables and apply mathematical functions to them so that the speed of objects varies in a nonlinear way.
- How to use and customize the sliders component
- How to use an ENTER_FRAME event listener.
- How to create a two player game and keep the two scores separate from each other. Also, how to build turn alternation into the game.
- How to trigger functions outside of an event listener.
- How to remove event listeners inside of functions to prevent double triggering and bugs in the code.
- How to create tweens using code, pre-TweenMax (which helped me understand TweenMax better).
- How to use filters inside of flash.
- How to construct complex conditional statements
- And many other things that I’ve forgotten to list here. Overall, my understanding of how actionscript is structured and how to write functions so that they are triggered in the appropriate order/at appropriate times was greatly improved.
Without further ado, here’s my SWF:
Step 2: Use what you just learned, and build your own game, sans tutorial
Despite having just worked through a much more complicated more game with a tutorial as a guide, I was amazed at how difficult it was to sit down and write the code for a completely different sort of game from scratch. I managed, but it was not without a lot of errors and failed attempts.
For my own game, I built Tic Tac Toe. Even though it’s a very simple game, it still took a lot of code to construct and make work the way it’s supposed to. You have to construct code that will take into account every single possible move that a user could make and every single possible outcome. It was a lot more difficult than I thought it would be, and definitely much different from working witha tutorial.
Outcomes of Step 2:
- Practiced working with masks and cuing different movie clips
- Understood in a much more concrete way how to construct a scoring function and run it between turns.
- Practiced working with event listeners inside of event listeners. Learned about some of the errors that can come up and how to work around them.
- Practiced triggering functions inside of functions.
- Worked in some more complex action script and wrote some complex conditional statements.
And here’s my second SWF:
Overall, I think that I was very successful with trying to meet my project goals. Looking at my four objectives, I think I met all of them. I know I definitely worked through a lot of the issues that I was having with actionscript at the beginning of the semester. I have a much more solid understanding of it and I’m much less frustrated with Flash than I was at the start of the semester.
Constructing the games was a good solution for me and my Flash-induced-frustration because I got to play the game every time I wanted to see if something was working. When I was working through my errors in the darts game, I was sitting in the Newhouse labs with a friend who was working an overnight shift, and every time I got through with a possible correction, she and I would play it together to see if it was working. It was really fun, and took some of the pain out of the learning process for me. I would highly recommend games to other people who struggle with actionscript; they’ll definitely help you learn and understand more, without the frustration that surrounded trying to gain an understanding of actionscript through other means.
I’ve attached my files (with commented actionscript) below, so you guys can check them out (and hopefully learn from them as well). To those of you who are going home (or have already gone home), I hope you have a great summer!
For this redo, I created a jQuery/JS/HTML/XML slideshow for my personal website. (Warning! as of the time of this post, the included zip file only works on the sports page, and the actually website only works on sports and product page). There is no “rationale” for this per se, but I will explain a bit how I did it.
The slideshow player first begins to work when the user clicks on one of the categories, in this case sports. The JS loads an XML document, which has listed out all the photos I would like to include and the category they should be placed in. The JS code counts how many of each photo there are, and then dynamically creates LI elements inside of a UL element for the appropriate amount of photos (one for each). The code then loads each photo into a list element one by one, starting with the first photo the user would view and proceeding to the last. The plus and minus buttons simply fade out the current LI element and fade in the new LI element, all of which are on different Z-Index planes. To those of you who don’t know HTML or JS that made no sense, for those who do, it should be clear.
I didn’t really use any tutorials here as is my nature. I thought logically what should happen and researched how to do each little part, rather than read a tutorial about how to make a slideshow. I also consulted with Ken. Gracias.
I really liked the idea of showing a grid of thumbnails of the different videos. I imagine that once the user is on the homepage, it would look something like this. To add some motion and life to it, the thumbs from each of the videos could animate randomly for a few seconds at a time. When the user rolls over the thumbnails, a title and brief caption will appear in the thumbnail area.
To incorporate the video transitions and the idea we came up with in setting the environment on a table/desk, we could lay the grid over an empty area of the dark wood tabletop, and once the video is clicked, the camera could move over the table to the appropriate genre transition. The wires laying on the table at the top right corner tie in the appearance of other objects on the desk. The video could scroll up to show the rest of the headphones attached to those wires as it moves to the “About” page, or some other subpage. Once the transition is over and the subpage has been reached, a translucent box for the video player will appear over the table/objects, and then once the user presses Play, the video will go to full screen (see below).
And as much as I didn’t want to go with orange and blue for a color scheme, it worked well with the dark wood texture. It doesn’t have to be blindingly obnoxious orange like we’re used to at SU, but a paler orange and a light blue. Dark, textures, warm, and ambiguous enough for all the genres.
For the grid: Uniqlo Mixplay
For the overhead table look: Lionways
- Video pan over objects on table
- Camera stop, grid of thumbs pops up
- Once a video is selected, camera pans back over to chosen objects representing video
- Video player appears for visitor to hit play
- Video goes to full screen for duration of video
- Navigation always on top so user can easily choose new videos or sub pages
Okay… here’s some proposed categories for you guys to take into consideration. I categorized the videos, rather than the music present in them, so my categories don’t necessarily correlate to music genres. Some of the videos are currently in more than one category, just because they could fit into depending upon what videos we get in the second batch and which categories need more supplemental help.
Your own note
Fritz’s Polka Band
Keep on Moving
I am Hip Hop
My Thoughts on Transitions
I think that we are being fairly ambitious with our goals for the home state transitions, so the transitions for between videos should be kept fairly simple. It might be nice to use footprints as transitions (since different shoes leave drastically different footprints, and it would not be difficult to extend the idea of a person walking away into a set of footprints moving across the screen to move between videos.