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

Not only did the robot need eyes, he also needed to be able to recognize what he was looking at. The objective of the interactive was to have young children track down specific objects on a surface. To give them a prompt and to make the video of the surface a bit more interesting, a target was to be overlayed on the video pointing to where the object was. This meant that the Rovio would need to distinguish between the unique objects on the driving surface. So what set the objects apart from each other?

Shape and size: Using these characteristics and constructing custom object (similar to facial) recognition using opencv and haartraining the different objects could be “seen” by the rover. This ended up being a balance of accuracy and speed, of which neither was good enough to use in the application.

Position: Using the rover’s position, both location and orientation, the specific object could be determined from its coordinates. The numbers coming back from the rover, through the beacon, ended up being too cryptic and not reliable enough to give specific positioning information, especially for moving a precise onscreen target. There was also no way to get vertical movement information.

Color: Pairing a unique color with the object to be identified could allow color detection to run the brain of the rover. This ended up being the most streamlined and accurate approach to identifying object in the interactive. Using a vibrant red, green and blue gave enough differentiation between the objects to bring up specific prompts for each target. Running the color detection on the video stream and then creating a box around the identified color gave a specific position in the video frame. The target could then be positioned in the center of the box, and exceptions could be made for outlying false positives. Color scraps could be disregarded and focus could be on heavy concentrations of the specific colors. Below you can see the blue box (hidden when not in debug mode) surrounding the green colored image.

Lighting greatly impacted the color detection on the objects. Above is a picture of two of the colored boxes blacked out by the background window light. The objects needed to be lit from a reliable, consistent source of light. This light would have to be pointed on the object or what was done in this case from within the object. The targets were lit with colored light to attempt to nullify lighting differences due to sunny or cloudy days (the interactive being in a heavily windowed area). Below are images against the window areas. First, the transparent gels of the three different colors (the red needed some help and has a light behind it). Second is a stronger light competing with the self lit color cone.

Recipe for robot eyes:
Wowwee Rovio
Red 5 video server
Flash netstream/video objects
Color detection

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

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

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

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.

A year ago I published a post about widgets coming to the television. A year later I have widgets on my TV. Now that I have experienced the widgets first hand, there is not much change to my feelings about the basics of the previous post.

There is still no bridge between the cable content coming over the wire and the widgets on screen. Widget content cannot be populated by on-screen cable content. This leaves out advertising tie-ins and related content that would be automatically populated.

There are however widgets for pulling video content from online. This enables the content to interact with additional features. The main downside to the online content is the timeliness of the content in comparison to traditional counterparts. There is very little to no live television content being delivered through the widget interface, or anywhere online. Any online movie rentals or purchases are delayed by at least a month compared to in-store movies.

HD is another problem area for online content. There are allot of bits to move for HD content and until broadband infrastructure is in place to handle the content, a coaxial cable is the only option.

Online content delivery still needs time to develop and find a viable business model. Timely content will not be allowed to move to an online market unless it promises not to threaten the more profitable traditional models, and until timely content is delivered people will still want cable/satellite and physical dvd rental.

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

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

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