Once again the popularity of an earlier post has caused me to revisit a topic and improve upon a post that had been written over two years ago. The post that I am referring to is on the topic of creating a mini music player in AS3. Simple music players still have a place on the web and I’ve taken the liberty of re-creating an easy to use MP3 player built in AS3.

Introducing the Mini MP3 Player

While creating this MP3 player, I took much of the feedback from its previous implementation into consideration. Based on your feedback, I’ve decided to include the following features into this release.

Features:

• Easily load a new sound into the player at any given time
• Autoplay supported (defaults to false)
• Looping supported (defaults to false)
• Fast forward and rewind the loaded sound
• Control the volume with supplied volume scrubber
• Extends CASALib’s CasaMovieClip giving you features like destroy()
• Fresh UI designed by Ryan Butz that can easily be customized

Implementing the Mini MP3 Player

I have updated the initial post to include how to implement this MP3 player into your Flash projects. Since I know everyone’s version of Flash might not be the same, I’ve taken the liberty of providing legacy versions of the FLA for Flash CS3 and CS4.

Download

Preview

Feedback

As you integrate this into your projects, I’d love to hear our feedback. However, like always, let’s keep it constructive.

Credits

The provided audio loop is a part of the Teru’s Keys Loop freebie pack.  Like it?  Download the whole pack.

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

Reversing a string is not something you might implement on a daily basis, however, having a handy way of doing so is always a great go to option. Here is a function that allows you to input a string of any length and it will then be outputted being reversed. This is definitely one function to add to your Flash utilities.

Enjoy!

Reverse Any Given String

function reverseString(tString:String):String {
var tmp_array:Array=tString.split("");
tmp_array.reverse();
var tmpString:String=tmp_array.join("");
return tmpString;
}

Source Demonstration

Download source

In a previous post, I introduced the release of FlashEff 2 as an innovative Flash animation tool. In an attempt to prove my point, I am going to demonstrate how you can use FlashEff 2 to create a button using a MovieClip object.

OK, I know some of you might be thinking, a button? Well, creating a button in AS3 can be somewhat of a pain. After you get through creating your buttons, adding its functionality along with creating its appropriate event listeners; this process can get very old and tiring. Since FlashEff is here to simplify your workflow, why not let FlashEff handle your button’s functionality, animation and event listener creation.

Using Button Mode

In FlashEff 2, you can edit a button using its Button mode. This mode will allow you to assign your button some actions like following an URL, calling a function, or even going to a different frame whenever it gets clicked. All this without one single line of ActionScript. Here’s how!

Creating a Button Object

I am going to take a button graphic/design and create a MovieClip out of it. Once created, I will go into my Component Panel and drag a copy of the FlashEff2Button component onto my newly created MovieClip. One other great thing about FlashEff is that upon dragging a copy of its component onto the target object it will snap to the target’s 0,0 position.

Now it is time to toy around with the FlashEff Panel.

Using the FlashEff Panel

The FlashEff Panel is where all of the magic happens. Here you can select any of the preset effects/animations that an object can have. Once you’ve added a preset, you can then preview an example of it via the live preview feature of the panel.  Take it for a test drive.

Adding my Button Effect/Animation

In this example, I will select the “HappyTurn” preset. Now, if I wanted to I can modify the presets; allowing me to then save my own “custom” preset.  (Feature available only if you have the Premium Plus license) You can also adjust the tween type and speed for the up, over, and down button states. Just to keep things simple, I won’t be doing any of that.

Adding Commands to the Button

FlashEff’s Button mode comes equipped with its assortment of commands that you can trigger upon press. They include adding a sound, calling a function, going to a keyframe, navigating to a URL, playing back a sound, and switching objects. Also, you can even stack these commands which will allow you to trigger a sound, call a function, and navigate to a URL on one press.

In this example, I will be adding a sound playback on press along with an event to navigate to a URL upon double clicking the button object. When attaching a sound you can identify that sound through a linkage ID or path.

Overview

Below, you can find the final result of this mini demo.  Basically, the button, upon rollover, triggers the HappyTurn animation, then on press a click sound will trigger.  Now, if you double-click it will take you to the designated destination, Google’s homepage.  The custom possibilities are endless.  The more you use FlashEff the more situations you can picture yourself using the tool to simplify your project’s workflow.  To learn more on what FlashEff can accomplish, visit FlashEff.com.

FlashEff 2 Giveaway Opportunity

In the upcoming days, you are going to have the opportunity of winning 1 of 2 FlashEff 2 unlimited premium licenses.  Stay tuned…

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!

When developing Adobe AIR apps, having the capability of controling the look and feel of an application’s window chrome is huge. Not only does it allow for designers to create a much more appealing interface window chrome, it also allows for personal branding.

With a community full of AIR applications, personal branding is something that just might make your application stand out more than others. However, this concept can act as a double edged blade as you don’t want to risk usability when getting creative with your application’s window chrome.

Earlier this year, Lee Brimelow wrote a nice tutorial on how to go about customizing your application’s chrome and pros and cons on doing so.

Below is a video created by Lee which turns out to be a nice compliment his tutorial.

Since the release of Flash CS3, a new feature called QuickTime export was introduced.  QuickTime export allows you to export Actionscript driven or timeline animations into a QuickTime movie file.  One key advantage of exporting Flash as a QuickTime movie is the ability to playback your heavy animations as fluid as possible with no skipped frames.

Lee Brimelow walks you through the process of exporting ActionScript-based animations into a QuickTime movie and then compositing it within After Effects.  In the process of demonstrating this feature, Lee also gives some additional advice with ActionScript-based animations.

If you are in a hurry, follow the steps below to quickly get your Flash content exported into a Quicktime Movie.

1. Open Flash File

Open your existing Flash file that contains the animation.

2. Export Your Movie

By heading over to the file navigation menu, select Export>Export Movie which should bring up a file dialog.

3. Name/Save File

Provide our new video with a file name and a new location. Select Quicktime as your movie type. Note: Quicktime is the only format that will allow you to export ActionScript driven animations.

4. Configure Export Settings

Configure the export settings to your specifications

5. Export and Enjoy

Click export and wait for your Flash to record your Flash animation. Note: For improved video playback and recording, close down any open applications till the recording process is complete. The more resources available – the better.