Week 12: More Animating With Code, Hit Testing, Tweens, and Transitions

Topics:

• Javascript
  • Animating with Jquery Effects
  • Drag and Drop
• Actionscript
  • Hit Testing
  • Tweens and Transitions

Animating with Jquery Effects

JQuery has a number of animation technique through its effects methods. These are documented here:

JQuery Effects

A number of the effects have predetermined animations, with parameters that you can manipulate. These are:

• hide()
• show()
• fadeIn()
• fadeOut()
• fadeToggle()
• slideDown()
• slideUp()
• slideToggle()

You can also build your own effects with the animate() method. This method lets you animate one or more CSS properties over a specified duration. You can animate any property that has a numeric value.

The effects library is further extended by JQuery UI Effects, adding easing methods, and color animation, among other things. You can add the ui library to your page like so:

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Drag and Drop

The JQuery UI adds a .draggable method, which allows you to add drag and drop interaction to elements. This is simple enough to do:

$('element').draggable();

Draggable Reference

Hit Testing

It can be useful when creating dynamic code based animation to be able to detect when one display object collides with another. This is called “Hit Testing”. You can hit test two ways, with two objects or with an object and a point on the stage.

To hit test two objects, use the hitTestObject method:

object1.hitTestObject(object2)

To hit test and object and a point, use the hitTestPoint method:

object.hitTestPoint(xcoordinate,ycoordinate)

TWEENS

The Tween class allows you to animate the same properties you could using a Motion Tween on the timeline:

Tween Reference

Now, with these objects, we are using Flash packages that are not automatically imported when we publish the file, so we have to do that first:

import fl.transitions.Tween;
import fl.transitions.easing.*;

TRANSITIONS

There are a number of transitions designed to bring content on or off the stage in the fl.transitions package. The Transition Manager class allows you to access these transitions:

Transition Manager Reference

USING THIRD PARTY LIBRARIES: TWEEN LITE

Third part libraries are code created by companies or individuals to extend the capabilities of Flash or make common tasks easier. These libraries arenot part of the core actionscript packages but can be imported into your Flash project for use in your applications. We’re going to look at one popular library today.

Tween Lite – A more robust tweening engine than the built in Tween class.

Here are the detailed instructions that we’re going to follow today to use Tween Lite

There is also a good tutorial on importing third party libraries here

Homework

For the next two classes, we are going to primarily work in class, though I may do some additional demos if there are things that you want to do with your final projects that we have not covered. For next week, I recommend that you have your wireframes and designs mostly finished, so that you can start coding.

If there are any topics or techniques that you would like to learn that we haven’t covered, please post them in the comments here, and I will try to add tutorials in the next two classes.