Elastisk X bevægelse på Tekstfelt

Mener du en easing som i en motion tween eller en egentlig elastisk bevægelse som du selv bevæger dig i et elastikspring - jeg er ikke helt med på, hvad du ønsker (men det kan sikkert lade sig gøre :)

Tror sagtens det kan laves som en ease in/ease out ligende bevælge, men
prøv at se på linket: http://www.tomter.net. Det er meget li' bevægelse på denne side, jeg ønsker.

Fortstår du?
Jeg har lavet bevælgelsen manuelt ved at flytte tekstfeltet 2px til højre, med en motiontween over 3 frames, og efterfølgene flytte tekstfeltet 2px til venstre, over 5 frames med Ease -100. Det ser perfekt ud. Nu er spørgsmålet bare om dette kan scriptes, og at nulpunktet hvorfra tekstfeltet skal bevæge sig kan baseres på de X/Y koordinator der hentes in fra .txt fil.

på linket - er det den runde menu i siden eller den der lille røde trekant øverst og nederst vi skal kigge på? eller kigger jeg helt forkert??

Jeg tror sørme det er den lodrette tekst der liiiige sniger sig ind når man skifter på protfolio siden...

Altså liiige ind til højre for billederne!

Sorry! På linket skal du klikke på menupunktet: Portfolio. Nu skulle første billede gerne slide ind. Vælg herefter mellem (1, 2, 3, etc.) i den yderste talrække. Det der skal bemærkes er den vertikale billedtekst til højre for selve billedet. Det er denne/el. ligende elastisk/ease bevægelse, jeg er ude efter at scripte til at fungerer med mit tekstfelt "Description" (Se ovenstående).

:)
Lars

Nikolajdu.. Netop!

Du kan bruge det her script:

startspeed = 2;
acceleration = 0.1;
xspeed = startspeed;
moving = true;
this.onEnterFrame = function(){
  if(xspeed > -startspeed && moving) xspeed -= acceleration;
  else{
    moving = false;
    if(xspeed < 0) xspeed += acceleration;
    else xspeed = 0;
  }
  mitTekstFelt._x += xspeed;
}

Hmm.. får det ikke helt til at virke. Hele mit nuværende script ser sådan ud:
Dit script skulle gerne integreres i dette.

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

function handler() {
    Description.wordwrap = true;
    Description.autoSize = true;
    Description.text = this.Description;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
   
    loadMovie((i), "ImageHolder");
}
stop();

Ahh! Sorry my fault! Fandt ud af det.
Hvordan bestemmer jeg hvor meget tekstfeltet skal bevæge sig?

Altså du vil godt have at den bliver kørt når dine varibler er blevet hentet?

altså jeg har ikke lavet noget sådan at man præcist kan bestemme hvor meget teksten rykker sig - men man kan intaste startfarten og accelerationen (eller deaccelerationen) - men jeg kan godt lave det??

Nej.. helt super! Har fået den tilpasset nu.
Men når jeg Klikker mit "Fremad" knap for at bladre frem, og dermed Loade næste billede og tekst, da aktiveres din function ikke.

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

På linket: http://www.tomter.net

Er billedteksten en lækker detalje, der ligger i forlængelse af selve billedets slide in bevægelse. (Som vel bare er et hvidt layer der trækkes over billedet?)
Vil man kunne scripte sig ud af denne transition også? Jeg har f.eks. et MovieClip (ImageHolder) hvortil mine JPG billeder blir loadet. Og billedteksten loades (som sagt) til "Description" (DTF) Tekstfeltet.

Kun man f.eks. lægge et MovieClip med en hvid blok, på et seperart layer over det layer hvorpå ImageHolder movieClip ligger. Og da med Actionscript "scale" dette MovieClip med hvid boks hen over billedet på layer nedenunder?

øv det nye Eksperten har vist været nede for første gang... nåh her er det jeg har prøvet at indlægge de sidste 30 min:

function elasticMove (startspeed, acceleration){
  xspeed = startspeed;
  moving = true;
  this.onEnterFrame = function(){
    if(xspeed > -startspeed && moving) xspeed -= acceleration;
    else{
      moving = false;
      if(xspeed < 0) xspeed += acceleration;
      else xspeed = 0;
    }
    Description._x += xspeed;
  }
}

og så kan du bruge denne funktion hver gang du vil køre den. fx:
elasticMove(2, 0.1);

husk at nulstille dit tekstfelts _x hver gang... ellers rykker det lidt til højre hver gang...

Hvis det skal passe så sættes _x vel efter billedets bredde ligesom i det ønskede eksempel.

til 14/01-2004 18:41:11:

Jo sagtens - det er nok bedst at bruge mask-layers egentligt. Lav et MC med bredde og højde som et billede - farven en ligegyldig.
Smid dette i et masklayer over "ImageHolder" så "ImageHolder" er masket - dette MC kan du så bare skalere med:

mitMaskMC._xscale = scale;

og fx bruge det på denne måde:

function viewImage(speed){
  mitMaskMC._xscale = 0;
  this.onEnterFrame = function(){
    if(mitMaskMC._xscale < 100) mitMaskMC._xscale += speed;
    else mitMaskMC._xscale = 100;
  }
}

jo det jeg mener med at nulstille er at sætte det tilbage til hvor det skal starte fra - dets originale placering...

Roder lidt med: 14/01-2004 19:31:50

Virker fint nok, men den skulle gerne kører funktionen ved onLoad også.
Altså fra start for første billede, før der klikkes videre til det næste,
med "Forward" knap, hvorpå jeg har tilføjet denne: elasticMove(1, 0.2);

OK.. Fik det til at virke alligevel. (Huh! :)

Men der er et problem med at den ene funktion ikke kan køre sammen med den anden og vica versa. elasticMove virker fint alene og det samme gør viewImage. Men køres de samtidig, udelukker den ene den anden. Mit script ser nu således ud:

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

function viewImage(speed){
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    if(Transition._xscale < 100) Transition._xscale += speed;
    else Transition._xscale = 100;
  }
}

function elasticMove (startspeed, acceleration){
  xspeed = startspeed;
  moving = true;
  this.onEnterFrame = function(){
    if(xspeed > -startspeed && moving) xspeed -= acceleration;
    else{
      moving = false;
      if(xspeed < 0) xspeed += acceleration;
      else xspeed = 0;
    }
    Description._x += xspeed;
  }
}

function handler() {
    Description.wordwrap = true;
    Description.autoSize = true;
    Description.text = this.Description;
    Description._x = this.Description_x;
    Description._y = this.Description_y;
   
    loadMovie((i), "ImageHolder");

    elasticMove(1, 0.2);
    viewimage(10); // NOGET GÅR GALT HER, NÅR DENNE KØRES SAMTIDIG MED elasticMove
}
stop();


P.S.
En lille ting (nu det er kommet såvidt). Hvordan sikre man at elasticMove ikke køres før viewImage er slided færdigt? Altså således at elasticMovie køres lige i forlængelse af viewImage.

Du venter vel bare med at kalde : elasticMove(1, 0.2);


function viewImage(speed){
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    if(Transition._xscale < 100) Transition._xscale += speed;
    else{
Transition._xscale = 100;
this.onEnterFrame = 0;
elasticMove(1, 0.2);
}
  }
}

Du venter vel bare med at kalde : elasticMove(1, 0.2);

function viewImage(speed){
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    if(Transition._xscale < 100) Transition._xscale += speed;
    else{
Transition._xscale = 100;
this.onEnterFrame = 0;
elasticMove(1, 0.2);
}
  }
}

Æh! den burde jeg vel ha' tænkt selv... sorry! ;)

Jeg forstod aldrig helt denne:
"husk at nulstille dit tekstfelts _x hver gang...
ellers rykker det lidt til højre hver gang..."


Og det muligt at pause viewImage et øjeblik inden den loades?

function viewImage(speed){
  pause.this = X antal sek.
  Transition._xscale = 0;

Således at der skabes et kort "blankt" (hvidt ophold) med mit Mask layer (Transition), før dette med viewImage slider.

Forstå heller ik (øv! har ellers prøvet)
Hvordan jeg undgår at teksten loades og fremtræder synlig i Description tekstfelt,
før elasticMovie kaldes. Dette skulle jo helst ske i samme sekund som elasticMovie kaldes. Skal jeg vise samlet script? (igen)?

Lars

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

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;
    }
    Description._x += xspeed;
  }
}


function viewImage(speed){
clearInterval(timer);
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    if(Transition._xscale < 100) Transition._xscale += speed;
    else{
Transition._xscale = 100;
this.onEnterFrame = 0;
elasticMove(1, 0.2);
}
  }
}

function handler() {
    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");

    timer = setInterval(viewimage,1000,10); // LÆG MÆRKE TIL AT DIT 10 TAL ER FLYTTET HEN TIL SIDST!!
}
stop();

JAJAJA! :) næsten.. Nu virker det super med slidein og elastic billedtekst.
Men der er et problem med setInterval. Den viser intet nu, heller ik' om interval sættes til 1. Resten af scriptet virker perfect som det ser ud her:
(har fjernet de 2 linjer for setInterval function... hvad kan der være galt?)


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

function viewImage(speed){
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    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;
    }
    Description._x += xspeed;
  }
}

function handler() {
    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");
    viewImage(15);
}
stop();

Hvad mener du ville den ikke kalde setInterval?

Åh prøv llige igen med den her :

timer = setInterval(viewImage,1000,10);

havde skrever viewimage med lille image i.

Men.. det virker altså ikke med denne:
(den går i helt i blank her..)

timer = setInterval(viewImage,1000,10);

OG

function viewImage(speed){
  clearInterval(timer);   
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    if(Transition._xscale < 100) Transition._xscale += speed;
    else{
    Transition._xscale = 100;
    this.onEnterFrame = 0;
    elasticMove(1, 0.2);
}
  }
}

Nu kan du heller ikke kalde funktionen før den er inialiseret så flyt kaldet ned under.

function viewImage(speed){
    trace(speed)
  clearInterval(timer);   
}
timer = setInterval(viewImage,1000,10);

Virker ganske glimrende hos mig.

Hmm.. mærkelig. Mig der gør noget galt?
Virker ikke her. Samlet ser det sådan her ud:


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

function viewImage(speed){
  trace(speed)
  clearInterval(timer);     
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    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;
    }
    Description._x += xspeed;
  }
}

function handler() {
    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,1000,10);
}
stop();

Hvs ikke den tracer "speed" = 10 så er det vel fordi din handler aldrig bliver kørt - Prøv at indsætte nogle flere traces.

Men det virker jo fint nok så længe sidste del af scriptet
(Som er en del af function handler) ser sådan her ud:

    loadMovie((i), "ImageHolder");
    viewImage(15);
}
stop();

Udskrifter jeg viewImage(15); med: timer = setInterval(viewImage,1000,10);
da viser den hvidt/blank (som den jo egentlig skal), men kommer aldrig videre
derfra.

Kan du ikke lægge filerne ud så man kan danne sig et overblik?

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);     
  Transition._xscale = 0;
  this.onEnterFrame = function(){
    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;
    }
    Description._x += xspeed;
  }
}

function handler() {
    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,1000,10);
}
/*
l = new LoadVars();
l.load(u);
l.onLoad = handler;
*/
handler()
stop();

tracer fint 10 hos mig så det rykker altså - Det må være noget andet du gør galt.

jeg udkommenterede loadVars for at teste af og rykkede dem generelt ned i bunden så de andre funktion er initialiseret.

Jo da!

Det er blot dette lille setInterval problem. Alt andet virker perfekt.
http://test3.theselfimages.dk/container.fla

Kan stadig ik' få det til at virke.
Blev du klogere af at se FLA fil?

Prøv den her :

num = 1;
max = 4;
function setString(num) {
    u = 'content/thesevendeadlysins/text/'+num+'.txt';
    i = ''+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() {
    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");
    //viewImage(1);
    timer = setInterval(viewImage,1000,1);
}

l = new LoadVars();
l.load(u);
l.onLoad = handler;
stop();

Hmm..
nu pauser den, og efter et stykke tid kommer Description text til syne,
men billedet kommer aldrig frem.

FUCK.. sorry.. min fejl. Havde overset den manglene sti.
NU VRKER DET! :)

ja jeg havde jo ikke lige overskud til at begynde på at lave mapper i mapper...

hehe! ..

Hvordan skal denne så se ud nu?
For at den pauser først, da viser billede+Description når der bladres?

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

Prøve at trace om den kalder "handler" igen - Det lyder ikke sådan.

Fatter det ik' helt.

Når jeg bladre frem, viser den billedet pang!!, og kører da viewImage henover det synlige billede. setInterval blir helt overuled. Blir ikke rigtigt klogere af det trace.

Sætter jeg handler() på Forward knappen så laver den en slags looper!!

tracer den de 2 igen ?

trace("cleared");
trans(speed)

wooow!!! Der er nogen der har fået dagen(og natten) til at gå hva.... Har i intet liv?? :) :) :)

Prøv at bruge denne handler:

function handler() {
    trace("billedet hentes");
    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");
    //viewImage(1);
    timer = setInterval(viewImage,1000,1);
}

Hvis du så skifter billede burde du få smidt en: "billedet hentes" i hovedet - hvis ikke så er der noget gruligt galt!!!

Forresten - hvis det trækker meget mere ud så må du nok oprette et nyt spørgsmål, så der kan komme flere med - desuden tror jeg at både du og Nikolaj er trætte - i har jo slet ikke fået sovet i nat :)

DRENGE! I er geniale! :) Kan kun takke og bukke!

Hehe! JA-- nikolajdu er helt pjattet med natteflash.
Det træk ikke længere ud end hertil. Men nu er alt
også helt perfekt. Jeg har overført det endelige
script til dette spørgsmål:

http://www.eksperten.dk/spm/450992
(hvis I kunne ha' lyst at hjælpe med den også)

Post et svar begge to for dette spørgsmål.
Tusind tak for hjælpen :)

Lars

jo jeg sov 2 timer i nat. 1 time til formiddag og en time til eftermiddag - hvad mere kan man forlange?

Vil du så ik' venligst poste et svar, inden du skvatter i søvn? :)

Lars

http://www.eksperten.dk/spm/450992
(hvis I kunne ha' lyst at hjælpe med den også)

Jo men jeg skulle da lige have noget at spise. Faktisk har jeg stort set ikke sovet andet end de timer de sidste par dage da hoste,nysen,frysen og alt det pjat har holdt mig vågen. Nåja og så ikke at forglemme spændingen ved at se udviklingen i det her spørgsmål.

Og hvis jeg rammer den rigtige knap så er her et svar.

Nikolaj der findes vist nok specielle centre for sådan nogle som dig... du kan stadig komme på eksperten - og det er sikkert sjovere med 15 mg morfin i blodet ;)

Fortsæt det gode arbejde styrmand - så kan det være du kan slå en kinesisk minearbejders arbejdstid...

og jeg kunne ikke ramme den rigtige knap...

Håber alle overlever! :)

pyroman - Du siger noget så jeg skifter lige brugernavn!

Kæft jeg er sej nu. ;-)

Tough enough for this? ;)
http://www.eksperten.dk/spm/450992

Må man poste et tillægsspørgsmål?

Hvad hvis der forekommer GIF billeder der også skal loades?
Skal man fast angive at der er tale om enten JPG eller GIF her:
i = 'content/thesevendeadlysins/images/'+num+'.jpg'; !?!

Eller kan man lige lave DOS tricket med /'+num+'.*'; !?!
:)

Jamen du kan slet ikke loade andet end jpg´s så der er ganske nemt.

Nå! rimelig plat! Hvorfor forholder det sig sådan?
Flash er da normalt GIF kompatibelt.

Jo du kan importere gif, png og alt muligt andet pjat, men du kan kun loade .jpg´s dynamisk.

ok!.. sådan må det være så.

Men jeg blir nødt til at preloade det JPG billede, ellers
vil både elasticMove og viewImage være afspillet inden selve
billedet kommer til syne. Jeg forestille mig at skulle Preloade mit
ImageHolder MC. Men hvor lægger jeg en Preloader, så jeg undgår ovenstående?
Og hvordan ser en sådan preloader ud?

Der henvises til: http://www.eksperten.dk/spm/450992


Til preloading af mainstage bruges 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);
}