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



AnimatedImg - Javascript Class

5/10/11
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.