Michael Jackson Pearl Jam Stevie Ray Vaughan Ozzy Osbourne Finntroll MP3 list A Fine Frenzy Capone Phil Collins Shakira Pink Floyd Keane

Tag Archive for 'Tweener'

Code / Programs it’s hard to live without

p_package_custom_built

Here is a quick list of Classes / Packages and programs that seem to make life just that much easier. This is a list based off of things we use daily for quick development of agency type Flash sites. This is in no way a complete list but anyone just wanting to increase their productivity can start here.

Programs:

1) FlashDevelop (PC only – or via VMWare) :/

Use this and easily literally shave days off your coding time. If you don’t use this go with FlexBuilder.

2) Charles (Mac or PC)

Find the root of the real issues when you load dynamic content.

3) Smart FTP (PC only) :/

Quick uploads

Code:

1) Foomonger (Later)

Call a method / function a second later or a frame later. Also has a LoadWatcher for loadProgress

2) Tweener

Some use TweenLite I like Tweener. It always seems to yield the best results. I could be wrong but that’s my opinion.

2) I was wrong – TweenLite/Max

The results speak for themselves – TweenLite/Max vs other Tween Engines

3) BulkLoader (unless you’re using Gaia – see below)

The hotness for loading multiple files and having access to them across your whole project.

4) Papervision

Of course. :-D

* Added from Comments *

5)SWFObject

Frameworks:

1) Gaia

Steven Sacks has created one of the best frameworks that is to be used on agency style Flash sites. You can have an entire simple flash site up in about 5 minutes or less. (not joking). Site scaffolding, asset loading, browser navigation, page loading, SEO, a place for your transitions (code or timeline) and much more. AS2 and AS3 supported. Check it out!

Are there any programs or code bases you can’t live without?

Let us know.

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

12. Animation using Tweener

**Update
This tutorial has been updated using TweenLite and the most recent papervision BasicView class.
view-update

Hi,

In this tutorial we're going to use Tweener to move a cube around. This will teach you basics of animation, and how to use Tweener (which is awesome).

The example that I've produced is this:

So, in this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completley inside the green cube, the green cube moves.

Tweener is the package which is smoothly moving the red cube around. The Tweener package is also firing the event to move the green cube when the tween is complete.

1: To start off, you'll need Tweener. You can download it here if you don't already have it: http://code.google.com/p/tweener/

Once you've got tweener, either add the source directory containing the "caurina" folder to your project's classpaths, or add the caurina folder into your current project.

2: Import tweener - Add this line to your imports:

import caurina.transitions.Tweener;

3: Add a Tween. You can add tweens to any parameter of any object. The Tweener package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely. Anyway, you can read a load more about tweener at the google code page above.

To add a tween, we use the code

Tweener.addTween(object, {parameter1: value, parameter2: value2, time: X, 
transition:"transition", onComplete: functionname});

This may look a little bit confusing at first, but it's really simple. Let's show you a real example..

Tweener.addTween(cube, { x: 1000, z: 500, time: 2, onComplete: randomize } );

The line above will add a tween. This tween will change the values "x" and "y" on the object "cube" to 1000 and 500 respectively. It will smoothly change the values over a period of 2 seconds and once the tween is complete and the cube.x is 1000 and cube.y is 500, it will trigger the "randomize" function.

Experiment with more ways to tween your objects. You can apply tweens to anything, including cameras, lights, rotations, sizes and camera zooms. Any numerical value you can think of.

Here is my source code (Uses latest version of my base class):

Actionscript:
  1. package 
  2. {
  3.      import org.papervision3d.lights.PointLight3D;
  4.      import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  5.      import org.papervision3d.materials.utils.MaterialsList;
  6.      import org.papervision3d.materials.WireframeMaterial;
  7.      import org.papervision3d.objects.primitives.Cube;
  8.      import org.papervision3d.objects.primitives.Plane;
  9.  
  10.      import caurina.transitions.Tweener;
  11.  
  12.      public class Main extends PaperBase
  13.      {
  14.           private var cube:Cube;
  15.           private var cube2:Cube;
  16.           private var mat:FlatShadeMaterial = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
  17.           private var mat2:WireframeMaterial = new WireframeMaterial(0x00FF00);
  18.           private var plane:Plane = new Plane(null, 2000, 2000, 10, 10);
  19.  
  20.           public function Main()
  21.           {
  22.                init(600, 300);
  23.           }
  24.  
  25.           override protected function init3d():void
  26.           {
  27.                cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
  28.                cube.y = 0;
  29.                cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
  30.                cube2.y = 0;
  31.                cube2.x = 1000;
  32.                cube2.z = 1000;
  33.                plane.material.lineColor = 0x777777;
  34.                plane.material.doubleSided = true;
  35.                plane.pitch(90);
  36.                plane.y = -50;
  37.                default_scene.addChild(plane);
  38.                default_scene.addChild(cube);
  39.                default_scene.addChild(cube2);
  40.                Tweener.addTween(cube, { x:1000, z:1000, time:2, onComplete: randomize } );
  41.                default_camera.x = 0;
  42.                default_camera.z = 1000;
  43.                default_camera.y = 1000;
  44.           }
  45.  
  46.           public function randomize():void
  47.           {
  48.                var xp:Number = (Math.random() * 2000) - 1000;
  49.                var yp:Number = (Math.random() * 2000) - 1000;
  50.                Tweener.addTween(cube, { x:xp, z:yp, time:2, onComplete: randomize } );
  51.                cube2.x = xp;
  52.                cube2.z = yp;
  53.           }
  54.  
  55.           override protected function processFrame():void
  56.           {
  57.                default_camera.lookAt(cube);
  58.           }
  59.      }
  60. }

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed