Simpele image gallery XML/as3.0?

[pollack]

Dag beste mensen,

Ik wil een hele simpele image 'gallery' maken in flash, als je naar rechts drukt volgende foto, en als je naar links drukt vorige.foto's moeten extern geladen worden. Ik heb dit geprobeerd alleen met AS3.0 te doen, dit is helaas niet gelukt. En de tijd begint te dringen.

Nu lijkt het me toch handig dat de fotos met behulp van XML geladen worden. Nu heb ik daar 0,0 ervaring in, en ik heb nog geen tutorials gevonden die me echt de basis hiervan uitleggen. Ik hoop dat iemand me hierbij kan helpen....

[edo]

Heb even snel enkele tutorials (http://www.tutoriallounge.com/2009/08/15-stunning-adobe-flash-xml-slideshow-tutorials/) voor je geZnout (http://be.znout.org/nl/). Dit had je even goed zelf kunnen doen!
Maar graag gedaan hoor!

[pollack]

Dank je Edo,

dit zijn AS2.0 tutorials, of templates met een hoop extra, maar
ik ben juist op zoek naar een tutorial of ene persoon, die de basis
helder uitlegd...(as3.0)

Als ik het 'zelf had kunnen doen' dan had ik de vraag niet gesteld,
bedankt....

[edo]

Er zijn echt een heleboel tutorials en source code te vinden op het internet, kwestie van even te googlen (znouten is milieu vriendelijker) tot je iets vind dat aan jou noden voldoet.
Als je echt geen tutorial vind die je "aankan":
zoek dan eerst een tutorial over AS3 en XML, dan één over AS3 en het inladen van beelden, ... en probeer dan een "photo gallery tutorial".

Ik heb dit geprobeerd alleen met AS3.0 te doen, dit is helaas niet gelukt.

Heb je al wat code?
Als je ergens vast loopt post dan je code, dan help ik je graag verder.

Hier enkele tutorials om mee te beginnen:

AS3 Loader Class (http://www.republicofcode.com/tutorials/flash/as3loader/)
AS3 XML (http://www.republicofcode.com/tutorials/flash/as3xml/)
AS3 XML image gallery (http://www.tutorialhero.com/click-41712-a_flash_gallery_with_xml_and_actionscript_3.php)

Hoop dat je er iets aan hebt!

[pollack]

Thnx Edo,
dit is de AS.
Nu laadt hij pres/pres1, dat werkt gewoon,
ik pas dan fotoNummer aan, dat werkt ook,
maar alleen bij het laden, het lukt me niet om de url
urlrequest tijdens runtime te veranderen zeg maar.

var fotoNummer:Number = 1;
var fotoNaam: string = ("gallery/pres"+fotoNummer+".jpg")
var loadGallery3:Loader = new Loader();
var gallery3Trans:Number = 0;
var urlGallery3:URLRequest = new URLRequest(fotoNaam);
loadGallery3.load(urlGallery3);
addChild(loadGallery3);

weet jij misschien een manier?

[edo]

pollack,
Ik begrijp niet echt wat je bedoelt met:
het lukt me niet om de url
urlrequest tijdens runtime te veranderen zeg maar.
Wil je nu met een .xml bestand werken of zonder?

Misschien ben je op zoek naar een for loop?
voorbeeld:

var aantalFotos:int = 5; //Je aantal foto's
// de for loop begint bij 1, zodat de eerste foto die geladen wordt
// pres1 is en de tweede pres2 in plaats van pres0, pres1, ...
for (var i:int = 1; i <= aantalFotos; i++){
var fotoNaam:String = "gallery/pres"+i+".jpg";
var loadGallery3:Loader = new Loader();
var gallery3Trans:Number = 0; // wat doet dit?
loadGallery3.load(new URLRequest(fotoNaam));
addChild(loadGallery3);
}
Nu worden er 5 foto's(pres1, pres2, pres3, pres4 en pres5) ingeladen en aan de display list toegevoegd.

Als je je vraag wat beter formuleert kan ik misschien beter helpen.
Succes!

[pollack]

Sorry het was een beetje onduidelijk :)...

Als ik verder kan op dit stukje as3.0 dan het liefst zonder XML, maargoed.

Als ik fotoNummer trace, en ik druk op de 'volgende' knop, dan gaat de waarde van fotoNummer + 1, druk ik op 'vorige' gaat de waarde van fotoNummer -1. Maar er wordt geen andere foto geladen omdat er neit continu de waarde van url request wordt gechecked, en eerlijk gezegd weet ik ook niet of dit 'the way to go' is..... :)


De galleryTrans is een manier voor in en uitfaden, ik zet dan in een ENTER_FRAME event dit:

gallery.alpha -=(gallery.alpha - galleryTrans)/6;

als galleryTrans = 1; fade in
als galleryTrans = 0; fade out

:)




Die for loopt laadt idd de fotos, heel mooi, ik heb op de root. een knop volgende en vorige....
wat is nu de beste manier om door de foto's te 'bladeren'?
:)

[edo]

pollack,

Ik raad je aan met XML te werken, heeft zo zijn voordelen:
je moet niet aan je flash bestand sleutelen telkens je een foto wilt toevoegen/verwijderen, je kan eenvoudig tekst bij de foto's zetten, ...
En het is echt niet zo moeilijk.

Een 'enter frame' gebruiken om alpha te 'Tweenen' is misschien niet zo efficiënt? Je zou hiervoor een 'Tween engine (http://www.google.com/cse?cx=partner-pub-5089391050563016%3Az9x7aejx698&ie=UTF-8&q=Tween%20engine%20as3&sa=Search)' kunnen gebruiken.

De 'beste' manier (als die al bestaat) om dit te doen ken ik niet. Je kan dit op verschillende manieren aanpakken.
Wat is er mis met deze tutorial (http://www.tutorialhero.com/click-41712-a_flash_gallery_with_xml_and_actionscript_3.php) ? Je kan hem ook zo aanpassen dat er geen xml wordt gebruikt.

[rangelier]

Hey,

Als je toch via xml wil werken dan zou je dat op deze manier kunnen doen:

//XML Bestand opmaak


<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<image>foto1.jpg</image>
</gallery>


//XML inladen

var xml:XML;
var req:URLRequest = new URLRequest("fotos.xml");
var urlldr:URLLoader = new URLLoader()
urlldr.addEventListener(Event.COMPLETE, done);
urlldr.load(req);

function done(e:Event):void
{
xml = new XML(e.target.data);
trace(xml.image[0]);// hij geeft dan in je output scherm de url weer van je eerste image.
}



dit is even heel basic uitgelegd hoe je te werk kan gaan. In jou geval zul je de volgende dingen willen weten:

1. hoeveel images heb ik in mijn xml (door je xml loopen).
2. Je wilt de huidige image weten zodat je vanuit daar 1 url hoger kan aanroepen of juist 1 lager.

Succes ik hoop dat je hier wat aan hebt!

gr.

Rob

[pollack]

thnx rob helder, dankje

[rangelier]

hey,

het mooiste is om je afbeelding ook alvast te preloaden, dat ziet er gewoon wat mooier uit, een simpel voorbeeld hiervan heb ik voor je gemaakt:


var xml:XML;
var ldr:Loader;
var req:URLRequest = new URLRequest("fotos.xml");
var urlldr:URLLoader = new URLLoader()
urlldr.addEventListener(Event.COMPLETE, done);
urlldr.load(req);

function done(e:Event):void
{
xml = new XML(e.target.data);

// loader object aanmaken voor je afbeelding en listeners eraan hangen
ldr = new Loader();
ldr.contentLoaderInfo.addEventListener(ProgressEve nt.PROGRESS, loading);
ldr.contentLoaderInfo.addEventListener(Event.COMPL ETE, imgDone);
ldr.load(new URLRequest(xml.image[0])); //Hij laad nu de eerste afbeelding uit je xml.
}

//Preloader functie, in dit geval geeft hij heel basis het aantal procenten dat geladen is weer. Deze zou je in een textfield kunnen weergeven.
function loading(e:ProgressEvent):void
{
var perc:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
trace(perc + "%" + " " + "Loaded");
}

//Wanneer hij volledig is geladen de loader toevoegen aan de displaylist.
function imgDone(e:Event):void
{
addChild(ldr);
}

[pollack]

Inderdaad, bedankt....

Als ik nu 'omhoog' en 'omlaag' wil door de URL's, moet ik dan de url request telkens veranderen? zo ja hoe het beste? dat is waar ik nog mee zit het bladerne van de afbeeldingen als het ware..

[rangelier]

hey,

1. Maak een variable aan met de naam "current".
2. Maak 2 functies aan, één voor omhoog en één voor omlaag, in deze functie controleer je eerst op welke image op dat moment weergegeven wordt, voldoet hij niet dan moet hij de current telkens met 1 ophogen. Ditzelfde doe je voor de omlaag functie.

Hoop dat het zo duidelijk is voor je, kan je zelf ook beetje proberen.

gr.

[pollack]

Idd, thnx.....

zo is het nu, maar ik heb nu wel ene probleem dat alle plaatjes over elkaar heen worden geladen, ik heb het met een unload geprobeerd maar is nog niet gelukt, ideëen misschien?



var aantalFotos:int = 5;
var currentImg:Number = 0;

function displayImage():void{

for (var i:int = 1; i <= aantalFotos; i++){


var fotoNaam:String = "image"+i+".png";

var loadGallery:Loader = new Loader();

loadGallery.load(new URLRequest(fotoNaam));

if(currentImg==i){

trace(fotoNaam);

addChild(loadGallery);
break;

}
}

}

buttonNext.addEventListener(MouseEvent.MOUSE_UP, nextImg);
buttonPrevious.addEventListener(MouseEvent.MOUSE_U P, prevImg);

function nextImg(e:MouseEvent):void{


currentImg = currentImg + 1;
displayImage();

}
function prevImg(e:MouseEvent):void{

currentImg = currentImg - 1;
displayImage();

}

(dit is hem zonder XML)

[edo]

var aantalFotos:int = 4;
var currentImg:int = 1;
var lastImg:int;
var beelden:Array = new Array;
var eersteFoto:Boolean = true;

buttonNext.addEventListener(MouseEvent.MOUSE_UP, nextImg);
buttonPrevious.addEventListener(MouseEvent.MOUSE_U P, prevImg);
displayImage();

function displayImage():void{
//Controleer of foto al eens geladen is en dus in de beelde array zit...
//Als hij nog niet geladen is laad hem dan in
if (!beelden[currentImg]) {
var fotoNaam:String = "image"+currentImg+".png";
var loadGallery:Loader = new Loader();
loadGallery.load(new URLRequest(fotoNaam));
addChild(loadGallery);
beelden[currentImg] = loadGallery;
trace('nog niet geladen');
}
//Als hij al ens geladen is toon hem dan.
else {
addChild(beelden[currentImg]);
trace('reeds geladen');
}
//Als dit niet de eerste foto is, verwijder dan de vorige.
if (!eersteFoto) {
removeChild(beelden[lastImg]);
trace('niet eerste foto');
}
//Als het wel de eerste is zet de de eersteFoto gelijk aan false
else {
eersteFoto = false;
trace('eerste foto');
}
//lastFoto gelijk aan huidige foto
lastImg = currentImg;
trace('huidige foto :' + currentImg);
trace('---------------------------------');

}

function nextImg(e:MouseEvent):void{
trace('volgende');
// currentImg niet gelijk aan de laatste
if (currentImg != aantalFotos)
currentImg++;
// anders terug naar eerste foto
else
currentImg = 1;
displayImage();
}
function prevImg(e:MouseEvent):void{
trace('vorige');
// currentImg niet gelijk aan eerste
if (currentImg != 1)
currentImg--;
// anders terug naar laatste
else
currentImg = aantalFotos;
displayImage();
}Hier is een zéér eenvoudig voorbeeldje zonder XML.

[pollack]

Bedankt :),

ik heb er inmiddels aardig wat van opgestoken....
ik heb nog 1 probleempje :$, de fotos vullen het hele scherm,
nu lukt het me niet om de buttonNext en buttonPrevious boven de
afbeeldingen te krijgen, ik voeg ze later aan de stage toe dan loadGallery
en in het begin gaat dat goed, maar als de plaatjes eenmaal doorgebladerd zijn springt de loader weer boven op....

suggesties ?:)

[edo]

verander deze regels in deze
addChild(loadGallery);
addChild(beelden[currentImg]);
in dit
addChildAt(loadGallery, 0);
addChildAt(beelden[currentImg], 0);
Succes

[pollack]

Had ik inderdaad ook geprobeerd, krijg helaas deze:


TypeError: Error #2007: Parameter child must be non-null.