Events dispatchen en opzet

[bamisoep82]

Beste flashers,

ik ben bezig met het maken van een mp3 speler.
Deze laadt al, random, een mp3tje en opent daarbij het bijpassend album plaatje.

Nu heb ik een rij thumbs gemaakt die, als je er op klikt, een mp3tje laadt.
De grote plaatjes heb ik apart gemaakt en de thumbnails ook. De thumbs hoeven dus niet ge-scaled te worden wat ik bij een volgend project wel ga maken.
De thumbs worden ook al geplaatst in mijn hoofd classe. Ze zijn dus al te zien en ik kan ze ook al heen en weer tweenen. Allemaal leuk!

Maar nu heb ik dus even een vraag over de opzet van mijn thumbs. Ik laad plaatjes op via een loader. Nu lijkt het me handig dat ik deze in een movieclip plaats. Een soort van holder die vervolgens een eventlistener met zich mee krijgt zodat alle thumbs apart klikbaar zijn.
Dit is mijn thumbnail classe:

package {

import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.net.URLRequest
import flash.display.*;
import flash.events.MouseEvent;
import flash.events.Event;

public class Thumbnails extends MovieClip {

public function showThumbs(result:Array) {
for (var i:uint = 0; i < result.length; i++) {
//trace(result[i].image);
var ldr:Loader = new Loader();
var url:String = result[i].thumb;
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
ldr.x = 50;
ldr.y = 400;
ldr.x = i * 60;
addChild(ldr);
}

var holder:MovieClip = new MovieClip();
holder.addChild(ldr);
holder.addEventListener(MouseEvent.CLICK, onClick);
}

public function onClick(e:MouseEvent):void {
trace("hier wordt dan denk ik een event ge-dispatched!!");
}
}
}

De trace die ik uitvoer wordt niet getraced.

Nu weet ik niet of ik dit goed heb opgebouwd.
Wellicht zit hier iemand die mij kan helpen met een goede structuur.

Thnx alvast!

[Mr. Black]

public function showThumbs(result:Array) {
for (var i:uint = 0; i < result.length; i++) {
//trace(result[i].image);
var ldr:Loader = new Loader();
var url:String = result[i].thumb;
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
ldr.x = 50;
ldr.y = 400;
ldr.x = i * 60;
addChild(ldr);
}

var holder:MovieClip = new MovieClip();
holder.addChild(ldr);
holder.addEventListener(MouseEvent.CLICK, onClick);
}

Toch raar dat je hierbij geen Errors krijgt. Je wilt ldr gebruiken buiten de forloop, tewijl deze alleen maar binnen de loop beschikbaar is. Verder moet je de listener gewoon aan de Loader hangen, niet aan een MovieClip ofzo! Alle loaders staan immers al in een Thumbnails class - dat is al een holder.
Correcte code zou zijn:

function showThumbs( result:Array ):void
{
for ( var i:uint = 0; i < result.length; i++ )
{
var url:String = result[ i ].thumb;
var request:URLRequest = new URLRequest( url );

var loader:Loader = new Loader();
loader.load( request );

loader.x = i * 60;
loader.y = 400;

loader.addEventListener( MouseEvent.CLICK, onClick );

this.addChild( loader );
}
}
function onClick( event:Event ):void
{
trace( "clicked" );
}

Over dat Event dispatchen: dat ligt eraan wat je wilt. Wat moet er gebeuren als je op een foto klikt?

Succes nog! :)

[bamisoep82]

ow dank je man!
Ik ga vanavond even kijken of het gaat lukken.
Als het me lukt dan laat ik je het weten...

Als me dit lukt dan ga ik even kijken hoe we het dispatchen gaan aanpakken. Volgens mij is het ook niet zo moeilijk maar moet ik gewoon even door hebben hoe het werkt.

Groet,
Ruben

en tot vanavond :D

[bamisoep82]

Hey mr. Black.

Gek genoeg heb ik jouw manier al eens gebruikt en het werkt nog niet goed.

Jouw manier is inderdaad erg duidelijk en hij zou het ook moeten doen.
Moet ik in mijn hoofdclasse nog een argument mee geven van de eventlistener?!
Hij traced namelijk niks.

Groet,
Ruben

[bamisoep82]

Mijn excuses.

Hij werkt wel :D
Het lag aan mijn geluids classe. Die had ik even uit gedaan. En hij traced dus wel degelijk.
Nu wil ik dus iets dispatchen!

Als ik mijn applicatie open dan hoor je gelijk een mp3tje en zie je het bijpassende grote plaatje/album-plaatje.
Als ik nu dus op een thumbnail klik wil ik dat ie een mp3 gaat afspelen. En natuurlijk het mp3tje dat bij dat thumbnailtje past.

In mijn sound classe zet ik dit om een random nummer te genereren:
private static var _number:uint = Math.floor(Math.random() * (6 - 0)) + 0;
En ik gebruik een zelfde for loop als mijn thumbs alleen dan voor et ophalen van de url van mijn mp3.
var SONG_URL:String = result[_number].url;

Hoe kan ik nou een thumbnailtje zo dispatchen dat ie zijn nummer afspeeelt?

[Mr. Black]

Hmm, de opbouw van je project is mij niet geheel duidelijk, maar hij lijkt me niet ideaal. Zo wordt data doorgeven wel erg moeilijk.

Zeg maar als ik me er teveel mee ga bemoeien, maar dit zou een mooie Main class zijn:

package
{
import flash.display.MovieClip;

public class Main extends MovieClip
{
private var player : SoundPlayer;
private var imageHolder : ImageHolder;
private var thumbHolder : ThumbnailHolder;

private var currentIndex : int;

public function Main()
{
currentIndex = Math.floor( Math.random() * ( 6 - 0 ) );

player = new SoundPlayer( "songs.xml" );
player.playSong( currentIndex );

imageHolder = new ImageHolder( "pictures.xml" );
imageHolder.showImage( currentIndex );

thumbHolder = new ThumbnailHolder( "thumbnails.xml" );
thumbHolder.addEventListener( ThumbnailEvent.SELECT, thumbnailSelectHandler );

this.addChild( imageHolder );
this.addChild( thumbHolder );
}

private function thumbnailSelectHandler( event:ThumbnailEvent ):void
{
currentIndex = int( event.currentSelection );

player.playSong( currentIndex );
imageHolder.showImage( currentIndex );
}
}
}


De SoundPlayer class laadt het XML-bestand (of waar jij je data dan ook vandaan haalt) in, en met de functie playSong( index ) kan je een liedje af laten spelen.
De ImageHolder class is de class waar je de grote plaatjes neerzet. Ik weet niet hoe je dat nu doet (gewoon in de Main class laden?), maar een class daarvoor maken is wel zo netjes. Deze laadt ook eerst weer een lijst(je) met alle foto's in, en daarna kan je met een functie er eentje laten zien.
De ThumbnailHolder ('Thumbnails' als naam van een class is niet zo'n ideale) laadt óók eerst een lijst(je) in en laat daarna automatisch alle foto's zien. Dit soort dingen in de constructor doen is een stuk netter dan een aparte functie die je toch aan gaat spreken.

Nu is data doorgeven een fluitje van een cent. Op het moment dat jij in de ThumbnailHolder class een klik bespeurt, gebruik jij een zelfgemaakt Event (ThumbnailEvent) - en dat dispatch jij. Je geeft hieraan een variabele currentSelection mee (of een andere naam die voor jou duidelijk is). In de Main class luister je naar dit Event en als je hem hoort gebruik je currentSelection om een ander liedje af te laten spelen en een ander plaatje in te laden. Zoek maar eens op 'actionscript 3 custom event' en je vindt zat voorbeeldjes.

Als je dit helemaal niets vindt of als je al te ver bent met je project om dit in te bouwen, geen punt, maar het zal wel wat lastiger worden. Maar ook dan moet de communicatie via een custom Event lopen.

Succes nog, en laat maar horen hoe het gaat! :)

[bamisoep82]

Hey Black,

bedankt alweer!!!!

Je code ziet er echt een stuk schoner uit ja.
Ik heb echt nog te weinig ervaring en ga proberen jouw stuk code te gebruiken voor mijn applicatie.

Het principe snap ik nu!

Ik ga nu even kijken of ik hem kan veranderen op de manier die jij hebt gestuurd.

Tot straks!!!!!