PostsCSS/JS 3D Cube
FeedMeComics Beta Launch
Shadowrun: The Anarchy Wars
J-B Weld a Bicycle Peddle to the Crank Arm
Cyber Monkey 3D
Famous Artists in Modern America: Raphael
Arts Shows and Photography
Controling the Google Map Iframe
The Dark Lord Rises
HTML Color Selector Class
Styling Snipt Code Embeds
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
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
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!
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
Howl's Moving Castle
End the Fed 2009
Timer Tools AS3
Flash to PHP communication
Dynamic Timer Event Handling
AS3 XML class [dXML]
Let Oklahoma Vote
MurderOne Shirt App
Universal Click Handler
R,G,B, to HEX and back
Kirupa Art Contest, 2nd!
AS3 Preloader Class
Paul is FREE!!!
My First C++ App
Free Paul Jacob
XML picture displayer
Flash Web Site Template
Easy Effects AS3
Attack of the Frownies
Gootropolis On-line World
Ohio Valley Recovery Inc.
Challenger Learning Center Site
CLC, E-Missions Site
- all JSON functions/objects
Feel free to download PolySure for yourself (at your own risk).
Here is a basic example of using the class.
I ended up finding a pretty nice CSS based checbox styling tutorial.
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!
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.
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;
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.
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!!!
var xmlDoc = makeXML(); xmlDoc.load("some_doc.xml");