Posts Tagged ‘code’

Flash CS4 Animation Tutorials – Motion Editor, Inverse Kinematics IK Bones, 3D

February 23, 2009

blog_bonetool

TUTORIALS

Please come see the Flash CS4 tutorials featuring animation with the MotionEditor, Inverse Kinematics (IK Bone tool) and work with the new 3D or x,y and z properties.    The tutorials can be found at:

http://imm.sheridanc.on.ca/tutorials

 
SPACEMAN

blog_spaceman

http://imm.sheridanc.on.ca/code/inversekinematics/

It is fun working with the IK Bone tool – I did a little spaceman for an in-class example.  You can move the parts like a doll.  It uses code to adjust the helmet with respect to the angle of motion of the body.  You can use the figures to animate or you can let the user move the figures.  In this second setting, you can also use code to move parts – that is very tricky and still being worked out a bit in this early version of the feature.

Dan Zen

-09-

Sample AJAX Code With a Bit of Web 2.0 DHTML

May 5, 2008

Sample AJAX With a Bit of Web 2.0 DHTML

AJAX stands for Asynchronous JavaScript and XML. It has been around for ages but made popular with the so-called Web 2.0 sites. It basically means that you can update parts of a Web page after the Web page has loaded – hence asynchronous. You do not have to use XML at all and in general, you do not.

Tapoll is pictured above. It is a site where you get to predict polls as you vote on them created by professor Dan Zen some years ago. Circled are places where AJAX is used.

  • To send an invite message and receive a confirmation in the same little area without refreshing the page
  • To view a list of links and stats for all the user’s polls should they wish to see them
  • To display related content from YouTube, Flickr, Digg, etc. to inspire new poll creation

There are a number of JavaScript classes out there to handle AJAX ranging from a dozen lines to a couple hundred. Below is a link to an AJAX sample that includes a simple expanding message form HTML page, the PHP code to mail the message and the JS file that holds the AJAX class. There is a link to a ZIP file with the three files at the end.

AJAX Sample (code link is provided too)

Best of luck and remember, if you are tired of working in JavaScript… Flash developers have been working with this mind-set since 2000. We often are loading parts of the application without reloading the page.

-08-

Examples of Adobe® AIR™ Applications with ActionScript 3 Code Provided

April 14, 2008

Examples of Adobe® AIR™ with ActionScript 3 Code Provided

Here is a set of applications made with Adobe® AIR™. You will need to get the Adobe® AIR™ Runtime Environment. Air lets you run Flash files (and JavaScript/HTML/Ajax/Flex) on your desktop. It is free, fast and easy to install and seemingly less intrusive than Java.

Our students worked on Air assignments to make small widgets. Applications that might be fun or useful that makes use of the Air features. Air features include:

  • Dragging Files onto Flash to load a picture for instance
  • Using chromeless and transparent or semi-transparent windows
  • Reading and writing files to the desktop
  • Working with advanced HTML in Flash

Code is provided for the examples so you can see how things are done. There are descriptions that are semi-tutorial in nature as well. Please remember that these are prototype applications and may not be supported. Still, they are easy to install and uninstall to check them out! You uninstall through the Windows add and remove software panel.

Going From Flash ActionScript 3 to ActionScript 2

January 30, 2008

REASON

We are teaching AS3 to this year’s Sheridan Interactive Multimedia and some students have not seen AS2. We want the students to be somewhat aware of AS2 so if they see AS2 in the workplace they will have an idea of what is going on. Our mobile prototypes will be coded in Flash Lite 3 which is also AS2 based.

So this is an unusual situation. Most literature on the Web talks about how to convert or go from AS2 to AS3. In general, this can be turned around to retrograde from AS3 to AS2 but it is a little annoying to read if you have not done any AS2 and only know AS3. It is difficult because the writing assumes that you know AS2.

This post is to help those who know AS3 to write code in AS2. It is certainly not exhaustive as there were about 800 changes to the language. See:
http://livedocs.adobe.com/flex/201/langref/migration.html

It should be noted that we absolutely love AS3 and would not for a second want to return to AS2. AS3 has been so much easier to teach because of its consistency. It is more organized, flexible, powerful and fast. There is an initial organization set up. But once you are over that, it is almost redundant in its usage. For a chart overview of AS3 organization, please see:
http://www.flickr.com/photos/danzen/1382459629/

ORGANIZATION

You can choose to make an AS2 Flash file and when you do the code window shows AS2 and AS1 code in the left hand reference area. This is organized differently than all the nicely organized packages in AS3. Most of the classes you will want to look at are under ActionScript 2 Classes > Core or Movie. Movie is a hodgepodge of classes specific to Flash like MovieClip, TextField, etc. So that will look somewhat familiar.

Most coders coded on the timeline in a single timeline script on the first frame of the Movie. Sit on the first frame and press F9 to see the code window. You do not need to declare packages or start a class – you just code with variables and functions.

Advanced coders imported classes from external AS files. These could be in a package although there is no package block in the external AS itself – you put the package name at the front of the class name: class package.ClassName { You can then make a class approximately the same way as AS3 in the external AS file. If you wanted to make a MovieClip call a class when an instance of the MovieClip is created, you would set the linkage on the MovieClip to export for ActionScript and then set the Class to the external AS file. Slightly different than AS3.

People who were used to AS1 coding sometimes put code out on buttons and on MovieClips. We will not address that code – but watch out for it if you can’t seem to find any code in a legacy project.

BASIC DIFFERENCES

  • There is no Sprite class in AS2 we used the MovieClip class instead.
  • There are a number of properties of MovieClips and TextFields that started with _. Here are the most used ones in AS2 I am sure you will recognize the translation. Just look through properties of a MovieClip in AS2 to spot these:
    • _x, _y, _alpha, _visible, _width, _height, _xscale, _yscale
  • In AS3 we use a value from 0 to 1 for a various properties. In AS2 these are usually from 0 to 100. For instance:
    • myClip.alpha = .7 in AS3 is myClip._alpha = 70 in AS2
  • Instead of stage to reference the root timeline we used _root to reference the root timeline. If you are embedding a swf into another swf that other swf becomes the _root unless in the swf you are embedding you write _lockroot = true.
  • There is no addChild() – we used the _visible property.
  • Flash had _level for depth management so look up myClip.swapDepths(otherClip) and myClip.swapDepths(myClip.getNextHighestDepth()) – yum.

MOVIECLIP & TEXTFIELD DIFFERENCES

  • You did not instantiate the MovieClip class like new MovieClip(). Instead you had these methods available:
    • holderClip.createEmptyMovieClip(“name”, depth); // you figure out the depth.
    • holderClip.duplicateMovieClip(“name”, depth); // makes a copy (want in AS3)
    • holderClip.attachMovie(“linkageName”, “name”, depth); // from the library
    • And similarly, you did not instantiate a TextField like new TextField – instead:
    • holderClip.createTextField(“name”, depth, x, y, width, height);

EVENT DIFFERENCES

  • Common events were handled with a function literal

myButton.onRelease = function() { // note there is no click event
trace (“hi”);
trace (this); // will give you reference to myButton
}

  • Then there is the addListener() method:

myListener = new Object();
myListener.onKeyDown = function() {

if (Key.getCode() == 39) {
trace (“right arrow”);
}
}
Key.addListener(myListener);

  • And the addEventListener() method for components and custom events:

var myListener = new Object();
myListener.someEvent = function() {
trace (“event captured”);
}
myObject.addEventListener(“someEvent”, myListener);

  • And you would dispatch an event by adding the following code to your class

private var dispatchEvent:Function;
public var addEventListener:Function;
public var removeEventListener:Function;

  • And in your constructor:

mx.events.EventDispatcher.initialize(this);

  • And finally where you want to dispatch the event:

this.dispatchEvent({type:”someEvent”, target:this, param:”value”});

MISSING AND CHANGED CLASSES

There are many classes that you do not have – it is easy enough to figure out what they are – they will not be there ;-). But in some cases there are substitutes. Such as:

  • Timer() -> use setInterval() function like so:

clearInterval(myID);
myID = setInterval(myFunction, 1000, parameter);
// or in a class
myID = setInterval(this, “myMethod”, 1000, parameter);
// scope gets all mixed up – it’s a pain

  • You have none of the .net classes for passing data instead use LoadVars:

myVars = new LoadVars();
myVars.id = 12345;
newVars = new LoadVars();
newVars.onLoad = loaded;
// or if in a class
newVars.onLoad = mx.utils.Delegate.create(this, loaded);
myVars.sendAndLoad(“serverscript”, newVars, “POST”);

private function loaded() {
answer = newVars.answer;
}

  • XML class is completely different – it is not E4X. To access nodes it is something like this:

// if you read in XML you will want to set the:
myXML.ignoreWhite = true;
myXML.childNode[0].childNodes gives you access to the nodes under the root node
// then you can use properties like so:
myXML.childNode[0].childNodes[0].nodeName // gives node name
myXML.childNode[0].childNodes[0].attributes.age // gives value of age attribute
myXML.childNode[0].childNodes[0].nodeValue // gives value of node

COMPONENT DIFFERENCES

Well, there are probably a number of differences here but obvious ones are availability. In AS2 there were more components so check out the component panel to find:

  • AS2 – Tree – XML data made into a directory tree
  • AS2 – Accordion – bars to click on to reveal content between
  • AS2 – Menu and Menu Bar – for drop down menus
  • AS2 – A bunch of data components for connecting to datasets, XML and webservices
  • No Slider or TileList in AS2.

CONCLUSION

This has been an interesting trip through memory lane. Once again, we love AS3 and do not want to go back. Thank you Adobe for continuing to make improvements.

Dan Zen


%d bloggers like this: