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



CSS/JS 3D Cube

9/2/16
I have been experimenting with 3D CSS based cubes and recently began writing a JS constructor for making such objects. The cube below reacts to simple click and drag for rotation. Give it a try. I will be adding the JS, CSS, and examples to my development page soon.

Check out these examples.

Bouncing cubes
Cube as a menu




FeedMeComics Beta Launch

2/14/16

Over the years I have done a lot of experiments using HTML canvas elements, so when a friend told me there aren't enough good web comic aggregates it gave me an idea. Not only would I make a site where you can find links to all kinds of great web comics but you can also make your own!

FeedMeComics.com features all of the tools you need to get started making comics and sharing them on-line. You can either upload your own images or use the on-line drawing tools built by yours truly to make your comic and share it with the world. Also, membership is free and unlike some other websites I don't make any claim to your work, even if you used my tools to create it.

So whether you are an artist or just like to read some comics from time to time, sign up on FeedMeComics.com and enjoy!




Custom Form Check Boxes - JavaScript Class

6/25/13

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.

DOWNLOAD THE EXAMPLE PACKAGE!

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




HTML Color Selector Class

6/17/13


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.

	
	PUBLIC METHODS
		* 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)

	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!

DOWNLOAD THE EXAMPLE PACKAGE




Styling Snipt Code Embeds

6/16/13

So, I have been using Snipt to host my code for a while. However when I wanted to change the height of one of the embedded code samples I realized there is no direct way to do this. So I devised a way to access the embedded code with CSS. While I was at it I figured I may as well explore modifying all parts of the embedded code and then share it with the world.




Glen Bradley for NCGOP Vice-Chair

3/7/13
Glen Bradley for NCGOP Vice-Chair

I recently had the pleasure of teaming up with For Liberty Communication to make a web site for Glen Bradley who is running for NCGOP Vice-Chair.

My role was setting up the PHP/MySQL side of the site along with some simple Ajax/JavaScript tools. With our team work the entire site was done in a matter of 3 days.

Click here to view Glen's site.




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




Happy New Year, New Site!

1/1/13

Happy New Year! I have a new site layout! I was going for an increased display area, as well as using the whole page. It was back in 2008 when I design DonovanH 2.0 and have plans to make it still usable, after I finish up all of the details with the new DH 3.0. I still have a working copy up of my Flash based student site. There is a nice little tool I had on there for showing off type face on line though. It's been a while since I have messed with font making but have often hand drawn letter sets.

Last year was quite an adventure, with a lot of learning experiences and travel. This year I turn 30! So I have to plan for one of the most epic adventures around my birth date. I'm looking forward to making some more art and hopefully make more time to get my other experiments done. Anyways, stay tuned for more posts about the interesting things I do and experience.




Ana's Corner

9/26/12
Ana's Corner

Another in my latest works of small end websites. Ana Rodriguez is a very crafty lady who has made a small business with her skill and hard work. I had meet her through a mutual friend. When she was talking to me about her website she said she would rather refer people to her on-line PDF rather than to her website. I told her I would be able to offer he an affordable redesign and have it fixed up in no time. Well, no time is now!

We have already been discussing e-commerce options, a content management system, and SEO, in order to make the most out of her web space. None the less a good appearance is the first step to a good web site.

Click here to view Ana's website.


ConstitutinalWar.org

9/10/12


Last week I did a re-design for the group Constitutional War. Originally the group purchased the name and used it as an event page. Now that they are on to other things they wanted to have a website that better represented them.

Click here to view the site.


Midwife Advocates Website

9/4/12


Midwife Advocates is a small group that is trying to legalize midwifery, mostly in the state of North Carolina as they are still a small organization. When first moving to NC I found it quite odd that the practice of midwifery was outlawed. My guess would be lobbyists in NC's large medical industry might have something to do with that.

Anyways, I documented one of their events last spring and was recently contacted for web development services. The budget was small, but I'm a sucker for do-gooders. The design and structuring took me about 2 day and another 2 days to finish off their content management system (CMS). They are still putting in a lot of the content, however with their custom CMS, that should be no problems for them.

Click here to visit MidwifeAdvocates.org


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.


TDI Site Complete

10/4/10

After some slight delay the Truck Drivers Institute web site is finally completed. I think I need to take a little break now and get back to my painting. Such is the burden of working so much, my art hangs over my should jelously taunting me to spend more time on it. Well art, now is your time again! Hopefully I can finish my next piece before I decided to take up more side work. We shall see.

Update
TDI has changed their layout, view the archived version HERE.


AS3 vs HTML5 Drawing

7/16/10
So Cassie Lightfitz asked me about the new canvas object in HTML5 and at the time I replied that I don't know anything about it. I was aware of some of the new goodies in the future of the web but I am ecstatic with this new canvas object. The canvas object allows for scripted drawing on the fly, just like you can do in Actionscript. Now I naturally the question I had was ,"which one draws faster"?

So I made very similar scrpts using AS3 and HTML5 javascript. Going in I expected flash to be the fastest, as it natively handles vectors, however I became surprised when I finished both and realized that the HTML5 canvas object can be drawn to many, many times faster than AS3 can draw to a sprite. WOW! My attempt to capture just how fast the HTML5 drawing is processed seem to fail but at least the AS3 will return speed results, keep in mind all build time is in milliseconds (1,000 = 1sec).

Ok, what's one big difference? While AS3 draws in vectors the canvas object draws in bitmaps. My theory is that the canvas object actually caches a copy of the drawn star for reproduction while AS3 has to draw it every time. Try producing some stars for yourself. Warning, more than 100,000 might crash the HTML5 version while over 20,000 can crash the Flash version. If you would like copies of the source code to play around with, download the package HERE.

AS3 Drawing:


HTML5 Drawing:
Your browser does not support the canvas element.
How Many



WeAreChangeDC.org BETA up!

6/30/10


So recently I have launched the BETA version of WeAreChangeDC.org after starting on the project waaaaaaay back in January. Why the delay? Well, I have been doing a lot of work with Artist Web Builders and have not had to much time to devote to the site. Also the first half of 2010 has been filled with many ups and downs. Im glad I have at least been able to devote more of my time to doing art this year.

Also coinciding with the launch of WeAreChangeDC.org, I have been working with the group to hold a protest of the Federal Reserve on July 3rd, in Washington DC, us locals call the place to District of Criminals. For those who are not in the know about the Fed I would encourage you watch the movie below. With that I thank you for reading and wish you a merry day.



Update
View the archived page HERE.


SamMenkmeller.com is GO

4/13/10


Over the weekend I managed put the finishing touches on SamMenkmeller.com. Once again aligning with the folks at Artist Web Builders, we have joined forces to make a web site that is both pretty and user friendly.

Now it is full focus on something that I have wanted to do for some time. Finish off WeAreChangeDC.org and restore the web site for We Are Change Virginia. Unfortunately for WACVA the web name WeAreChangeVirginia.org is lost, however yours truly owns the names WeAreChangeVA.com, WeAreChangeVA.org, and even WeAreChangeVirginia.com. I'm building both web sites off of the same engine I used for this site, so hopefully that can save me some time as I have the basic designs for both sites completed already. Wish me luck and GODSPEED!

Update
The site is no longer live, but you can view the archived version HERE.


AmbieMac.com is Up

1/5/10

YAR! I just put the finishing touches on the functionality for AmbieMac.com and I am quite pleased with how the site turned out. This was actually one of the more stress free freelance projects I have worked on and yet one of the more feature packed. I would like to thank the folks at Artist Web Builders for acting as an intermediary and also for handling the general page content while I built all the other goodies for the site. So go check out Ambie's page and all the cool functionality, oh yeah, and AWB did rather well on the design.


Let Oklahoma Vote

5/26/09

A while back the Citizens In Charge Foundation contacted me and asked me if I could set up a web site for them. No problem there, but the catch here was that they need the site up in less than a week. Mind you I have been very busy, but because I like CIC and knew that they wouldn't be able to have this done in time else wise, I agreed to try and get them a site up by the end of the week.

Did I mention the site had to be using WordPress? Did I mention I hate editing WordPress, CSS? Did I mention they didn't even have anywhere to host the site? Yeah, so I hustled up a storm and ended up spitting out a workable -ok- looking site. Due to time constraint and the complications with WordPress CSS I couldn't really make the site shine, but non-the-less it does it's job. Click here to check it out if you feel so inclined.


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 :)



Flash Web Site Template

8/22/08
Ok, for those who are new to AS3 or would just like to download a nice template to throw info into, download my example site and you will see plenty of good code commenting along with an easy to use and update interface!



Afterdeployment.org

8/1/08
Our design and development team at Vigilant Services has finally launched the alpha version of afterdeployment.org. A self help web site for our veterans with post traumatic stress disorder. This has been the main focus of my work at Vigilant since I have started with the company. The site is a huge database of information. As a member of the design team I was mainly responsible for doing the workshop animations, however from time to time I aided the development staff with making some custom AS3 components to use in the workshops.



Attack of the Frownies

12/20/07
For the holiday season a co-worker (Steven Burnett) and I have gotten together to create a promotional game for the children's charity "Child's Play" the first place we hosted the game on was newgrounds.com for those of you who are interested in the game you can play the game in my games section. and don't forget to support Child's Play!



Gootropolis On-line World

...old
Gootropolis is the new site that me and a team of developers at Stelor Productions have been creating. The site fallows the guidelines of the club Penguin world where you create you own little avatar and walk around a virtual world, talk to other people, and play games. All games on the site were either brainstormed and created by me, or converted into AS 3, by me. Jump in and play at gootropolis.com.

Update
Gootropolis and Steolor Productions are no longer in operation.



Ohio Valley Recovery Inc.

...old

I have started a charity job for Ohio Valley Recovery Inc. today. OVRI helps people in the Ohio Valley with recovery and staying off of drugs, by providing support and a place for groups to meet up. You can check out the beginnings of the site HERE.

Update!
I have finally completed my charity project for Ohio Valley Recovery Inc. This project means a lot to me as there is a large amount of addicts in my home town who need places like this to help them through it.

Update!
OVRI is no longer up an organization, which is bad news as the problems of addiction certainly have not left the Ohio Valley. Anyways, here is an archived link to the old site...
Old OVRI site



Symphony City

...old
A project that I have invested many hours into, and many more it seems to come. My roll in the development team is the programmer. While I don't get to do any of the fun design work, my skills as a developer have been getting tested like never before and I am learning a great deal at the same time. The entire game is coded in AS2, with a little tiny splash page using HTML and JavaScript. This on-line on-line educational game is successful at helping children identify with symphonies and classical music. So go ahead and Play Symphony City!.

I was the sole programmer for the site, and made the pass-code system for the login, that enables students to continue sessions, based off of the last level they have completed. This has been my first major web project I have ever tried to tackle

update!
The game is no longer hosted and sponsored by the symphony. Play the archived version HERE.



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



CLC, E-Missions Site

...old
A Flash based web page, done for Wheeling Jesuit's Challenger Learning Center E-Mission on-line games. I was the sole programmer for the site, and had participated in creating the main layout and site infrastructure. The overall design was done by Cassandra Ligthfritz, but I got a little of my style in there with background page transition effects and various scripted tweens.
Update!
...The site is no longer on line, but I have a copy on my server so every one can still view it, YAH!! E-Missions Site.