ActionScript 3 website (met een beetje PHP)

[JumperJack]

Hallo,

Ik ben voor een eigen project bezig om een website te bouwen in Actionscript 3, welke voor de kerstvakantie in de lucht moet zijn. Nu wist ik voorheen echt helemaal niets af van welke programmeertaal dan ook, dus ben ik anderhalve week geleden haastig begonnen om Actionscript te leren. Heel veel uurtjes later (nu dus) ben ik goed op weg wat begrip te ontwikkelen, al zijn er nog steeds veel vraagtekens.

Nu ben ik een website aan het bouwen met een image-gallery. De gallery zelf heb ik met behulp van tutorials en ander hulp weten te maken, maar om het geheel te krijgen zoals ik het wil zijn er nog wel wat aanpassingen nodig. Hier schiet mijn tot nu toe opgedane kennis flink te kort, en met de snel naderende deadline begint t wat heet onder de voeten te worden. Daarom hoopte ik dat hier iemand mij zou kunnen helpen dit te begrijpen en ontwikkelen. Ik vraag dus niet iemand om dit voor mij te maken, want ik zou dit juist zelf graag willen snappen.

De code van de image gallery is als volgt:

Java: deel 1

import flash.events.*;
import flash.display.*;
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

//background with border

background2.x = (stage.stageWidth/2)-400;
background2.y = -25;
background2.width = 825;
background2.height = 825;

stage.addEventListener(Event.RESIZE,resizeBackground2);

function resizeBackground2(e4:Event):void
{
    background2.x = (stage.stageWidth/2)-400;
    background2.y = -25;
    background2.width = 825;
    background2.height = 825;
}

//image gallery

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_tempnr_width:Number;
var my_tempnr_height:Number;
var my_images:XMLList;
var my_total:Number;

var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var full_mc:MovieClip;

var x_counter:Number = 0;
var y_counter:Number = 0;

var my_tweens:Array = [];
var container_mc_tween:Tween;
var full_tween:Tween;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void
{
    var myXML:XML = new XML(e.target.data);

    columns = myXML. @ COLUMNS;
    my_x = myXML. @ XPOSITION;
    my_y = myXML. @ YPOSITION;
    my_tempnr_width = myXML. @ WIDTH;
    my_tempnr_height = myXML. @ HEIGHT;
    my_images = myXML.IMAGE;
    my_total = my_images.length();

    createContainer();
    callTempnr();

    myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
    myXMLLoader = null;
}

function createContainer():void
{
    container_mc = new MovieClip();
    container_mc.x = (stage.stageWidth/2)-330;
    container_mc.y = my_y;
    addChild(container_mc);

    container_mc.addEventListener(MouseEvent.CLICK, callFull2);
    container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
    container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
    container_mc.buttonMode = true;

    preloaders_mc = new MovieClip();
    preloaders_mc.x = container_mc.x;
    preloaders_mc.y = container_mc.y;
    addChild(preloaders_mc);
}

function callTempnr():void
{
    for (var i:Number = 0; i < my_total; i++)
    {
        var tempnr_url = my_images[i]. @ TEMPNR;
        var tempnr_loader = new Loader();
        tempnr_loader.load(new URLRequest(tempnr_url));
        tempnr_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, tempnrLoaded);

        tempnr_loader.name = i;

        tempnr_loader.x = (my_tempnr_width + 5) * x_counter;
        tempnr_loader.y = (my_tempnr_height + 5) * y_counter;

        if (x_counter+1 < columns)
        {
            x_counter++;
        }
        else
        {
            x_counter = 0;
            y_counter++;
        }

        var preloader_pb:ProgressBar = new ProgressBar();
        preloader_pb.source = tempnr_loader.contentLoaderInfo;
        preloader_pb.x = tempnr_loader.x;
        preloader_pb.y = tempnr_loader.y;
        preloader_pb.width = my_tempnr_width;
        preloader_pb.height = my_tempnr_height;
        preloaders_mc.addChild(preloader_pb);

        preloader_pb.addEventListener(Event.COMPLETE, donePb);
    }
}

function tempnrLoaded(e:Event):void
{
    var my_tempnr:Loader = Loader(e.target.loader);
    container_mc.addChild(my_tempnr);
    my_tweens[Number(my_tempnr.name)] = new Tween(my_tempnr,"alpha",Strong.easeIn,0,1,0.5,true);

    my_tempnr.contentLoaderInfo.removeEventListener(Event.COMPLETE, tempnrLoaded);
}

function donePb(e:Event):void
{
    var my_pb:ProgressBar = ProgressBar(e.target);
    preloaders_mc.removeChild(my_pb);
    my_pb.removeEventListener(Event.COMPLETE, donePb);
}

function onOver(e:MouseEvent):void
{
    var my_tempnr:Loader = Loader(e.target);
    new Tween(my_tempnr,"alpha",Strong.easeOut,1,0.5,0.5,true);
}

function onOut(e:MouseEvent):void
{
    var my_tempnr:Loader = Loader(e.target);
    new Tween(my_tempnr,"alpha",Strong.easeOut,0.5,1,0.5,true);
}

stage.addEventListener(Event.RESIZE,resizeTempnr);

function resizeTempnr(r1:Event):void
{
    container_mc.x = (stage.stageWidth/2)-330;
}

Nu heb ik al een werkende code weten te krijgen met behulp van een tutorial, om - als je op één van deze thumbnails uit de image gallery klikt - een grote versie te laten verschijnen, die zelf als button werkt om weer terug te keren naar de gallery. Ik heb hiervoor gebruik gemaakt van XML (een stuk hieruit):

XML:

<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="7" XPOSITION="70" YPOSITION="70" WIDTH="90" HEIGHT="90">
<IMAGE FULL="full_images/image01.jpg" THUMB="thumbs/thumb01.jpg" TEMPNR="tempnumbers/tempnumber01.jpg" PASS="pass01"/>
<IMAGE FULL="full_images/image02.jpg" THUMB="thumbs/thumb02.jpg" TEMPNR="tempnumbers/tempnumber02.jpg" PASS="pass02"/>
<IMAGE FULL="full_images/image03.jpg" THUMB="thumbs/thumb03.jpg" TEMPNR="tempnumbers/tempnumber03.jpg" PASS="pass03"/>
</GALLERY>

Maar het probleem waar ik nu mee zit, is dat ik in plaats van een grotere versie te laten verschijnen, ik gewoon een grijs vlak wil laten verschijnen (gelukt, "background3"). Hierop staat weer de thumbnail waar net op geklikt is. Nu, als ik op deze backgroud3 klik om weer terug te gaan naar de gallery, gaat het grijze vlak gewoon weg, maar de thumbnail blijft gek genoeg staan.

De code van het grijze vlak met de thumbnail:

Java: deel 2

var background3:MovieClip = new MovieClip();

function callFull2(e:MouseEvent):void
{
    var full_loader2:Loader = new Loader();
    var full_url2 = my_images[e.target.name]. @ TEMPNR;
    full_loader2.load(new URLRequest(full_url2));
    full_loader2.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded2);
    
    container_mc.removeEventListener(MouseEvent.CLICK, callFull2);
    container_mc.buttonMode = false;
    container_mc.removeEventListener(MouseEvent.MOUSE_OVER, onOver);
    container_mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut);
    container_mc_tween = new Tween(container_mc,"alpha",Strong.easeIn,1,0.2,0.5,true);

}

function fullLoaded2(e:Event):void
{
    addChild(background3);
    background3.graphics.beginFill(0xCCCCCC);
    background3.graphics.drawRect((stage.stageWidth/2)-200,(stage.stageHeight/2)-200,400,400);
    background3.graphics.endFill();
    
    background3.buttonMode = true;
    full_tween = new Tween(background3,"alpha",Strong.easeIn,0,1,0.5,true);
    background3.addEventListener(MouseEvent.CLICK,removeFull2);
    
    var my_loader2:Loader = Loader(e.target.loader);
    addChild(my_loader2);
    full_tween = new Tween(my_loader2,"alpha",Strong.easeIn,0,1,0.5,true);
    my_loader2.x = (stage.stageWidth/2)-45;
    my_loader2.y = (stage.stageHeight/2)-95;
    my_loader2.addEventListener(MouseEvent.CLICK,removeFull2);

    my_loader2.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded2);
}

function removeFull2(e:MouseEvent):void
{
    full_tween = new Tween(background3,"alpha",Strong.easeOut,1,0,0.5,true);
    full_tween.addEventListener(TweenEvent.MOTION_FINISH,tweenFinished2);
    
    var my_loader2:Loader = Loader(e.currentTarget);
    full_tween = new Tween(my_loader2,"alpha",Strong.easeOut,1,0,0.5,true);
    full_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished2);

    container_mc_tween = new Tween(container_mc,"alpha",Strong.easeOut,0.2,1,0.5,true);
}

function tweenFinished2(e:TweenEvent):void
{
    removeChild(background3);
    
    var my_loader2:Loader = Loader(e.target.obj);
    my_loader2.unload();
    full_mc.removeChild(my_loader2);
    removeChild(full_mc);
    full_mc = null;

    container_mc.addEventListener(MouseEvent.CLICK, callFull2);
    container_mc.buttonMode = true;
    container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
    container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);

    var my_tween:Tween = Tween(e.target);
    my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished2);
}

Het gedeelte van de thumbnail heb ik niet helemaal zelf geschreven, maar uit een tutorial gehaald en aangepast. Daarom dat ik dit gedeelte ook nog niet volledig snap. Ik hoop dat iemand mij dit zou kunnen uitleggen, en de fout er uit halen. De debugger geeft aan dat er op onderandere regel 274 en 285 iets staat wat niet klopt.

Ten slotte zit ik, als dit werkt, ook met een nieuw probleem. Dus als dit opgelost is, zou ik graag dit topic willen gebruiken voor mijn tweede vraag (daar komt het beetje PHP bij kijken), als dat kan.

Alvast bedankt!

PS: Het spijt me als ik teveel overbodige code heb geplaatst, maar ik wist niet zeker wat belangrijk was...

[ Voor 3% gewijzigd door JumperJack op 05-12-2011 10:08 ]

[MueR]

Helaas, dit valt onder de noemer scriptrequest. Die staan we in de Devschuur niet toe. Indien je met een specifiek probleem zit, open een nieuw topic met daarin enkel relevante code (less is more), wat je geprobeerd hebt en wat er nu allemaal fout gaat. Lees ook onze Quickstart eens door.