DESIGN EXPLORATION

Mini Ninjas

This is just an eye candy website of a new game that just came out. The vector graphics are really neatly done. It has that cartoon like theme. There are also a few games there for you to play. I just really like that design and think it's pretty clean. Check it out, you won't be bored!

http://www.minininjas.com/us/#/home

Studio Explorations

I found this awesome design studio from Japan. It's just a their portfolio, but built in a kind of unique and creative way. It seems pretty well organized and effective.

http://wonder-wall.com/#project/en

Resource and Design Exploration

My first resource: Free vector graphics from http://www.vectorjunky.com/

Simply use the navigation to the left to search vectors - then click on the download button next to the vector of your choice. The page uploaded will tell you the images rights of use (usually free commercial and personal use). This is a great resource for saving time, if you don't want to spend too much time creating graphics. I use it for clients, and some flash

projects. Not recommended for ultra skilled animators - but may be useful as a 'starting point.'

Want to look at some other Flash Games on the web? Check out: http://www.onlineflashgames.org/games/ or go to .../ninja-plus-2.htm to play the ultra cool ninja game pictured next to this entry! Happy gaming, I hope these games spark some cool ideas for some of the talented programmers. Also check out this link: http://www.playhub.com/shooting-games/1618/Deadeye.html for a simpler game that is very entertaining.

Studio Explorations

Venture Media Group

Venture Media Group, located in Carpenteria, CA near Santa Barbara, is a design studio that is a blend of inspired imagery and designs from a family of like-minded digital professionals. As climbers, surfers, skiers, musicians, and artists, they strive to share the experiences and joys of natural environments through the visuals they produce.

They are a group of young entrepreneurs who set out to create a business that would be a direct extension of their values: creativity, accountability, and responsibility. The have made a commitment to using environmentally low-impact practices, including the use of soy-based inks for their printed products as well as in-house recycling. They have partnered with 1% for the Planet. They donate an average of 5% of their profits annually to approved environmental organizations, and they offer an eco-discount program for their clients.

VMG provides the following services to their clients: film and video, photography, and design for print and web. Their web-based clients include Tioga (bicycle accessories), Budweiser, dotFit (a fitness learning site), American Gladiators, plus many others.

Many of their sites are a blend of their film and photography backgrounds, but the most interesting use of Flash is on the Budweiser site. The site that was developed for Budweiser has an interactive beer-pouring game that first explains what the perfect pour for a beer is, and then you are directed to take the beer-pour challenge. Using the mouse you are asked to set the angle of the glass, and then position the bottle. Once you feel you have the proper positions click the “Pour” button, and see how you do.

The one thing I would like to see on this site is a direct link to the sites that they have created.

Jeff

New Media Exploration - Oval Design

Oval Design Limited, http://www.ovaldesign.com.hk/, is a Hong Kong-based, communication-focused creative agency specializing in the design and production of high-end exhibitions and events.

Started in the early 1990s, they have grown over the years to become a leader in the field and gradually expanded their services to commercial interior design, marketing event production and multi-media presentations, providing quality, one-stop creative solutions to their clients.

The Oval Design website is set up like an outer space video game. You launch the rocket at the beginning of the website and navigate with the space shuttle to different planets to view projects in their portfolio. Spots on the planet open up a slide show of individual portfolio projects.

I find their use of this flash website very creative, unique and engaging.

Resource Exploration

For this blog post, I've decided to show off three of my favorite resources for Flash/ActionScript, as well as an entirely new site I only recently discovered.

---

Let's start off with my favorite of the four sites: gotoandlearn.com. This is a site featuring tons and tons of in-depth hi-def tutorials by Lee Brimelow. I checked out a couple of his tutorials and found them very clear and easy to follow. That doesn't mean that they're simple though; you can learn some fairly advanced techniques through this site. (In particular, Owen might be interested in his Ribbet tutorial which walks you through the procedure for placing a phone call within Flash.) Be warned that his videos are at least 9 minutes and average closer to 20 minutes. Just be aware that his tutorials cover some intermediate topics and you may have to invest a little time to learn them.

---

Secondly, we have Keith Peters' blog, bit-101. Although he doesn't use video tutorials like gotoandlearn, Keith shares some great ideas with the community and shares a lot of interesting source code in his blog, as well as some insights to the Flash community. Additionally, he has a whole ton of free and creative fla files from a lab he managed in the past; all the files are available for anyone that's interested in downloading them, although they're unfortunately named only by date.

---

The third source is actually a subpage under the official Flash Player website (click here to visit). Although they doesn't describe here how to create amazing content, Adobe has compiled some really extraordinary sites (some of which we've seen in previous blog posts) which can provide plenty of good inspiration. Several of them have pushed the boundaries of what I thought possible within Flash. What's more, Adobe showcases them as 3D objects hovering above a reflective surface and responding to mouse movement in an impressive but processor-intensive display of Flash Player 10's newest capabilities.

---

Finally, I'd like to share Flash MiniBuilder, a project by programmer Victor Dramba. This is an alternative ActionScript 3 compiler, complete with code hinting. What impressed me is that there's a java applet version of the compiler that runs inside your browser window; you can write and test AS3 code entirely within Firefox or IE. This is cool for those without access to the Adobe Suite, although the lack of easily integrated visuals would be frustrating for developers.

Artist Exploration - Dave Werner

I stumbled across this cool web site, okaydave.com, that offers a fairly unique (to me) combination of video, sketches, music, and animation. The home page (below) offers a menu across the bottom (that's a little different) or by rolling over an image on the collage.



I like the fact that when you roll over a menu item at the bottom that you get a crude circle around the menu item rather than something super slick. I've used a similar idea in my work and thinks that it draws the user in. He also uses scribbled text to convey a similar personal touch.

Another thing that I like about the web site is its exploratory nature. That's nothing new in terms of Flash sites. However, I really like how Dave draws you in (again) at a personal level by introducing family members in the course of his work. In the wine example below he uses an interview with his aunt to discuss the differences in wine. Even more compelling is how he cleverly combines his knowledge of music and his interest in wine to develop a school project.



All in all, I found myself wanting to see more of Dave's homegrown, personal, web site.

Design Exploration

My second design exploration is on a website for the brand mark ecko http://www.marcecko.com/

The website had a great flash homepage with interactive "photogallery". I love the website for it seems to be so deep with flash layers, its hard to imagine how you can build something like this without confusing yourself. This website is a great example of the possibilities of flash web design.

Recource Exploration

For my second blog post, I did another recourse exploration. When I was working on my SIMON flash game project I ran into a few problems, and as a result I had to do a littel research and reading to figure out how to work through this problems. The first site i visited was called Republic of Code wich contains a vast amount of informaiton on AS3(actionscript 3) I needed to freshen up on some of my knowledge about event handling, arrays, and working with sound. The contain very simple and easy to understand explanations, and even instill you with some of the logic of why and how you would use certain elements, such as a using a MouseEvent over an Event. Republic of code definately keeps it very simple and light in order not to confuse the reader.
The websites interface is very easy to use and navigate; the menus are self explanitory and one can even use a search engine if they are unable to find exactly what they are looking for in the menu. They also maintain a forum section where people can share and collaborate on different AS3 projects, and one might be able to find some help. I myself used this forum and found people willing to help me work through my SIMON project. Republic of Code is maintained regularly and is up to date on the new and current AS3 code principles.

http://www.republicofcode.com/

The other resource I checked out might help some people who don't have the money to buy expensive AS3 coding books, or also for people who are looking for books that might be more to their gear of learning. O'Reilly Media (O'Reilly publishing compnay) offers free chapters of their published books for people to view. Though limmited in what they provide for people to read for free, it is still plenty of knowledge one might be able to use. I personally used it to find a way to use arrays inside a timer and for loop; i later came to the realization that was the the most effective method, but what I read did give me a start in the right direction. O'Reilly offers some of the best resource books out there for AS3, and the ActionScript 3.0 Cookbook, a very heavy duty resource book for more advance users. Though some of their material is geared for advanced users, they also offer free chapters for beginners and intermediate users. Also if you are looking to buy a resource book, and don't want to go to the hassle of going down to your book store and look through them, O'Reilly gives you the benefit of looking through some of these chapters and see if you like the book enough to buy it. Again though the numbers of chapters they offer for free is limmited, they still contain plenty of basic principles crucial to further developing AS3 code, just check out their archives,

http://digitalmedia.oreilly.com/

The Cardboard Store: Design Exploaration

http://cardboard.theupsstore.com/

The UPS Store presents this world they call "The Cardboard World". In the Intro video you meet Joe Biz, A small business owner who is trying to make it on his own. He finds that he has too many tasks to do himself and instead of hiring a staff, UPS convinces his that he should use the services of the UPS store to help him.

I was immediately sucked into this site simply with it's use of cardboard. The simple things in life. I enjoyed how the designer was able to make a small 3d world that you are able to explore with corrugated paper. The designer also uses depth of field really well to make the site seem a little more reachable.

The designer made it sort of a game, you have to find these tokens to make it to the end so Joe Biz can impress his new Clients. It's very simple, click and drag, find the arrows and click on them. I'm sure they could have made it more difficult, but that's not what the site is about. After you click on certain UPS Stores you learn about their services and what other great things UPS can offer you aside from shipping.

Throughout the site there are little games you can play too, It's no Call of Duty, but it keeps your attention for a while. After all of your tokens are collected you can enter a drawing to win a Vacation or something equally exciting. I didn't take the time to enter, but you never know.

NewMedia Exploration - Adobe Indesign & Flash

Links
1) Tutorial: Exporting Indesign Docs into a SWF FILE
2) Test Site Example
3) XFL to Flash: Example

(I will keep the wording lite cause I will be talking more about this in detail. Below is just the summary of highlights)

I explored another Flash Creation Tool using an Adobe Software called Adobe InDesign.
Although, InDesign is used mainly for publishing print material, you can also export a SWF file or a Flash Authoring File known as XFL to create your own interactivity.

In InDesign, you can add buttons, hyperlinks, internal navigation links, and page transition types. Please see tutorial link#1 on how to export an InDesign File into a SWF file.

You can all create a layout in InDesign and create a XFL file that can be opened up in Flash with the same Objects made in InDesign. With this you can create your own interactivity. See Link 3.

I would also like to mention the Flash CS4 option to creating mobile Devices. This is where you should start programming your flash programs for a mobile Device.getting_started_flashlite_b.pdf

Design Explorations: Using Design to Address Business Objectives

My exploration looks at two commercial websites that use interactivity to solve or address business objectives.

The Chipotle website, http://www.chipotle.com/, is one of the more fun and effective commerical websites using Flash that I have found. It is a virtual playground of animation and interactivity, all aimed at building the brand of Chipotle as fresh, healthy, hip, socially conscious and slightly off-the-wall. The design effectively differentiates Chipotle from a dozen other "fast food" restaurants by contradicting the classic societal stereotype of fast food chains as fattening, unhealthy, "corporate", cookie-cutter, old-school business franchises with few, if any socially redeeming qualities.

On the Food-Menu page, we find an incredibly "clean" presentation of the restaurant's food with a flash photo player on a white background, creating an attractive and healthy-looking "clean-room" effect. Likewise, the Food-Ingredients page allows you to view (and desire) the clean, fresh-looking ingredients, attractively laid out for your perusal.

The FWI section -- Food With Integrity -- uses flash elements to tell a story and create the "non-corporate", customer-caring, do-gooder brand that Chipotle is building to differentiate itself from mass-market fast-food franchises. The design is again "clean" (white), with amusing, light-hearted animations (i.e., pounding in the CEO) and peaceful, wholesome, outdoorsy sounds to highlight the naturally raised animal products used in the ingredients.

Finally, I note the site design invites customers to become part of the hip, fun Chipotle culture, with a "Play" area and Chipotle-related downloads. Go to the customer-uploaded photos at www.chipotle.com/#/flash/play_photos and check out Photo 11 out of 163. Now, try to tell me that this picture doesn't make you want to be part of the "Chipotle nation."

Another very effective interactive website is the Chicos website at http://www.chicos.com/ (which appears to use Java Server Pages rather than Flash for its interactivity). The design of this website seeks to solve, or at least mitigate, one of the principle obstacles to online clothes shopping -- the lack of tactile feedback in the shopping process. When you shop for clothes in a retail store, you touch them very deliberately to gather more information about the item.

While you can't touch clothes online, the Chicos website provides a very effective alternative. Visit the "Jackets" page, for example, where you will find a typical "catalog-style" presentation of available jackets. Click on one of the models for a "Quick View" of one of the jackets. Now, on that jacket page, mouse over the picture of the model wearing the jacket. You are now presented with a zoom "window" of that jacket that gets you so close to the fabric fibers that it gives you a very effective "tactile substitute" for touching the jacket. Very clever!

Design Exploration

Cloudy with a Chance of Meatballs is an interesting website and can be found at: http://www.cloudywithachanceofmeatballs.com/

I picked this website because we can do most of the things on this site. The nav bars have rollover effects. it incorperates movie like anaimation which we can do. Most of the objects that we can click on have some type of MOUSE_OVER event that will shake the characters heads, create a popup box, of offer sounds effects. Then you get the payoff of going to the videos, games, of getting more information about the movie.

The Cheese & Burger Society wesite located at http://www.cheeseandburger.com/ make me hungry for cheese burgers. I enjoyed the interactivity of the website. The site offers a unique navagation system offering 3 different ways to find your cheese burger. It is in a rolladex formate with voice commentary. Simple, functional, and completely tempting.

Got code? How about a code decompiler?

One way to learn Actionscript 3 is to acquire fla. files, look at the AS3 coding and figure out the logic and organization "behind the curtain."

You can google "free flash code" or some other search thread and you'll find a number of sites that will give you code. (Flashsourcecode and Interactivemedia are just a couple of such sites.) On Karl's resource page there are a number of tutorial-type sites that also will give you code.

Getting code that way is ok but very limiting.

Another way to acquire code is to buy an application that will take swf. files and decompile them back into fla. files. These are called decompiler applications and they are controversial because code is considered to be an intellectual product by some (many/most?) and it is thought code shouldn't be "stolen" even if the purpose for taking the code is to study it and not redistribute it commercially.

I will leave it to you to ponder the ethical issues that using a decompiler raises. I understand the intellectual property issue but at the same time I simply want to learn how gosh-wow effects are achieved.

I did however do some research on decompilers. One of the most popular decompilers is the SWF Decompiler V5.3 put out by Sothink. It costs $79.99 and it's advertised as being able to convert SWFs to FLAs and extract everything from the files including images and code.

Another decompiler, Flash Decompiler, is put out by Trillix. It costs about the same --$79.95.

I downloaded free demo versions of both programs (the demos were limited in scope -- neither allowed for code extraction). The Trillix product was easier to use -- you just drop and click files. The Sothink decompiler was somewhat confusing -- I didn't actually test it because it wasn't as intuitive and frankly, I couldn't figure it out without a tutorial.

At left is a screen shot of the Trillix decompiler as it was decompiling a fla. file of the puzzle exercise we did earlier in class.

Resources Exploration: Smashing Magazine

Smashing Magazine http://www.smashingmagazine.com/ is an amazing on-line resource magazine for web designers and developers. There are articles on a wide range of topics relevant to all aspects of the industry, a listing of over 100 available web jobs, channels to approved web-magazines and bloggers, and much more. The content comes from Smashing Magazine's approved network of on-line magazines and bloggers, each of which has a channel on the Smashing Magazine website. Currently, there are about 18 contributing magazines and bloggers in the network. (go to the "network" tab to get a complete list and description of each contributor). The "home" page lists feature articles, with links to the contributing magazine's complete article, including comments. All feature articles are hand-picked and are of exceptionally high quality. Under the "categories+" tab, there is a categorized listing of archived articles on design, tutorials, tools, inspiration, how-to, fonts, showcases, etc. The site has a clean, fun and professional look, is simple to navigate and the content is applicable and relevant to web design and development.

New Media Exploration: Educational use of Internet

I am interested in the educational use of the internet as either a tool for classroom teachers to augment their courses or for a resource for supplemental instruction and practice. Many classroom instructors are using the internet to augment their courses. Karl's website for the Flash 2 course www.karlcleveland.com/190 is an excellent example. On his site I can easily find all contact information, the couse ourline, an in-depth description of all exercises, papers, and projects, an extensive list of resources, as well as video tutorials on lecture material. All information is easily assessable, relevant, and answers almost all of my questions. Another example is my daughter's high school math teacher's site, http://www.rosenmath.com/ where she can find all assignments as well as a power point file for every lecture. This is incredibly handy if a student is absent or didn't quite understand the material. Another example is my nieces on-line C++ programming course at Riverside Community College, which uses a website for video lessons, posting labs and solutions and a link to a chat rooms for extra help.
At www.nobelprize.org/educational_games I found educational games and simulations that use Flash to teach the concepts behind the Nobel Prize-awarded achievements. Each game or simulation includes a description of the award, the concept, an interactive game or simulation that demonstrates the players knowledge. The games offer hints and feedback as well as visual feedback of the consequences of an incorrect answer.

At Intuitive Math (http://www.intuitivemath.com/ or http://math.pcriot.com/ ) you can find UTube links to instructional videos for both algebra and calculus as well as on-line math tutoring via Skype. The video lectures, which are free to view, are a great tool for teaching math concepts. I even found a video lecture on the "Bottoms Up Factoring" method, which is the same description as one of my Flash1 projects as well as the game my Flash 2 project will be based upon. The on-line tutoring is the site's money maker, where clients pay in advance for a pre-arranged tutoring session with a live tutor over a Skype interface. They charge $30 for a half hour tutoring session! Interactive use of the internet is proving to be an invaluable teaching tool.

Design Exploration

The most rewarding part of doing charitable work is to see the effects.

This is the main concept of http://www.donate-a-meal.com, a site created by an Ogilvy and Mather office in Dusseldorf, Germany.

As many as 16,000 children living in Dusseldorf, Germany are hungry, according to the site, so it asks for donations -- in a very visual and interactive way: Users simply drag food that is displayed onto a child's empty plate and repeat this for as many children as they can afford to support.

Once donors have filled a plate and therefore fed a child, they are given their own plate on which to write a greeting to the kids. With this act, the donation becomes personal.

While the site's concept is simple, the effect is powerful. The children participating in the site are actors, but they do represent needy children and their earnest faces staring right at you with their unfilled plates say it all.

If users have any questions, they can click on the Dusseldorfer Tafel tab to learn about food redistribution and the volunteers (from producers to retailers to the Tafel's staff) who hand out food products free of charge to those in need.

The site is spare-looking, with the most color coming from the food and the children's faces. This treatment keeps users focused on the objective: donating.

The site's creators -- an Ogilvy and Mather office in Dusseldorf took home a coveted Cannes Lion award at this year's Cannes Advertising Festival. The festival has long been considered one of the best of all international awards shows to recognize and reward exceptional and innovative creative advertising.

Design Exploration

Stunning photography and photo illustrations, sophisticated thematic design and ease-of-use combine to impress users navigating the vacation resort site, http://www.biminibayliving.com.

From the first second after we hit the Enter Site button, we know we are in for a treat: Flying through blue skies and fluffy clouds, we then swoop down to the island of Bimini (in the Bahamas) and land gently on a white-sand beach.

Here, the subtle sounds of ocean waves, the occasional golf ball plunking in a hole and a slow-paced jazz-influenced "Bahamian Lullaby" inspire the user to learn more.

Clicking on the navigation bar (notice its placement; it's deliberately lower to showcase the resort's beautiful imagery), we view atypical submenus containing video snippets of the resort. Once we click on any of the menu items, a slide show appears along with a semi-transparent info box and minimalist-looking scroll bar.

Perhaps the most inviting of the menus is the Gallery and its slide show highlighting the island and the resort, a truly (vicarious) pleasure. The slide show is placed asymmetrically to focus attention and every photo is a glossy postcard of this vacation paradise.

To capture the island's fishing frontier outpost image, the luxurious prints are contrasted with the scratchy/cross-hatch filters on the navigation bar and on background photo edges. Bimini is Hemingway country, after all, and the author's laid-back life there often included snorkeling, trolling for game fish and sharing a few rums with the locals.

Winner of a 2009 Web Marketing Association award for Outstanding Achievement in Web Development, http://www.biminibayliving.com/ was designed by EuroArt93 (http://www.euroart93.hr), a Croatian Web development and design agency. Three people from the firm are credited with the award: a creative director/designer, a producer and an animator.

From both a design and marketing standpoint, this trio left no sand pebble unturned, right down to the requisite Contact Form and FAQs. Every image boasts blue, green and gold shades and opacity in the aforementioned info boxes is applied judiciously. Typography is simple and clean. The only (albeit technically impossible) treatment missing from the site is the scent of salt air and coconuts.