welcome

Animation

Animation was added to the project to add visual interest. Four methods of animation were used in the research project: Processing, Adobe Edge, gif, and javascript.

Processing

Processing was used to dynamically create the map at 6lives.com/BookMap. Each time the page is loaded, book locations in the form of latitude and longitude are drawn from the databases via PHP and loaded into an array. Processing has the ability to draw from an array, repeating a process over and over with different variables. Each printed book location is plotted as the code loops through the array. In the map, a series of circles are drawn with some random variables added to alter their size and shape giving them movement. Between each location, a line is drawn and circle moves to show the path of the book. Each digital book location is represented by a stationary star. Other information (map, key, type, title and informative bubbles) are layered with css.

Adobe Edge

Adobe Edge was used to animated the mouse on the home page. (6lives.com) A screen capture of the home page was inserted into a lower layer of Edge to act as a guide to build the animation. Mouse body and animated gif tail were grouped in Edge, hinging where they connect, and then made to follow a path around the text of the page. Edge was used for this animation because it supports the following features: animation on a path, key frames, rotation, changes in speed and easing.


cat
boot rock tire tail tail tail
bent tail tail tail tail fluff
cat cat

Gif

Four gif animations were used with three utilized in the book and all four in the website. The mouse was drawn with a series of tails. Tails were aligned in Adobe Photoshop, saved as separate jpgs, then flipped and saved for the tail to curve in the opposite direction. The falling cat was drawn in four stages, with tweens (cells that fall in between) created in Photoshop. Tweens for the cat in the bag with eyes blinking were also created in Photoshop. Once individual cells were created, Adobe Fireworks was used to load the cells. The cells could then be manipulated in their order and repeated creating repeating motions and pauses. Looping animations were created for the tail, hanging cat and eyes blinking by starting and stopping with the same cell. Once the cells were manipulated in Fireworks, the Export Wizzard was used to create the animated gif or png.

JavaScript

Javascript was used to generate the word cloud at 6lives.com/explored/global.html.