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.

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

Flash and Flex Developer’s Magazine is one of few magazines that target Flash and Flex development.  It offers tutorials, product reviews, and articles from the industry’s talent.  Recently, this up and coming magazine subscription has gone digital and completely FREE!

September marks the first month of this free digital publication.  They are also, providing downloads from previous months.

Download your copy now!

Current Issue: Study of Flash Media Server

• Putting “Brains” into Flash Apps…
• News Digital Media Toyota Tarago Campaign Driving a Difference…
• Working with MySQL Database from Flash Media Server Server-Side
• Adobe Flash Media Server 3.5…
• Streaming to Flash and iPhone with Wowza Media Server 2 Advanced…
• Wowza Media Server…
• Options When Planning a Video Application With FMS…

Previous Issue: Branding for Developers

• Creating a game using WOW-Engine…
• How to monetize your game?…
• So you’ve written your AIR application, now what?
• Five Reasons Enterprise Developers Learn Flex…
• Bring Flash content into the social realm of Facebook…
• Rich Components with Flash and Flex…
• ActionScript 3.0 programming paradigms, and code organization Through OOP

Who wants to win a FlairBuilder License?

Earlier this week, I introduced a new, innovative prototyping tool called FlairBuilder.  I was happy to help Cristian Pascu get the word out about his new application.  If you are one of the many that has downloaded the trial, I’d love to see what type of wireframes you’ve come up with.

After many trial downloads, Cristian and I decided to provide an opportunity to earn yourself a free license of FlairBuilder. Cristian was kind enough to giveaway 5 FlairBuilder licenses to those willing to participate in this contest.

How do I participate?

We would like for you to create a 2-3 wireframe flow based on a new or existing website or project.  This is not only a great opportunity to really experience the excitement surrounding FlairBuilder,it is also an opportunity to win yourself a license.  Once you’ve created your wireframe flow, use the comment section below to link to it from your own server using the live online viewer.

Submit an URL like this:
http://www.flairbuilder.com/viewer/?url=YOUR_OWN_URL_HERE

The rules…

• The rules are simple.  All that we ask is to submit something that you’ll be proud of.
• You must leave a valid email address when filling up the comment form.
• Contest ends May 25, 2009, after which comments will be disabled.
• Winners will be selected by Cristian himself

Can’t wait to see the results.  Have fun!

The community’s cry for a simple guide that would quickly go over some of the most felt changes from AS2 to AS3 has been heard.  Adobe has recently added a new resource to the ActionScript Center called the ActionScript 3 Migration Cookbook.

There you will find a quick introduction to migrating to ActionScript 3.0 from ActionScript 2.0.  It is targeted at designers and developers who have some experience scripting content within Adobe Flash CS4 Professional. It does not require an understanding of object-oriented programming.

Along with this resource of common AS2 code into AS3 conversions is a a downloadable PDF version which basically takes this section of the Devent site and dumps it into a portable version. Overall, this is a nice guide that can provide that helping hand during the first stages of the migration over to AS3.

Download the ActionScript 3 migration cookbook

With the growth of intense Flash applications that handle sensitive data like user names, passwords, account data, etc, HP looks to increase awareness of common security vulnerabilities that can be found in today’s Flash applications.  Earlier this week, HP announced the release of its security tool called HP SWFScan.

What is HP SWFScan?

HP SWFScan is a free security tool for Windows that helps developers find security vulnerabilities in applications developed with the Adobe Flash Platform.  SWFScan helps you find, fix, and prevent security vulnerabilities in your SWF applications and deliver more secure code without having to become a security expert.

How does it work?

SWFScan will decompile the targeted SWF file and analyze the source code to see if it can target any potential security vulnerabilities.  It will also perform a static analysis to understand their behaviors as this will help identify vulnerabilities that lie under the surface of an application and are not otherwise detectable with traditional dynamic methods.

If you’ve ever used a SWF decompiler, then the interface of this application will feel right at home.  If you are interested in learning more on SWFScan check the article on Adobe Developer Center.

Download HP SWFScan

Lately, there has been a focus on AS2 to AS3 migration topics and to add to this topic, you check out and download Sean Moore’s very handy ActionScript 2.0 to 3.0 Migration Cheatsheet.  While it doesn’t break down the exact differences between the two, but I believe it serves as a very handy guide to have on your AS2 to AS3 migration process.

On the note of migrating from AS2 to AS3,  I would encourage you to suggest any topics/snippets that you would like seen converted from AS2 to AS3.  Feel free either to use comments sections on this page or you can leave me a suggestion via the contact page.

Have you ever wanted to integrate a rich text editor into your Flash projects?  AS3 TextEditor Lite is a SWC based component for rich text editor which can be used in Flash applications to be developed using ActionScript 3.0 and Adobe Flash CS3 IDE.

This component provides features like:

• Dynamically attach it to any text field of your application
• Complete WYSIWYG Editor
• Formatting of characters as Bold, Italic, Underline
• Hyperlink with color, underline options
• Search and replace texts
• Indent, Margin (left and right)
• Paragraph alignment left, right,center,justified
• Making unordered lists
• Line spacing, Character spacing
• Adding Image (No Edit)

At the beginning of the month, Lee Brimelow released a new video series he calls Flasher Magazine.  He is now sharing the video player he uses on the site to the community.  It’s a nice piece of work.  However, keep it mind that the “Flasher Player” was not meant to be feature rich.  I guess we can’t be too picky, its free.

If you’re interested, head over to Lee Brimelow’s blog and grab it.

AFC Announces All 14 Actionscript 2.0 Components as FREE!

This a very impressive list of Flash components. The original value of all of these combined are over $310. As of today, you can find them all free at Advanced Flash Components. Enjoy these great tools and make sure to spread the word.

Also, don’t forget to thank the guys over at Advanced Flash Components for this great opportunity.

Flow List

Flow List Component loads external images and creates a 3D flow animation. Flexible API makes it easy to integrate this component into your web application.

Media List

The Media List component is an adaptable list that can be used as a navigation for a variety of media. It allows you to easily scroll to, and select items in the list, with a clear indication of which item is selected.

Tooltip

Tooltip Component is the perfect tool for displaying text and image tool tips in Flash. Enhanced functionality, easy to use interface and scalability makes this component a valuable tool for every flash developer.

IMG Loop

IMG Loop Flash Component creates continuous image scroll. Component supports XML, RSS 2.0 as well as direct data input. All of the component properties can be modified to seamlessly integrate with your project.

FLV Player

The FLV Player component provides standard user interface controls (play, pause, stop, etc) for Flash video playback.

Map

Map Component displays geographical locations and polylines, allowing for easy map navigation. Component uses Equidistant Cylindrical Map Projection and Longitude and Latitude position data to display location points.

MP3 Player

Easily load and play MP3 files inside Flash using MP3 Simple Player component. Player supports XML and RSS 2.0 Podcast Feeds.

IMG Gallery

IMG Gallery Flash component is a fully customizable and scalable tool for displaying dynamic slide shows. Component supports XML, RSS 2.0 as well as direct data input.

IMG Thumbnail Gallery

IMG Thumbnail Gallery Flash component is a fully customizable and scalable tool for displaying dynamic slide shows. Component supports XML, RSS 2.0 as well as direct data input.

FLV Gallery

FLV Gallery Flash Component is a perfect solution for playback of multiple flash video files and can be easily integrated within any flash application. FLV Gallery supports XML and RSS 2.0 feeds and is fully customizable through component properties.

FLV List Gallery

FLV List Gallery Flash Component combines extensible functionality and easy to use user interface for multiple flash video files playback. FLV List Gallery supports XML and RSS 2.0 feeds and is fully customizable through component properties.

IMG Loader Blur, IMG Loader Pixelate, IMG Loader Tint

The IMG Loader component is a container that can display external image files (JPEG/GIF/PNG but not progressive JPEG files) with Flash 8 Blur Transition, Flash 8 Pixelate Transition, and Flash 8 Tint Transition; respectively.

Source: Advanced Flash Components