links for 2010-03-07

• JavaScript Image Rotator – Timed Image Swap
  The Rotate Images JavaScript swaps images automatically on a timer. The code supports many options and features, such as:

  Random Rotation
  PHP Images to Rotator
  Random Image Display, Sequential or random rotation. Linked or unlinked images. Linked images can all have the same destination URL or each can specify its own. Opening sub-windows and executing custom function calls onclick are also supported by the code.
  Rotate titles or captions with image rotation.
  Multiple instances are supported.
  Customizable rate of rotation.
  Images of varying dimensions can be included in the rotation.
  Pause/resume onmouseover/mouseout.
  Optional transition filter for Internet Explorer on Windows.[1]
  PHP directory listing as source of images.

  (tags: javascript rotator image)
• slayeroffice | code | image cross fade redux
  Image Cross Fader – This version uses unobtrusive DOM scripting and semantic markup to achieve its goals, and is somewhat less abusive of the CPU in Firefox. It also works in Safari – the original version was written prior to Safari supporting the CSS3 "opacity" property. Opera doesn't support opacity, so the images will just flip in that browser.
  (tags: rotator javascript effects dom)
• Create A Tabbed Content Rotator Using jQuery
  Create a tabbed content rotator (not sure what to call it really) using everyone’s favorite Javascript framework, jQuery and an interface library called jQuery UI
  (tags: rotator jquery javascript)

links for 2010-02-26

• 25 Icon Packs for Sketched Look for Your Website | Best Design Options
  Some nice hand drawn icons
  (tags: sketches icons free)
• 30 Sketchy-Style Brushes For Illustrator | Vectips
  Sketchy Vectors Rock
  (tags: sketches vector free)

Splitting the Atom – Massive Attack

Whoa.

Massive Attack-Splitting the Atom-directed by Edouard Salier from edouard salier on Vimeo.

Director : Edouard Salier
Commissioner : Svana Gisla
Production : Scream Park, Paris
Executive Producer : Anne Lifshitz
Post Production : Digital District
Post producer : David Danesi
CGI: Jean Lamoureux, Rémi Gamiette, Kevin Monthureux, Jimmy Cavé
Art & Compositing : Julien Michel, Xavier Reyé.
Flame: Christophe Richard

links for 2010-02-23

• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
  You thought 25 was a lot? Then you thought 35 was a lot. To that, I say, bah… here are 50 top wireframing resources. Chew on that!
  (tags: wireframe resources)
• Mockups To Go – A user-contributed collection of ready-to-use UI …
  They took Balsmaiq and made it easier. Crazy, but true.
  (tags: balsamiq wireframe components prototyping templates)
• web.without.words
  This is just cool. Play a game of name that website.
  (tags: wireframe process inspiration)
• Guidelines, Tools and Resources For Web Wireframing | W3Avenue
  Today “Web” is very different from what it was few years ago. It is better, but far more challenging – you can no longer ignore things like usability, information architecture and design. That’s why wireframing has received so much attention lately.
  (tags: wireframe prototype resources)
• "I Need to See It" – Wireframing for a Richer Web
  Taking good ol' fashioned, page-centric wireframes to new levels has become a hot button pursuit of particular interest to designers and information architects since the boon of 2.0 and all its accompanying buzzwords exploded onto the scene and into the consciousness of companies in 2004. Enter high fidelity wireframing!
  (tags: wireframe process ux)

A Short List of Other Tech for Flash Designers and Devs to Check Out

What do you do when you aren’t writing classes or managing assets on a timeline in Flash? How do you expand you knowledge or expand your creativity? For me, if I still feel like tinkering on a computer but not really doing any Flash/HTML/CSS work, I like to find new tools and try them out. Sometimes I produce stuff worth sharing, sometimes it’s just tinkering and playtime.

As a professional, it can sometimes become more about the day to day. The grind. You need to take a step back every once in a while and experiment.

Read on.

So what tools are worth playing with? Here are some toys I have had fun with over the last couple years… Maybe if you get some time, you should check em out. In general, I would recommend just picking the ones oyu want to play with based on how much fun it looks or if you have any interesting ideas percolating that look like they could be tackled with that tool. Don’t look at it from only an angle of commercial applicability.

• Silverlight – Unless you have been living under a rock, you have encountered the Silverlight plug-in somewhere. Olymipics video, MLB and NFL have all deployed content in the plug-in. If you are not a Mac only developer, you should at least install the toolkit and try to see how easy it is to rebuild some of your basic Flash stuff in this format. The codebase tends to be a little cleaner overall, as it’s a bit more modern and has less of a history than ActionScript does.
• JQuery – Like dot syntax? Hate JavScript because of it’s lack of structure and OOP? Maybe you dislike it’s over-verbosity? Whatever your reason, give this JavaScript API a shot. It will seriously change the way you look at ECMA/DOM scripting. Since first dabbling with other JS APIs like Prototype, MooTools, etc, I have standardized on JQuery and really, I no longer fear or dread writing JS. I would like a better standardized testing and integrated IDE (Firebug + a Text editor is okay, but there is so much room for improvement)
• Processing and ProcessingJS – Processing has been around for a while. It’s now a 1.0 release, no longer Beta. You can pull some serious stuff off with it. A very robust Drawing API and support for GL. Wow. On top of that, the library was recently ported straight to JaScript, so no Applets are required to render sketches in the browser. The performance isn’t quite stellar, but really, this is an amazing feat of engineering. Expect this space to get a lot hotter as browsers start to add GL support in the impending HTML5 era.
• iPhone Dev Tools – No buts about it. Developing for the iPhone platform is hot. Apps are popping up like crazy and with the iPad on the verge of release, it is only going to get more so. So, why not get on the bandwagon and write something? Well, beyond the politics and approval process of getting your app in the store, there is the challenge of learning a very complex and expansive language, Objective C. Couple with that the CocoaTouch API and rather complex provisioning and deployment process needed to build and test on your own device and you will quickly realize that as a Flash dev, you aren’t in Kansas anymore. That doesn’t mean you can’t dabble though. If you are a student or educator, you can get free access to the iPhone dev program. Also, you can try out the Unity platform for a really powerful game creation toolkit that also will open a world of advanced 3D online gaming and possibly even Wii development.
• VDMX/VJ tools – If you are more into the visual side of Flash, doing generative graphics or have investigated using Flash a video switcher or live performance tool, you should really check into this type of tool. Perfect for glitching video or acting as a visual accompaniment to a electronic set. Completely configurable, media friendly and super powerful, VDMX is made to perform live. If you have some musician friends, use your medai production skills to augment their performances. Tons of fun!
• VVVV or Quartz Composer – Related to the VJ tools, but also capable of doing much more in terms of programmatic and generative effects, VVVV and QuartzComposer both offer node based editor spaces. These types of tools should be familiar to old-timers that played with Hypercard or Apple Media tool. If you haven’t come from that back ground, prepare your self for a bit of a learning curve, but wow, once you get rolling with these tools, watch out! The limits are way way out there.
• NodeBox and Context Free Drawing – I have lumped these two in together due to the somewhat similar outputs: images and animations. They are both scripting based drawing tools. NodeBox uses Python. ContextFree uses a set of rules called “grammars”. These grammars’ syntaxes somewhat resemble C/C++. The drawings these produce can be simple or really really in depth. Each of the apps have examples of the work you can produce with ‘em at their respective sites.
  

Some of the ones I have been wanting to try out, but just haven’t gotten around to.

• haXe- HaXe is a multiplatform language. While most other languages are bound to their own platform (Java to the JVM, C# to .Net, ActionScript to the Flash Player), haXe is capable of outputting to JS, Flash, C++ and a lot more. Pretty cool. ECMA style programming for client-side, server-side & desktop. Are you using HaXe? Done any cool stuff? I’d love to see it.
• OpenFrameworks – At The Iona Group, we do a lot of installation work. It’s fun. Sometimes Flash doesn’t cut it. One of the avenues I have considered going down was using OpenFrameworks. Check out this video for some cool info on it. High resolution output and lots of awesome hardware integration.

  made with openFrameworks from openFrameworks on Vimeo.

So… What are you playing with these days? I’d love to see what you have going on.

links for 2010-02-17

• Using Firebug for CSS on Vimeo
  This is a demonstration of how to use Firebug, a Firefox addon, to investigate CSS.

  It was done using Firefox 3.0.5 and Firebug 1.3.

  (tags: firebug tutorial)
• YouTube – Introduction to CSS editing using Firebug
  The firebug firefox extension allows you to edit in real time your CSS code. Instead of having to make a change, reload, make a change, reload you can just edit it live to see the results.
  (tags: firebug)
• Quick & Easy CSS Development with Firebug | Tutorial9
  From the article: In the past, I found myself spending countless hours tweaking my CSS and making everything work in Internet Explorer just as it would in Firefox. Everything changed when I found Firebug. In this tutorial, I am going to discuss how to use Firebug to make CSS development faster, and share some tips for a consistent look between browsers.
  (tags: firebug tutorial)

links for 2010-02-15

• The Skinny on CSS Attribute Selectors
  What can I say… Some CSS hotness here.
  (tags: css attribute attribute-selector selectors howto tricks)

links for 2010-02-12

• 20 High Quality Free Fonts for Designers | Freebies
  Free fonts, get your free fonts here. Some really really nice stuff.
  (tags: free fonts)
• Fitted: a jQuery Plugin
  Make a whole div a linK? I think I just might… JQuery to the rescue again.
  (tags: jquery div link)
• Flash Bitmap, Flash Text, Flash MovieClip limits | Flash User
  There are some Flash limitations to be aware of before any Flash project implementation.
  (tags: flash limits)

links for 2010-02-09

• Mega Drop menu – Enjoy it responsibly
  A perfect website is the result of the application of several techniques that come from different fields. The most famous trends in the modern web design are just the perfect combination among rules from design, web usability, user interface design, science behind HTML, CSS and Javascript.
  A relatively recent trend is the use of mega drop-down navigation menus. They are simple to build and have a great appeal for the users.
  (tags: megadropdown menu webdesign)
• Choosing The Best CSS Framework: A Complete Guide | DevSnippets
  Contemplating using a CSS Framework? Read here to get an overview on pretty much all of em.
  (tags: css framework)

links for 2010-02-07

• iPad User Experience Guidelines | UX Magazine
  Apple's Human Interface Guidelines for the iPad outline how to create user interfaces optimized for the iPad device. According to Apple, the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.
  (tags: ipad)
• code · Video for Everybody!
  This maight just be the most flexible way to deploy video on your site. Uses HTML5 for complian browsers, falls back to Flash and Quicktime for those that can't support it.
  (tags: video tutorial flash html5)
• CSS Rounded Corners In All Browsers (With No Images) | Jon Raasch's Blog
  Could this be the best way to go with rounded corners yet? Seems so.
  (tags: roundedcorners tutorial)
• Alyssa Welch's IM 365 Site
  (tags: students_spring_10)
• Natalie Kuehn's IM 365 site
  (tags: students_spring_10)
• Darion Clay's IM 365 site
  (tags: students_spring_10)
• Melanie Lepold's IM 365 site
  (tags: students_spring_10)
• Khalil Ali's IM 365 site
  (tags: students_spring_10)
• Danial Reid's IM 365 site
  (tags: students_spring_10)
• Adam Zimmermann IM365 site
  (tags: students_spring_10)
• Emily Berger's IM365 site
  (tags: students_spring_10)
• Ryan Boughner's IM365 site
  (tags: students_spring_10)
• Jay Vasse's IM 365 site
  (tags: students_spring_10)
• Laura Wirtz's IM365 Site
  (tags: students_spring_10)
• Nadia LaBostrie's IM365 Site
  (tags: students_spring_10)
• Sarah McDonald's IM365 Site
  (tags: students_spring_10)
• Jess Cwik's IM 365 Site
  (tags: students_spring_10)
• Live Webcam Chroma Keying in Flash " Zapper's Labs
  A quick an easy way to add Chroma keying to Flash AS3 projects
  (tags: chroma_key as3)