22 Awesome Flash Websites

February 20, 2012 |  by  |  Inspiration, Inspiration, Inspiration, Inspiration, Project Four, Project One, Project Three, Project Two  |   |  Comments Off on 22 Awesome Flash Websites

Award Winning Flash Sites

There had been some debate lately about the future of Flash. Many people had predicted its death. The rise of touch-screen devices, many of which don’t support Flash technology, is a key player in this subject. Certainly, Flash offers some problems when it comes to updating and SEO, not to talk about the heaviness inherent to Flash projects. Aside from that, Flash offers a level of interaction with the user that other technologies hardly can achieve, altough this is changing.

HTML5 and CSS3 seem to be becoming the new standards in web design, but we can still find some great websites designed in Flash. In this post we compiled 22 awesome Flash websites. Check them out and decide for yourself if Flash should stay or disappear for good.

Marina Zarya BIOPIC

February 8, 2012 |  by  |  Project One, Student Work  |  Comments Off on Marina Zarya BIOPIC

MARINA ZARYA BIOPIC

Rationale

Project 4 Redo

May 11, 2010 |  by  |  Project Four, Student Work, Tutorial  |  Comments Off on Project 4 Redo

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.

Project Objectives

  • 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)

Project Outline

  • 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:

Summary

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!

Darts files | Tic Tac Toe Files | Cartoon Smart website

A Katchen: Project 4

May 11, 2010 |  by  |  Project Four, Student Work  |  Comments Off on A Katchen: Project 4

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.

www.aaronkatchen.com

Katchen Aaron – Project 4 Redo – GRA500

Monica’s Re-post (since I mucked up the first time…)

April 14, 2010 |  by  |  Project Four, Student Work  |  , , ,  |  Comments Off on Monica’s Re-post (since I mucked up the first time…)

Barron Live from 315 Submission

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.

INSPIRATION

For the grid: Uniqlo Mixplay

For the overhead table look: Lionways

FUNCTIONALITY

  • 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

Categories and Transitions

April 6, 2010 |  by  |  Project Four, Student Work  |  Comments Off on Categories and Transitions

Categories

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.

Spiritual
Mother Earth
Your own note
Charles

Unique Performers
ToTs
Straight Edge
Fritz’s Polka Band

Healing
Alzheimers
Keep on Moving
Sophistafunk

Businesses
Restoring Harmony
I am Hip Hop

Community
Syracuse Orchestra
One Question

Overcoming Opposition
Sophistafunk
Keith Smith


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.

Live from 315 – Concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Live from 315 – Concept

maxx - LF315 Concept-

Monica’s 315 Homepage Concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s 315 Homepage Concept

As I posted before, 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.

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.

Danielle: Live from the 315

April 5, 2010 |  by  |  Project Four, Student Work  |   |  Comments Off on Danielle: Live from the 315

For my design, I tried to form a skyline out of objects that represent different videos. For example, the Tots video is represented by french fries. I thought a skyline plays up the idea that the projects are about music specifically in the 315 area. The map in the background also relates to this idea.

On rollover, the silhouette will become the object and show a still and description for its corresponding video. Once the user clicks the video, the skyline will drop down and the video will become full screen.

Renée’s homepage design

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  , ,  |  Comments Off on Renée’s homepage design

here is the environment I was visualizing:

My concept is taking the “desk” idea to a lower level. I wanted to show the different genres of music with footwear. These are  stock images for now, but I visualize using our own photos with our preferred footwear to give the flavor of the music you will see when you click to the subpages. I also included a music player on the home page that would play clips of different music that is featured on the site. I wanted to use the circle of feet to show the unity of all these different styles coming together. I thought that the different pants and leggings showed diversity as well. In terms of functionality I see the circle theme playing a huge part in the interaction. Perhaps the user could rotate the feet to chose their selection. You can play with the feet for transitions, people walking, feet dancing, etc. I think it could be a fun and unique way to showcase the variety of music we have, and also allows for additional music to always be added later.

Miller site concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Miller site concept

The concept for this video came from the idea that music is all around us, all the time. It is an integral part of our community. I wanted to somehow show these videos within the context of Syracuse/CNY. I decided to keep the interface and user experience really clean and simple, while using the transitions to give you a sense of place and distinct personality.

Transitions will be movie clips of different scenes around Syracuse, different people doing different things (or objects that represent syracuse –(salt…. other things?). They don’t necessarily have to relate directly to the video they are tied with, the point is that this music is all over the community and sometimes we don’t even realize it. It’s just a natural part of things. So people in Syracuse in their natural environments will usher in these videos, unaware that they are part of this musical experience. It’s just life.

Once you click on one of the random scenes from the home page, the experience goes full screen, and you are taken into the scene. It lasts for a few seconds. In the case of the waitress, she serves a cup of coffee to “the user” at a table, and the camera (represents user-eye-view) zooms into the coffee cup, which then becomes one of the music videos. At the end of the video, the camera zooms out of the coffee cup and the screen returns to the home screen as the clip goes shrinks to its original size.

HOME PAGE

The home page is a big movie clip grid that moves around (maybe to a subtle music beat?) When you hover over one of the clips the clip wiggles a bit, encouraging you to click it.

The process for getting to a video clip:

  • Click on one of the stills on the home page
  • Zooms into the clip the user selects, e.g.  the potato

  • Some sort of action happens – the potato gets chopped and chopped until all the pieces “fill” the screen into blackness
  • The video starts.

This concept would be applied to all the clips- something happens in the scene and part of the scene becomes where the video player resides (inside a cup of coffee, a graffitied wall, a pile of chopped potatoes, etc. etc.) At the end of the clip the video transitions out of whatever element in the scene it came from.

sort of like…. this

Michelle’s brainstorm

March 31, 2010 |  by  |  Project Four, Student Work  |  Comments Off on Michelle’s brainstorm

5 words: community, diversity, original, quirky, honest

5 websites:

Ayumi Hamasaki

Of all the music players that I looked at, Ayumi Hamasaki’s was the only one that appeared exclusively in a second window above the website. I like the design of her website and the way that her music player is integrated into the site using colors and repeating design elements. Overall, I think that this music player is pretty slick.

Evanescence

I really like the way that flash is used in this site. I particularly think that the movie clips that play when the site is first opened are particularly slick. I’m not as big of a fan of this site’s music player, mostly because it starts playing as soon as the site is opened. I don’t like sites that fling music/sound unexpectedly in the visitor’s face. The player itself is simple: it has only an “on” and an “off” button, followed by the name of the song.

David Cook

David Cook’s website had two audio players on it. It had a basic audio player that plays the song “Permanent” on the home page. If the user clicks on “play music” it opens a separate window with a playable library of all of his songs. I like the double nature of these audio players: it serves to highlight the song “Permanent”, while still giving access to the rest of his music.

Nickelback

The music player on Nickelback’s website is fairly basic. It allows the user to play through Nickelback’s songs as though they are using an iPod Shuffle (meaning that the user cannot select the song, but they can use the forward and backward buttons to select a song that they like). I’m not exactly pleased with how the music player is placed in the site: it doesn’t exactly jump out at the user, and I almost overlooked it when I visited the site.

Edwin McCain

This is another site that starts playing music at you the second you enter it. As I already mentioned, I’m not a big fan of this. I do like how this site gives you the option to launch a “standalone player” to play the music in a separate window, however. I also think that the texture and the layout of the site overall is clean and very nice looking.

Design thoughts

I’m not exactly sure where I can see our class’s design going. I was out sick on Monday, so I think I missed a lot discussion about the videos and the site objectives as a whole. I’ll have a better idea after I’ve been to class on Wednesday.

Aaron Katchen: LiveFrom315 Proposal

March 31, 2010 |  by  |  Project Four, Student Work  |  Comments Off on Aaron Katchen: LiveFrom315 Proposal

5 Words:

Importance
Human
Organic
Fundamental
Rock (Base)

Visual Concept:

I believe from the few videos that I viewed (my computer seems to want to only play the audio and display a black screen), that clearly the commonality here is music, but there’s something else. These videos all include what music means to the people involved, it’s perceived importance. This made me think that this is a very human element, not something mechanical or electrical, but something very organic that can be traced back to our roots (or fundamentals).
I therefore propose a very natural and organic feel to the website design. I’m not sure of specifics, but it should reflect the 315 natural environment (not necessarily winter). The environment should not necessarily convey happiness nor sadness, but just the organic nature of music and what it has always meant for humans.
This design would probably have a lot of earth tones and textures, perhaps a simple navigation for time’s sake where the user could explore the content from the photo class, but possibly also explore some history of music. The history could be very video specific. For example, when view the hardcore punk video, there may be some information on the side of the video that explains the roots of hardcore punk in the Syracuse area and what genre of music it stems from. This website should be built around the idea of roots and stems, figuratively and literally.

5 Awesome Websites:

1. SAAB Site – This site incorporates the modern world and the natural environment very well together while using video to do so. A bit over our heads here, but great for inspiration about how to incorporate interactivity and video.

2. GE Smart Grid Site – This site again gives some inspiration into how to display the environment in our browser. It seems a bit plain and doesn’t suck the user in as much, but still interesting.

3. Lacoste Red Site – This site has nothing to do with the environment, but is a stunning example of how to combine video, music, and the user experience. Thought it was stupid at first, but man is it amazing.

4. HBO Voyeur Site – This site has it’s programming kinks, but overall a great concept of how to provide cool, interactive, video content to the user.

No fifth site… I liked these four a lot though

Dani’s brainstorm….or mental drizzle

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Dani’s brainstorm….or mental drizzle

5 Words : Talking Heads | Quirky  | Underground | Niche | Community

Some Baller Sites To Get The Juices Flowing

1. Walk the Line Festival

I like the website for the Walk the Line Festival because it is simultaneously simple and complex. The lines and doodles and uncomplicated but still contain a lot of interactivity.

2. Buildup!

The above site is actually for an Asian builder’s association but they have a feature tat allows the user to “build” music from construction sounds. Overall, I like the textured background paired with collage-esque designs.

3. Musicovery.com

This site looks a little nickelodeon but it uses an interesting navigation system. The user starts of by clicking their mood from a grid which creates a winding path linked by different songs that might strike your fancy.

4. Moodstream

This site has lots of pictures and music but isn’t really about video hosting. Nonetheless it is super sweet! It lets you chose from a range of emotions including happy, sad, lively etc. and then creates a playlist/slideshow to fit your mood.

5. Second Story

I figured at least one of the five sites should have a more traditional, clean look to it. Nonetheless, I like how different videos/projects on the site can be reached through a grid on the home page and then clicked through like a slideshow. The background can also be changed to better match the mood of each piece.

Thoughts

I like the idea of designing a site that can unite the similarities of the videos while also showcasing their differences. This could be achieved through by varying color or associating each video with it’s own graphical element.

Also, since this site is about music specifically in the Syracuse, perhaps the site itself can reference the city. For example, the home screen might be some sort of map or other representation of the SYR and each video nestled on a different “street” or “corner” of the map.

Monica’s Brainstorm

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s Brainstorm

5 WORDS: Irreverent   |   Passion (yes, we said it in class, but it came up several times in the clips)   |   Casual   |   Hopeful   |   Lifestyle

5 KICKASS SITES:

Not anywhere near “kickass” but I liked the way the video clips were laid out in a grid here with thumbs. When you click on one it covers the whole player and then shrinks back down when it’s done.

 This is a much slicker way to lay out the videos in a grid like I mentioned with the CNN site.

I liked the interactivity and the retro feel of this.

Dark colors, intimate setting that makes the viewer feel involved. Could work for multiple genres of music.

Although it’s not really consistent with what my “vision” entails, it seemed pretty slick and had a lot of potential for not getting caught up in only one particular genre of music. (and for more night club style inspirations…)

MY “VISION”:

I had this vision of vintage concert posters with vintage type, and dark wood in the back., not a lot of color Something like a combination of these things:

   

I would want as minimalistic a frame as possible, focusing on the videos and the thumbs. There is SUCH a wide variety of styles with this project that to cater to any genre in particular would be a crime to the other artists. You can’t cater to the tater (aka Tots) and then leave the Mother Earth lady hanging. I thought something evoking a pretty generic, vintage poster would fit the style of just about everyone.

I watched some of the videos full screen and some of them in a window filling about half the screen, and I enjoyed my viewing experience much more when they were full screen (especially on those big beautiful lab monitors). The people are passionate and the visuals are great, so its much easier to be absorbed into it when you’re not distracted by outside elements around the player. So the videos will definitely go to full screen.