The Livebrush Project

Livebrush 1.5

2011-02-28T20:04:00.000-08:00

It's been 6 months since the last Livebrush update. But I'm happy to announce that Livebrush 1.5 was released last week.

In preparation for features to come, there has been a lot of work done under-the-hood. But on the surface, I finally added the much-requested canvas zoom feature - something I admit should have been there since the beginning. It was always there, it just didn't work across-the-board. But a few nudges in the right direction yielded great success!

Pro-users got a little extra with the addition of custom canvas sizes and the ability to omit the paper texture layer. But that, too, should have been there from the beginning.

That said, I can't thank the community enough for their continued support and feedback. And as always, don't hesitate to let me know what you think on Facebook, Twitter or on the Livebrush forums.

Check for updates within the Livebrush. Or grab it fresh at Livebrush.com

Speaking at FITC 2011

2011-02-27T20:09:00.000-08:00

I'm thrilled to be speaking at FITC 2011. I had a blast speaking last year, but this year promises to be even bigger. It's their 10th anniversary, so inspiration is sure to be bursting out of your eye-holes.

I'm just small potatoes compared to the likes of:
Kyle Cooper • Flight404 • GMUNK • Theo Watson • Andre Michelle • MK12 • RIM • Lee Brimelow • Veronique Brossier • Julian Dolce • BLITZ • Grupow • Wesley Grubbs • Jam3media • Branden hall • Unity3D • Fuel Industries • Big Spaceship • The Secret Location • Colin Moock • Matt Rix • Bitchwhocodes • Robert Reinhardt • Grant Skinner • James White • Plus over 50 more. See all

After all that, I'd love to see you at my presentation,
Coloring Outside The Lines - Creating Apps, Art, & Profit

App stores and emerging distribution platforms have ushered in countless practical and entertaining apps. While innovation is in abundance, expressive apps seem largely under-represented. This presentation is about creative tools: why there should be more, and what you can do about it.

Two years ago, David created his first commercial app, Livebrush. Over half a million downloads later, he is still surprised at the response. But what’s next? And is there a market for similar tools? Topics will follow his journey from tinkering to profit and why creating toys can be more fun than playing with them.

They're still offering Early Bird discounts (ends March 18th): The first 50 people to use this code save $50 off the already low EARLY BIRD prices. Which means you can score a festival ticket for only $549 CDN, or a student ticket for $129! So order here and use this discount code for $50 off any ticket!

Visit: FITC.ca and use the code, weareten

FITC 2010: First-Time Speaker, Long-Time Attendee

2010-07-19T18:19:00.001-07:00

Flash was only the beginning.

Today, if there’s one thing FITC is known for, it’s inspiration. In less than a decade since its first incarnation as a Toronto-based festival celebrating Flash, FITC has spread around the world and broadened its scope. Now, there’s something for everyone: writers, designers, developers, or creative explorers. It’s that spark of inspiration that unifies the speakers and attendees. I’d like to think it’s that same spark that inspired the entrepreneurs to create Flash (FutureSplash Animator, at the time), and possibly the same spark that inspired the first flock of flashy individuals to come together and create this event.

As if the speakers, networking and parties weren’t enough to bring people together, each year the event is centered on a theme. This year’s “Playground” theme was most evident in the speaker introductions. Each introduction was pre-recorded (and edited) by event creator, Shawn Pucknell’s young daughters. And while it would have been funny, I’m glad they didn’t do this introduction for the “Cool Shit Hour”. Alternatively, they could have just called it the “Cool Stuff Hour”. But that doesn’t seem to have the same impact.

The “Cool Shit” presenters included myself, Chris Allen (blog.ff9900.org), Didier Brun (@didierbyte), Joa Ebert (@joa), & Mikko Haapoja (@MikkoH). And in spite of some technical difficulties, great work was shown. Didier got the whole room singing “Hey Jude” with his great audio analysis prototypes, Joa live-coded a music visualizer with his notorious keyless keyboard. Mikko showed his devotion to creative development with a 3D painting app created using the Voxel Engine/Fancy Engine. And Chris demoed an awesome Star Wars Trench Run game for the iPhone.

Throughout the conference, I was pleasantly surprised at the professionalism of everyone regarding Apple’s frustrating decision to control how we create content. It certainly cast a shadow over the Adobe/Flash community. But there was so much more to be excited about. For example, Lee Brimelow showcased the fully-implemented multi-touch capabilities in Flash, and then Richard Galvan & Mark Anders reminded us that almost every other mobile platform supports Flash (and ultimately allows developers to develop for multiple platforms). And personally, this is where the argument for Adobe/Flash stands strong to me. Developing for multiple platforms doesn’t inherently make for lesser applications. It just means developers have to make additional considerations. If an app is developed to “Apple standards” (on any arguable level), they shouldn’t be controlling how the app is developed.

Being a first-time FITC presenter, I only discovered the speaker room on the last day. But I’m sure this debate didn’t occupy the casual lunch conversations between speakers. On the contrary, I echoed Mr. Rick Mason’s (@egnaro) sentiments regarding how exciting it was to see so many familiar faces in Eskil Steenberg’s (@quelsolaar) presentation on The Future of Creative Tools. Having a particular interest in this topic, I was excited with the format.

Eskil began speaking about his multiplayer indie-game, “Love” (quelsolaar.com). The concept behind “Love” is that, instead of leveling-up your character with various interactions, you level-up the world around you (in a sense). But what was most impressive was that he developed the entire toolset needed to create the game. He demoed a modeler, a uv-mapper, an animation tool, and a few other works-in-progress, all of which were networked together for a practical collaborative workflow. By Eskil’s own account, he loves designing interfaces. And the work he showed demonstrated this passion for pushing the boundaries and dispelled dated metaphors for how we use creative tools.

I was also happy to have had the opportunity to congratulate Brendan Dawes (@Brendandawes) on another great talk. His presentation, The Grammar of Interaction Design was a gem where he showed examples of how magic and silence can elevate interaction to create great experiences. From westerns to websites, this man knows how to present ideas.

At the Source + Imagination panel, Brendan shared the stage with panelists Grzegorz Kozakiewicz, Tali Krakowsky, Craig Swann, and Eric Socolofsky. I missed this presentation, but had the pleasure of chatting with Eric Socolofsky (http://exploratorium.edu/) about the value of unnecessary interactions in creating meaningful connections between users; a topic that inspired some of the earliest concepts behind my part of the Cool Shit Hour.

I spoke about a motion-based drawing tool I developed called Livebrush (Livebrush.com). In addition to the demo, I showed a prototype that adds physics-based drawing to the tool. The audience response was great and I couldn’t have thanked Jamie Kosoy (@jkosoy), Sam Agesilas (@samuelagesilas) & Steven Sacks (@stevensacks) more for their words of encouragement. Then Sam & Steven politely reminded me of the awesomeness of FDT 3 and scolded me for using Flash to build an app of Livebrush’s size. At a personal demo, Dave Gomes (@davegomes from Disney’s Club Penguin) even out shined me using Livebrush!

At the end of it all, the parties and venue made it very easy to share Livebrush and meet up with local and digital friends. I have to give Kudos to illustrators Cassie McDaniel (@cassiemc) & Michelle Runowski (@meeshemellow) for sharing the coolest cards on the Playground. I also enjoyed meeting the “Almer” half of digital shop, Almer/Blank over Tapas, as a quiet end to busy day. And if there’s one thing all of this and the FITC team has given me over the years, it’s confirmation that I’m not alone in my constant pursuit of new ideas and new ways to share them.

Here’s to being inspired @FITC 2010.

Multi-touch Drawing & Flickr Photo Viewer in Flash

2010-06-17T07:31:00.000-07:00

I attended Lee Brimelow's multitouch demo at FITC Toronto this year. It was a great demo showing the multi-touch capabilities and testing features in Flash CS5. But the tip I was most excited about was a commercially available capacitive display for true multi-touch from 3M. It's a little pricey, but a worthy investment if you're an interactive designer or developer.

This video demo's some of the tests I've been doing to ramp-up multi-touch in Livebrush. There's a simple drawing demo that uses velocity and friction and a Flickr photo viewer. You can grab the source files below the video.

Source Files

The draw demo doesn't use any libraries. But the Flickr viewer uses Adobe's CoreLib, Flickr API, and CasaLib. I've included text files where you need to add these code libraries.

To be clear, the multiple gesture issue noted in this video isn't really a problem. It's a limitation of windows. But if you ignore the built in gestures completely, you can detect and respond to the same gestures with custom code for better results. Checkout TheFlashBlog for another demo using a custom api written by Tim Kukulski.

Introducing The Blogroll Part 2

2010-06-16T15:42:00.000-07:00

Hillman Curtis

Like David Carson, Mr. Curtis shaped me in ways I couldn't realize until many years later. What hooked me was his innovative use of video at the time. It was all I needed to solidify my interest in interaction design. Check out his book, Making The Invisible Visible (MTIV) for a candid discussions on new media and design.

Joshua Davis

Joshua Davis was one of the first to explore generative processes in Flash by combining his harmonious illustrations with code. For me, I think Joshua represents that moment when everyone realized it was okay to make code do crazy things - without any other purpose but to make beautiful art.

Joe Berkovitz

I met Joe almost two years ago. I was in the midst of a particularly sticky phase of building Livebrush, and I really didn't want to leave my computer. But a little voice insisted I checkout his talk at FITC. What conspired in this session may very well be what kept me going and brought Livebrush to launch. Joe is the genius behind Moccasin and Noteflight.

Dr. Woohoo!

Another newcomer. I identify with Drew in his vision of the future of creative tools. His development work is motivated by his artistic endeavors and, fortunately for us all, yields some pretty amazing mashups between creative tools.

Ryan Stewart

Ryan is a Platform Evangelist for Adobe. I was following Ryan for some time before I decided to contact him about Livebrush. Beyond the great information on his blog, Ryan shares a lot of insight and doesn't hold back. I find his attitude refreshing and I'm thankful for his advice and feedback.

Get Tablet Pressure & Gestures into Flash via Bamboo Dock

2010-01-21T22:14:00.000-08:00

Multi-touch, gestures and pressure are becoming the standard input mechanism for the average user and creatives alike. But for creative tools, pen pressure is often more of a necessity. And as far as I know, Wacom tablets are the only device capable of providing this data. So to get the ball rolling, I worked with Wacom to add pressure support to Livebrush. (Actually, they were invaluable. I couldn't have done it without their support.)

The most exciting part of including pressure is how it can be combined with velocity. You can have the precision of pressure while drawing, and then simply release the brush to have it use your gesture to elegantly complete the line. Here's a quick video demo.All the details, code and sample files are below.

Primer
Using Wacom tablets, pressure and gesture events are passed into Flash via their Bamboo Dock (download & install). Then, using their extensions you can test your apps within your Flash/Flash Builder workflow. Once installed, the Bamboo Dock automatically launches when you're testing SWF's within Flash or running/testing AIR applications. So, if you haven't already, download the Bamboo Dock and extension.

TabletEvents.FLA
This example shows how to initialize the tablet connection and register for events. The interface traces the events on screen. Download

ImageViewer.FLA

This example uses the same gesture events from the previous example to manipulate an image. Download

Tablet class
I've simplified the tablet connection with a custom Tablet.as class. It abstracts as much of the tablet implementation as possible. It's also the same class I use in Livebrush (so it may be a little rough around the edges). Simply call Tablet.init(this) to initialize the tablet connection and associate it to the main stage. Then listen for TabletEvent's and TabletGestureEvent's on any display object. You could also create your own implementation using the classes provided by Wacom.

Play with pressure
Click here to download Livebrush with pressure. Or if you already have the Bamboo Dock installed, you can install Livebrush as a Mini!

Additional Links

FlashInTO Presentation

2010-01-19T21:45:00.000-08:00

On November 25th, 2009 FlashInTO invited me do a little presentation on Livebrush. These are the slides from that presentation. Sorry they took so long to post :)

Frameworks & Libraries
Adobe Core Lib
CASA Lib
FDOT
HYPE Framework

Drawing Commands for Actionscript 2, 3, SVG & FXG

2009-10-01T20:29:00.000-07:00

Each new version of Flash player has given developers an exponentially larger API to play with. From networking protocols to drawing commands, it’s increasingly difficult to keep track of exactly how much power we have at our fingertips. And this is probably why, when I decided to make Livebrush my first AS3 project, I completely overlooked the new drawing commands available as of Flash Player 10. In any case, I hope this post helps others to be more informed than I was originally.

Primer
This post is for beginner-to-intermediate Flash designers and developers. I’ll also note that SVG is not natively supported by Flash or Actionscript. I’m only demonstrating this relationship in respect to how I converted native drawing commands to SVG for the vector exporter in Livebrush.

The demo below illustrates drawing a shape using Actionscript 2, 3 and SVG. Use the tabs to select the type of code. And use the ‘Build’ button to step through the drawing, from start to finish, line by line. There will be more information on each type after the demo.

Actionscript 2
To draw using this method requires that you sequentially step through each drawing instruction (ex: moveTo, lineTo, curveTo). And it’s probably still the most common and useful method for many tasks. However, it’s weakness is in how the data and command functions are married. It becomes incredibly tedious to use this method when rendering and modifying complex objects.

Actionscript 3
The new drawing commands make complex drawings much easier to create and especially modify. This is achieved by isolating the data from the instructions. Furthermore, the drawing instructions are abstracted into numerical commands that you sequence in an array. By isolating the data, commands, and rendering process, the amount of code required to draw a complex object is significantly reduced. But what's with this new syntax?

var pathShape:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());

First, understand that the Vector class is just another indexed Array. The main difference is that a Vector array contains values of one type (referred to as the base type). So this new syntax is used to specify that base type. In other words new Vector.<int>() means, create an array that will only contain values of type int.

SVG
Scalable Vector Graphics (SVG) is a xml-based markup language. I chose to export lines drawn in Livebrush to SVG because it’s a standardized format supported by all the major illustration tools. SVG is similar to the first method of drawing in Actionscript in that it combines the drawing commands with their corresponding instruction. However, besides syntax, it differs in how you can group instructions into objects that share similar styles and properties (ex: the <g> tag). Just remember you can’t natively import, export or render SVG using Actionscript.

The Future
For now, this is where Degrafa comes in handy. Degrafa is another xml-based language used to describe and render graphics in Flex. But it also offers many more powerful shortcuts. One of which is a soon-to-be-released importer/exporter mechanism for SVG data. Check it out.

FXG (via Adobe Open Source)

FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player.

Final Notes:
At the Adobe MAX 2009 Awards, they showed a sneak preview of Flash generating code that could be copy/pasted into HTML 5 for viewing with the new Canvas tag. In other words - watch out kids FXG is going to blow the lid off everything.

Check back soon for an exclusive post on the FXG format and how it relates to the drawing methods described in this post. Until then, you can check out Mike Chambers' post for the reasons why Adobe chose to create FXG as opposed to sticking with SVG.

Introducing The Blogroll

2009-10-01T08:56:00.000-07:00

There are many designers, developers, and writers that I admire and respect. Some are on the blogroll. Others will be added down the road. For now, it's my pleasure to introduce a few gentlemen from the list.

David Carson
Carson's work is where my interests in design began. But I wouldn't realize it until years later when I purchased The End of Print. From this book, I realized that Carson was the designer behind the skate & grunge aesthetic of the late 80's and early 90's. And since then, I've collected all his books and continued to be inspired by his work.

Colin Moock
I first encountered Colin through his website, moock.org. I was trying to figure out some little tid-bit of code. After a strange animation of two washroom signs having sex, I found what I was looking for. And, as it turns out, so did thousands of other eager flash kids. And we still do.

John Iacoviello
John is fairly new to the list. But I have no doubt he's been rocking the Casbah longer than we've all known him. Since his iconic site debut on The Favorite Website Awards, John has left our chilly winters for the warm California sun. But I never would have known all this unless I had had the pleasure of working with some of his code.

Grant Skinner
I first encountered Grant through his work on, what I believe to be, the very first Flash components. But unfortunately, this incredible initiative was quickly overshadowed when Macromedia came out with their own. Nevertheless, Grant broke through and has gone on to win numerous awards and help many designers and developers bring their work to life. He taught me that, good things come to those who do good things - eventually.

Keith Peters
Keith's tireless efforts at bit101.com have been an enormous help to myself and many others for years. But I first placed a name to the code after reading a particularly personal post regarding his frustration over the ignorance of some HR departments. Glad to see those days are long gone. Through Keith and his books, we've all found new use and appreciation for the concepts that make animation and interaction fun.

Erik Natzke
I remember reading a little blurb about Erik many years ago. I identified with his sensibility when I read that he, too, dismantled many of his toys for the purpose of making other, more interesting, toys. And I think what makes his motion graphics or generative illustrations so interesting is that he hasn't stopped this process. It's not often that an artist appreciates the magic of code. I'm glad Erik is one of them.

Dan Frommer
Dan is probably the very first person I met online. We were both very young when I first stumbled upon his website, Fromedome's Page From Hell. Which, at the time, was the most radical departure from anything else I had seen. Dan taught me everything I needed to know in order to create great websites and get suspended from school. Check him out, he's a designer, writer and all around cool dude.

Ted Patrick
Ted is a platform evangelist at Adobe. Ted, like many others at Adobe (and previously Macromedia) have been a tremendous help to designs and developers looking to carve their path. But you've also got to love a guy that produces a library like FDOT. Anything that makes my day job a little easier (and ultimately affords me more time to play with shiny objects) holds a special place in my Actionscript Heart.

Vector SVG Export - Livebrush Vector Set 1

2009-09-17T19:43:00.000-07:00

By popular request, I added vector export to Livebrush. Stay tuned for the Actionscript and SVG details required to produce this update. For now, I'm hope you'll enjoy the first set of vectors produced using this update.

XMLToFolder - Use XML to Easily Create Directory Structures in Adobe AIR

2009-08-20T20:38:00.001-07:00

This is the first post dealing with File management in AIR. It's not the most glamorous of exercises, but still extremely useful for applications where you're creating varied directory structures on-the-fly.

Primer
This class masks the File object. But it's important to understand that the File object represents both a single file or a directory. Methods of the File object let you determine whether your object is a file or a directory. That said, this class only creates directories.

XMLToFolder is a simple class for creating directory structures using XML syntax. Usage:

Download Source & Example FLA

Features
- Supports using standard File object or a temporary directory as the parent folder
- Use a string to pass your XML folder structure

Final Notes
In creating Livebrush, stuff like this was the most daunting. As things got more complicated, I would often find myself writing countless utility classes just like this. And while fun for a while, I soon realized why libraries are crucial. But more importantly, why software development is very different from interaction development.

As always, I'd love to know if you found this post helpful (or not). And don't hesitate to make it better or point out any mistakes.

Dynamic Input SWF's

2009-08-11T21:49:00.001-07:00

One of our favorite features in Livebrush is the dynamic input behavior style. All the styles in Livebrush include a default dynamic input. To use it, change the Input style to "Dynamic". But this post isn't about using dynamic inputs - it's about creating your own.

What are Dynamic Input Behaviors?
Dynamic inputs are simple SWF files that are used in place of, or in combination with your mouse input. They allow you to dynamically control the brush tool in Livebrush. And the only thing you need to know in order to create these files is a little Actionscript 3.

Why use Dynamic Input Behaviors?
Maybe you're more interested in generative art. Or maybe you're looking for more than the built-in 'Live Controls'. In any case, we feel this feature is the most open-ended.

Getting Started
Download these basic dynamic input source files (you'll need Flash 9 or greater). Each zip file contains a FLA, SWF, and AS file. When you open the FLA and AS files in Flash you'll notice that each file has comments and instructions to help you get started.
BasicBrushControl
SmoothRandControl

Limitations
- For security reasons, dynamic input SWF's can't access online content (for now)
- SWF's must be exported for Flash 9 using Actionscript 3 (Flash 10 not supported yet).

Post a comment if you need more help. Or visit the forum to share your creations.

Open source & The Livebrush Project

2009-08-11T20:22:00.000-07:00

I thought it'd be best to openly discuss some of the emails I've been answering in regards to open source and the purpose of this site.

What you'll find on this site:
Everything that has gone into Livebrush, and everything that we have planned will be openly discussed here. Specifically this means lots of Actionscript, Adobe AIR, and Flash Platform code and information. The main goal is to help others in regards to using creative tools and developing creative tools.

Interaction and motion related topics will also be discussed here. These, and many other topics may not always be related to Livebrush. But I hope they'll always be useful.

Other topics will include using and developing for Livebrush. For example, developing dynamic inputs for Livebrush. Dynamic inputs are simple SWF files that are used in place, or in combination with your mouse input. They allow you to dynamically control the brush in Livebrush.

Segway to Dynamic Inputs!

Livebrush Introduction

2009-05-20T23:00:00.000-07:00

What’s this all about?

Up until this moment Livebrush only existed as a personal project. From this point forward, it will be documented and openly discussed. This includes code, ideas, inspiration and the industry trends that shape creative software. This is the Livebrush Project blog.

Getting here has been a wild ride filled with many uncertainties and doubt. But for the fact that I foolishly decided to make this my first AS3 and Adobe Air project, it’s also been the most rewarding experience of my career. From its humble beginnings as a simple idea for my portfolio site, The Livebrush Project has evolved into what I hope will become a resource and inspiration to many others like myself.

I’m a designer who’s had a love-affair with Flash since it was just another plug-in competing for the spotlight. In the time since, I’ve been grateful to work with many clients that needed a designer “that could do Flash”. I’ve watched Flash evolve into a platform that, to this day, pushes the boundaries of interaction and experience design.

What’s next? Well hopefully there’s at least one other person who shares my passion for this topic. But going forward, I’ll just start posting stuff I think others might find useful.