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




 
 
SEGÉDLETEK Effektus-trükk

Maszk effekt - tárgy körvonalának megrajzolása
  feltöltve: 2004.12.01 | szerző: Trapsteve | olvasva: 20118 alkalommal

 
 

Adott egy rajz, lehet vektoros és pixeles is. Azt kell megoldani, hogy úgy nézzen ki mintha most rajzolná. Példáull egy autó körvonal valós időben rajzolódik ki. Egy maszkot meg lehet kézzel is rajzolni Shape Tween segítségével, egy-két keyframe használatával. De amikor a rajzok mennyisége felülmúlja a kézzel elkészíthető maszok számát, akkor erősen gondolkodóba estem.

ActionScript a megoldás!!! Itt a kép amit körbe kell futni és kirajzolni...

Első lépések - a trigonometria

A vektoros rajz előnyösebb, mert azonnal használható motion-guide-nak. Ha nincs akkor meg kell rajzolni. Készítsünk 1 db MC-t, ami körbejárja a rajzot. Nevezzük Pointer-nek. Erre azért van szükség, mert frame-nként leolvassuk a Pointer _x, _y koordinátáit. És felkiáltunk. Milyen egyszerű, össze kell köni a _currentframe-1 és a _currentframe-ban megkapott értékeket lineTo utasítással (x1;y1 to x2;y2). És még beállítjuk a .setMask-ot a megfelelő MC-re, aztán készen is vagunk. Hát NEM. Ugyanis a körvonal nem lehet maszk, csak kitöltött objektum. Tehát a vonalból fill-ezett négyszöget kell csinálni. A Flash menüben van 1 ilyen pont. Modify > Shape > Convert lines to fill. De ez most ActionScript, és itt nem leht a menüben vadászni a keresett funkciót.:-( Ezért nekünk kell írni 1 (lehetőleg) funciont, ami bemeneti értékként megkapja az x1;y1;x2;y2 koordinátákat, visszatérési értékként pedig x1',y1'...x4';y4'. És hogyan is számoljuk ki ezeket az értékeket? Azalábbi rajz sokat segít ennek a megértésében.

A trigonometrikai alapokat mindek kedves olvasónál feltételezem. Fontos +jegyezni: a Flash radiánba számolja a szöget, ami azt jelenti: 180° = Pi-vel.

Az Falsh-es megvalosítás

Kell 1 db üres MC, amiben majd lehet rajzolni a maszkot. Nevezzük Maszk MC-nek. A Korábban már létre hozott Pointer MC-ben 3 db Frame-t helyeztem el. Az 1-n tulajonképpen beállítottam a változókat, és értéket adtam nekik. A 2-ban hívon meg a függvényt, ami leképezi a vonalból a boxot (LineToBox). Majd a visszatérési értékeket fölhasználva a Maszk MC-ben megrajzolja a négysszöget.

with (_parent.mask){
     beginFill (0x0088FF);
     moveTo (points[1], points[2]);
     lineTo (points[3], points[4]);
     lineTo (points[5], points[6]);
     lineTo (points[7], points[8]);
     lineTo (points[1], points[2]);
     endFill();
}

A 3. frame szimpla gotoAndPlay(2); Ez a Frame-s megoldás ügy alakult ki, hogy amikor a Motion Tween-t készítettem, minden 1s KeyFrame-ben újból kellett definiálni a onClipEvent(load) és az onClipEvent(enterFrame) beállításokat. És nem volt jó sehogy. (Lehet hogy Én vagyok vállon felül gyenge, és keveset olvasom a ActionScript kézikönyeveket, de célravezető gyors megoldás kellett.) Tehát maradt a frame-nkénti script. 1x elinul a MC és fut az idők végezetéig, nekem meg csak pozicionálni kell a Motion Guide-ra.

A LineToBox Function

function LineToBox (xpre1, ypre1, x1, y1) {
     var xpre1, ypre1, x1, y1, angle, offset, TempPoints;
     offset = 8;
     
// az offset a vonalvastagság gyök2-vel (1.41) szorzott értéke
      angle = Math.atan2((y1-ypre1), (x1-xpre1))
     TempPoints = new Array()
     TempPoints[1] = xpre1 + offset*Math.cos(angle- Math.PI*0.75)
     // a Math.Pi*0.75 = 135°-al, amiT vagy hozzáadvani, vagy kivonni kell
     // ahhoz, hogy a megfelelő irányba mozgassa a koordinátákat.
     .
     .
     TempPoints[8] = ypre1 + offset*Math.sin(angle+ Math.PI*0.75)
     return (TempPoints);
}

Most már tesztelhetjük a movie-t (Ctrl + Enter).

Próbáltam értelemesen leírni a kód müködését, de beszéljen inkább a kód helyettem. Az igazán nagy butatója az egésznek a LineToBox function. Gondolok itt a Sin és Cos függvények alkalmazására.

Ja, igen a popntosság! Nekem a példában használt offset érték megfelelt. A maszk ezzel a módszerrel minden esetben csak közelítő sokszög lesz az eredeti 'valóban' göbéhez képest.

 
 
 
 

© 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 >>> : .. .