Introduction to The Task
Hello again and welcome to this week's blog post. As hinted in the title the task for this week involves creating an animation of a running man. The animation must be able to change speed and on the click of a button (or other event) an object must be thrown at the runner. Adding to this task, I decided to include some other features of my own.
Creating The Animation
To start the animation, I used an already written script found in the notes. In this script, images were loaded into an array, and the array was then looped at small time intervals making the image appear moving. The animation is triggered by a button called run. The code provided had a small bug that when the run button is hit more than once, the animation would become unstoppable. The first thing I did to avoid this error is to disable the run button once the running process begins.
For the animation, I found an interesting free GIFF image which I downloaded and converted into a sequence of PNG images using an online tool at http://www.online-image-editor.com/. I used the images to create a running man animation. I also created a copy of these images and altered them to create the second animation for throwing an object. Finally to allow the throw object animation, I created a button called throw that alters a variable that controls the looping process. More exactly I made a loop to run through the first 8 images only so that the man in the animation appears to be running, but when the throw button is clicked, the animation loop continues till the last image showing the final part of the animation. The throw animation involves the runner avoiding a tin can thrown in the direction of his head and passing above a man hole left opened.
The final part of the exercise involves altering the running speed of the animation. The speed can be altered simply by changing the time interval between the sequence of images being displayed. To get the chosen speed, I used the HTML select input such that the user can select from a list of different speeds. Speed can also be altered when an animation is already running. To alter the speed animation using the pre-existing code, the animation must be stopped, and restarted with the new time interval. Therefore when speed is changed, the looping process stops and restarts automatically. This process is transparent to the user.
Additional Features
The first feature I wanted to add was a slider or track bar, that tracks the position of the animation. At first I used the Range input to do this, but I soon realized, that this input type is only available in HTML5 and works only in chrome. Instead of giving up, I decided to create my own range input using purely HTML and JavaScript. First I created images for the slider and slider piece.
Then I researched how to do drag and drop such that I could slide the blue slider piece where I wanted. I found Several code for drag and drop capabilities and after I finished my little research I started creating my own code that allowed the slider piece to only move horizontally and only in a particular range.
The first thing to do is to determine what inputs does the browser support. Some browsers do not support all the features or use different syntax while other browsers might understand all the commands or react differently to the same command. To avoid unexpected behavior, I used a boolean value to determine which functions I should use in the particular browser. Using the bool variable nn6 as shown below, the script would choose the appropriate functions to run based on the the support of the document.getElementById or document.all.
var nn6=document.getElementById&&!document.all;
Another variable is used to determine whether the blue slider piece is being dragged or not. The onmouse down event triggers a function that sets the variable to true and calls another function which I called moveMouse. This function determines the position of the mouse and verifies that it is within the slider range. If the mouse goes out of range the slider piece stops mooving. OnMouse down event the dragging variable to false and the dragging object to null, such that the slieder piece is no longer effected by the mouse movement. for the code to work the piece image must have an absolute position in the CSS style.
Adding to the drag and drop features I included another function that allows clicking on any part of the slider range, to obtain the image at that position. This feature will be later explained in this blog. While running, the piece slider is also moved to show the position of the current runner position during the animation.
Since I was dealing with time and animation positions, I decided to use cookies such that the browser remembers the animation position of the runner when the user clicks stop and closes the browser. I found the code to create cookies on
http://www.w3schools.com/ but the code was not working or at least I tough so. Then I found out that my code works perfectly, but chrome does not allow local cookies to be saved, so I had to test my page on a web server. When the browser starts, it searches for the animation position in the cookies. If found, the animation starts from that position even if that position is part of the throw object animations.
Finally I added up some sound of footsteps to the animation. Inserting an embed element to the html, using Java script does the trick. Not all browsers support music natively so I added support to the Windows media player plugin for firefox. This plugin works also on chrome, and allows sounds to play on a wider range of browsers. Note that browsers that do not support this plugin, but support the format of the sound natively, can also play the footsteps. To add support to the firefox plugin, one simply needs to add type='application/x-mplayer2' as Embed type. The embed type adds a windows media player to the page which allows users to control the music, but in this case the media player is invisible. The music starts because the autostart value of the embed object is set to true
Determining Exact Mouse Position
To determine positioning of objects, I used several techniques to get the x coordinates of the objects involved. An important part of the code is from line 176 to 178, as that code determines whether the mouse is within the slider range. It does that by comparing the x coordinates of the slider and slider piece. It also compares the slider piece's x coordinate with the slider x coordinate plus its width.
Clicking on the Slider Image
When a mouse click is detected on the slider image, the function below is triggered. Line 144 determines the position of the blue slider piece from the slider' left offset position, which is its x coordinates. In the following lines, the width of the slider is divided by the number of possible image positions (excluding position 0) to get the distance between each position. The current piece position is divided by the previous calculation, to obtain a rounded integer that gives the image number to display corresponding to the area clicked. Finally line 149 sets the piece position to the clicked area.
Piece Image Movement while the Animation is Running
The function marathon is executed repeatedly in time intervals, to obtain an animation. To explain briefly, the code below increments the image number every time it is executed. In the case the last image is displayed, the image number is reset to the first. The piece position is calculated based on the image number in this case stored in curRunner. This is done by finding the distance between each position and multiplying it to the number of positions. To find the actual left margin the the piece position works on, the x coordinates of the slider image must be added to the previous calculation's answer. The calculation is shown in lines 136 to 138.
Final Corrections
After I implemented all the features mentioned above I needed to correct some minor errors which started to bother me. The first problem occurred on window resizing. Since the piece position is absolute, when the screen size changed, all elements changed positions, but the slider piece's position remained the same. To avoid this error I added the windowOnResize and page onload events such that when they are triggered, the piece position gets recalculated. I also corrected some piece positions like in line 149 by decreasing or increasing the left margin of the piece element. In this case I added -4.
When I uploaded the site to an actual web server, Images started to load slowly. I found a method that solves this problem. I loaded images in memory by using new Image(254,266) method which creates an image with the given dimensions. Then after creating the image I assigned the actual image path to the image array. This was all done when the page is loaded, such that on page load, all images are already cached in memory.
To avoid errors some buttons are disabled, and enabled depending on the processes running. This feature can be seen in the screenshots.
Some Screenshots
