. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Navigáció, Scroll

Lassuló mozgással vezérelt csúszó scroll
  feltöltve: 2005.03.28 | szerző: summan | olvasva: 18549 alkalommal

 
 

Ebben a rövid, de hasznos segédletben a mind közkedveltebb és látványos lassuló mozgással vezérelt csúszó scrollt készítjük el. A tartalmat persze külső szövegfájlban adhatjuk meg.

A végeredmény:

Kezdjük el.. A fő time line első frame-jén készítsünk egy mozi klippet, kézzel.
Menü-Insert-New Symbol, válasszuk a Movie clipet, és nevezzük el textScroller -ként, majd OK.
Ezzel már is benne vagyunk az imént létrehozott mozi klippünkben, itt hozzunk létre 3 réteget (layer), a a rétegek: action, dragger,mask


A dragger layerünkön hozzunk létre egy tetszőleges ábrát, amit a csúszkának szánunk, ha megrajzoltuk,kijelölve azt, az F8 gyorsbillentyűvel alakítsuk mozi klippé, úgy hogy a regisztrációs pontja a bal felső sarokba kerüljön. A properties palettán Instace névnek adjuk meg: dragger

A mask rétegünkön rajzoljunk egy négyzetet, fontos hogy legyen kitöltése, s mint az előző esetben ezt is konvertáljuk mozi klippé, regpont a bal felső sarokban, instance: theMask és helyezzük el
_x és _y tengelyen a 0, 0 koordinátákra

Ezután jelöljük ki az action script layer első frame-jét, majd nyissuk meg az Actions palettát, ide írjuk az alábbi kódot:

// Létrehozunk egy üres mozi klippet, ami a "theText" instance nevet kapja
this.createEmptyMovieClip("theText", 50);
// a "thetext" mozi klippen belül létrehozunk egy dinamikus szövegmezőt, instance név "textb" lesz
theText.createTextField("textb", 100, 0, 0, theMask._width, 10);

// Beállítjuk a szövegmezőnk tulajdonságait
theText.textb.html = true;
/* Ez azért fontos, mert alapban kb. egy sor magasra készítettük a szövegmezőnket, így viszont átméreteződik a betöltött szöveg mértékétől függően*/
theText.textb.autoSize = true;
/* Beágyazott fontot használunk, a library-ban, add New font, linkage tetszőleges, mert nem azzal fogunk rá hivatkozni, hanem a font nevével, lsd. később "Verdana"
Jelen esetben a font kövér változatát is be kell ágyaznunk, mert az első sort így formáztam meg a külső szövegben, ezt a változatot is "verdana" névvel lássuk el
*/
theText.textb.embedFonts = true;
// Engedélyezzük a sortörést
theText.textb.wordWrap = true;
// A szövegmezőnk kijelölhetőségét megszüntetjük
theText.textb.selectable = false;


// forma néven új szövegformát hozunk létre, amit később a megjelenített szövegre alkalmazunk
forma = new TextFormat();
forma.font = "Verdana";
forma.size = 12;
forma.color = 0x8198BC;


/* Betöltjük a külső proba.txt file-t (UTF-8 kódolású szövegfile, amiben megvan határozva az adat nevű változó) */

var lev = new LoadVars();
lev.onLoad = levLoaded;
// Ha a töltés sikeres volt, a változó értékét a szövegmezőnkbe kiíratjuk és megformázzuk
function levLoaded(success) {
if (success) {
theText.textb.htmlText = lev.adat;
theText.textb.setTextFormat(forma);
// Ha a töltés sikertelen volt, hiba üzenetet generálunk, és szintén megformázzuk üzenetünket
} else {
theText.textb.htmlText = "Hiba!";
theText.textb.setTextFormat(forma);
}
}
lev.load("proba.txt");

// Dinamukas maszkoljuk a "theText" mozi klippünket a "theMask" instance nevű mc-vel
theText.setMask(theMask);

// A lassulás mértéken meghatározása
csillapitas=14
pos = 0;

// A scrollunkat a mask mozi mellé igazítjuk horizontálisan
dragger._x = theMask._width+20;
/* A dragger megnyomására draggelhetővé tesszük azt,az y irányú mozgást a mask magasságának megfelelően alakítjuk*/
dragger.onPress = function() {
startDrag(this, false, this._x, 0, this._x, theMask._height-this._height);

/* Itt meghívjuk a mehet függvényünket, ami a drag pozíciójához képest mozgatja a theText mc-nket, lassuló mozgássa */

mehet();
};

/* A csúszkánk elengedésével, vagy az egér klikkjének a felengedésével (ha nem a csúszka felett engedtük el akkor is) megszüntejük a drag-ot*/
dragger.onRelease = dragger.onReleaseOutside=function () {
stopDrag();

/* A sima statikus scrolloknál itt egy delete this.onEnterFrame következne, ez nekünk nem kell, mert ezzel megszüntetnénk a lassulást..*/
};
// Mehet függvényünk definiálása, egyenes vonalú,lassuló mozgás segítségével
function mehet() {
theText.onEnterFrame = function() {
tavolsag = (this._height-(theMask._height/1.3))/(theMask._height-dragger._height);
pos = -dragger._y*tavolsag;
this._y -= (this._y-pos)/csillapitas;
};
}

Ezzel készen is volnánk, most a time line-on lépjünk vissza a fő idősíkra, és a library-ból kézzel húzzuk vissza a színpadra a textScroller mozi klippünket.
CTRL+Enter lenyomásával már tesztelhetjük is munkánkat.

Ha valahol elakadnál, az alábbi segédletek nagyon hasznosak lehetnek:

A startDrag és a stopDrag alkalmazása
Dinamikus mozgások ActionScripttel - 2. rész
Statikus szöveg és moziklip scroll megoldások - 2.rész

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .