HorizontalList and ItemRenderers in Flex

I must’ve done something wrong… I can’t imagine this being so hard.
What I did was: I used a simple HorizontalList component, set the columnWidth to 80, built my own itemrenderer and put them together. The itemrenderer basically loads a JPG and displays it. Seen as my images were larger than 80px I decided to do some maths the resize the image on the fly.
To start with, i went into my itemrenderer, and traced the with of the bitmap, and the width of the itemrenderer itself. Just to make sure those properties are actually ready. First thing to notice: this.width inside the itemrenderer randomly traced 80 and 85.

What the f-… Wait… Eh… No, what?

I didn’t really find out why that is, but if anybody feels like enlightning me: go right ahead. (After that, I noticed that sometimes the first or the last (or both) items in the list weren’t updating at all… I must be misunderstanding some fundamentals of the framework I guess… [Btw: I did NOT manage to fix this in a decent way, so at some point I gave up an threw it away...])

The panel titlebar in Flex

So this is AIR, right? Goodbye system chrome, hello you science-fiction-looking chrome! I created my own (very Flex-looking) chrome and disabled the system chrome. I wanted my app to be able to be moved around on the desktop… You know: Like windows do (not Windows…).
I figured: Hell, the Panel component looks a lot like a basic window. Why not use it as the main window? So what’s the first thing a regular human brain would do? Right, you’ll try to get to the titleBar via the panel instance… But you can’t! I figured I must be misunderstanding the construction of the panel. So there I go, reading about the titleBar on the Panel Class page in the Flex Livedocs. Most of you already know but just let me spell it out for you: It’s protected… So you can’t get to it right away… You have to built your own panel class that extends the original Panel class, and create your own public getter for the titleBar…

Excuse me: WTF? Oh, I think I understa… Oh, no I don’t: Why again?

No seriously: What’s the deal with that? I can see how you don’t want a setter there… But no getter? What good is that supposed to do? Anyway, let’s fix this…

< ?xml version="1.0" encoding="utf-8"?>
<mx :Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
</mx><mx :Script>
< ![CDATA[
import mx.core.UIComponent;
 
public function get theTitlebar():UIComponent{
return this.titleBar;
 
}
// There are probably way easier/simpler ways than this...
]]>
</mx>

And now I can use theTitlebar of my DraggablePanel class to actually drag my panel like a real window…

pnlMain.theTitlebar.addEventListener(MouseEvent.MOUSE_DOWN, startTheDrag);
private function startTheDrag(e:MouseEvent):void{
nativeWindow.startMove();
}

That looks pretty straight forward, and actually works like a charm… But why did I have to do this? Why is the titleBar protected??

AS3 JPGEncoder for FP9, FP10 and the one on speedballs

So at one point I actually got to building the thing I actually wanted to build: A Photobooth-clone that takes a picture and saves it to the harddrive. Drawing the bitmap went fine, saving the encoded JPG to disk went perfectly smooth as well. The AIR API is really fun to work with. Pretty straight foward… But I will get back to that in just a minute…

The problem at hand right now was the Bitmap encoding: I draw a bitmap (480 x 360) and I want to write it to disk. So I include the AS3corelib in my project and continue my quest. When testrunning I notice the application freezes while the bitmapdata is encoded. And not just for a moment. Noooo… For a full second (or longer)! I can hear you thinking: ‘A second…? So?’. Well if you want to shoot a picture every second this application will just completely freeze. And let’s just face the fact: it’s just plain annoying the have an application the freezes every few seconds for that amount of time.

So I started playing with quality settings, and bitmap sizes. All to no avail. The encoder is just too slow. Peter suggested taking a look at the Vector implementation found here. That went way faster already: Up to 4 times faster. But still: 0.3 seconds is pretty slow… So I read through the comments and run into the magic word: ‘Alchemy‘. I haven’t been playing with Alchemy myself (mainly because I don’t know C), but I knew Alchemy would be the key to he solution of this problem. So I downloaded this SWC (direct link), implemented this version of the encoder, ran the script and…
….I went ‘WHAT THE FUUUUCK?’ (You can see what that looks like below)

This video was made using the pictures Alchemy created. Alchemy was encoding these bitmaps in .05 seconds per frame! (I swear, I went on for at least 15 minutes WTF-ing over and over again…). So: From 1.2 seconds to 0.05 seconds… That’s about 24 times faster. Ain’t that amazing?

The coolest thing? I didn’t even have to compile the C code myself as I was given the .swc file. (Believe me I gave C compiling a try, but me and Terminal… It’s just not gonna happen…)

File.nativePath and File.url in AIR

The one thing I love about AIR? The combination of creating crossplatform applications using the tools I’m familiar with from online development. The keyword here is crossplatform. Creating AIR apps is supposed to be a straight forward process. You shouldn’t worry about platform specific issues. AIR is handling the heavy lifting for you. The only thing you need to do is create the app using the crossplatform API. Or so you would think.

One of the first things I noticed was the fact that the file.nativePath property isn’t all that crossplatform. And nobody can’t really explain why. Even Lee Brimelow didn’t manage to explain that in his tutorial…

I mean: How can the native path not be cross platform? It’s native to it’s own platform! (I really went WTF when learning that).

Apparently you can do anything using the file.url property. To me file.nativePath isn’t intended to be used when trying to access a file, but more intended to show the end-user where on the filesystem the file resides using a platform native notation.

Examples

• Windows XP: c:\Documents and Settings\noCreativity\My Documents\myFile.jpg
• Windows Vista: c:\Users\noCreativity\My Documents\myFile.jpg
• OSX: /Users/noCreativity/Documents/myFile.jpg

instead of

• file:///c:/Documents%20and%Settings/noCreativity/My%20Documents/myFile.jpg
• file:///Users/noCreativity/Documents/myFile.jpg

I am no Adobe AIR expert so please, feel free to correct me. Because this really itches me. How can a crossplatform API have a property which is not crossplatform-compatible (and don’t get me started on the whole OSX Dock/menubar vs Windows Start Menu/taskbar thing… But somehow, that’s different…)

Finally… The end…

Yes, I had a hard time doing all this but I learned a lot! My conclusions?

I like Flex and how it enables you to rapidly create data driven applications, but I’m pretty sure I’d really have to look into the inner workings of the framework before trying to build something, using the framework… And basically that ‘really looking into it’ ruins the mood for me… Definitely when experimenting.

Alchemy is amazing! I can’t wait to get a good C development environment up on my iMac and start playing with C and lean how I can get the best from both worlds. If you have got any decent suggestions on how to do that [without Terminal] feel free to tell me
Oh and by the way: If you’re experimenting with Alchemy and you’re open-sourcing code or libraries, I encourage you to add a .swc file with the compiled C code. Thanks in advance!

I love the AIR API. Although that nativePath thing will keep haunting me until somebody can give me a straight answer, ’cause I feel like a complete idiot right now.

Oh, and if you care: Feel free to check out the application!

Download: Click!

A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript… So I started experimenting around…

When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.
I went on a Google trip which led me to Koen‘s post about motion detection. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.

In his post Koen mentioned an article, written by Guy Watson, concerning an other way to get motion detection going. To make things simple: Guy just takes 2 pictures – one of the previous frame, one of the current – puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The ‘unchanged’ pixels are blacked out. The remaining pixels are the difference in the picture… which reflects movement.

So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.

That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn’t find anything intresting. Later on, I talked to Peter Elst and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()

There we go: that’s a solution right there! And it worked out just fine!
You can test it for yourself in this little test application – requires a webcam (duh!)

Download

Flex Project source: source.zip
Webcam motion detector class (Actionscript 3): MotionDetector.zip

I was planning on adding a ‘sensitivity’ property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch )
Feel free to suggest better ways of doing this. I’m still pretty sure I’m creating a bit too much overhead to make this work

In the past week, I’ve been pretty busy adding the finishing  touches to the features and fixing the last few bugs that popped up. Most of the last-minute changes are a result of using the class in one of my own projects.

It’s then when I realized I’m missing some key features like adding the music directory, and some properties of the PlayrEvents. I also added some ear candy like fadeIn() and fadeOut() methods.

On a more functional note: I’ve abstracted the playlist to an independent class. So now you’re provided with lots and lots of ways to customize and manage your playlists.

The shuffle mode is now smart. In English that means the playlist remembers what songs have played and which ones haven’t.

Finally I’m happy to tell you guys won’t ever have to write an XML playlist file yourself. I’ve got a PHP4 and PHP5 version of PlayrDiscovr which reads a directory and returns the corresponding XML listing the tracks and their properties.
On top of that, I’ve got some help from other people (I still need to contact you guys) who are willing to help me out with building PlayrDiscover in ASP, Ruby and Python.

Even though I’m listing all of the new features, the Playr class is still the easiest way of implementing any kind of sound-feature in any Flash/Flex/AIR application. But the simplicity shouldn’t be a limitation, which it isn’t: you’re still able to build full-feature media-playing applications.

One of the little challenges I still have to tackle is the Tween problem. I’ve implemented fadeIn() and fadeOut() methods. Those methods actually tween the volume property of the Playr instance. The problem with that is when using the Playr class in a Flex project, you get a cool error message telling you it can’t import fl.transitions (which is the class package for the Tween class and the easing package).
I still haven’t figured out how to work around this problem. If any of you have any suggestion on this problem, feel free to tell me about it.

I plan on releasing Playr 2.0 in the coming week (or 2) depending on PlayrDiscovr impementations, final changes, demo’s and site development (yes, I’m building a dedicated site for Playr ) Feel free to suggest other implementations you’d like

Hieronder volgt een korte uitleg over deze termen. Ik heb er ook meteen de meest voor de hand liggende software pakketten bij geplaatst, want ook daar durft men soms verkeerd geïnformeerd zijn.

Flash

Omschrijving: Flash is een programma van Adobe waarmee SWF files kunnen gebouwd worden. Deze SWF bestanden worden vooral op het internet gebruikt, en spelen af in de Flash Player. De Flash Player is een krachtige light-weight plug-in voor webbrowsers (Firefox, Safari, Internet Explorer, Opera… ) die zowel op Windows, OS X alsook Linux beschikbaar is.

Tools of the trade:

• Adobe Flash

Voorbeelden van toepassingen:

• Youtube: De video’s worden afgespeeld in de Flash Player. De video-besturing is Flash-content. De video die afspeelt is Flash Video
• Switch Media Works: Een volledige Flash website

Links:

• Adobe Flash
• Adobe Flash Player plug-in

Flash Lite

Omschrijving: Flash Lite is een runtime die vooral op GSM’s, PDA’s, en andere handhelds (zoals de Chumby) ingezet wordt. Bedoeling hiervan is dat Flash developers nog een groter publiek kunnen bereiken door kleine applicaties te kunnen maken, die op de kleinere draagbare toestellen kunnen bekeken en gebruikt worden.

Tools of the trade:

• Adobe Flash

Voorbeelden van toepassingen:

• Flash on the beach mobile
• Flash in the can mobile guide

Links:

• Adobe Flash Lite
• Adobe Flash

Flex

Omschrijving: Flex is in het leven geroepen met het oog om snel Flash applicaties te maken. Flex steunt op het gebruik van Flex componenten, die deel uitmaken van het Flex framework. Die maken het mogelijk om snel data-driven applicaties te maken. Flex projecten resulteren – net als Flash – in een (of meerdere) SWF bestanden, die gewoon in je browser, in de Flash Player plug-in zullen werken. Je hoeft dus geen andere plug-in te downloaden om sites (gebouwd in Flex) te bekijken.

Tools of the trade:

• Adobe Flex Builder
• Eclipse + FDT plug-in
• Je favoriete tekst editor + (gratis) Flex SDK

Voorbeeld van toepassingen:

• Flex Showcase: Deze site is gemaakt in Flex, en toont nog eens heel erg coole voorbeelden van wat allemaal met Flex kan.

Links:

• Adobe Flex Builder
• Adobe Flash Player plug-in
• PowerFlasher FDT

AIR

Omschrijving: AIR is een afkorting voor Adobe Integrated Runtime. Met andere woorden: AIR maakt het mogelijk om Flash/Flex applicaties op je desktop te draaien. Beter nog: AIR geeft je de mogelijkheid om de vaardigheden die je opgebouwd hebt tijdens het werken met Flex/Flash/HTML & Javascript nu te gebruiken bij het bouwen van desktop applicaties. AIR bestaat voor zowel Windows, OS X aslsook Linux. AIR is dus platform onafhankelijk.

Tools of the trade:

• Adobe Flash
• Adobe Flex Builder
• Adobe Dreamweaver
• Je favoriete tekst editor + (gratis) AIR SDK

Voorbeelden van toepassingen:

• Twhirl
• eBay Desktop

Links:

• Adobe AIR
• Adobe Flash
• Adobe Flex Builder

Silverlight

Omschrijving: Microsoft Silverlight is – net zoals Flash – een media formaat dat vooral op het web toegepast wordt, en dus in een plug-in van je browser afspeelt. Hoewel men Silverlight de ‘Flash Killer’ noemt is Silverlight tot vandaag relatief weinig ingezet.

Tools of the trade:

• Microsoft Expression Blend
• Microsoft Visual Studio

Voorbeelden van toepassingen:

• Silverlight Showcase

Links:

• Microsoft Expression Blend
• Microsoft Visual Studio
• Microsoft Silverlight plug-in

Er zijn nog zoveel andere dingen te zeggen – en die zelfs al gezegd zijn – zodat ik me bijna verplicht voel om nog enkele links naar andere leeswaardige artikels te posten.

• Peter Elst – Flash vs Silverlight 2.0
• Peter Elst – Flash vs Silverlight
• John Dowdell – What’s up with reporters?
• Endrone – The war: Flash vs Silverlight
• FlashFocus – Silverlight en JavaFX: Flash krijgt concurrentie
• Tweakers – Microsofts Silverlight gaat de strijd aan met Flash
• Keith Peters – Silverlight again

Dank aan Peter Elst voor het nalezen, en aanvullen van dit artikel. Thanks, Peter!!

Serge Jespers berichtte vandaag dat de eerste alpha versie van de runtime voor Linux beschikbaar is. Op deze manier wordt het bekende open-source platform weer toegankelijker! Verder is er vandaag ook een update beschikbaar geworden voor de Flex Builder voor Linux. Deze zou AIR support moeten geven zodat developers ook op Linux aan de slag kunnen gaan!

En om het plaatje af te maken, maakt Adobe bekend dat ze zich bij de Linux Foundation aansluiten.

Dit lijkt mij heel goed en fijn nieuws!

Ik heb gisteren de laatste wijzigingen aangebracht aan de vroegere MusicPlayer class. Zoals het er nu uitziet lijkt deze klasse af, voor een eerste ronde echt gebruik, keiharde feedback en vele suggesties.

Belangrijke wijzigingen zijn:

• Classnames, en package names zijn aangepast.
  • De klasse zelf heet nu Playr in plaats van MusicPlayer.
  • Package name is aangepast. com.noCreativity.MusicPlayer is nu com.nocreativity.playr (met dank aan Peter Elst voor de best practice tip )
• Shuffle mode toegevoegd
• Trackprogress kan nu ook opgevraagd worden
• Singletrack werkt nu volledig
• Bug ivm repeat weggewerkt

Wat doet Playr?

Playr is een Flash Actionscript 3 klasse die het maken van een volwaardige music player in Flash/Flex/AIR reduceert tot enkele regels code. Of je nu maar 1 loop wilt laten spelen, of een volledige playlist wilt afspelen in Flash/Flex/AIR: Playr kan het sneller dan jij!

Playr kan je gebruiken om een enkele loop af te spelen, of voor volledige XML afspeellijsten te laten afspelen. Zowel shuffle als repeat zijn mogelijk. Ook de interactiviteit met de gebruiker kan snel worden toegevoegd.
De Playr class is ontworpen met snelheid en gemak voor ogen

Hoe gebruik ik Playr?

3 Korte voorbeelden hoe je de Playr class kunt inzetten.

Minimaal
Je wilt gewoon één track laten afspelen.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.singleTrack = true;
myPlayer.loadTrack("music/myTrack.mp3");
myPlayer.play();

Minimaal
Je wilt een volledige playlist afspelen zonder interactie of weer te geven informatie.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.loadPlaylist("playlist.xml");

Maximaal

Je wilt een volwaardige music player maken, met alles erop en eraan.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.repeat = false;
myPlayer.volume = 100;
myPlayer.shuffle = true;
myPlayer.loadPlaylist("playlist.xml");
myPlayer.registerPlayButton(btnPlay);
myPlayer.registerStopButton(btnStop);
myPlayer.registerPauseButton(btnPause);
myPlayer.registerNextButton(btnNext);
myPlayer.registerPreviousButton(btnPrevious);
myPlayer.registerMuteButton(btnMute);
myPlayer.ID3SourceEnabled =true;
 
myPlayer.addEventListener(PlayrEvent.SONGINFO,infoHandler);
myPlayer.addEventListener(PlayrEvent.SONG_PROGRESS,songprogressHandler);
myPlayer.addEventListener(PlayrEvent.LOAD_PROGRESS,loadprogressHandler);
 
function songprogressHandler(e:PlayrEvent):void{
txtSongProgress.text = "Time elapsed: " +  myPlayer.trackProgress;
}
function loadprogressHandler(e:PlayrEvent):void{
txtLoadProgress.text = "Load progress: "; + e.loadprogress;
}
 
function infoHandler(e:PlayrEvent):void{
txtTrackInfo.text = myPlayer.artist + " - " + myPlayer.trackName;
if(myPlayer.album != ""){
txtTrackInfo.appendText(" ("+myPlayer.album+")");
}
txtTrackInfo.appendText(" | " + myPlayer.trackDuration);
}

Playlist.xml?

Hoe deze noemt maakt in feite niet echt veel uit, zolang de inhoud volgens deze structuur is.
Betekenis van de verschillende nodes:

• Artist: Naam van de artiest
• Title: Naam van het liedje
• TotalTime: Totale duur van het liedje in seconden
• Filename: bestandspad naar de af te spelen MP3 file. (absoluut of relatief).

Documentatie over Playr?

Deze is er en kun je hier vinden.

Download

Download de Playr class hier.

Feedback & Suggesties

Heb je vragen, of zijn er onduidelijkheden? Schiet maar raak, ik bijt niet!
Zijn er onvolmaaktheden, of heb je dat geniale extra dat deze klasse nog tekort heeft? Laat mij het weten, en ik zal er zeker naar kijken.
Gebruik je deze class en ben je er tevreden mee? Ik hoor het graag. Laat ook zien in welk(e) project(en) je de class inzet!

Veel plezier!

Ik release de Playr class en de PlayrEvent class onder de Creative Commons license. Dat wil zeggen dat je alles in deze classes mag aanpassen zolang je er een verwijzing naar de originele auteur ( ik dus ) in laat staan, en je deze classes met dezelfde rechten verder verdeeld.

Dat is goed nieuws voor de RIA developers onder ons. Want vanaf nu kunnen we dus echte applicaties maken met de kennis die we hebben vanuit onze webdevelopment ervaringen. En het kost niets! Cooler nog: het is crossplatform!

Wat is Adobe AIR?

Adobe Integrated Runtime is een runtime omgeving die het mogelijk maakt voor RIA developers om met hun gekende technologieën zoals Flash, Flex of HTML/Javascript interactieve applicaties te maken die rechtstreeks op je computer draaien, en toch meteen in contact staan met online applicaties zoals Twitter, eBay, Pownce, of MTV.

AIR biedt een rijke API voor bestaande developers die toegang geeft tot de verschillende mogelijkheden van de computer zoals bijvoorbeeld het bestandssysteem zodat je met een kleine AIR app makkelijk een bestand kunt openen, bewerken, opslaan, of zelfs uploaden. Zo zijn er talrijke mogelijkheden.

Waarom Adobe AIR?
Menig software developer zal hier natuurlijk scheef naar kijken, en zich afvragen: “Waarom zou ik Adobe AIR gebruiken als ik VB.net of C# heb?”

Het antwoord is simpel:

• AIR is flexibel!
  Wil je een applicatie schrijven die gebaseerd is op Flash, of op HTML en Javascript? Het maakt niet uit. AIR apps kunnen met beiden gebouwd worden.
• AIR laat jou kiezen!
  Ben jij altijd al fan geweest van de Flash IDE? Of gaat het ontwikkelen sneller in Flex Builder? Of ligt Flash jou niet zo, en ben je meer een HTML/Javascript developer in Dreamweaver? AIR beperkt jou workflow niet: Je kunt AIR apps ontwikkelen en releasen vanuit zowel Flash, Flex Builder, en Dreamweaver.
• AIR is vooruitstrevend!
  Tegenwoordig is het onmogelijk om ‘Windows-only’ of ‘Linux-only’ te denken. Met de hedendaagse ontwikkeling moet je gewoon met alle platformen rekening houden. Adobe AIR doet dat voor jou! Jij maakt gewoon jouw applicatie in de omgeving naar keuze, en compiled een ‘AIR’ file, die in de runtime van zowel Mac OSX als Windows alsook Linux*.
• AIR is free! (Klink best grappig, he? )
  Applicaties ontwerpen in AIR kost jou niets! Als je over Flash, Flex of Dreamweaver beschikt kun je gewoon aan de slag! Waar je voor Visual Studio veel geld moet betalen om applicaties te kunnen maken, moet je voor AIR gewoon een gratis update (voor Flash, Flex Builder, of Dreamweaver ) downloaden van de Adobe site. Je betaalt niets, en je kunt zooooveel meer en je moet er niets voor bijleren! Je huidige kennis en je huidige tools zijn alles wat je nodig hebt!

Ik herinner me Adobe Live van vorig jaar nog, waar Greg Rewis regelmatig op het podium stond te roepen: ‘Is that cool?!’.
Ik heb hier maar 1 antwoord voor: This is cool!

Update: Ward heeft me attent gemaakt op het feit dat er Express versies zijn van Visual Studio die gratis te verkrijgen zijn en het mogelijk maken om gratis software te ontwikkelen binnen het Microsoft .NET framework.

* De Adobe Integrated Runtime is op het moment van dit schrijven nog niet gereleased, maar Adobe belooft om hier zo snel mogelijk verandering in te brengen. In Adobe we trust

Na lang wachten heb ik vandaag eindelijk al mijn ditjes en datjes in mijn MusicPlayer class kunnen afwerken.

De player beschikt nu over de volgende properties:

• Autoplay
• Playlist laden (XML)
• De buttonacties instellen
• 2 progress events (Vooruitgang van inladen van de track, alsook de vooruitgang van de track zelf)
• Enkele track inladen
• Repeat
• ID3 ondersteuning

Wat nog op het programma staat:

• Shuffle
• Visualisatie module

Er zijn een aantal wijzigingen in de class gebeurd, waardoor je waarschijnlijk je code zult moeten aanpassen in je huidige projecten. Zo is de import regel iets gewijzigd, gezien de MusicPlayer class zijn eigen events nodig heeft (PlayerEvents). Ik heb de hiërarchie dan ook ietje gewijzigd zodat je geen meerdere imports moet uitvoeren.

De code ziet er voortaan zo uit:

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.repeat = true;
myPlayer.volume = 100;
myPlayer.loadPlaylist("playlist.xml");
myPlayer.registerPlayButton(btnPlay);
myPlayer.registerStopButton(btnStop);
myPlayer.registerPauseButton(btnPause);
myPlayer.registerNextButton(btnNext);
myPlayer.registerPreviousButton(btnPrevious);
myPlayer.registerMuteButton(btnMute);
myPlayer.ID3SourceEnabled =true;
 
myPlayer.addEventListener(PlayerEvent.SONGINFO,infoHandler);
myPlayer.addEventListener(PlayerEvent.SONG_PROGRESS,songprogressHandler);
myPlayer.addEventListener(PlayerEvent.LOAD_PROGRESS,loadprogressHandler);
 
function songprogressHandler(e:PlayerEvent):void{
txtSongProgress.text = "song progress: " + e.songprogress;
}
function loadprogressHandler(e:PlayerEvent):void{
txtLoadProgress.text = "load progress: " + e.loadprogress;
}
 
function infoHandler(e:PlayerEvent):void{
txtTrackInfo.text = myPlayer.artist;
txtTrackInfo.appendText(" - " + myPlayer.trackName);
txtTrackInfo.appendText(" (" +myPlayer.album+")");
txtTrackInfo.appendText(" | " + myPlayer.trackDuration);
}

In het bovenstaande voorbeeld is ook de ID3SourceEnabled gebruikt: deze boolean laat je kiezen of je de ID3tag van je MP3 bestanden wilt gebruiken als bron voor de artist, album en trackName eigenschappen. Als je deze waarde op true zet wordt de artist, album en title tag uit je XML bestand genegeerd, en kun je je XML bestand dus gewoon korter maken. Zet je dit op false wordt je XML bestand als bron van deze eigenschappen gebruikt. Dus als je ID3tags niet naar behoren zijn ingevuld is dit een secundaire oplossing.

Ook de XML heeft een kleine wijziging ondergaan: Er is een nieuwe tag bijgekomen (totalTime): de totale tijd (in seconden) die het betreffende liedje duurt. Dus in geval van een track van 3 minuten en 28 seconden komt dat op 208 (3*60+28) uit. Deze waarde moet handmatig ingegeven worden. Het kan ook via ID3tag maar is precies omslachtig… Als iemand de gouden tip heeft is dit welkom.

Download:

De huidige versie kun je hier downloaden.
Een voorbeeld hoe de XML er moet uitzien staat hier.
Een voorbeeld kun je hier downloaden.
De documentatie heb ik nog niet geupdate, maar dat komt er zo snel mogelijk aan.

Ik release de MusicPlayer class en de PlayerEvent class onder de Creative Commons license. Dat wil zeggen dat je alles in deze classes mag aanpassen zolang je er een verwijzing naar de originele auteur ( ik dus ) in laat staan, en je deze classes met dezelfde rechten verder verdeeld.

Ik heb zonet mijn eerste Actionscript 3 experiment afgewerkt.
Het resultaat is een musicplayer class die iedereen voor z’n eigen doeleinden mag gebruiken.
Voor mij was het een leuke en uitgebreide oefening, maar gezien ik niet meer verder zal werken aan de Actionscript 2 versie van de musicplayer lijkt dit me een mooi vervolg.

Wat Actionscript 3 zelf betreft: Ik ben er helemaal van onder de indruk. Even aanpassen, maar eens ik het door had was het erg makkelijk om over te schakelen.

Ik heb de class gebouwd met het oog op simpel bij gebruik. De uiteindelijke gebruiker van de class moet zo weinig mogelijk zelf doen. Dat is me ook gelukt.

Je kunt gebruik maken van een XML bestand om je playlist op te maken: Voorbeeld

Voorbeeld 1:
Erg minimaal gebruik van de class.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.loadPlaylist("playlist.xml");

Voorbeeld 2:
Gebruik van de buttonhandlers, repeat eigenschap, en volume door middel van de class.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.repeat = true;
myPlayer.volume = 100;
myPlayer.loadPlaylist("playlist.xml");
myPlayer.registerPlayButton(btnPlay);
myPlayer.registerStopButton(btnStop);
myPlayer.registerPauseButton(btnPause);
myPlayer.registerNextButton(btnNext);
myPlayer.registerPreviousButton(btnPrevious);
myPlayer.registerMuteButton(btnMute);

-Nieuwe versie hier te vinden-

Indien je vragen, opmerkingen, suggesties hebt: Aarzel niet om ze hier te stellen!
Ontdek je bugs, of zijn er onvolmaaktheden? Post ze hier!
Gelijk welke reden dan ook: laat me iets weten.

Indien je mijn class gebruikt, laat me iets weten zodat ik een idee heb of jullie er iets aan hebben!

Veel succes en plezier ermee