Interactive Media: http://producten.hema.nl/

Adding Interactivity to eCommerce Websites

This website isn’t extremely function and is a bit difficult to maneuver through, but it provides a good example of what Flash has to offer and how it can add further interactivity to current websites. Again, beyond the lack of functionality, several of the links to not work, nor can you clicked on any of the items, it is a stepping stone to see where the world of eCommerce may be headed. As you scrolled down the page, all of the available products move, jump, and show a bit of their personality to entice the customer. By seeing the products in action, the consumer is theoretically more interested and willing to make a purchase. This website showcases the interactive possibilities that Flash has to offer. It may also make online shopping more attractive to consumers who like to see and experience a product before purchase. By building out these capabilities online through the tools available with Flash, a new avenue of information is available.

Flash once again proves that interactivity is not limited to games or other types of more obvious interfaces. The element of user interactivity can bring increased interest and value to all sorts of different interfaces. Maybe in the future we will see more online shopping websites move to more interactive layouts. This would allow users to test, view, and manipulate a product anyplace and anytime.

U23D movie and U2 360° Tour

My previous blog post was a Studio Exploration of Flashloaded. My more recent blog post below is really a combination of two of the four areas/topics of exploration: Design Exploration and New Media Exploration (Technology).

-----

U23D

DESIGN EXPLORATION

The transition from the progress bar ring to the image of the moon, followed by the panning down to audience level, is a catchy intro. The scaling and alpha effects applied to the text HEAR ... SEE ...EXPERIENCE ... NOW PLAYING ... U23D, and the background music, add to the experience. After this intro, the swf still has an energy. The red play button throbs. The U23D logo has a spotlight-like effect applied to it about every 10 seconds. A spotlight passes over the crowd. Cameras flash. When the red play button is rolled over, its rings pulsate outward.

Clicking the play button takes you to a video with some audio buildup and more impressive scaling and alpha effects applied to text, symbols, and a silhouette of the band members, although these effects were probably done in a video editing application and not Flash.

NEW MEDIA EXPLORATION

U23D is the first ever live-action 3D film. Details can be viewed by clicking:
- TRAILER & MUILTIMEDIA > U2 3D in Wide Release! (excerpt: "Cameras were being designed purely for this.")
- ABOUT THE FILM (excerpt: "The first digital 3D, multi-camera, real-time production ...")
- WHAT IS 3D? (excerpt: "... artificial intelligence that aligns 'eye position' of a stereoscopic camera in real time ...")

Some critics said that viewing the film's 3D effects was better than attending a live concert, so one possible effect of this technology is allowing fans to enjoy the band "live" at a much more affordable price.

-----

U2 360° Tour

DESIGN EXPLORATION

The 3D graphic would be impressive enough just as an image with no interactivity. Red arrows indicate which parts of the stage structure can be viewed in more detail. Rolling over an arrow reduces the alpha of the entire graphic aside from the portion corresponding to the arrow. Rolling over the leftmost arrow and top arrow also results in zoomed-in detail views with annotations. Clicking the arrow next to the 360° video screen loads an interactive graphic from the bottom.

There are horizontal intro and outro transitions associated with the navigation arrows at the top of the swf.

Fade-ins and fade-outs can be seen by rolling over the years under DESIGNING THE CLAW.

NEW MEDIA EXPLORATION

There are a number of firsts associated with the U2 360° tour:

The U2 360° Video Screen, Part 1: The Concept and Design
"Nobody has ever seen anything quite like it: one of the most exciting, innovative elements of the U2 360° tour design is the expanding video screen based on a Hoberman sphere and his patented 'Iris Structure' as seen in the Iris Dome at The Museum of Modern Art in New York."

The tech behind U2's record-smashing tour - CNET News
"It starts as a solid elliptical ring approximately 20 feet deep, and transforms into form a cone-shaped mesh 60 feet tall."

U2 360° Tour - Wikipedia, the free encyclopedia
The concert at the Rose Bowl in Pasadena, CA on October 25, 2009 "was the first time a concert has streamed live on YouTube" and "set a new US attendance record for a single headlining act, as well as being the most watched live video stream in the website's history."

From what I remember, this video stream was more than 2.5 hours long and remained on the band's official YouTube page for weeks, but was eventually removed. This showing of unedited footage in its entirety for a limited time only and then removing it upon official release is one way (a new way?) of advertising and promoting.

Resources Exploration

I spent two years teaching myself Flash from the ground up, which of course meant I spent quite a bit of time Googling and trying to grasp the fundamental concepts of the software. Had it not been for the sites listed below, this process would have been much more difficult for me.

Kirupa

Kirupa actually covers far more programming languages and concepts than just Flash and Actionscript. New Windows-proprietary technologies are covered such as Silverlight and their new Windows Phone. In addition, entire languages (such as PHP and ASP) are analyzed. What I found incredibly useful about this site was the extensive library on a variety of topics, simple to complex, in addition to a variety of tutorials that illustrate the things they are trying to teach. As is the case with many resources sites, a community forum is available for when you’re really stuck.

Flashkit

Like Kirupa, Flashkit features a variety of tutorials on Flash fundamentals. I have found this site to have more complex examples and projects, though it doesn’t go into the useful detail that the authors of Kirupa do. However, if you’re comfortable with Actionscript sometimes all you need to solve a problem is to look at someone else’s code.

Actionscript.org

Actionscript.org features a variety of articles on the theories and happenings with Flash. While their tutorials don’t break down into the bare fundamentals, they do feature interesting projects that a new Flash user might not know how to start (such as drop down navigation). Actionscript.org features a useful forum, and I have found solutions to many Flash problems in there.

Colorblender

As a graphic designer, there are many aspects of design I am constantly checking for, such as balance, a focal point, and color. Color has an incredible impact on a design, and can be manipulate to generate a certain emotional response from a viewer. However, colors are sensitive beings can can be difficult to harmonize. That being said, I have found Colorblender to be a fantastic resource for when I need to come up with a group of colors for a project. Simply use the sliders to generate your desired color (or manually enter its RGB values) and the interface automatically creates a blend of six colors. Individual swatches can be manually edited with ease, though this sometimes allows the harmony to lose its strength. I use this utility quite frequently and have been very pleased with the result; especially when it convinces me to use a color I might not have otherwise considered.

Site Design Exploration - UNIQLO

http://www.uniqlo.com

Website for UNIQLO clothing store base in Asia and across the world, previously Site of the Day on theFWA.com. This store recently had a store opening and a promotional website where people could login to Facebook and virtually line-up for the opening of the store online. Using Flash the main website would pan over and show you the scrollable line-up of everyone waiting in line. That promotional opening isn't currently available to see on their page anymore, but this is a screenshot.

The store of their website is not using Flash but they have several promotional .swf 's presenting their clothing lines. There is an "introduction" interactive video

http://www.uniqlo.com/us/introduction/

This is a scrolling presentation of clothes, South to North. Slogans and Company information is floating in from the bottom. There are quick navigation buttons on the top left. Clothes begin flying up which the user can click and inspect further. They have made a neat magnifying inspection that makes the item you choose float around with a X / close button following your mouse. This presentation is very playful and fun to go along with the upbeat music.

Another promotional Flash player they have is for their Fall Collection, which is a slideshow of their upcoming clothes. I really like the transparency blur effect that they created when the slideshow moves back and forth.

http://www.uniqlo.com/plusj/us/main.html

http://www.uniqlo.com/grid/
This last section of the site is a small game. Basically you can move around the company logo on a grid like the one is the scrolling introduction .swf . You can interact with the logo but combining to make the logo bigger. Break one apart to create many. Toss some off the screen. And click and drag to move the logos around.

STUDIO/ARTIST EXPLORATION: Ariza

My exploration is on a Turkish photographer named Tomtom Mashallesi Nur-i Ziya Sokak. His flash site is simple but effective and eye catching.

http://www.ariza.com.tr/site.html

I really like the non-traditional navigation, with each level have some circular spinning animation. In the photography section I really liked how the gallery was set up. Clicking an image allows you full viewing, in full view you can either click the image to return to the gallery, or to the left or right to proceed to the next or previous image. I found that to be a fun way to interact with the gallery. If you click the button on the side "Add my lightbox" you can create a mini favorites gallery of your own, with up to 25 images, which is accessible on the main page of the site.

Under the retouch "menu", you have access to some of his before and after work. There are a few more interactive flash elements available in there. Not every image has the elements available, but for those that do you can zoom in, view before and after on top of each other and side by side; sometime some images took more than just 1 photo to produce, you can view all images used if the option is available.

The final navagation option is Contact. There was nothing particularly special in this section but it does what it needs to. All contact information is listed. If you want to follow any updates with the artist, on the left of the main page, you can subscribe to a newsletter.

The only thing I wish was on the site was more of a biography or a link to one. Aside from that I really liked the entire aspect of the site.

Design Exploration - Expedition Titanic by Firstborn

I have chosen a new Firstborn site called Expedition Titanic which was featured in the November 2010 issue of Adobe Edge. The URL for Expedition Titanic is http://www.expeditiontitanic.com/

I tend to prefer educational/informative sites. I thought that the "We Choose the Moon" site ( http://wechoosethemoon.org/ ) was a great learning/exploration tool and I have found this site to be both fun and interesting to explore as well.

This site was created by Firstborn (http://www.fborn.com/ ) for RMS Titanic, Inc. which apparently is in the process of conducting an extensive survey of the wreck site... for profit naturally.

For the most part I like the Flash work coming out of Firstborn. Their designs are generally very clean looking and not overly cluttered with unnecessary elements. The Expedition Titanic site continues this trend. I think that it takes a lot of discipline not to load up the design with a lot of bells and whistles. Firstborn did a good job in this area.

I liked the use of the vertical column down to the wreck site depth with various facts and animations on the way down. I also enjoyed exploring the wreck site map and the various links to additional information. It is my opinion that a well thought out design can be a very effective teaching tool. The challenge, of course, is how to keep the site visitor interested and engaged. I thought that the use of videos, photos and animations in the site was well done, clean and fun to explore.

For the most part the site follows the "make it easy" design principle. It is pretty simple to navigate through the site with the exception of the "feeds" area where you apparently need to have a Facebook or Twitter account to view the daily progress reports. I found this page difficult to work/understand.

The site maintains a consistent look and feel throughout with the use of colors and design elements. The navigation bar is easy to locate to find and to use.