Experiments

(Click screen shot to enlarge)

This is a prototype for a separate storefront designed to handle wholesale purchasers from HatchetGear.com. It was designed as a glorified version of a paper order form, but with extra niceties such as loading the data for an item, automatic tabulation, and so on. It was designed as a replacement and an upgrade to another order form and needed to be completed within a few days.

Due to the project itself changing focus, this was never actually used, but it still stands as an example of working with jQuery (a JavaScript framework) as well as AJAX-style data loading. For test values, any product number on HatchetGear will work. Here are a few test pieces of data:

756504470022
PSY2203.BLKRED
ICP4756.BLK
PSY6000.SLV

There are also a fair amount of features to improve usability and readability of the form using jQuery-enhanced JavaScript with CSS. For example, if you press "Enter" after inputting an item code, the page intercepts the keypress and loads the item rather than submitting the form. All values are added and recalculated as new entries are typed, which are also checked to prevent non-number inputs. I also spent time having different people test the form and improving the usability based on their performance and feedback.

This was a good chance to learn what jQuery can do. However, the specific framework wasn't as important as seeing what could be done quickly with any good framework over and above basic HTML and JavaScript. I've written my fair share of JavaScript and DHTML in the past. I'd rather use a tool that simplifies the cross-browser issues and lets me be more productive than try and remember all the idiosyncracies of each browser every project.

more >><< hide

(Click screen shot to enlarge)

When I first started working with Flash CS3, the first thing I knew I wanted to do was to make games with it. This game, which I'm calling "Connect the Dots" at the moment, is a simple puzzle game. It's more of a tech demo to let me see what Flash can do and to test out some different things in Flash rather than a fully-functional, finished project. But there's enough of a start that I thought I'd add it here as an experiment, as it's definitely an experiment in progress.

The game is programmed completely in ActionScript 3.0. First and foremost, my expertise is working with code rather than graphics. Everything is object-oriented and event-driven, including things such as tweens to move the tiles. There's also some fun stuff, like a simple recursive algorithm to determine which tiles are connected.

All the graphics for the actual gameplay are generated dynamically, which keeps the movie size down. While that's not always possible when trying to make a project stand out and look good, it can help, especially on a simpler project. If I was working with a graphic designer, it would be easier to stylize the project. But without a designer, the game actually does a better job of featuring what my strengths are and what I can bring to the table in a project.

more >><< hide

(Click screen shot to enlarge)

SomethingProfound.net is my personal website. I put it up last year after realizing that I should have some kind of web presence. While I did modify the CSS (working off of an existing Drupal theme), the part of this site that was my main focus was the graphic design. I don't consider myself to be a professional graphic designer, by any stretch of the imagination. But I know a little bit, and I wanted to apply that knowledge to a site that reflected more of my personality.

Over the past several years, I've worked with and befriended a number of excellent graphic designers. Each had his or her own strengths and weaknesses. Through listening to the discussions about their work, questioning why they did (or didn't) make certain choices, and paying attention to focus group testing, I feel that I've learned a significant amount about graphic design and usability. Maybe not enough to make a number of designs, but if I have an idea in mind, I feel that I can execute it and make it look presentable—and maybe even good.

The only other thing to bring up about this site (from a professional standpoint) is that it uses Drupal as the CMS. Since my background is PHP-based, Drupal seemed like a better choice if I wanted to add functionality. And, I knew that I wanted to work with at least one popular CMS, for the experience. I briefly considered building my own CMS as well. I realized that what I wanted to do with the site, however, was to add content immediately rather than create a new application. It's sometimes fun to create everything from scratch, but it's often better to use the right tool for the job to make sure the project gets completed efficiently.

more >><< hide

(Click screen shot to enlarge)

This project was designed to showcase various items located on the HatchetGear webstore. But just as importantly, this was my first Flash project, which helped me get comfortable with the language—and more specifically, ActionScript 3.0. I spent about fifteen hours to create this, with no prior Flash experience of any type, so for what it is, I'm proud of it. That may change as I learn more about Flash, but for now, I think it's a good start.

The movie reads multiple XML files—one primary list to see how many tabs to add, and another file for each tab—to get the data for the different items. This allows for tabs to be added, modified, and deleted as the need arises. The number of items for each file can be different, as well, and is determined by the specific XML file for the tab. The images for each item are scaled to fit in a 75 pixel square regardless of their original size.

If you were to look at the timeline for this movie... Well, there isn't one. The Stage is solid green, and is completely empty. Everything in the movie is generated through ActionScript. Even the movement is done through scripting, and the algorithm that controls the speed can be changed to allow for different acceleration rates and speeds. Once the movie loads, it is completely event-driven. The code itself is broken up into nine or ten classes, and it is designed so each object type can be modified separately and resized without changing anything else in the layout.

For anyone looking at the movie who thinks the layout is lacking something, I agree completely. My job is typically to make things look like the designer drew it up—and to make it work. Since this project was done without a designer, I made sure all the functionality worked and that it didn't look horrible. But if someone draws something up and gives it to me, I'll gladly work with them to spice up the look and feel.

more >><< hide