Avatar billede theselfimages Nybegynder
16. januar 2004 - 16:37 Der er 36 kommentarer og
1 løsning

Preload eksternt JPG billede (Flash)

Nedenstående script loader tekst + JPG billede.

Men problemet er at funktionerne: "elasticMove" og "viewImage" afspilles før JPG billedet er loadet. Og dermed ikke giver den ønskede effekt.

Det er derfor nødvendigt at integrer en Preloader+Progressbar der preloader det pågældende JPG billede før "function handler()" udføres. Er det muligt?
(Jeg har forberet et MC (preloadBar) med selve Progressbaren)


num = 1;
max = 4;
function setString(num) {
    u = 'content/thesevendeadlysins/text/'+num+'.txt';
    i = 'content/thesevendeadlysins/images/'+num+'.jpg';
}
setString(num);

function viewImage(speed) {
    trace(speed);
    clearInterval(timer);
    trace("cleared");
    trans(speed)
}
function trans(speed){
        Transition._xscale = 0;
    this.onEnterFrame = function(){
        trace(Transition._xscale)
        if (Transition._xscale<100) {
            Transition._xscale += speed;
        } else {
            Transition._xscale = 100;
            this.onEnterFrame = 0;
            elasticMove(1, 0.2);
        }
    }
}
function elasticMove(startspeed, acceleration) {
    Description._visible = true;
    xspeed = startspeed;
    moving = true;
    this.onEnterFrame = function() {
        if (xspeed>-startspeed && moving) {
            xspeed -= acceleration;
        } else {
            moving = false;
            if (xspeed<0) {
                xspeed += acceleration;
            } else {
                xspeed = 0;
                this.onEnterFrame = 0;
            }
        }
        Description._x += xspeed;
    };
}
function handler() {
    Transition._xscale = 0;
    Description.wordwrap = true;
    Description.autoSize = true;
    Transition._x = this.Transition_x;
    Description.text = this.Description;
    Description._visible = false;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
    loadMovie(i, "ImageHolder");
    timer = setInterval(viewImage,400,25);
}
l = new LoadVars();
l.load(u);
l.onLoad = handler;
stop();
Avatar billede theselfimages Nybegynder
16. januar 2004 - 23:20 #1
Fellows!? ... uhuuu! ... Det er Frodo! "HELP!"
:)
Avatar billede pyroman Nybegynder
16. januar 2004 - 23:42 #2
Hvordan (hvor?) henter du dine jpg's?? - skal nok kigge lidt på det :P
Avatar billede theselfimages Nybegynder
16. januar 2004 - 23:52 #3
Der hentes/loades JPG billeder med LoadVar, på samme måde som her:
http://www.eksperten.dk/spm/451268
(Den du også hjalp med... :)

i = 'content/thesevendeadlysins/images/'+num+'.jpg';

Med denne: loadMovie(i, "ImageHolder"); loades JPG billedet
ind i et "ImageHolder" MovieClip, når "function handler()" kaldes.

Måske man øverst i "function handler" kunne lægger en Preloader
der loader JPG billedet. Dernæst denne: loadMovie(i, "ImageHolder");
og sidst: timer = setInterval(viewImage,400,25);

Blot et forslag... ?
Avatar billede pyroman Nybegynder
16. januar 2004 - 23:56 #4
Doh - hvorfor så jeg bare ikke den (loadMovie-koden) - klokken er også ved at blive mange jo...
Giv mig lidt tid så skal jeg se hvad jeg kan gøre...
Avatar billede theselfimages Nybegynder
16. januar 2004 - 23:59 #5
Der benyttes i øvrigt disse to knapper til at bladre frem/tilbage med:
(Just to inform)

FORWARD:
on (release) {
    if (num < max) {
        num += 1;
        setString(num);
        l.load(u);
    }
    else if(num == max) {
      num = 1;
        setString(num);
        l.load(u);
    }
}


BACKWARD:
on (release) {
    if (num > 1) {
        num -= 1;
        setString(num);
        l.load(u);
    }
    else if(num == 1) {
      num = 4;
        setString(num);
        l.load(u);
    }
}
Avatar billede pyroman Nybegynder
17. januar 2004 - 00:06 #6
function preload (){
  imageLoaded = false;
  preloadBar._xscale = loadedBytes = percent = 0;
  totalBytes = ImageHolder.getBytesTotal();
  this.onEnterFrame = function(){
    loadedBytes = ImageHolder.getBytesLoaded();
    percent = Math.floor(loadedBytes/totalBytes*100);
    preloadBar._xscale = percent;
    if(!imageLoaded && loadedBytes == totalBytes){
      imageLoaded = true;
      timer = setInterval(viewImage,400,25);
    }
  }
}
function handler() {
    Transition._xscale = 0;
    Description.wordwrap = true;
    Description.autoSize = true;
    Transition._x = this.Transition_x;
    Description.text = this.Description;
    Description._visible = false;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
    loadMovie(i, "ImageHolder");
    preload()
}
Avatar billede theselfimages Nybegynder
17. januar 2004 - 00:17 #7
Hmm... jeg kan ik' se at det gør nogen forskel.
Den viser ikke at den preloader, og effekterne: "elasticMove" og "viewImage" er afspillet før selve JPG billedet kommer til syne.
Avatar billede pyroman Nybegynder
17. januar 2004 - 00:51 #8
Prøv denne lille ændring i preload:

function preload (){
  imageLoaded = false;
  preloadBar._xscale = loadedBytes = totalBytes = percent = 0;
  this.onEnterFrame = function(){
    totalBytes = ImageHolder.getBytesTotal();
    loadedBytes = ImageHolder.getBytesLoaded();
    percent = Math.floor(loadedBytes/totalBytes*100);
    preloadBar._xscale = percent;
    if(!imageLoaded && loadedBytes == totalBytes && totalBytes > 4){
      imageLoaded = true;
      timer = setInterval(viewImage,400,25);
    }
  }
}
Avatar billede theselfimages Nybegynder
17. januar 2004 - 00:53 #9
Har det noget at sige at alt ovenstående foregår i en seperart .SWF fil,
loadet ind i Level1?
Avatar billede pyroman Nybegynder
17. januar 2004 - 00:58 #10
hmm - det tror jeg ikke - men måske... tjekker lige...
Avatar billede theselfimages Nybegynder
17. januar 2004 - 01:00 #11
Yep.. nu ser den ud til at være der. Men den viser ikke selve Preload progress.
Til gengæld afspiller nu den IKKE "elasticMove" og "viewImage" før JPG billedet øjensynligt er preloadet :)

Mit preloadBar MC er blot en Mask, der gør selve Progess blokken synlig fra frame1 til frame100.

Og hvordan sikre man, at der også Preloades når der bladres frem med Forward knap?
Avatar billede pyroman Nybegynder
17. januar 2004 - 01:01 #12
hmm - næh det virker fint lokalt på min pc...
Avatar billede theselfimages Nybegynder
17. januar 2004 - 01:10 #13
Det skulle vel egentlig virke med Knapperne, blot at tilføje denne:
handler();

FORWARD:
on (release) {
    if (num < max) {
        num += 1;
        setString(num);
        l.load(u);
        handler();
    }

Men hvordan får jeg den Progressbar synlig og aktiv?
Avatar billede pyroman Nybegynder
17. januar 2004 - 01:13 #14
Altså der burde preloaded når du bladrede frem og tilbage...

Prøv at smide en trace(loadedBytes+"/"+totalBytes) ind lige før "if"-koden i preload-funktionen... Ændrer det første tal sig?
Avatar billede theselfimages Nybegynder
17. januar 2004 - 01:19 #15
Hmm.. æh!.. får alt dette som output.

Prøv evt at se her:
http://test3.theselfimages.dk/container.fla

Preloadbar ligger i layer2


4/4
53153/53153
53153/53153
53153/53153
53153/53153
53153/53153
53153/53153
53153/53153
53153/53153
25
cleared
0
25
50
75
100
Avatar billede pyroman Nybegynder
17. januar 2004 - 01:29 #16
Ejejejejejejejejejej - nu skal jeg lære dig lidt om hvordan man laver preloadbarer...
Se tag og lav din røde firkant i mask-layeret om til et movieclip (F8). Se så sletter du så de sidste 99 frames så der kun er ét. Der skal heller ikke være noget motiontween...
Giv dit røde movieclip navnet "bar" - det skal stadig være i et mask-layer...
Så skriver vi:

preloadBar.bar._xscale = percent;

i preload funktionen...

:) :) :)
Avatar billede theselfimages Nybegynder
17. januar 2004 - 01:36 #17
Altså sådan her: (f.eks.)

function preload (){
  imageLoaded = false;
  preloadBar.progressBar._xscale = percent;
  this.onEnterFrame = function(){
Avatar billede pyroman Nybegynder
17. januar 2004 - 01:39 #18
nej - den bliver ikke opdateret sådan der... her:

function preload (){
  imageLoaded = false;
  preloadBar._xscale = loadedBytes = percent = 0;
  totalBytes = ImageHolder.getBytesTotal();
  this.onEnterFrame = function(){
    loadedBytes = ImageHolder.getBytesLoaded();
    percent = Math.floor(loadedBytes/totalBytes*100);
    preloadBar.bar._xscale = percent;
    if(!imageLoaded && loadedBytes == totalBytes){
      imageLoaded = true;
      timer = setInterval(viewImage,400,25);
    }
  }
}

bar er stadig den røde firkant - som movieclip... om du så kalder den "progressbar" er op til dig :)
Avatar billede theselfimages Nybegynder
17. januar 2004 - 01:48 #19
Det virker altså ik'
Den viser ikke nogen Progressbar.

Har opdateret denne, med min seneste:
http://test3.theselfimages.dk/container.fla

Alt andet ser ellers ud til at virke perfekt nu.
Også når der bladres frem/tilbage :)
Avatar billede pyroman Nybegynder
17. januar 2004 - 01:54 #20
du skal bare flytte "bar"'en ind over den blå firkant - den skal jo dække det hele så det bliver synligt... min kode skalerer den bredde - så den starter med en bredde på 0% og loader op til 100%...
Avatar billede theselfimages Nybegynder
17. januar 2004 - 02:00 #21
Hmmm... hvor svært skal så noget være?
Nu viser den bare hele baren så lang den er,
men ingen loadprogress....
Avatar billede pyroman Nybegynder
17. januar 2004 - 02:04 #22
det er vel fordi at det kun tager et par millisekunder at hente... prøv at smide en trace ind under "if"-koden i preload:

if(...){
  trace("loaded: "+loadedBytes);
  ...
}

Hvis der står:

4/4
53153/53153
loaded: 53153

Så er den meget hurtigt hentet...
Avatar billede theselfimages Nybegynder
17. januar 2004 - 02:20 #23
Hmm.. der er altså noget galt..

http://test.theselfimages.dk/test.htm
Prøv at se her.. Når forside billedet loades, der loader den fint
med Progressbar, men da bruges også denne:

loadedbytes = getBytesLoaded();
totalbytes = getBytesTotal();
frame = int(loadedbytes/(totalbytes/100));


if (frame > 100) {
    frame = 100;
}

if (loadedbytes == totalbytes) {
   
    // this takes you to the next scene
    gotoAndPlay(5);
}


Prøv så at klik på: "Creative Imagery" og Vælg "The Seven Deadly Sins"
Da kommer din Progressbar til syne i 100% nederst på siden, men før
billedet er fremme. Dvs. Progress indikation ikke viser korrekt.
Avatar billede theselfimages Nybegynder
17. januar 2004 - 02:24 #24
Den skal vel også på en eller anden måde "fjerne" sig, når der ER loadet færdigt.
Avatar billede theselfimages Nybegynder
17. januar 2004 - 04:43 #25
OKAY!.. fik det til at virke som scriptet ser ud her: (nedenstående)
Men kan jeg undgå at Progressbaren vises i sin fulde længde i et glimt,
inden den begynder at loade og progresserer?
Og så må den også gerne forsvinde efter load done.
Prøv selv at se her: http://test.theselfimages.dk/test.htm

Fik det aldrig til at virke med denne:
Kommentar: pyroman
17/01-2004 01:39:46


SAMLET SCRIPT:

num = 1;
max = 4;
function setString(num) {
    u = 'content/imagery/sevendeadlysins/text/'+num+'.txt';
    i = 'content/imagery/sevendeadlysins/images/'+num+'.jpg';
}
setString(num);

function viewImage(speed) {
    trace(speed);
    clearInterval(timer);
    trace("cleared");
    trans(speed)
}
function trans(speed){
        Transition._xscale = 0;
    this.onEnterFrame = function(){
        trace(Transition._xscale)
        if (Transition._xscale<100) {
            Transition._xscale += speed;
        } else {
            Transition._xscale = 100;
            this.onEnterFrame = 0;
            elasticMove(1, 0.2);
        }
    }
}
function elasticMove(startspeed, acceleration) {
    Description._visible = true;
    xspeed = startspeed;
    moving = true;
    this.onEnterFrame = function() {
        if (xspeed>-startspeed && moving) {
            xspeed -= acceleration;
        } else {
            moving = false;
            if (xspeed<0) {
                xspeed += acceleration;
            } else {
                xspeed = 0;
                this.onEnterFrame = 0;
            }
        }
        Description._x += xspeed;
    };
}
function preload (){
  imageLoaded = false;
  preloadBar._xscale = loadedBytes = totalBytes = percent = 0;
  this.onEnterFrame = function(){
    totalBytes = ImageHolder.getBytesTotal();
    loadedBytes = ImageHolder.getBytesLoaded();
    percent = Math.floor(loadedBytes/totalBytes*100);
    preloadBar._xscale = percent;
    if(!imageLoaded && loadedBytes == totalBytes && totalBytes > 4){
      imageLoaded = true;
      timer = setInterval(viewImage,400,25);
    }
  }
}
function handler() {
    Transition._xscale = 0;
    Description.wordwrap = true;
    Description.autoSize = true;
    Description.text = this.Description;
    Description._visible = false;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
    loadMovie(i, "ImageHolder");
    preload()
}
l = new LoadVars();
l.load(u);
l.onLoad = handler;
stop();
Avatar billede pyroman Nybegynder
17. januar 2004 - 14:12 #26
preloadBar._visisble = false;
num = 1;
max = 4;
function setString(num) {
    u = 'content/imagery/sevendeadlysins/text/'+num+'.txt';
    i = 'content/imagery/sevendeadlysins/images/'+num+'.jpg';
}
setString(num);

function viewImage(speed) {
    trace(speed);
    clearInterval(timer);
    trace("cleared");
    trans(speed)
}
function trans(speed){
        Transition._xscale = 0;
    this.onEnterFrame = function(){
        trace(Transition._xscale)
        if (Transition._xscale<100) {
            Transition._xscale += speed;
        } else {
            Transition._xscale = 100;
            this.onEnterFrame = 0;
            elasticMove(1, 0.2);
        }
    }
}
function elasticMove(startspeed, acceleration) {
    Description._visible = true;
    xspeed = startspeed;
    moving = true;
    this.onEnterFrame = function() {
        if (xspeed>-startspeed && moving) {
            xspeed -= acceleration;
        } else {
            moving = false;
            if (xspeed<0) {
                xspeed += acceleration;
            } else {
                xspeed = 0;
                this.onEnterFrame = 0;
            }
        }
        Description._x += xspeed;
    };
}
function preload (){
  preloadBar._visisble = true;
  imageLoaded = false;
  preloadBar._xscale = loadedBytes = totalBytes = percent = 0;
  this.onEnterFrame = function(){
    totalBytes = ImageHolder.getBytesTotal();
    loadedBytes = ImageHolder.getBytesLoaded();
    percent = Math.floor(loadedBytes/totalBytes*100);
    if(totalBytes > 4) preloadBar._xscale = percent;
    if(!imageLoaded && loadedBytes == totalBytes && totalBytes > 4){
      imageLoaded = true;
      preloadBar._visisble = false;
      timer = setInterval(viewImage,400,25);
    }
  }
}
function handler() {
    Transition._xscale = 0;
    Description.wordwrap = true;
    Description.autoSize = true;
    Description.text = this.Description;
    Description._visible = false;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
    loadMovie(i, "ImageHolder");
    preload()
}
l = new LoadVars();
l.load(u);
l.onLoad = handler;
stop();

Så nu burde den ikke blinke og den går væk efter load...
Avatar billede theselfimages Nybegynder
17. januar 2004 - 14:31 #27
Hmm.. det gjore ikke den store forskel.
Du kan clear din cache og tjekke selv her:
http://test.theselfimages.dk/test.htm
Avatar billede pyroman Nybegynder
17. januar 2004 - 14:49 #28
hmm - prøv at uskifte:

preloadBar._visible = true;
=>
preloadBar._alpha = 100;

og

preloadBar._visible = false;
=>
preloadBar._alpha = 0;
Avatar billede theselfimages Nybegynder
17. januar 2004 - 15:06 #29
SMUKT!.. Nu er det hele så forpulet Smukt :)
Tusind tak for din hjælp og tålmodighed.
Post venligst et svar...

Og så er det ikke for at presse citronen,
men jeg har et par små tillægsspørgsmål som ligger
meget i forlængelse af dette. Sig til hvis jeg
skal oprette et helt nyt spørgsmål i stedet.

TILLÆGSSPØRGSMÅL:
http://test.theselfimages.dk/test.htm,
(Klik på: "Creative Imagery" og Vælg "The Seven Deadly Sins")

Prøv at klik så hurtigt du kan på Forward eller Backward knappen,
når alle 4 billeder først ER preloadet. Så opstår der en tydelig fejl.
Tænkte om det f.eks. er muligt ved OnClick på "låse" knapperne eller inaktiverer dem i X antal sekunder, før der kan klikkes igen. Eller lave noget IF check.
Avatar billede pyroman Nybegynder
17. januar 2004 - 15:24 #30
buttonIsActive = true;
function buttonInactive (){
  buttonIsActive = false;
  buttonTimer = setInterval(buttonActive, 1000);
}
function buttonActive(){
  buttonIsActive = true;
  clearInterval(buttonTimer);
}

på dine knapper:

on (release) {
  if (num < max && buttonIsActive) {
    num += 1;
    setString(num);
    l.load(u);
    handler();
  }
}
Avatar billede pyroman Nybegynder
17. januar 2004 - 15:25 #31
måske virker det... og svar
Avatar billede theselfimages Nybegynder
17. januar 2004 - 15:45 #32
Hmm.. næhh! Det gjore ingen forskel.
Avatar billede pyroman Nybegynder
17. januar 2004 - 15:55 #33
mangler også lige noget:

on (release) {
  if (num < max && buttonIsActive) {
    buttonInactive();
    num += 1;
    setString(num);
    l.load(u);
    handler();
  }
}
Avatar billede theselfimages Nybegynder
17. januar 2004 - 16:45 #34
Teste, teste, teste... Genialt! Det virker perfekt nu!

En sidste ting: (måske denne skal oprettes som nyt spørgsmål!)

Vedr. function trans(speed)
Her scaleres fra 0-100 MovieClippet 'Transition'. I dette MC ligger
et hvidt område svarende til max bredden på et billede (645px).
Efter scaleringen kaldes denne: function elasticMove.

Det vil alt i alt sige: At lige meget om selve JPG billedet er 645px bredt
eller 300px bredt, da scaleres det hvide område over billede altid
fra 0 - 645px og udløser herefter function elasticMove.
Problemet er at dette giver en forsinkelse af kaldet på function elasticMove
for de IKKE så bredde billeder.
Tænkte derfor om man kunne sætte scalebredden efter billedets bredde,
eller f.eks. benytte: Transition._x (hvor billedets bredde så defineres i .txt fil)

Håber dette er bare lidt forståeligt.
Avatar billede pyroman Nybegynder
17. januar 2004 - 16:53 #35
jo kan sagtens lade sig gøre - men dette spm er vist lidt tyndslidt nu - lav et nyt - lad være med at give så mange point - for det meste er jo lavet. Bare så andre har mulighed for at deltage...
Avatar billede pyroman Nybegynder
17. januar 2004 - 16:53 #36
jeg har allerede en løsning... men skal afsted nu... er nok tilbage i morgen :)
Avatar billede theselfimages Nybegynder
17. januar 2004 - 17:09 #37
OK.. Nyt spørgsmål oprettet her: http://www.eksperten.dk/spm/452991

Endnu engang.. Tusind tak for din hjælp med dette spørgsmål :)
"The fellowship stands together!" :) HE!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester