Illustrating In Illustrator 101 part 3 of 5 – taterboy
December 24th, 2009 | Filed under: Design, General Info, Illustrator, Tutorials

Defining Shapes

Lines:
Some may think that illustration is all about the lines, comics and other art styles may give this impression. I use line-work in most of my illustration styles, though not always black lines. If you do not use lines in your work, you use color or some other means of creating contrast between forms and objects. It is this contrast between colors or light and dark values that produce the lines we think we see everyday in the world around us. We will discuss the use of line-work and contrast to properly define shapes, light and shadow.

Comics may use line-work, but on closer inspection we find that those lines do a lot more then just define the shapes of the drawing. The line weight varies as it contours each element. This line variation builds the foundation of the form which gives the illusion of dimension. As you can see with the simple line drawing below. The drawing on the right pops with dimension while the left side looks more like a cave drawing.

Read More »

Technorati Tags: , , , , , , , ,

| No Comments »

Create Adobe AIR Badges At Any Size – taterboy
December 16th, 2009 | Filed under: ActionScript 3, Design, Flash, Flex, Free Components/Classes

UPDATE: 2/17/10

We added a redirect option to the HDBadge that allows AIR application install badges that are too small (smaller than 214×137) to redirect to another page or call a javascript function. The size 214×137 was as small as I could shrink the badge before the AIR install dialog would not show up (tested on a Mac w/Safari). See updates below.

Are you sick of trying to design around the existing Adobe AIR badge templates. In most cases they are way too large or have a look and feel that does not really match your design. A few companies have their own custom solutions with AIR badges that are nicely integrated into their sites. I wanted that for the updated ChessJam site, but instead of building one badge for each size, I wanted a completely flexible (one size fits all) solution from one swf.

The HDBadge Features:
1. One Size Fits All - The size of the badge is determined by the size you use in the object/embed code of the swf. The swf does not stretch, so you could have a badge that is 40×20 and 800×600 from the same swf, depending on your needs.

2. Smaller Footprint - One of the reasons the current badges are so large is they display AIR/App install error messages. This version hides the button after clicking revealing a console type area behind it. The error text conforms to the size of the swf.
Read More »

Technorati Tags: , , , , , ,

| 10 Comments »

Building iPhone Applications with Flash CS5 - video – taterboy
December 6th, 2009 | Filed under: ActionScript 3, Flash, iPhone

Lee Brimelow at gotoAndLearn.com posted a great video tutorial showing how easy it is to build iPhone applications with Flash CS5. Here are a few subtle observations from watching the presentation.

1. The iPhone development option in Flash is no small part of the next Flash release. The Flash Team really want to make the process as pleasant as possible. It will be easier to build iPhone apps, according to the video, then it was to build AIR applications when AIR was first released.

2. Flash CS5 will have a more Flex-like feel and better coding experience when writing code in the actions palette.

3. iPhone hardware acceleration will be in the final release of Flash CS5, the video has an exciting preview of different examples of Flash animations using hardware acceleration on the iPhone.

It’s hard not to cynical, the official announcement was made at MAX seemed too good to be true, the lack of hardware acceleration made the pre-release applications less appealing, but things seem to really be coming together as we are coming closer to the final release. The last obstacle is the size of the applications themselves. We want to release applications that can be downloaded over the air.

By the way, I am still waiting on my pre-release version of Flash CS5, maybe Santa can put in a good word for me. I have been nice all year.

http://gotoandlearn.com/play?id=116

Technorati Tags: , , ,

| No Comments »

Building Tiled Backgrounds Using Photoshop and Illustrator – taterboy
November 3rd, 2009 | Filed under: Design, Illustrator, Photoshop, Tutorials

I can’t wait to get back to publishing Flash tips and code, but we’ve been so wrapped up in ChessJam lately leaving so little time to clean up code and make things more component-ized. I am enjoying the break from programming though, doing illustration again has been very rewarding.

Fixing Blotchy Textures:
In producing tiled textures for some of the background paintings and 3D renderings, I found that even though the tiles did not really show any seams, they were creating some weird patterns over the whole tiled area. They needed tweaking without a long and laborious process of exporting and rendering. The key for me was to have a realtime preview of what I was working on, seeing how the tile would look tiled over a larger surface while I was painting in Photoshop. There may be better ways, we always appreciate feedback, but this worked really well and now my textures are much less blotchy.
Read More »

Technorati Tags: , , , , ,

| 2 Comments »

ChessJam Now Has Robots And A 14-Day FREE Trial – taterboy
October 20th, 2009 | Filed under: ActionScript 3, Flash, Flex, Games

No new code or demos this week, I spent most of the week and weekend fixing bugs and adding robots to ChessJam.

UPDATE

As of Dec 16, 2009, ChessJam is completely free, please refer to ChessJam.com for more up to date information.

All those who tried out ChessJam and only got a 3 day trial, email us at “chessjam [at] gmail [dot] com”, we are now offering a 14-day trial. Also with robots in the castle, you have a reason to stick around. With everyone else hanging out hopefully the more actual people you will get to play. It takes time to build a community, “If You Build It, They Will Come” only works if you have patience and good PR (we are working on the later). Read more about our recent updates at the ChessJam blog, HDI blog and Greg Wilson’s blog, also follow us on twitter @Chessjam. Pay special attention to the challenge, who plays the most games by October 31st, gets a free copy of ChessJam (bottom of the post “ChessJam for All”).

Why ChessJam?, Why us?, Why now?
Good questions, let me explain. When we purchase a chess set at the store, we have the option of a really cheap plastic set or a really fancy set made out of wood, metals, and/or fine stone. But when we play chess online this or something like this is our only option.

chessboard 2D

This is an early mockup of our 2D board, I was promptly sent back the to my sketchbook.

To see what happened next, Read More »

| 2 Comments »

Augmented Reality Sound Mixer Demo – taterboy
October 8th, 2009 | Filed under: ActionScript 3, Audio, Flash, Flex

Here is one of the demos we built recently to show some possible uses of Augmented Reality and Flex. This demo uses the FlarToolKit to detect the instrument patterns and place a 3D plane on screen with Papervision 3D. For the main mixer we use mp3s and 2D animations to show the different audio tracks. 3D is the future, but for now the low polygon count does not stand up to fully illustrated 2D graphics yet. We are using the FlarToolKit more as an input device to turn on and off audio tracks and to change the volume.

The Possibilities:
This sample is just a seed for the possibilities of future technology in live performances, not tied to a computer, how different patterns could create cues for video, audio, lighting and effects. The sample also shows how layering different symbols in different order can change the dynamic of the user experience.

To use this demo you will have to print and cut out the markers from this PDF file.

Included Symbols:
Drum Track
Bass Track
Horn Track
Guitar Track
Volume Fader
Eject (not used)

Note: Make sure you have plenty of black ink, use mat paper or card stock for best results. Depending on the lighting and what is behind you may have to put a piece of white paper behind the marker to force the webcams contrast higher.


click below to launch

To start Jamming, show a track marker to your webcam to display or remove an audio track. You can use the Volume marker to lower the sound to 20% or raise it back to 100%. The first time a marker is shown to the camera, it adds a track or lowers the volume. If you show a marker to the camera again, the previous action from that marker will reverse.

Note: In our demo we start with the drum and bass tracks to build a good rhythm, then add the horn. It sounds OK. Then remove the horn and add the guitar lead. The horn and guitar are both lead tracks and were not really meant to play at the same time, but this is about expression so there are no rules.

Enjoy.

Technorati Tags: , , , , , ,

| No Comments »

Use Flash Pro CS5 To Build iPhone Apps – taterboy
October 6th, 2009 | Filed under: ActionScript 3, Flash, iPhone

I have to admit I was skeptical of the rumors and was not alone either. There were many tweets on this subjects as everyone speculated what the “Big Flash Announcement” was was going to be. So now it’s out of the bag, you will be able to build iPhone apps with Flash Pro CS5. So what does this mean?


Here are a couple articles about how the technology works and will give us some insight into what it will be like to build iPhone apps with Flash.

Most Important, The FAQs:
http://labs.adobe.com/wiki/index.php/Applications_for_iPhone:Developer_FAQ

An Overview:
http://www.adobe.com/devnet/logged_in/abansod_iphone.html

7 Current Flash Apps In The appstore:
http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

This article may sound cynical as we discuss some of the different hurdles to getting an app from Flash Pro CS5 to the iPhone. The news is exciting to hear and your brain can go wild with the possibilities, but the real question is what kind of apps can we actually build with Flash for the iPhone?
Read More »

Technorati Tags: , , , , , , ,

| 4 Comments »

iPhone Watch August 2009 – taterboy
August 27th, 2009 | Filed under: Games, iPhone

iPhone Application (Game) Reviews.

We currently have 4 apps in the store, 2 games, one lite version of a game and a companion app to the book The Business of Design by our founder Joe Desetto. Though we had plans to have at least one new app in the store and another one really close to being submitted by now, I was pulled away from developing for the iPhone to work on other projects. I hope to be back to work soon.

Note: TapDots is now a free app and has done really well now with it’s gratis price, in the education category.

In the name of research and planning for new apps we downloaded and played some of the newer 99¢ games on our iPhones. Here are some brief reviews on a few of those apps.

Research or Play?:
Flight Control is like the gold standard in the 99¢ iPhone game market, it is what every game developer strives to put into the store. It is a simple, challenging and addictive game with great design and replay value. Unfortunately, like with all great things there are many copycats. There are a whole new line to line drawing/prioritizing games now, must are fun to play, but it is hard to enjoy them as much of the original. Too much of a good thing and all that….
Read More »

Technorati Tags: , , , ,

| 1 Comment »

Illustrating in Illustrator Better Faster, The Happy Frog – taterboy
July 27th, 2009 | Filed under: Digital Art, Illustrator, Tutorials

The Happy Frog Illustrator Tutorial Video (HD)

Here is my first screen cast with an introduction to illustrating in Illustrator. Included are some very important tips in creating great illustrations in less time as well as an overview of the illustration process. We will create a Happy Frog character almost completely using the ellipse tool.

There are 5 rules to Illustrating in Illustrator, Better Faster. They are mentioned in more detail here, including four reasons for cleaning up strokes in your final artwork.
Read More »

Technorati Tags: , , , , , , , , ,

| No Comments »

Box of Sox built using Ansca Corona – taterboy
June 25th, 2009 | Filed under: General Info, iPhone

The gig is up. All those who thought I was really smart for building Box of Sox with xCode now know the truth. Box of Sox and tapDots were built with Corona, not the beer, but an iPhone SDK from Ansca Mobile.

Box of Sox -  A fast paced matching game.

Corona uses a scripting language that is very similar to actionScript, javascript, and php to access the iPhone’s APIs and build applications. As a Flash developer working with Corona was so familiar, I had my first prototype built in less than a day. The best part is my brain did not meltdown like it does trying figure out xCode/Objective C programming.

Ansca is officially announcing Corona and it’s early adopter program this week at the HOW Conference in Austin Texas and will give a live demo on Friday in a session called “iPhone Development for Designers”. They will be joined by our own Sean Carey and Joseph Desetto to talk about the production process used to build Box of Sox.

To find out more about Corona, sign up for the early adopter program and download the SDK, check out their website here.

You can follow some of the up to date happening at the HOW Conference here and here

Ansca is making big news with the Corona SDK from Forbes and Information Week.

Information Week also quoted Trae Regan, another HDI guy, on trying out Ansca. He is a PHP/Database programmer and had his first iPhone prototype, pulling and parsing xml from the web, in a couple hours. Like many of us, Trae has spent numerous hours on xCode/Objective C tutorials with a nice collection of tutorial samples to show for it. Contrast that with a few hours spent with Corona, he was able to build a unique working prototype for a new application from scratch.

Update: Mobile Orchard podcast with Ansca

If you are looking for more details about Corona, check out this podcast at mobileorchard.com. Carlos and Walter from Ansca really get into the inner workings and their vision for Corona.
http://podcast.mobileorchard.com/episode-19-corona-easy-to-implement-high-performance-native-iphone-apps-written-in-lua/

Technorati Tags: , , , , ,

| No Comments »