Učitavanje slike sa eksterne lokacije dok se učitani frejmovi puštaju

[ deZio @ 16.07.2011. 10:37 ] @

Izvinjavam se ako je bilo slično pitanje, ali nisam uspeo da nađem.

Problem je u tome što treba da odradim jedan Flash slider na taj način što će se slike učitavati iz eksternog foldera. E sad sa UILoaderom sam u 1. Frameu učitao sliku koju bih trebao animirano da pomeram po X osi, i dok se ta animacija odvija, da se u tom trenutku učitava slika u sledeći UILoader. I znači kad se završi animacija prvog UIL, da krene drugi UIL sa istom animacijom ali sa drugom učitanom slikom, a da se u tom trenutku učitava treća slika u prvi UIL, pa onda 4. slika u drugi UIL, 5. slika u prvi UIL itd. Nadam se da vam je jasno šta želim. Da li je to moguće? I kako bih mogao odraditi animaciju prvog UILoadera po X osi(svaki frejm da se pozicija X poveća za 10px). To znam kada je simbol u pitanju preko Tween Motiona, međutim to ne funkcioniše u slučaju UILoadera, pa kontam da treba taj motion da radim preko AS3, a tu sam jako tanak..

Svaka pomoć i savet (možda kako bih to mogao drugačije rešiti) je dobrodošao..

[ StarCraft @ 16.07.2011. 12:44 ] @

Ti zapravo samo hoćeš da animiraš sve a da ne kodiraš ništa? Pazi, za to postoji više rešenja:

- ili da se mi ovde ubijemo od priče i objašnjavanja, gde bi i ti morao da nam okačiš svoje radne fajlove
- ili da pokušaš da nađeš na netu neku gotovu komponentu koja sve to već radi što ti hoćeš (XML galerije)
- ili da skineš neke AS3 tutoriale pa da kreneš polako...

u svakom slučaju bi bilo korisno da nam napišeš koji su tvoji skillovi što se tiče fleša i koliko vremena imaš za ovaj projekat.
Ako hoćeš za početak možeš odma da nam okačiš neki tvoj FLA pa da vidimo iz prve ruke.

[ MenOfHonor @ 16.07.2011. 13:24 ] @

Citat:

deZio: I kako bih mogao odraditi animaciju prvog UILoadera po X osi(svaki frejm da se pozicija X poveća za 10px). To znam kada je simbol u pitanju preko Tween Motiona, međutim to ne funkcioniše u slučaju UILoadera, pa kontam da treba taj motion da radim preko AS3, a tu sam jako tanak..

Ovo možeš odraditi na sledeći način:

Code:
import flash.events.Event;
uiLoader.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
function pomeranjeLoadera(event:Event):void
{
uiLoader.x += 10;
}

U tom slučaju bi morao i da proveravaš da li je uiLodaer došao do kraja stage-a pa ako jeste da ga vratiš na početak:

Code:
if(uiLoader.x >= stage.stageWidth)
    {
        uiLoader.x = 0;
    }

Da rezimiramo: da bi se uiLoader pomerao za po 10 piksela po X osi i da bi se vratio na početak jednom kada dođe do kraja stage-a trebao bi da uneseš sledeće:

Code:
import flash.events.Event;

uiLoader.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
function pomeranjeLoadera(event:Event):void
{
    uiLoader.x +=  10;
    if (uiLoader.x >= stage.stageWidth)
    {
        uiLoader.x = 0;
    }
}

[ deZio @ 22.07.2011. 00:59 ] @

Citat:

StarCraft: Ti zapravo samo hoćeš da animiraš sve a da ne kodiraš ništa? Pazi, za to postoji više rešenja:

- ili da se mi ovde ubijemo od priče i objašnjavanja, gde bi i ti morao da nam okačiš svoje radne fajlove
- ili da pokušaš da nađeš na netu neku gotovu komponentu koja sve to već radi što ti hoćeš (XML galerije)
- ili da skineš neke AS3 tutoriale pa da kreneš polako...

u svakom slučaju bi bilo korisno da nam napišeš koji su tvoji skillovi što se tiče fleša i koliko vremena imaš za ovaj projekat.
Ako hoćeš za početak možeš odma da nam okačiš neki tvoj FLA pa da vidimo iz prve ruke.

Ne, ja sam samo konstatovao da ne funkcioniše animiranje(bez AS) kada je UILoader u pitanju, odnosno ja kao početnik vidim da ne funkcioniše kao npr. Movie Clip.
Dakle nije problem u mojoj želji, ja želim da to odradim preko AS ako već ne može klasičnim putem, ali mi je trebao samo uput kako to započeti u AS.

Citat:

MenOfHonor: Ovo možeš odraditi na sledeći način:

Code:
import flash.events.Event;
uiLoader.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
function pomeranjeLoadera(event:Event):void
{
uiLoader.x += 10;
}

U tom slučaju bi morao i da proveravaš da li je uiLodaer došao do kraja stage-a pa ako jeste da ga vratiš na početak:

Code:
if(uiLoader.x >= stage.stageWidth)
{
uiLoader.x = 0;
}

Da rezimiramo: da bi se uiLoader pomerao za po 10 piksela po X osi i da bi se vratio na početak jednom kada dođe do kraja stage-a trebao bi da uneseš sledeće:

Code:
import flash.events.Event;

uiLoader.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
function pomeranjeLoadera(event:Event):void
{
uiLoader.x += 10;
if (uiLoader.x >= stage.stageWidth)
{
uiLoader.x = 0;
}
}

Hvala puno MenOfHonor, upravo mi je ovakav post trebao, kako bih skontao suštinu po kojoj treba da se radi..

Dakle, na kraju sam napravio 2 sloja, i oba sadrže samo 1 Frame. U prvom sloju su elementi(UIL i tekst) a u drugom sloju je AS.

Evo i konačnog izgleda AS na osnovu tvog uputa, bez koga bih se i dalje vrtio u krug kako početi..:)

Code:
import flash.events.Event;
import flashx.textLayout.formats.Float;

var alphavrednost:Number = 0;
var trenutniIdSlike:int = 0;
var ukupniBrSlika:int = 0;
var xmlArray:Array = new Array();
var sirinaSlike:int = UILoader1.width;
//var bojaTrake:ColorTransform = traka.transform.colorTransform;
var myXML:XML;
var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("data.php"));
myLoader.addEventListener(Event.COMPLETE, processXML);
UILoader1.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
UILoader1.addEventListener(MouseEvent.CLICK, myClick);

function myClick(eventObject:MouseEvent)
   {
      navigateToURL( new URLRequest(xmlArray[trenutniIdSlike][2]), "_self");
   }

// >>> FUNKCIJA ZA UCITAVANJE XML PODATAKA
function processXML(e:Event):void
   {
      myXML = new XML(e.target.data);
     ukupniBrSlika = myXML.slika.length();
     for (var i:int = 0; i < ukupniBrSlika; i++)
       {
           xmlArray[i] = new Array(myXML.slika[i].urlslike, myXML.slika[i].naslov, myXML.slika[i].linkurl);
       }
     UILoader1.source = xmlArray[trenutniIdSlike][0];
     naslov.htmlText = '<a href="'+xmlArray[trenutniIdSlike][2]+'">'+xmlArray[trenutniIdSlike][1]+'</a>';

   }
// <<< FUNKCIJA ZA UCITAVANJE XML PODATAKA

// >>> FUNKCIJA ZA POMERANJE LOADERA
function pomeranjeLoadera(event:Event):void
{
     // >>> ODREĐIVANJE NOVE ALPHA VREDNOSTI
     if(UILoader1.x > -sirinaSlike && UILoader1.x < sirinaSlike)
       {
         alphavrednost = 1-(1/(sirinaSlike/Math.abs(UILoader1.x)));
         UILoader1.alpha = alphavrednost;
         traka.alpha = alphavrednost;
       }
     else
       {
            alphavrednost = 0;
         UILoader1.alpha = alphavrednost;
         traka.alpha = alphavrednost;
       }
     // <<< ODREĐIVANJE NOVE ALPHA VREDNOSTI

     UILoader1.x += (sirinaSlike/100);
     traka.x = UILoader1.x;

     // >>> UKOLIKO JE SLIKA DOŠLA DO KRAJA
     if(UILoader1.x >= stage.stageWidth)
       {
         trenutniIdSlike++;
         if(trenutniIdSlike == ukupniBrSlika) trenutniIdSlike = 0;

         UILoader1.source = xmlArray[trenutniIdSlike][0];
         UILoader1.x = -sirinaSlike;
         UILoader1.alpha = 0;
         traka.x = -sirinaSlike;
         traka.alpha = 0;

         naslov.htmlText = '<a href="'+xmlArray[trenutniIdSlike][2]+'">'+xmlArray[trenutniIdSlike][1]+'</a>';
       }
     // <<< UKOLIKO JE SLIKA DOŠLA DO KRAJA
}
// <<< FUNKCIJA ZA POMERANJE LOADERA

E sad je samo problem da li postoji način učitavanja nove slike u novi loader dok se ova animacija dešava, ali kontam da to ne može pošto bi se animacija zaustavila dok se ne učita nova slika, a za ovaj moj primer je neophodno da animacija non stop radi, tj. da povećava X i resetuje ga.. Tražio sam po netu da li je to moguće, ali nisam pronašao rešenje...

[ MenOfHonor @ 25.07.2011. 12:26 ] @

Ukoliko ne koristiš slike velike rezolucije koje baš moraš da u međuvremenu učitavaš, to možeš jednostavnije da uradiš tako što ćeš odrediti source za svaki od narednih loadera kada je onaj prethodni izašao van stage-a. Na stage-u imam 3 instance UILoadera sa nazivima "uiLoader", "uiLoader2" i "uiLoader3", za prvi, drugi i treći UILoader respektivno. Za prvi odmah navodim source kao i event listener kojim se poziva funkcija u kojoj se prvi uiLoader pomera za 10 piksela svakim ulaskom u novi frejm. Kada on dođe do kraja stage-a uklanja se njegov event listener i prikazuje se uiLoader2, a kada i on dođe do kraja prikazaće se uiLoader3. Ovaj primer možeš pogledati ovde: http://dhost.info/manofhonor/uiLoader/uiLoader.html. Ovako izgleda kod:

Code:
import flash.events.Event;
uiLoader.source = "Tulips.jpg";
uiLoader.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
function pomeranjeLoadera(event:Event):void
{
    uiLoader.x +=  10;
    if (uiLoader.x >= stage.stageWidth)
    {
        uiLoader.removeEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
        uiLoader2.source = "Penguins.jpg";
        uiLoader2.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera2);
    }
}

function pomeranjeLoadera2(event:Event):void
{
    uiLoader2.x +=  10;
    if (uiLoader2.x >= stage.stageWidth)
    {
        uiLoader2.removeEventListener(Event.ENTER_FRAME, pomeranjeLoadera2);
        uiLoader3.source = "Desert.jpg";
        uiLoader3.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera3);
    }
}

function pomeranjeLoadera3(event:Event):void
{
    uiLoader3.x +=  10;
    if (uiLoader3.x >= stage.stageWidth)
    {
        uiLoader3.removeEventListener(Event.ENTER_FRAME, pomeranjeLoadera3);
    }
}

[ deZio @ 26.07.2011. 01:43 ] @

Problem je u tome što je zadatak bio da se slike definišu u XML fajlu, tako da ja nemam uticaj na količinu i nazive slika. Dakle zbog toga nisam išao na taj sistem sa više UIL(pošto ne znam koliko će ukupno biti slika unutar XMLa) već sa samo jednim UIL koji menja source nakon što slika izađe sa stage-a.

E sad jedino što mi je padalo na pamet je da kreiram dva UIL, i da prvi služi za prikaz i pomeranje slike a da drugi služi za učitavanje nove slike, i da onda nakon što slika izađe sa stage-a drugi UIL(koji je pre izlaska slike sa stage-a učitavao novu sliku) prosledi prvom UILu sliku nekako.. Ali mislim da to nije moguće pošto postoji samo jedan frejm..

Evo ovako izgleda trenutna verzija: http://nebeskoplavi.com/slideshow.html

Dakle sve je ok, upotrebljava se samo jedan UIL, samo što ima to kašnjenje zbog učitavanja nove slike, koje sam ja mislio da uklonim, ali vidim da teško da postoji način za to..

[ MenOfHonor @ 26.07.2011. 22:06 ] @

Za tako nešto ne možeš koristiti komponentu UILoader ali zato možeš Sprite ili MovieClip. Mogao bi da učitaš sve slike i da ih smestiš u sprajtove koje ćeš referencirati u jednom nizu:

Code:
var loader:Loader;
var sprajt:Sprite;
var niz:Array = [];
for (var i:int = 0; i < ukupniBrSlika; i++)
    {
        loader = new Loader();
        loader.load(new URLRequest(myXML.slika[i].urlslike));
        sprajt = new Sprite();
        niz[i] = sprajt.addChild(loader);
    }

U ovom slučaju kreiraće se 4 instance Loader i Sprite klase, nakon čega ćemo učitane slike smestiti u sprajtove a zatim njihove reference u niz. Nakon završetka petlje one će se nalaziti u nizu nakon čega im možemo pristupati iz nove petlje:

Code:
function prikaziClanoveNiza():void
{
    for (var i:String in niz)
    {
        addChild(niz[i]);
    }
}

[ deZio @ 20.12.2011. 16:08 ] @

Na kraju sam došao do nekog mog rešenja koji učitava prvo sve slike, pa onda pušta flash. Praktično se sve odvija preko AS, postoji samo jedan frame, i to je taj AS.

Jedini problem koji primećujem je da Flash s vremena na vreme "trza". Verovatno je problem u samom kodu, ne verujem da je u pitanju browser ili RAM..

Evo šaljem i kod, pa ako neko iskusniji može pogledati da li ima mesta optimizaciji samog koda. Inače swf se može videti na: http://www.prestigeautogallery.com.au/

Code:

import flash.events.Event;
import flashx.textLayout.formats.Float;
import flash.events.ProgressEvent;

var alphavrednost:Number = 0;
var trenutniIdSlike:int = 0;

var ukupniBrSlika:Number = 0;
ukupniBrSlika = Number(input_ukBrSlika.text);

var brUcitanihSlika:Number = 0;
brUcitanihSlika = Number(input_brUcitanihSlika.text);

var inProgress:Number = 0;
inProgress = Number(input_inProgress.text);

var xmlArray:Array = new Array();
var sirinaSlike:int = stage.stageWidth;
var step:Number = Math.round(stage.stageWidth/100);
var myXML:XML;

UILoader1.addEventListener(ProgressEvent.PROGRESS, loadingInProgress);
UILoader1.addEventListener(Event.COMPLETE, loadingCompleted);
UILoader1.addEventListener(MouseEvent.CLICK, myClick);
UILoader2.addEventListener(MouseEvent.CLICK, myClick);

function loadingInProgress(eve:ProgressEvent):void
  {
    var percent:Number = Math.round((eve.bytesLoaded / eve.bytesTotal) * 100);
    uptext.text = "Loading images...";
    downtext.text = "Loading image no. "+(brUcitanihSlika+1)+" ("+percent+"%)";
  }

function loadingCompleted(eve:Event):void
  {
    brUcitanihSlika++;
    input_brUcitanihSlika.text = String(brUcitanihSlika);
    inProgress++;
    input_inProgress.text = String(inProgress);
    if(ukupniBrSlika > inProgress)
        UILoader1.source = xmlArray[inProgress][0];
    else
      {
        UILoader1.addEventListener(Event.ENTER_FRAME, pomeranjeLoadera);
        UILoader1.removeEventListener(ProgressEvent.PROGRESS, loadingInProgress);
        UILoader1.removeEventListener(Event.COMPLETE, loadingCompleted);
        UILoader1.source = xmlArray[0][0];
        UILoader2.source = xmlArray[1][0];
        naslov1.htmlText = '<a href="'+xmlArray[0][2]+'">'+xmlArray[0][1]+'</a>';
        naslov2.htmlText = '<a href="'+xmlArray[1][2]+'">'+xmlArray[1][1]+'</a>';
        uptext.text = "";
        downtext.text = "";
        progressBar.visible = false;
        //trace('kraj');
      }
  }

if(ukupniBrSlika == 0)
  {
      // >>> FUNKCIJA ZA UCITAVANJE XML PODATAKA
    function processXML(e:Event):void
      {
        myXML = new XML(e.target.data);
        ukupniBrSlika = myXML.slika.length();
        input_ukBrSlika.text = String(ukupniBrSlika);
        for (var i:int = 0; i < ukupniBrSlika; i++)
          {
            xmlArray[i] = new Array(myXML.slika[i].urlslike, myXML.slika[i].naslov, myXML.slika[i].linkurl);
          }
        UILoader1.source = myXML.slika[inProgress].urlslike;
      }
    // <<< FUNKCIJA ZA UCITAVANJE XML PODATAKA

    var myLoader:URLLoader = new URLLoader();
    myLoader.load(new URLRequest("data.xml"));
    myLoader.addEventListener(Event.COMPLETE, processXML);
  }

// >>> FUNKCIJA ZA LINKOVANJE NASLOVA
function myClick(eventObject:MouseEvent)
  {
    navigateToURL( new URLRequest(xmlArray[trenutniIdSlike][2]), "_self");
  }
// <<< FUNKCIJA ZA LINKOVANJE NASLOVA

// >>> FUNKCIJA ZA POMERANJE LOADERA
function pomeranjeLoadera(event:Event):void
  {
    // >>> ODREĐIVANJE NOVE ALPHA VREDNOSTI
    if(UILoader1.x > UILoader2.x)
      {
        alphavrednost = 1-(1/(sirinaSlike/Math.abs(UILoader1.x)));
        UILoader1.alpha = alphavrednost;
        traka1.alpha = alphavrednost;
        naslov1.alpha = alphavrednost;
        UILoader2.alpha = 1-alphavrednost;
        traka2.alpha = 1-alphavrednost;
        naslov2.alpha = 1-alphavrednost;
        // <<< ODREĐIVANJE NOVE ALPHA VREDNOSTI

        UILoader1.x += step;
        traka1.x = UILoader1.x;
        naslov1.x = traka1.x + 8;
        UILoader2.x = UILoader1.x - sirinaSlike;
        traka2.x = UILoader1.x - sirinaSlike;
        naslov2.x = traka2.x + 8;
      }
    else
      {
        alphavrednost = 1-(1/(sirinaSlike/Math.abs(UILoader2.x)));
        UILoader2.alpha = alphavrednost;
        traka2.alpha = alphavrednost;
        naslov2.alpha = alphavrednost;
        UILoader1.alpha = 1-alphavrednost;
        traka1.alpha = 1-alphavrednost;
        naslov1.alpha = 1-alphavrednost;
        // <<< ODREĐIVANJE NOVE ALPHA VREDNOSTI

        UILoader2.x += step;
        traka2.x = UILoader2.x;
        naslov2.x = traka2.x + 8;
        UILoader1.x = UILoader2.x - sirinaSlike;
        traka1.x = UILoader2.x - sirinaSlike;
        naslov1.x = traka1.x + 8;
      }

    // >>> UKOLIKO JE SLIKA DOŠLA DO KRAJA
    if(UILoader1.x >= stage.stageWidth)
      {
        trenutniIdSlike++;
        if(trenutniIdSlike == 1) trenutniIdSlike = 2;
        if(trenutniIdSlike == ukupniBrSlika) trenutniIdSlike = 0;


        UILoader1.source = xmlArray[trenutniIdSlike][0];
        UILoader1.x = -sirinaSlike;
        UILoader1.alpha = 0;
        traka1.x = -sirinaSlike;
        naslov1.x = traka1.x + 8;
        traka1.alpha = 0;
        naslov1.alpha = 0;
        naslov1.htmlText = '<a href="'+xmlArray[trenutniIdSlike][2]+'">'+xmlArray[trenutniIdSlike][1]+'</a>';
      }
    else if(UILoader2.x >= stage.stageWidth)
      {
        trenutniIdSlike++;
        if(trenutniIdSlike == ukupniBrSlika) trenutniIdSlike = 0;

        UILoader2.source = xmlArray[trenutniIdSlike][0];
        UILoader2.x = -sirinaSlike;
        UILoader2.alpha = 0;
        traka2.x = -sirinaSlike;
        naslov2.x = traka2.x + 8;
        traka2.alpha = 0;
        naslov2.alpha = 0;

        naslov2.htmlText = '<a href="'+xmlArray[trenutniIdSlike][2]+'">'+xmlArray[trenutniIdSlike][1]+'</a>';
      }
    // <<< UKOLIKO JE SLIKA DOŠLA DO KRAJA
  }
// <<< FUNKCIJA ZA POMERANJE LOADERA

[ StarCraft @ 21.12.2011. 10:53 ] @

Problem do trzanja može da bude što se pozicije rasterskih slika uvek zaokružuju na okrugle koordinate (pixele) za razliku od gole vektorske grafike koja kada se animira može da ima koordinate i na stote delove pixela.

Probaj da slikama enejbluješ "smoothing". to možeš da uradiš iz kôda ili iz fleša u library-u direktno. Međutim, kolko vidim kod tebe se slike učitavaju externo tako da bi trebao da ih uhvatiš kad se učitaju i da getuješ kontent loadera i kastuješ ga kao Bitmap i setuješ mu:
Bitmap(loaderContent).smoothing = true;

Nisam 100% siguran da će ti ovo rešiti problem, ali probaj.

Ako te ne mrzi, probaj da testiraš sa nekom vektorskom grafikom da vidiš dal je problem do rasterskih slika uopšte.
Ako ne uspeš da rešiš problem ni sa smoothing=true probaj da animiraš slike nekako uvek sa okruglim koordinatama, štagaznam.