Posts Tagged ‘actionscript3’

Quick introduction to Flash 10’s built-in 3D


Tuesday, November 10th, 2009

At Microsoft, we’ve been re-working some of our Papervision3D projects into the internal Flash 10 way, and I must say for certain things, it is much better than the external 3D libraries out there. Two of our projects (the unreleased PageCUBE and The Interactive Panel) have benefited big-time! The PageCUBE’s file-size dropped 90% after moving away from the Papervision library.

You can’t do everything with Flash 10’s built-in 3D that you can do with the external 3D libraries, but it’s getting close!

Take a gander at the following video from AdobeTV, I’ve also attached some more resources below.

More resources:

Check out the Adobe Language Reference on the DisplayObject class, this is where all of the new 3D stuff exists.

The new properties are:

  • rotationX : Number
    Indicates the x-axis rotation of the DisplayObject instance, in degrees, from its original orientation relative to the 3D parent container.
  • rotationY : Number
    Indicates the y-axis rotation of the DisplayObject instance, in degrees, from its original orientation relative to the 3D parent container.
  • rotationZ : Number
    Indicates the z-axis rotation of the DisplayObject instance, in degrees, from its original orientation relative to the 3D parent container.
  • scaleZ : Number
    Indicates the depth scale (percentage) of an object as applied from the registration point of the object.

  • z : Number
    Indicates the z coordinate position along the z-axis of the DisplayObject instance relative to the 3D parent container.

The new methods are:

  • globalToLocal3D(point:Point):Vector3D
    Converts a two-dimensional point from the Stage (global) coordinates to a three-dimensional display object’s (local) coordinates.

  • local3DToGlobal(point3d:Vector3D):Point
    Converts a three-dimensional point of the three-dimensional display object’s (local) coordinates to a two-dimensional point in the Stage (global) coordinates.

Z-Sorting

The Z-Index represents the Layers in 3D space. Whatever has a higher z-index is on top.

If you are going to be constructing multiple objects in 3D space with Flash, I highly recommend you download the source files from the GotoAndLearn.com tutorial on the 3D Carousel. You only need the files in com.theflashblog.fp10 called SimpleZSorter.as. This file takes care of the z-sorting in your 3D space. Whatever object is closer to the user, is automatically put to the top of the z-index. It’s an extremely useful tool (Thanks Lee!).

To use it, just import the class, and run a loop (while your 3D objects are moving or changing) that does the sorting:

import com.theflashblog.fp10.SimpleZSorter;
addEventListener(Event.ENTER_FRAME, zSortLoop);
function zSortLoop(e:Event):void {
    // container is the DisplayObject that is the parent of the 3D Objects.
    SimpleZSorter.sortClips(container);
}

Don’t forget to removeEventListener() on the zSortLoop when you are not changing the 3D Objects. This is a best practice that should always be followed…never leave loops running unless they are being used.

Huge list of external libraries


Monday, November 9th, 2009

LibrariesI was in the process of collecting all of my favorite Actionscript 3 class libraries, when I came across this giant list of them. Rather than double up the work, I wanted to share it with everyone! This guy put a lot of time into organizing it, and its a very useful list. If you don’t know how to use external libraries, check out my article on them.

(more…)

Use FireBug to debug your flash!


Thursday, November 5th, 2009

FirebugFound this great little write up on using FireBug (super great tool for Firefox) to display information from flash, just like a trace().

[note] As Matthew pointed out below, there are quite a few better options than this, including FlashTracer(my first choice!) and MonsterDebugger. This is just another one to know about ;D

// Import The ExternalInterface Class
import flash.external.ExternalInterface;

// Call the console.log JavaScript function
// passing it your trace
ExternalInterface.call( "console.log" , "Hey! I'm tracing from Flash!");

Using this, your information will be traced out to the console of Firebug. This is an invaluable technique, as you can save tons of time debugging your application from a live environment, rather than jumping back and forth between flash and testing.

Adobe Cookbook Find: AIR Undo/Redo


Wednesday, November 4th, 2009

Adobe AIRStumbled across this Adobe Cookbook post that explains how to add Undo/Redo functionality to your AIR Application! Seems pretty easy!

Solution

Every time the document is changed, we save the previous state on a list. To undo, we take the data at the current position in the list, and use it to restore the document. We also need to save the document state before we restore it. This enables us to redo. (Finish the article here, includes source)

Adobe Flash Platform: Social


Tuesday, November 3rd, 2009

SocialAdobe has released a beta version of their service called Social. As the website states:

The Social service enables you to write applications that integrate leading social networks such as Facebook and MySpace into your apps. The service, implemented through an easy to use API, provides an abstraction layer that connects with different networks.

This is big news for anyone who wants to develop for MySpace or Facebook (among others). The API available makes it simple to connect and manipulate social user’s data, including their friends info!

Getting started is easy, just sign up for an API Key, then get to digging in the developers guide. There is also a very good demo of the technology available here.

Supported Networks

Doing something cool with Social? Post your stuff in the comments!

Organizing dynamically created DisplayObjects with Arrays


Monday, October 26th, 2009

FlashWhen I was just getting started in OOP, I would have trouble keeping track of, and organizing my Objects. For example, I had a GalleryThumbnail class that I would dynamically create for each item in an XML feed full of images and their thumbnails. I would then position add them to the stage. From there on out, I lost my reference to the individual Objects.

This caused me problems on all sorts of projects, from a few large video portals (with their playlist Objects) to a dynamic photo gallery (and their photo Objects). Since the individual Objects were being created & instanciated during a for loop, I would loose all reference to them once they were made. To solve this, I started putting my Objects in a holder Array.

Basically, after you add your Object to the stage in your for loop, you also push it into the container Array:

// Create your container Array
var container:Array = new Array();

// Drop a bunch of stuff into them
for(var u:int = 0; u < 5; u++){
 var tempSprite:Sprite = new Sprite();
 container.push(tempSprite);
}

This leaves you with an Array full of references to your dynamically created items. If you want to access them, you would simple use this:

trace(container[0]); // First object
trace(container[1]); // Second object

You could even pass this to Tweener to animate your Object:

Tweener.addTween(container[0], {x:10, y:10, time:1, transition:"linear"});

Now that you have a reference to your Objects, you can access them at any time.

I am working on an addition to com.dyc (my AS3 Class Library) that’s an Object organizer class. Pretty much a souped up version of a holder Array, but for every type of Object you could want to store for a project. More on that soon!

If you have any suggestions for efficient ways to store & access your Objects, leave them in the comments.

Adobe LiveCycle Collaboration Service


Thursday, October 22nd, 2009

Adobe LiveCycleIf you haven’t been keeping up with Adobe lately, this is one thing you need to check out: LiveCycle Collaboration Service. It’s a module for the Flash Platform that allows you to create real-time, multiuser collaboration tools.

As Adobe points out, you can:

  • Enable VoIP audio — Improve productivity by enabling multiple users in dispersed teams to speak to one another through a browser, without the need to install additional software.
  • Broadcast using webcam video — Meeting hosts and participants can use a webcam to broadcast live video to enhance the effectiveness of overall communication by enabling desktop video conferencing and sharing. Hosts and participants can pause, share, or stop their cameras at any time during the meeting.
  • Offer real-time text chat — Conduct one-on-one or community chat in context within an existing or new application interface without having to launch or run separate desktop chat applications.
  • Collaborate using multiuser whiteboards — Enhance collaborative experiences by providing multiuser whiteboards where users can explore and discover ideas rapidly and dynamically.
  • Synchronize with real-time push messaging — Keep clients synchronized and enable developers to create collaborative portals and applications, ranging from a simple chat box to a complex collaborative application, such as expert consultation with an existing or potential customer, a live support desk, or a multiuser eLearning application.

This is a paid service, and here are the prices, as corlan.org pointed out:

  • Live Stream Bandwidth ($0.49 per GB)
  • Push Messages ($0.10 per 1,000 messages) – count messages sent in to LCCS
  • User Minutes ($0.01 per Hour) – time clients spend connected to LCCS

These prices are pretty low, and could be easily passed off to the end-user through various means.

You can also check out the whole Adobe LiveCycle Enterprise Suite 2, which offers lots of amazing solutions.

I’m very excited about this new service…If you have any related info, drop it in the comments!

Adobe Blogs: Presentation Patterns in Flex


Wednesday, October 21st, 2009

FlashI came across this great article by Paul Williams on the Adobe Blogs. It goes into detail describing quite a few different Presentation Design Patterns for use in Flex (could be used in Flash as well).

Design Patterns, for those who don’t know, are general reusable solutions to commonly occurring problems(Wikipedia). They are a key component of Object Oriented Programming, and is not Actionscript-specific.

The patterns explained (with nice examples and source files) in the article are:

  • Autonomous View
  • Supervising Presenter
  • Presentation Model
  • View Helper
  • Code Behind
  • Passive View

Read through the article, and if you get stuck, drop a comment here and I will try to help out. You will not be disappointed, design patterns are probably your most precious ally when it comes to development.

Using external classes in Actionscript 3


Wednesday, October 21st, 2009

FlashExternal classes are a great way to get lots of advanced functionality in your applications, without having to write custom code. This may seem simple to most of you, but I remember when I was just starting out in Actionscript 3, and I could’ve used an article on this.

There is a huge collection of classes available online for free, a few of which live here on my site! You can probably find a class to do nearly anything pretty easily. There are classes that tween properties, play videos, mp3’s and all kinds of other stuff.

One of my favorite classes is TweenLite, which is a very tiny tweening class. Some other good ones include Papervision3D, Adobe’s Libraries, the Google API’s and as3DMod.

Using your first class

If you’ve never used an external class before, it can seem a bit confusing. Don’t worry, its so simple, and extremely useful! Let’s go through an example, using my com.dyc.video.VideoPlayer class. All of that com.dyc stuff is nothing to be confused about. It is merely the folder structure that organizes the classes. When you download my VideoPlayer class, it will unzip to a folder called com, which has a folder inside of it called dyc, and so on, until you hit a file called VideoPlayer.as, which is the actual class file.

Drop the com folder in the same folder as the FLA (or flex source) you want to use the VideoPlayer on. First thing you need to do is import the class. At the very top of your DocumentClass (or other class file where you’ll be using the imported class), you start with the import statement:

import com.dyc.video.VideoPlayer;

This loads the Actionscript class into memory. To use a class, you normally have to create an instance of it. You can do this by declaring a variable, and giving it a type of VideoPlayer(or whatever class you are importing).

var videoPlayer:VideoPlayer;

Now you have somewhere to access the class from. If the class contains a display item, something that will be shown in flash, you will probably want to set the x and y coordinates of the class, then addChild() to put it on the stage. You will also have to instantiate the class(unless its a Singleton class, but more on that in a later post). To instanciate, you merely create a new instance of the class, through the variable you just created.

videoPlayer = new VideoPlayer(320, 240, videoURL);

Sometimes a class has the ability to pass variables to the constructor. This sets up the class with your specific data. In the previous snip of code, we passed 3 variables to the new VideoPlayer() instnace. The first two are the width and height of the video player and the third is a variable that points to a URL of an FLV.

If you wanted to run a function called togglePause() on the VideoPlayer, you would access it through the instance you made.

videoPlayer.togglePause();

That is basically it. You can read through the documents of any classes you download, or read through the class itself to find out how to use it. Most classes have very good documentation, so they’re very easy to figure out.

Microsoft & AstroBoy use my product The Glider on MSN.com


Tuesday, October 20th, 2009

AstroBoy

Look at the main story that was running this day!

I’m very happy to show this off. Microsoft officially launched my product, The Glider on MSN.com for the 2nd time (1st time was for Disney’s UP). Just go click the 300×250 AstroBoy advertisement.

Unfortunately, you have to view this in Internet Explorer. MSN.com has a weird thing for Firefox…but we could kinda expect that. Either way, it’s very exciting that more than 30,000,000 people are going to see a product I built in the next 24 hours!

This product uses the Papervision3D library, which is quickly becoming my favorite Actionscript toy!

I will be releasing more information on The Glider, as well as all of my Microsoft products soon. Here is another shot that gives you a bit of an idea of what the ad does!

AstroBoy + The Glider

The Glider 1.0