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


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


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

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 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 BETA up!


Grendel Babies is GO

Prince of the Pavement

Speed cooking for 100

AS3 to Clipboard to JAVA communication

Lighten Up ~ Time Lapse is Up

Revisiting Design

Howl's Moving Castle

End the Fed 2009


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

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

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

Introducing PolySure


After continually being frustrated over lack of cross-browser support of loads of basic JavaScript functions I got into extending prototypes and more importantly, polyfills. I made some simple ones, but then found Mozilla Developer Network provided some very useful ones like Function.bind and Object.create. I have been putting together a self executing JavaScript function that adds several polyfills if the functionality doesn't exist. The name of the function? PolySure.

In all seriousness though, PolySure can help your web development experience by providing cross-browser and backward compatible JavaScript. As of writing this the current polyfills supported are:

  • console.log
  • Array.indexOf
  • Array.lastIndexOf
  • Object.create
  • Function.bind
  • Array.isArray
  • all JSON functions/objects

Feel free to download PolySure for yourself (at your own risk).

Custom Form Check Boxes - JavaScript Class


I found my self wanting to style form check boxes, however after looking around a bit on-line I didn't come across any simple CSS solutions. Of the solutions I did find, many of them were Web-Kit reliant and didn't work very well in older browsers. I made this simple JS class to allow custom styling of check boxes.

The class it's self is pretty straight forward. You give it a name(id), title(label), up HTML, selected HTML, over HTML, and CSS class and it returns a custom check box object. After your check box is created you can then append it to whatever form you need via the JavaScript appendChild() command. It is also a good idea, if you are using images, to preload any images you may want to use (see example package).

Here is an example of the class in action.

Select fruits

Here is a basic example of using the class.


I ended up finding a pretty nice CSS based checbox styling tutorial.

HTML Color Selector Class


The other day I was playing around with my old canvas drawing class and thought to myself, I really could add more colors to this thing. Quickly using some loops to generate a number of color tabs I realized with only a little more effort I could make a full-on color selector class. So I did.

The algorithm isn't perfect but it does contain an extensive array of colors. You can pass two parameters to the class when instantiating. The fist (threshold) determines how many steps in color value the color selector will take between drawing color tiles. For example a threshold of 8, getting lighter, would build color tiles like so ((239,156,16), (247,164,24), (255,172,32)). The second parameter sets the square pixel size of the color tiles. If you don't set these they default to 8 and 2 respectively.

Here is an example of using this class...

... and this is how it's built on this very page.

In the second code snippet you see I'm doing a couple of things with the class before I call the init method. There are a number of public methods and event listeners you can use to interface with the CMDColorSelector.

		* init : build the color selector to the document/parent
		* select_color : returns the last color clicked on by user
		* active_color : returns the value of the color the mouse last hovered over
		* threshold : returns the threshold step value. threshold must be set on instantiation
		* tab_size : retuns the sqare pixel size of the color tabs. tab_size must be set on instantiation
		* inititalized : boolean, true if init() has been called
		* parent : allows you to set the parent element the CMDColorSelector will be built on.
			also can be used to get the current parent if no parameter is passed in.
			you cannot set the parent if initialized is true
		* RGBtoHEX : converst an rgb(0,0,0) based string to a hexidecimal based string
		* setEvent : allows for stored functions to be called during certain class events. 
			The first param is the event type and the second is the function to be called (see EVENTS)

		* onInit : executes at the end of the init() method
		* onUpdateSC : executes whenever the selected_color value changes
		* onUpdateAC : executes whenever the active_color value changes


Along the way I leaned two interesting things. First, IE (save for v8) has no support for the standard getter and setter methods that other browsers use, and the amount of code it takes to fix that issue just does not seem worth the effort and processing power. Second, in most versions of IE and Safari, mouse event bubbling (or registering) might not happen properly for child elements when their parent has a CSS display value of "block". To get around the second issue I set the parent elements CSS pointer-events value to none, while setting all of the clickable child elements pointer-events value to all.

In the (hopefully near) future I will be adding this color selector to the canvas drawing class. Who knows, with a couple more features I could have an on-line version of MS-Paint!


Simple Accordion JavaScript Class


As a developer I have to often take "coding challenges". A recent one had a static picture of a menu that looked like an accordion menu. Being a coding challenge I didn't want to use some giant jQuery package, nor did I want to build a function to toggle each menu. The solution was obviously my own custom JavaScript class that modified the Document Object Model (DOM) based on simple naming conventions.

It's Pretty Easy
Simply follow the structure and the AccordionManager will do the rest!
  • Great for desingers who don't know or don't want to know JavaScript.
  • Add very little size to the overall page.
  • Super easy to implement.
Offers Control
The AccordionManager will reset the class attribute values on initialization and on click toggle, however you still have direct access to the CSS class names (see in the style tag above). Every other element you may style with what ever tagging/scripting you desire.
Will I make updates? Probably not for a while (or ever), but feel free to expand on it and bend it to fit your needs. It's just a concept, it could go a lot of places from it's current state.

The JavaScript class will scan the DOM for any div tags with a class attribute value of "accordion_menu". Once an accordion_menu div is identified the AccordionManger class will turn every odd child div into an clickable title that will toggle the display of the proceeding even div tag.

Here is the source that made the above menu.

I have tested this in Opera, Firefox, IE, and Chrome. It seems to work fine in all of them, even older versions. However use at your own risk, it is just an example after all. If you would like to use or expand on this little class, download the example package.

AnimatedImg - Javascript Class

Some time ago I had an urge to create an animated set of .png images. Well, in the fun of experimentation I went a little over board and made a full javascript class that not only animates several different types of image files, but also offers a nice set of play control methods and event listeners!

Ok, lets go over a little of how it works, shall we? First lets create a simple animation of a ball bouncing using. There are only three basics things we need here. One, an array of image files. Two make sure my animatedImg class is included. Three, make a call to the passing in the array, so this;

Makes this;

Animation Type
Notice how ball one appears to be only playing half of the animation while ball two bounces smoothly up and down. The set of images we have passed to our AnimatedImg object is in fact only half a ball bounce. When creating an AnimatedImg you can dictate how it plays from the start. there are 7 types, and they are referenced through a 0 index array. The values are; 0 = "stopped", 1 = "playOnce", 2 = "repeat", 3 = "playBackwardOnce", 4 = "playBackwardRepeat", 5 = "forwardBackwardOnce", 6 = "forwardBackwardRepeat".

Methods and Events
Now for the exciting stuff adding interaction to your AnimatedImg. For this example I dug up an old favorite, Chance the original character from my old Skate-er-Guy game. Click on him and he'll do a hard flip for you. Click on him again and he'll reverse his play direction! Anyways, here is the code used to make the skater interaction.

There is some slight buggyness with mouse based events I'm trying to work out. Currently, the mouse events stand a chance of not registering from what I believe is the click happening as the image is changing frames, thus the AnimatedImg has no clickable area for that brief instance. Anyways this project is about to be moved over to Cyber Monkey open source and hopefully I can get Dan and some of the other monkeys to join in and make it shine.

Well I'm not into super gigantic posts so I'll cut to the chase, if you would like to use this class for a personal project or to just play with feel free to DOWNLOAD THE EXAMPLE PACKAGE. If your going to use this for some corporate business, please e-mail me and let me know.

AS3 to Clipboard to JAVA communication

Java and Flash icons connected conected by circuts.
After having trouble finding a good example of how to pass information between an ActionScript module and JAVA module I came up with the fallowing solution; Instead of using direct communication (which I was having all kinds of problems with) I simply used the clipboard as a median between the two modules.

You will need the fallowing:
1 = something that can compile ActionScript as .exe applications. I'll be using Adobe Flash CS4.
2 = something that can compile .jar applications. I'll be using NetBeans.
3 = YOUR BRAIN! I had to use mine :)

What we will do:
We are going to build a simple AS3 application that sends data to the clipboard and then runs a .bat file. This .bat file executes a .jar file that grabs clipboard data and tries to make a file out of it.

Ok, let's get started. First thing, lets build our flash interface. I'll be naming the flash module AStoBatch. Make two input text boxes, call one _file and the other _content. Make sure _file is set for single line only, otherwise it sends some funk to the clipboard that will confuse our JAVA app later. Make a MovieClip (this will be our button to send the data) and name it _build. Ok, now lets add our functionality, put this in you main class package:

Now we need to export our flash module to an .exe, using Flash CS4 all you need to do is check the box in your Publish Settings and then Publish the project. Why do we have to make it an .exe? Well the AVM will not let .swf files execute/run our important fscommand. This can only be done from .exe for security reasons. Sweet! Let us move on to building our simple .bat file. Now the important thing to know here is, any call from an AS3 module to fscommand must reffer to a relative folder called fscommand. So in the same folder you just published your AS3 app to, make a folder called fscommand. Ok, now make a new text file in our fscommand folder and rename the file to RunJar.bat. For those of you unfamiliar with .bat(batch) files, they are terminal files (command prompt) that execute a series of commands. In our RunJar.bat file drop this line.

java -jar "../dist/BuildFromCBD.jar"

Ok, so all we are saying there is: go back to the root folder, go to the dist folder (will be made later) and execute the BuildFromCBD.jar (will be made later). Now is that time to make our .jar file. Open NetBeans (freeware) or what ever your pleasure for JAVA scripting is. Make a new project called BuildFromCBD. And drop this code in your main project file:

Now compile the .jar and you will have (if using NetBeans) a folder called dist (the one our .bat file points to) and in it will be the BuildFromCBD.jar file. Super sweet! Now I'm not going to explain every piece of code for you, but If you would like, DOWNLOAD THE EXAMPLE PACKAGE and there you will find the proper files all commented for your understanding. So, please feel free to e-mail me if you have questions!

JavaScript XML node array

To accompany the makeXML function, here is is a method I use to get an array of node values by node name. I do realise I need to put this in a packaged product to help understanding of the js-xml methods. But this should prove helpful to some I hope. GRAB THE VALUE OF SEVERAL NODES!!!

XML to JavaScript structure return

I can't help it, I love xml. For those of use who started out as artists and designers, denied the privilege of touching the database, xml was our bypass. Anyways, this is nothing to special, but it is something very useful. This little function returns the proper xml format of you clients browser to your javascript.

var xmlDoc = makeXML(); xmlDoc.load("some_doc.xml");