Donovan H main header graphic Art, Graphics, Development, and other things creative... Art, Graphics, Development, and other things creative...
left menu top

Catagories

#Actionscript #Art #Blender3D #Charity #Cooking #Design #Flash #Free! #Games #IT #Java #Javascript #Life #Music #PHP #Programming #Video #Web #Work

Posts

CSS/JS 3D Cube

FeedMeComics Beta Launch

Shadowrun: The Anarchy Wars

J-B Weld a Bicycle Peddle to the Crank Arm

Introducing PolySure

Cyber Monkey 3D

Famous Artists in Modern America: Raphael

Arts Shows and Photography

Controling the Google Map Iframe

The Dark Lord Rises

Custom Form Check Boxes - JavaScript Class

HTML Color Selector Class

Styling Snipt Code Embeds

Simple Accordion JavaScript Class

I Stand with Rand

Glen Bradley for NCGOP Vice-Chair

CSS 3 @(at) Rules and Font Embeding

Happy New Year, New Site!

Making a Simple House with Blender 3D

Happy, Mic Check 121212

Making Mountains with Blender 3D

Bash ~ indexOf

Ana's Corner

ConstitutinalWar.org

Midwife Advocates Website

My Own City - Part 2

Virtual Box VS. VMware

My Own City (In Blender 3D)

The Return of DonvanH!

Geishas and Watercolor

More Vector Cartoon People

Basics of Graphic Optimization for Flash

Veterans for Ron Paul 2012

Dynamic Draggable Divs

AK Donovan Sole Brutha ~ Time Lapse

Disengaged Reality ~ Time Lapse

HTML5 Canvas Drawing

AnimatedImg - Javascript Class

CyberMonkeyDev.com Up

Charlotte, Photography, and Penguins

North Carolina CPM Rally

DJ The Sypher @ Heaven and Hell

Making a World... Map

TDI Site Complete

AS3 vs HTML5 Drawing

Poked in the Face ~ Time Lapse

WeAreChangeDC.org BETA up!

Jordan

Grendel Babies

SamMenkmeller.com is GO

Prince of the Pavement

Speed cooking for 100

AS3 to Clipboard to JAVA communication

Lighten Up ~ Time Lapse

AmbieMac.com is Up

Revisiting Design

Howl's Moving Castle

End the Fed 2009

Chicago!

Timer Tools AS3

Free Wallpapers!

Flash to PHP communication

Dynamic Timer Event Handling

JavaScript XML node array

XML to JavaScript structure return

Appalachian Trail

AS3 XML class [dXML]

Let Oklahoma Vote

MurderOne Shirt App

Stelor Games

Universal Click Handler

R,G,B, to HEX and back

Snipt.net

Kirupa Art Contest, 2nd!

AS3 Preloader Class

Purple Cauliflower

Paul is FREE!!!

Wallpaper tutorial

My First C++ App

Vigilant Logos

Free Paul Jacob

XML picture displayer

Flash Web Site Template

Afterdeployment.org

Easy Effects AS3

Election Judge

Attack of the Frownies

Gootropolis On-line World

Ohio Valley Recovery Inc.

Symphony City

Challenger Learning Center Site

CLC, E-Missions Site



Click to show the previous background image. Click to show the next background image.
blog title



I Stand with Rand

3/9/13

For all of you news junkies out there, this needs no explination. For those who don't know about the amazing filibuster that happened on the Senate floor on Wednesday, this sums it up,

I watched almost one third of the thirteen hour filibuster and was inspired to make this graphic.

I Stand with Rand

Download the large scale JPG.
Download for cards and stickers.
Download the Illustrator file.




CSS 3 @(at) Rules and Font Embeding

1/20/13

Many of us who have done CSS for a while are aware that an @ symbol can be used to @import one CSS file into another. This was never widely used as it has no significant advantage and it's not fully supported by Internet Explorer. Some of you might be familiar with the @media rule. Mostly used to control print jobs, the @media rule can also be used to target projectors, TV, handheld devices, and more. I wanted to mention those, however what I am most excited about is the ability to finally embed a custom font via CSS3!

Many times through my career I have been faced with the challenge of using custom fonts on the web. As most designers would do, I often created PNGs and treated my font like an image. A friend of mine, Steve Perrie, would at times use flash modules with the font embedded and the text value would match an embed param, which is a nice method with it's own set of pros and cons.

Now with CSS 3 we can finally just use a font that is on the local server! With the at-rule @font-face we can embed fonts and no longer be at the mercy of the users font directory. Here is a an example of using a custom font on a page,

If your browser supports font-face this will display in the Future Wolf font.
This one is called Guwey Scratchy.

Just remember, not all browsers support @font-face. For that, I have found these two charts, one is a list of supporting browsers, the other, the font types the browsers expect.

Font-face Browser Support
Browser Font Type Support




More Vector Cartoon People

4/2/12
So I have been doing a good bit more work in the area of design and animation lately, even picking up on 3D model building (soon to come). A while ago I had to draw up some vectorized cartoony people. Well the scope of that project changed and sadly they have been put aside and replaced by non-human avatars. Not all is lost though, for now I shall show them to you!













Basics of Graphic Optimization for Flash

11/21/11
One thing that I have found in my years of editing and fixing FLAs is that most people seem to take little regard to graphic optimization. Graphic optimization is important in order to make your application as efficient as possible. The Adobe Flash Player (AFP) handles both native vectors and bitmaps. Both of these have specific reasons to use one over the other. I will not get into the visual differences of vector graphics vs. bitmaps, I will explain when and why to use one or the other and how to do so at an optimum level.

To understand graphic optimization for flash you need first examine the AFP and how it handles the two major graphic types. Vector images are built and calculated continuously on stage with their properties applied to them by the AFP. Now the important thing to consider is vectors are little more than an array of points and some extra properties such as stroke, color, and so on. This most always will make for a drastically smaller outputted SWF file. However if your application requires a lot of stage movement, rotating, and tweening than you must also keep in mind that the AFP has to re-calculate all of these points, which can be quite CPU intensive. So vectors might not be the best approach to graphics for flash gaming, unless used for simple static graphics such as menus or buttons.

Bitmaps are the tried and true format for Internet images. They are handled in the AFP with about the same efficiency as any standard web browser. On average using bitmaps will bloat the size of your SWF file, making for longer loading time. The advantage however is that bitmaps are much easier for the AFP to move around on stage. Instead of recalculating numerous points the AFP simply needs to know what the new (x,y) registration point is. The bitmaps are cached so duplication and tweening are much less CPU intensive.

Now it is true that you can cache your vector images as bitmaps. However it is important to keep in mind that this command happens when the object is introduced to the stage. Clearly this makes the use of cached vectors (or vectors in general) a poor choice for things like gun firing in a game or scrolling background objects. To curb the stress on runtime processing you can store your vector in a movie clip and assign that movie clip to export on the first frame, however the caching command will still process when it is called in your script.

Since we know the key difference between the two major graphic types and when they are appropriate, lets look at some ways of optimizing both vectors and bitmaps. While testing for optimal graphic performance it is advised to keep open a system monitor to track CPU usage for spikes. Another important thing to do is enable flash to generate a size report on export. To generate a size report select File -> Publish Settings -> Flash -> Advanced, then click the box for generate size report. After doing this you will get a break down of all of the images that are loading into your application, as well as the frame by frame byte usage.

To make vectors more efficient you remove unnecessary points from the graphic. This will not only reduce your SWF file size but also reduce CPU usage from movement. The key is finding the balance between efficiency and beauty. If you are dealing with complex vectors, such as the ones made when you preform a trace bitmap command, you may want to use the Modify -> Shape -> Optimize tool. This allows you to reduce many of the unneeded points very quickly. Also when using shapes, keep them as simple as possible and convert them to either a graphic or movie clip that you will then use instances of time and time again. By doing this you can re-size, re-color, and re-style several different copies of the same instance.

There are a number of benefits to having your vector stored as a movie clip or graphic. Both allow you to change the color and styles of the graphic, however movie clip adds many nice features for only a small increase in byte size. Movie clips can have several handy filters applied to them. Take advantage of these filters, if you are skilled enough you can really drop your file size and avoid use of several bitmaps. If converted to a class object you can export them to load on the first frame, for preloading, and as mentioned before they can be cached as a bitmap to move more efficiently on stage. Keep in mind several filtered symbols moving on a stage will severely impact CPU usage. Since we are on symbol types, I should say a word about usage of the button type. Don't.

In ways of optimizing bitmaps there is not as many options, but let's go over them. In your library you can right click and open the Properties panel for any bitmap. Here you have a number of options, but the ones we care about are the smoothing and quality settings. Smoothing will slightly blur the bitmap hiding pixelation caused by lowering the quality to shave off precious KBs of space. I find with smoothing on you can use around 50% quality and have good results.

Naturally graphic optimization takes time, especially on large complex projects, however the end result is happier users. Not much, aside from unnecessary sound, annoys users more than long load times and lagging. By taking the time to properly optimize your flash projects you can often eliminate these annoyances. Also it much easier on your server and bandwidth to deliver smaller files.


Veterans for Ron Paul 2012

11/9/11
For veterans day I lent my skills to the Veterans for Ron Paul group and did some probono graphics for them. They needed vector logos for things such as t-shirts and stickers. After a couple drafts I was able to give them a design they were pleased with.

Front


Back


Here are some of the other draft image ideas that I had presented.







If you would like to use these images for your t-shirt, sticker, hoodies, etc, download the zipped package of all high resoulution images! If you want to use these images on your web site or publication please mention where they came from.


DJ The Sypher @ Heaven and Hell

2/5/11
I have recently completed a fresh new design for DJ The Sypher. As it seems with most design work it was a bit of a rush job. I was sent the info for the design the day before the show! Don't people know I have 10,000 other things I'm trying to get done every day? Anyways, within an hour or so I churned out this not amazing but rather nice poster for the event.




Revisiting Design

12/2/09

Back in 2007 I graduated from college with a degree in graphic design. Before I even graduated I had a job, not as a designer (though I worked with designers), but as a programmer. Not much has changed since graduation as my current job title is "Programmer". I have always been fascinated on how all those series of 1 and 0 make things happen. Programming can be fun and challenging (when it's not boring and frustrating), however it seems I have spent so much time delving into making things happen that I have not focused much on making them pretty.

This past month instead of researching how to execute command lines, perform cross platform communication, or further any of my various programmatic experiments; I have instead been reading design blogs, studying up on design trends, and finding some nice resources to make designing easier. Back in my college days of design I wanted to make everything from scratch, which would be cool if I were some sort of design master. Now I'm trying my best to put all stubbornness aside and focus on the outcome of a design experiment rather than how I came to it, in other words using different brushes and textures that I had not created personally.

With all these new brushes, textures, and resources design is becoming very fun again. Anyways I want to share some awesome design resources I have came across lately. They have inspired and aided me and I hope some of these links are useful to you all :) enjoy.

60 Free Illustrator Brushes

Huge List of Photoshop Brushes

Super Awesome Free Textures Site

Great Aid for Brain Storming

Sweet Web Design Site

Help Finding the Right Colors

Great Font Site, with a Font Finder!

Good Design Blog


Free Wallpapers!

8/25/09
Over this past year I have had a habbit of making desktop wall paper. Some of them are pretty cool and I thought to myself, why not share these with the folks who actaully visit my site. So here they are for you to download and use(click on the thumb nail then right click on the bigger image and save as). No water marks, restrictions, or any of that non-sense, enjoy!
UPDATE!
You can find all my wallpapers in my art section.



MurderOne Shirt App

5/20/09

So I have finally finished the shirt application for MurderOne Clothing! It turned out pretty well, all and all. There were several last minuet changes making it more interesting, and even though I had to take out some neat tweening effects the overall feel was still intact.

When setting up the pay-pal button, I developed an easy method of passing in multiple extra variables (other than price), using only one button. I will try to get a little example up about my method soon. I have been BUSY, lately look for a lot of updates when the storm calms!
AND!
Check out the T-Shirt App at: MurderOne Clothing


Check out the archived application HERE.


Wallpaper tutorial

1/19/09
After making several different types of these wallpapers for friends and co-workers, I have decided to post a blog on how to make your own cool gas cloud type wallpaper. To do this you will need Photoshop or similar image manipulation software.

First, create a new file that is the same size as your desktop and set your background color, I always use black because it usually accents the vapor effect the best. Then select your brush tool and set the weight to some where between 3-5px. Make some colored line, note that you should put every line on it's own layer.



Next take your smudge tool and push the pixels in your line around. To get a good smear you should start pulling half-way through the line, to get an exaggerated pull that won't show up as much start at one side of the line and pull all the way through.



Finally when you have pulled your colored pixels around to your satisfaction, go to your Layer Properties panel and add a drop shadow. Set the Blend Mode to normal, and get your best sample of the color of the line, you can also use a similar color to get some other effects. Adjust your angle, then play around with your distance, size, and spread to get a good cloud floating off of your line.



You may want to tweak you lines after you have added your drop shadow cloud effect. I recommend save you image as a .jpg, this way you get a small file size and a good color transition. In the end this is how our example turned out.



If you want to download some neat wallpapers I have made visit my art section and feel free to download as much as you want ^_^!



Vigilant Logos

11/22/08
So, a little while ago there was talk about my companies appearance getting a face lift. Awesome! I was excited to get an opportunity to remake what I have always thought was a very unimpressive logo. Well it turned out that all this was just in speculation, but I want to share with you lovely folk the ideas I had for the new Vigilant Services logo.



Free Paul Jacob

11/12/08
Recently I have been doing some design and development work for the Free Paul Jacob campaign. My latest task was to re-design the Word Press based blog site. I enjoyed this project even though I was not entirely impressed with Word Press due to PHP restrictions. For more information about Mr. Jacob and why he has recently drawn fire from Oklahoma law makers. visit the site. Or just visit the site to view my pretty design :)



Challenger Learning Center Site

..old
This was to be the main web site for Wheeling Jesuit's Challenger Learning Center. I was the sole programmer for the site, and had participated in creating the main layout and site infrastructure. I worked along with Cassandra Ligthfritz who focused soly on the design aspect. Together our creative minds made what I believe to be a very pretty site.
Update!
...The site is no longer on line, but I'm still hosting it from my site for all you beautiful people to take a look at. CLC site