While the days of timeline manipulation within Flash are very far and few in between, it still provides useful functionality for timeline specific projects.  CASA Lib’s FrameUtil looks to improve how you can interact with the Flash timeline by providing some useful utilities that open up the possibilities of dynamic script integration via runtime.

With the next addition of the CASA Lib series, I introduce to you FrameUtil.

CASALib’s FrameUtil

FrameUtil helps determine the frame number for label positions along with the ability to add and remove frame scripts.

Features Include:

• Determining the frame number of a specific label
• Adding script to a specific frame
• Removing  script from a specific frame

Demonstrating the FrameUtil

I took the liberty of creating a Flash example demonstrating adding frame scripts via runtime using CASA Lib’s FrameUtil.

[button style="download" link="http://dl.dropbox.com/u/272056/Downloads/FlashSpeaks/CasaLibFrameUtilDemo.zip" color="silver"]Download[/button]

Summary

When used correctly, this can be a very helpful utility as it extends the functionality and possibilities of the Flash timeline.  If you find yourself in Flash timeline, don’t forget to bring CASA Lib’s FrameUtil along.
Enjoy!

Arrays provide quite a bit of flexibility and functionality when developing in ActionScript 3.0. Having a utility readily available that will allow you sort, search, and manipulate Arrays will save countless hours of coding; along with a lighter script file. This leads me to the next addition of the CASA Lib series post as I breakdown the ArrayUtil.

The ArrayUtil is a very helpful utility for sorting, searching and manipulating Arrays. There are over 20 methods(functions) to this utility and each one provides a very helpful and common functionality. The examples below are very generic and derived from the CASA Lib documentation.

Summary of the ArraryUtil Methods

Randomize the order of the items within an Array

The function randomize() creates a new Array composed of passed Array’s items in a random order.

Example:

var numberArray:Array=new Array(1,2,3,4,5,6,7,8,9,10);
 trace(ArrayUtil.randomize(numberArray));

Remove duplicates within an Array

The function removeDuplicates() creates a new Array of only the non-identical items of passed Array.

Example:

var numberArray:Array=new Array(1,2,3,4,5,4,7,2,9,9);
trace(ArrayUtil.removeDuplicates(numberArray));// Traces 1,3,4,5,7

Remove all instances of an item of an Array

The function removeItem() removes all instances of a specific item of an Array. Also available, removeItems() which removes all of one Array from another Array.

Example:

var numberArray:Array=new Array(1,9,3,4,9,7,2,9,9);
trace("Removed " + ArrayUtil.removeItem(numberArray, 9) + " items.");// Traces Removed 4 items
trace(numberArray);// Traces 1,3,4,7,2

Compare two Arrays to see if they are identical

The function equals() determines if two Arrays contain the same items at the same index.

Example:

var numberArray1:Array=new Array(1,9,3,4,9,7,2,9,9);
var numberArray2:Array=new Array(2,9,3,4,7);
trace(ArrayUtil.equals(numberArray1, numberArray2));// Traces false

Add items of one Array to another Array

The function addItemsAt() modifies the original Array by adding all the items from another Array at a specific position.

Example:

var alphabet:Array=new Array("a","d","e");
var parts:Array=new Array("b","c");

ArrayUtil.addItemsAt(alphabet, parts, 1);

trace(alphabet);// Traces a,b,c,d,e

Fetch a random item of an Array

The function random() returns a random item of an Array.

Example:

var numberArray:Array=new Array(1,2,3,4,5,6,7,8,9,10);
trace(ArrayUtil.random(numberArray));

Determine how many times an Array contains a specific item

The function contains() finds out how many instances of an item an Array contains.

Example:

var numberArray:Array=new Array(1,9,3,4,9,7,2,9,9);
trace("numberArray contains " + ArrayUtil.contains(numberArray, 9) + " 9's."); // Traces 3

Fetch an item within an Array of a specific data type

The function getItemByType() returns the first item of an Array of a specific data type, class, or interface. Also available, getItemsByType() which returns all items that match.

Example:

var numberArray:Array=new Array(1,"a",3,"b",5,"c",7,8,9,10);
trace(ArrayUtil.getItemsByType(numberArray, String));// Traces a,b,c

Determine the average of the values within an Array

The function average() returns the average of the values within an Array.

Example:

var numberArray:Array=new Array(1,2,3,4,5,6,7,8,9,10);
trace(ArrayUtil.average(numberArray));// Traces 5.5

Fetch the highest/lowest value within and Array

The function getHighestValue() finds the highest value of an Array. Also available, getLowestValue() which finds the lowest value of an Array.

Example:

var numberArray:Array=new Array(1,2,20,4,5,6,7,8,9,10);
trace(ArrayUtil.getHighestValue(numberArray));// Traces 20
trace(ArrayUtil.getLowestValue(numberArray));// Traces 1

Sum up the values of an Array

The function sum() adds all of the items of an Array and returns its value.

Example:

var numberArray:Array=new Array(1,2,20,4,5,6,7,8,9,10);
trace(ArrayUtil.sum(numberArray));// Traces 72

Fetch an item of an Array by any key values

The function getItemByAnyKey() the first item that matches the key values on an Object. Also available, getItemsByAnyKey() which returns every item that matches.

Example:

var people:Array=new Array({name:"Aaron",sex:"Male",hair:"Brown"},{name:"Linda",sex:"Female",hair:"Blonde"},{name:"Katie",sex:"Female",hair:"Brown"},{name:"Nikki",sex:"Female",hair:"Blonde"});
var brownOrFemales:Array=ArrayUtil.getItemsByAnyKey(people,{sex:"Female",hair:"Brown"});

for each (var p:Object in brownOrFemales) {
trace(p.name);// Traces Aaron, Linda, Katie, Nikki
}

Determine whether an Array contains all items of another Array

The function containsAll() determines whether an Array contains all items of another Array. Also available, containsAny() which determines whether an Array contains any items of another Array.

Example:

var numberArray:Array=new Array(1,2,3,4,5);
trace(ArrayUtil.containsAll(numberArray, new Array(1, 3, 5)));// Traces true

Summary

As you can see, much of the functionality that this Array utility offers will have a positive impact to the complexity and size of your script while allowing you to focus more on the project at hand. The next post to this series will focus on the a utility, FrameUtil, used for determining label positions and adding and removing frame scripts from the timeline.

You’ve got the AS3 library of your interest downloaded, in this case, it will be CASA Lib. Now it is time to set up your Flash environment. What to do next? This tutorial is meant to walk you through on how to hook your Flash environment to a specific AS3 library.

Type of AS3 Libraries

AS3 libraries can be found in two forms: ActionScript files(.as) or compiled clips(.swc). In most cases, AS3 libraries you come across will be in a form of ActionScript class(s), but it is nice to know how to handle both types.

Tip: As a good practice, it is helpful to have a consistent location where you can place third party and/or personal AS3 libraries. This way there is no guessing as to where they go.

Let’s go off the assumption that you have download the CASA Lib library and you have created a folder within your Documents directory called AS3Library. The rest of this tutorial will go off this assumption.

Using a Flash Environment

Step 1: Create a new Flash document(.fla)

Start off by creating a new Flash document file.

Step 2: Access the ActionScript properties

Access the ActionScript properties by selecting File -> Publish Settings -> Flash -> Settings.

Step 3: Determining the Type of the AS3 Library

Once within the ActionScript Settings, you will notice you can define the your Document Class along with your pathing to the external AS3 source and/or libraries. Depending on whether your AS3 LIbrary is of source(.as) or library(.swc) form, the next tab you select will be different.

AS3 Library Source(.as)

AS3 Library(.swc)

Tip: As a good practice, if almost always best if you use relative positioning (versus absolute) when defining the path from the Flash document to the AS3 Library. This helps for portability of the project and when working in multiple platforms/environments.

Step 4: Define the Path to AS3 LIbrary

Since you know where your Flash document and AS3 Library is stored within your workspace, you can define where the AS3 Library is in relation to the Flash document. For example, I have added the working Flash document within the root level of a folder named AS3Sandbox within my Documents. In that case, my path to the library source will be “../AS3Library/”. If I where to point to the complied library instead it would have been “../AS3Library/libs/”. See below.

Defining AS3 LIbrary Source Path

Defining AS3 Library Path

Summary

Upon your selection, the Flash document is now able to access any and all of the AS3 libraries within the selected folder. As you download more AS3 libraries you can simply place them in this folder and you can instantly start to reference them within you Flash document. Now it’s time to get to the fun stuff like experimenting with your new toys.

If you have any questions, feel free to leave them within the comments.

Due to the popularity of one of my earlier posts, I’ve decided to extend the topic with a helpful Countdown Timer class. This handy utility provides a flexible and easy way to tie in countdown timer functionality into just about any design. It is designed to handle the grunt work of developing a Countdown Timer. It is not meant to replace the Countdown Timers available to the Flash community. It is purely meant to easily implement Countdown Timer functionality to you own custom design without reinventing the wheel.

Features Include:

• Easily define a new Countdown Timer instance
• Access to the countdown’s remaining days, hours, minutes and seconds
• Easily update the target end date
• Custom events that trigger upon Countdown updating and on complete

Getting started creating a fresh Countdown Timer

Implementing your new countdown timer design will require minimal ActionScript as the this utility will handle key events and updating of the remaining time.  All you need to implement this countdown functionality is a design and some time.  Enjoy!

Step 1: Importing the necessary classes

In order to use this utility within your Flash file, you would need to import the following two classes: CountdownTimer.as and CountdownEvent.as. Note: Make sure that the classes are local to your .fla file or if you are more comfortable modifying your ActionScript settings to accommodate the location of the classes, feel free doing so.

// Importing of the CountdownTimer Class
import com.flashspeaks.utils.CountdownTimer;
// Importing the CountdownEvent (used to update and notify upon countdown completion)
import com.flashspeaks.utils.CountdownEvent;

Step 2: Creating a new Countdown Timer Instance

Creating a new instance of the Countdown Timer is as easy as defining a new Countdown Timer instance and providing the target end date within the parameter. The only value needed is a target Date() object.

// This creates a new CountdownTimer instance and sets it target end date
var targetDate:Date = new Date(2011, 11, 25);
var myCountdown:CountdownTimer = new CountdownTimer(targetDate);

Step 3: Retrieve the remaining days, hours, minutes, and seconds

In order to provide flexibility, I have provided public properties to obtain the days, hours, minutes, and seconds remaining separately allowing you to determine how you would like to display the remaining time. There is also a property called time that will return the remaining time as a whole number separated by colons. (00:00:00:00)

In order to retrieve the time, a new COUNTDOWN_UPDATE event listener needs to be established as it will be mapped to a function that will update upon every tick. It can be easily done like so.

myCountdown.addEventListener(CountdownEvent.COUNTDOWN_UPDATE, onCountdownUpdate, false, 0, true);

function onCountdownUpdate(e:CountdownEvent):void {
 // Update on screen visuals like text
}

Countdown has expired…what to do?

One of the requested key features was a way to easily determine when the countdown had expired. Some wanted to load a new timer, change on screen text to read 00:00:00:00 ,etc. Setting this up using CountdownTimer is fairly easy. To do so, you would essentially create a new COUNTDOWN_COMPLETE event listener and supplying what it is that you would like to occur within the event handler function. Check it out below!

countdown.addEventListener(CountdownEvent.COUNTDOWN_COMPLETE, onCountdownComplete, false, 0, true);
function onCountdownComplete(e:CountdownEvent):void {
 // Countdown finished...
 // HAPPY NEW YEAR
}

Change the target end date on the fly

Another huge request was to provide a solution to easily update the target end date via run-time. CountdownTimer provides a function called updateEndDate(new Date()) which allows you to simply provide a new target end date through its parameter. Your on screen visuals will automatically update to accommodate the new end date.

For example, let’s say you wanted to add a month to the target end date every time that it has expired you can to so by simply adding one month to current month within the onCountdownComplete event handler.

Complimentary Flash Countdown Timer design

What’s good Countdown Timer functionality without a good Countdown Timer design? Here’s a complimentary design that I will be providing with the download. It includes the example source and provides all of the source from this tutorial. Feel free to implement your own design! I’d love to see them!

Download

Struggling to get our foot off the ground with getting more intimate with ActionScript 3.0?

Doug Winnie has kicked off a series, ActionScript 1:1, which is designed for animators and designers using Flash CS4 who want to take their work to the next level but need some guidance adding custom interactivity using ActionScript 3.0.

These videos are aimed at Flash Designers looking to strengthen their knowledge of ActionScript 3.0.  We all have to start somewhere when learning to use ActionScript 3.0 and this series is great way to get that train moving along.

Below are all the episodes in the series.  You can also find Doug’s videos as a channel on Adobe TV and iTunes.  Enjoy!

Welcome to ActionScript 3

Doug Winnie gives an overview of his new series in which you will learn the fundamentals of ActionScript 3.0. Get up and running in Flash Professional using ActionScript 3.0.

Working with the Actions Panel

Understand how to use the Actions panel and use the trace statement. Doug Winnie walks you through the code to control objects created in Flash.

Accessing Object Parameters

Doug Winnie demonstrates how to access properties of an object such as size and location by using instance properties with ActionScript, sending messages to the output console.

Changing Object Parameters

In order to manipulate objects, Doug Winnie uses the assignment operator in ActionScript 3.0 to instantaneously overwrite values initially assigned in Flash.

Exploring Named Library Assets

Dive deeper with the Library panel and learn more about how to name instances on the stage, and how to use the Linkage panel to name objects in the Library panel.

Adding Named Objects to the Stage

In this video, Doug Winnie teaches you how to use ActionScript to dynamically add objects to the stage using code and the DisplayStack.

Working with Comments

You can use comments to document your ActionScript code for other Developers to use. Doug’s tutorial sums up the benefit of building up good coding practices.

Fundamentals of Functions

Doug Winnie provides an introduction to functions and explains how to efficiently use them in ActionScript by grouping commonly used tasks together as a named function.

Accepting Values in Functions

Doug continues his tutorial on how to efficiently use functions with ActionScript. With functions you can customize their functionality by assigning parameters and values.

Returning Values from Functions

Doug Winnie wraps up his lesson on functions by explaining how to retrieve results for the output panel with the return statement.

Mathematical Operators

Doug Winnie teaches the basics of calculating mathematical operations in ActionScript code, including commonly used shortcuts to save coding time.

Order of Mathematical Operations

In this video, Doug Winnie reviews how Flash calculates math based on a specific order of operations.

Events and MouseEvent Handlers

Discover the power of events and how you can quickly and easily build event handlers. In this episode, Doug covers how to use events to build interactivity with the mouse.

Create a Timer

Using your advanced knowledge of ActionScript, Doug Winnie walks you through on how to combine time events with event listeners to create and control time-based events.

Create a Clock

See Doug build a clock in Flash using ActionScript to manipulate objects’ properties and add mouse and timer events. Everything you’ve learned from his tutorials is combined into one project.

Over the years, the Flash Player has received such a bad rep for hogging computer system resources even while displaying static content. There were many times in which I would wonder “What the heck is Flash processing?”. As for Flash Developers/Designers, there was only so much we can do to optimize the SWF via runtime. That was then, this is now! In Lee’s latest video tutorial, he demonstrates how you can dynamically change your movie’s framerate to use only the resources it needs.

With its introduction in AS3, you can dynamically change the framerate of your SWF movie. In an earlier tutorial, I demonstrated how you can change the framerate of your SWF and how it will effect a frame by frame animation.

By leveraging the ability to dynamically change the framerate of your SWF, it will allow you to take advantage of idle moments in your Flash applications by changing the the framerate based on the content being displayed. It’s a simple, yet great concept.

Check out Lee’s video, SWF Framerate Optimization, to learn more on how to implement such a concept. Enjoy!

The guys over at Jumpeye have recently released an update to their exiting flash text effects component, TxEff.   This is an update which targets improved performance, quality, and Flash integration.  The great thing about TxEff is that it allows you to create quality effects and transitions with little effort and time and saving time is huge when dealing with multiple Flash projects.  Learn more about TxEff2 below.

What is TxEff2?

TxEff2 is a Flash CS3/CS4 AS3 component created for easing the text animation process. TxEff2 is also a framework based on patterns, a large collection of classes, which enable cool show/hide and swap transitions on texts.

TxEff2 comes with cool new features

• Better architecture (based on the FlashEff engine)
• Improved performance (thanks to TweenLite)
• Lower file-size
• Seamless pattern import
• More patterns (100+)
• Filters (like reflection, glows, stripes)
• Compatible with FlashEff effects and patterns
• Cool new visual User Interface
• Swap through different texts (not only show & hide)

TxEff2 vs FlashEff

If you’ve ever heard of or used FlashEff before you might be asking yourself what is the difference.  Well TxEff is based off of the FlashEff engine which takes advantage of the FlashEff Panel and FlashEff patterns, however, there are some limitations.  While FlashEff allows you to apply the effects to MovieClips along with TextFields, TxEff2 is limited to just effects on TextFields.  Here is a chart that compares the both TxEff2 and FlashEff.

Note: Be sure to subscribe to the RSS feed as there will be a contest giveaway of TxEff2 very soon.  Stay tuned!

With all the recent developments with 3rd party libraries being supported in AS3, I am still shocked to see people still asking the question “Why ActionScript 3.0?”.  I simply do not get it as AS3 presents so many more pros than cons.

It is almost as if ActionScript 3.0 is the monster in the closet that some people would rather just avoid then confront.   For those who have migrated over, we have found out that it is not the infamous monster in the closet.  Instead, it turned out to be a hanging sweater casting a monstrous shadow.

For those still asking themselves the question of  “Why ActionScript 3.0?”, check out this parody video on the topic.  Cracks me up every time!

Dynamic mask objects have been key to many Flash project’s success. When it comes to migrating over from AS2 to AS3, you’ll find that things have changed as the method “setMask()” in AS2 is now a property called “mask”. In this next edition of the Moving From AS2 to AS3 series, I will be comparing the two solutions and offering an efficient solution to creating dynamic masks using AS3.

Comparing AS2 to AS3

Setting masks dynamically using ActionScript 2.0

myMC.setMask(maskObject);

Setting masks dynamically using ActionScript 3.0

myMC.mask = maskObject;

So as you can see the syntax hasn’t changed much, however, personally I feel that AS3′s implementation is a bit more literal making it easier to understand.

Creating your masking objects as Sprites

While in ActionScript 2.0 there was no better of a solution than to create your masking object as a MovieClip. With the introduction of the Sprite object in ActionScript 3.0, creating your masking objects as Sprites is a far more efficient solution.

Since a mask object does not require a timeline, using a Sprite instead of a MovieClip simply makes more sense. Below is an example where a Sprite is used in place of a MovieClip:

// Create mask
var maskObject:Sprite = new Sprite();
maskObject.graphics.beginFill(0xFF0000);
maskObject.graphics.drawRoundRect(myMC.x, myMC.y, 453, 290, 20);

// Apply mask
myMC.mask = maskObject;

Download Example File

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.

With the constant birth of bloggers hosting their own blogs, XML banner rotators have become quite popular. Banner rotators are an excellent way to showcase products, featured articles, or anything you feel that needs that extra attention. I have compiled a list of Flash XML banner rotators that can provide an elegant solution to showcasing important news or content. Enjoy!

Looking for more banner rotators?

Check out a growing collection of the web’s coolest banner rotators!

Also, if you know of any other XML banner rotators that deserve a mention, feel free to comment below or via the contact page.

Looking for more banner rotators?

Check out a growing  collection of the web’s coolest banner rotators and sliders!