Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

Blind Effect

Induló fájlok letöltése    |    Végeredmény letöltése

Ezeket az előre elkészített hatásokat a Dreamweaver „TAG INSPECTOR” panelének „Behaviors” lapján található plusz gombra kattintva adhatjuk hozzá oldalunk elemeihez.

Adjunk is hozzá Blind hatást az első előre elkészített divünkhöz. Design nézetben kattintsunk divünk azon részére amelyet kattinthatóvá szeretnénk tenni, például a címszóra, majd a Behaviors panelen válasszuk a plusz gombot és a felugró menüben klikkeljünk az Effects, azaz hatás almenüpontban található Blind hatásra.
A Blind felugró ablak első lépéseként válasszuk ki divünket az ID azonosítója alapján, amelyre alkalmazni szeretnénk a hatást. Utána megadhatjuk a hatás időtartamát ezredmásodpercben, a típusát (bezáródó/ lenyíló), majd pedig a kezdeti és végső állapotainak méretét (százalékban / pixelben).

Ok –ra kattintva bekerülnek a forráskódba a szükséges SpryEffects.js javascript fájl meghívására szolgáló script tagek:

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

Valamint a divhez hozzáadódik egy onclick egérkattintás figyelés, minek köszönhetően a divre történő kattintással indulhat el a Blind hatás. Az indításra más egéreseményt, vagy akár billentyűleütést is választhatunk, a Behaviors panel, onclick-elemére kattintva egy felugró menüből.

Mentéskor egy Spry Assets könyvtár a meghívott SpryEffects.js javascript fájllal is mentésre kerül az oldalunk mappájába.

Amit így elértünk az egy összecsukható menüsor. Lássuk be ez így alapból még elég hasztalan, azonban egy pár soros kiegészítéssel a forráskódban, valamint a CSS stíluslapon már összecsukott állapottal is indulhat a menünk, melynek köszönhetően rengeteg helyet takaríthatunk meg az oldalunkon.

Összecsukott menü:
Ehhez nem kell mást tennünk, mint először is a stíluslapunkon megadjuk a divek kiinduló magasságát. A mellékelt példában a tartalom_container magasságát kell megadni:

.tartalom_container {
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	height:23px;
} 

A tényleges tartalom div magasságát érdemes auto-ra állítani, de ez az alapbeállítás is, így ha nem adunk meg magasságot a tartalom későbbi módosításakor sem érhet minket meglepetés. Persze ettől még az animált végső méretet hozzá kell majd igazítani. Magasság megadásakor arra kell figyelnünk, nehogy túlcsorduljon a szöveg.

Másodszor pedig ne az alap MM_effectBlind függvényt használjuk, hanem bátran írjunk sajátot, akár minden divhez más-más paraméterrel.
Például töröljük ki az alapként beillesztett MM_effectBlind -ot:

<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

Most az átláthatóság és az összetartozás jobb felismerhetősége kedvéért nem a head tag-be írtam a scripteket, ahogy rendszerint kell, hanem az egyes divek után illesztettem be őket.

1 div-re alkalmazva a hatást:

<script type="text/javascript">
		var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});
	</script>

Nézzük meg mit is takar ez a pár sor:

- Először is meghatározásra kerül a script kód típusa, tehát jelzi a böngészők számára, hogy javascript következik:

<script type="text/javascript">

- El is érkeztünk a lényeges részhez. Itt meghatározzuk egy változóban a mozgásunk paramétereit. A változónkat elnevezzük blind1-nek, amely a Spry Effectet hívja meg a kívánt div-nél, tehát most a Tartalom 1div-re kattintáskor. Utána megadásra kerül a hatás hossza, az induló méret, majd a végső méret.

var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});

Végül pedig a divünk header részében az onclick eseménynél cseréljük ki a meghívást az MM_effectBlind-ról az újonnan beírt blind1-re:

<p class="header" onclick="blind1.start();">Tartalom 1</p>

3 div-re alkalmazva a hatást:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spry - Blind effect</title>
<link href="spry_effects_blind_close.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
</head>

<body>
<div id="Container">
  <div class="tartalom_container" id="Tartalom 1">
    <p class="header" onclick="blind1.start();">Tartalom 1</p>
    <p class="tartalom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

   <script type="text/javascript">
		var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});
	</script>

  <div class="tartalom_container" id="Tartalom 2">
    <p class="header" onclick="blind2.start();">Tartalom 2</p>
    <p class="tartalom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

   <script type="text/javascript">
 var blind2 = new Spry.Effect.Blind('Tartalom 2', {duration: 500, from: '23px', to: '100px', toggle: true});
</script>

  <div class="tartalom_container" id="Tartalom 3">
    <p class="header" onclick="blind3.start();">Tartalom 3</p>
    <p class="tartalom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

  <script type="text/javascript">
 var blind3 = new Spry.Effect.Blind('Tartalom 3', {duration: 200, from: '23px', to: '100px', toggle: true});
</script>

</div>
</body>
</body>
</html>

Végül, de nem utolsó sorban tegyük láthatóvá a fejlécek kattinthatóságát a kurzor kézfejjé változásával, azaz a header CSS stílusához adjuk hozzá a cursor:pointer; tulajdonságot.

Ezeket ismerve már bátran variálhatjuk kedvünk szerint a menük működését.

Az eredmény:

Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

Kurzor mozgásának követése:

1. Készítsünk bármilyen MovieClip szimbólumot, mondjuk egy plussz jelet.
2. Action Panelt behívva [F9], írjuk rá a következő kódot a szimbólumunkra:

onClipEvent (load) {
	egermutatosebesseg = 10;
}

//az egérmutató aktuális pozíciójához igazítja a szimbólumunkat
//sebességgel leosztva egyenletesen lassuló mozgást kapunk

onClipEvent (enterFrame) {
	_x += (_root._xmouse-_x)/egermutatosebesseg;
	_y += (_root._ymouse-_y)/egermutatosebesseg;
}

Kurzor ikonjának lecserélése:

1. A követés mintáján szintén készítsünk egy tetszőleges MovieClip szimbólumot (plussz jelet).
2. Action Panelt behívva [F9], írjuk rá a következő kódot a szimbólumunkra:

onClipEvent (load){
//elrejtjük a kurzort
     Mouse.hide();
}
//A kurzor koordinátáival tesszük egyenlővé a szimbólumunkét, azaz lecseréltük
onClipEvent (mouseMove){
     _x = _root._xmouse;
     _y = _root._ymouse;

//frissíti a képernyőt amint elmozgattuk a kurzort, ettől szebb lesz az eredmény
     updateAfterEvent();
}

Szerkesztő fájl letöltése

Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

Forgó Földgömb

Kontinensek:

1. Kontinensek létrehozása. Erre számos képet lehet találni az interneten, én a mellékletben szereplőt használtam, melyet már kissé egyszerűsítettem photoshop segítségével. Importáljuk a képet flashbe, majd a színpadra helyezve konvertáljuk Graphic szimbólummá [F8] („terkep_graphic”).
2. Konvertáljuk MovieClip szimbólummá [F8] („terkep_mc”).

3. Az alt gomb nyomva tartása mellett húzzuk az eredeti mc mellé, így megkapjuk a „terkep_mc” másolatát. A két MovieClip -et igazítsuk egy vonalba és egymás mellé, majd konvertáljuk a kettőt együtt ismét MovieClip szimbólummá [F8](„terkepek_mc”). A property paneljén írjuk be instance névnek a „terkep” -et.

   
4. Hozzunk létre egy új réteget („kör_maszk”), legyen ez a legfelső rétegünk, mivel maszkként fogjuk alkalmazni. Rajzoljunk rá egy tetszőleges nagyságú kört [o] az alábbi módon, majd jobb klikk ezen a rétegen és állítsuk be mask -nak.
   
   

Háttér:

1. Másoljuk le a maszkhoz készített és már jól elhelyezett körünket és illesszük egy új „kör_háttér” nevű rétegre, melyet legalsó rétegként állítunk be. Kijelölése után a Color palettán alkalmazzuk a következő beállításokat:

Color Type: Radial
első szín: #BCF1FE
második szín: #01748F

Mozgás:

A mozgást egy egyszerű ActionScript kóddal érjük el, amit ugyan elkerülhettünk volna, ha mondjuk Motion Tween-t alkalmazva elmozdítjuk a térképet, de ez a kód egyszerű és más animációknál is nagy segítséget jelenthet az ismerete.

Lássuk, hogyan is néz ki az ActionScript2 kódunk :

Készítsünk egy új réteget az első helyre, nevezzük el „Action”-nek. Nyissuk meg az Action panelt [F9] és másoljuk be a következő kódot:

//sebesség meghatározása
var speed = 1;
this.onEnterFrame = function()
{
 //A térkép pozíciója, mozgása
 terkep._x = terkep._x-speed;

 //ha a térkép x értéke eléri a -275 -ös értéket
 if (terkep._x == -275)
 {
 //akkor az x= -42 -re ugrik
 terkep._x = -42;
 }
};

Az x értékeket mindenki a saját “terkep” MovieClip -jéhez igazítva adja meg.

Gyakorlatilag készen is vagyunk a lényeggel, ezek után grafikailag mindenki tetszés szerint módosíthatja alkotását.
Tesztelhető a példa fájlunk [ctrl+F8]

Szerkesztő fájl letöltése

Szerző: perhiniak

Formatervező és grafikus.
Az FX designport alapítója.
Hivatalos Adobe szakember és oktató.

Ha magunk szeretnénk hasonló képsorozatot készíteni, akkor lehetőleg állványról fotózzunk. Ha ez nem lehetséges, akkor kézből fotózva ügyeljünk arra, hogy ne nagyon mozdítsuk el a kamerát a sorozat elemei között. Továbbá arra is ügyeljünk, hogy manuális módban fotózzuk, tehát ne változzon a rekeszérték, a záridő és az ISO érték a sorozat készítése során. Az optika fókuszállítását is váltsuk át manuálisra és így keressük meg a megfelelő fókuszt. Ez szintén azt garantálja, hogy a sorozatunk elemei ugyanolyan mélységélességgel és fókusszal készülnek, így segítve a montázs élethűségét. Az alábbi képen láthatjuk a végeredményt és alatta az elkészítéshez használt 5 darab eredeti fotót:

Ha a képeink elkészültek, akkor keressük meg őket a számítógépünkön a Bridge segítségével. Ez a szoftver az Adobe szoftverek kísérőalkalmazása, ami a lehető legjobb fájlmenedzselő program vizuális szakemberek számára. Azon kívül, hogy sok praktikus szűrési, keresési megoldást nyújt néhány automatizálási folyamatot is elindíthatunk belőle közvetlenül. Így például jelen példában az 5 képünket kiválasztjuk (Ctrl/Cmd+A, ha nincs más a mappában) majd a Tools/Photoshop/Load files into Photoshop layers kiválasztva a Bridge automatikusan behozza számunkra egy Photoshop dokumentumba, külön rétegekre az 5 képet.

Az így kapott Photoshop fájlban a legfelső rétegre került képet látjuk még csak egyenlőre. Ahhoz, hogy előkerüljön a többi képről is a modell maszkolnunk kell majd az összes réteget, a legalsót leszámítva. Először azonban meg kell győzödnünk, hogy mind az 5 réteg tartalma tökéletesen fedi egymást. Ehhez a Photoshop intelligens képösszehasonlító és illesztő parancsát fogjuk használni: Edit/Auto-Align Layers. Ügyeljünk azoban arra, hogy mielőtt ezt elindítjuk jelöljük ki az összes réteget a Layers panelről:

Ha így kiválasztjuk a képen is látható parancsot kapunk egy menüt, ahol eldönthetjük, hogy milyen vetítési, képtorzítási módosításokat engedélyezünk a programnak. Ezek közül az Auto funkció tud a legszabadabban módosítani a rétegtartalmakon, és ennek köszönhetően a legtöbb esetben ezzel érhetjük a legjobb eredményt is. Válasszuk hát most ezt ki:

Ez a parancs átmozgatja és megtorzítja egy kicsit a rétegeket, ahhoz, hogy tökéletes fedésbe kerülhessenek. Ha állványról fotóztunk és még távkioldót is használtunk, akkor szinte egyáltalán nem kell majd a Photoshop-nak ilyenkor dolgoznia, de ha kézből fotózott sorozatot használunk, akkor ezután biztos keletkeznek üres sarkok a dokumentumon belül, amiket vágjunk is le egyből a Crop tool segítségével (C). Ha idáig megvagyunk, akkor kezdődhet a maszkolás!

A legfelső réteghez adjunk hozzá egy teljesen kitakart rétegmaszkot (Layer/Layer mask/Hide all). Ezt gyorsan úgy is elérhetjük, ha a Layers panel alján lévő rétegmaszk ikonra úgy kattintunk, hogy közben nyomva tartjuk az Alt gombot. Ha ezzel megvagyunk, akkor a legfelső rétegünk teljesen láthatatlanná válik és a közvetlenül alatta lévő réteg jelenik meg. A feladatunk most az, hogy az elkészült rétegmaszkban átrajzoljuk fehérré azt a részt, ahol az adott rétegen a modell található. Ahhoz, hogy könnyebb legyen a dolgunk használjuk a CS4-es verzióban bevezetett Masks panelen található Density paramétert, mellyel a rétegmaszkunk áteresztőképességét módosíthatjuk dinamikusan. Vegyük ezt most le kábé 60-70%-ra, és így már látni fogjuk halványan a kitakart alakot a rétegen. Ha valaki nem rendelkezik ezzel az új verzióval, akkor egy kicsit nehezebb belőnie, hogy hova kell rajzolnia, de enélkül is meg lehet oldani a dolgot, csak egy kicsit talán tovább tart a rajzolgatás.

Ez után válasszuk ki az ecsetet (B) és kezdjünk el festeni a fehér színnel és lágy élő ecsettel a halványan megjelent alak fölé, mígnem az teljesen láthatóvá nem válik. Ha jól dolgoztunk, akkor a rétegünk melletti rétegmaszkban látni fogunk egy fehér foltot:

Ha ezzel megvagyunk visszaállíthatjuk a maszkunk 100%-os telítettségét a maszkok panel Density paraméterével. Ezzel meg is vagyunk az első réteggel, hiszen mostmár a legfelső és az alatta levő rétegen lévő alakot egyszerre látjuk. Innentől kezdve ugyanezt a folyamatot kell lefelé haladva folytatni. Csak emlékeztetőül tehát:

1. Feketével kitöltött maszk hozzáadása a réteghez
2. Denzitás vissza 70%-ra
3. Fehér színnel rajz a halványan megjelent alakra, míg elő nem tűnik teljesen
4. Maszk denzitása vissza 100%-ra

Ha tiszta és precíz munkát akarunk végezni, akkor meg is vizsgálhatjuk a maszkjainkat közelebbről. Ehhez kattintsunk a maszkok bélyegképére Alt gombot nyomva tartva. Ilyenkor belépünk a maszk nézetbe:

Ebben a nézetben rajzolva a rétegmaszkot tudjuk finomítani, módosítani. Ha ki akarunk ebből a nézetből lépni, akkor újra kattintsunk Alt-tal együtt valamelyik rétegmaszk bélyegképére. Ha jól dolgoztunk, akkor a végeredmény a rétegmaszkokkal együtt valahogy így fest:

Mindenkinek jó kísérletezést kívánok és várom a kommentek között az elkészült montázsokat!

Szerző: perhiniak

Formatervező és grafikus.
Az FX designport alapítója.
Hivatalos Adobe szakember és oktató.

Ha fotóztunk már digitális fényképezőgéppel, akkor biztos találkoztunk a hátsó kijelzőn megjelenő furcsa ábrával, mely leginkább egy domborzat metszeti képére hasonlít. Ezt a legtöbben reflexből eltüntetik, hogy ne zavarja őket. Ezt az ábrát nevezik hisztogramnak, mely a digitális képek teljes tónuseloszlását mutatja meg számunkra.

A fenti példán keresztül könnyen érthetővé válik, hogy pontosan mit is jelent egy kép tónuseloszlása és ez hogy jelenik meg a hisztogramon. Egy kép tónusait három fő tartományra bontjuk fel: árnyékok, középtónusok és csúcsfények. A fénykép készítésekor beállított rekeszérték, záridő és ISO érzékenység befolyásolja leginkább, hogy az adott témát milyen tónuseloszlással rögzítjük. A bal oldali kép jellegzetesen túlexponált. Ilyenkor a hisztogram erősen jobbra tolódik el, azaz a csúcsfényekből található a legtöbb a képen belül, míg középtónusból már kevesebb, árnyékokból pedig szinte semennyi. A jobb oldali kép ennek pont az ellenkezője. Ezt alulexponált képnek nevezzük, ahol a hisztogram erősen balra tolódik el.

A hisztogram csupán egy információs eszköz, melynek segítségével könnyebben tudjuk diagnosztizálni a digitális képeket, és persze segítségükkel a korrekciókat is szakszerűbben tudjuk alkalmazni.

A fent látható képet megnyitva Photoshop-ban és kiválasztva a Hisztogram panelt megvizsgálhatjuk közelebbről, hogy mivel tudnánk javítani a tónuseloszláson. A Hisztogram panel lenyílómenüjéből ajánlott kiválasztani az Expanded opciót és átállítani a Channel lenyíló menüt RGB-re. Ha az All Channels View-t választjuk, akkor a színcsatornákat külön-külön hisztogramok formájában is láthatjuk.

Mégis mit állapíthatunk meg erről a képről? Jól látszik a hisztogramon, hogy sok árnyékos részlet és sok csúcsfényes részlet van rajta, de nagyon kevés középtónus. Az ilyen képek minden esetben nagyon kontrasztosak. Lehet ezen valahogy segíteni? Természetesen lehet, méghozzá nagyon látványos javulást érhetünk el. Abban az esetben szerencsénk van, ha a képünk hisztogramja egyik irányban sem éri el szélsőértéket (azaz nem tolódnak a “hegycsúcsok” teljesen a jobb, vagy bal szélre). Ennél a képnél bár nagyon közel van mindkét oldal a szélső értékhez, de mégsem érik el, tehát jól korrigálható a kép tónusállománya. Abban az esetben ha mondjuk felül a szélsőértéket elérné a hisztogram, akkor a képünkön lennének teljesen fehér képpontok, melyek szinte használhatatlanok a kép javításához. A valóságban nem létezik teljesen fehér, vagy teljesen fekete, de sajnos a digitális fényképek esetében könnyedén előfordulhat, hogy rosszul exponált képeknél találkozunk abszolút fekete, vagy abszolút fehér képpontokkal.

Nézzük hát, hogy mire van szükségünk a kép feljavításához. A tónuskorrekciókat az Image menü alatti Adjustments-ben találhatjuk, és ezek közül is nekünk most a Shadow/Highlights korrekció kell. Ennek segítségével szelektíven tudjuk az árnyékokat és csúcsfényeket módosítani. Az alább látható módon jön be alapértelmezett állapotban ez a parancs egy ablakban. Érdemes a Hisztogram panelünket is kéznél tartani folyamatosan, mikor tónusokat korrigálunk.

A menüben található Shadows csúszka minél magasabb értéket vesz fel, annál jobban világosodni fognak az eredetileg árnyékos részletek, míg a Highlights csúszka növekedése az eredeti csúcsfények sötétedését fogja eredményezni. Ha mindeközben a hisztogramunkat is figyeljük, akkor láthatjuk, hogy egy szürke verzió mutatja az eredeti állapotot, míg feketén már a módosított hisztogramot látjuk. A példaként vett képet úgy tudjuk javítani, ha mindkét paramétert 30-40% környékére emeljük és így pótoljuk a hiányzó középtónusokat a képünkből. Ezt úgy is nevezhetjük, hogy befésültük a hisztogramot középre (ez kevésbé szakszerű, de képletesebb megfogalmazás).

Ha messziről nézzük a korrekciót azt gondolhatnánk, hogy jó munkát végeztünk, de sajnos közelről nézve előjön a nemkívánt hiba: a képen látható férfi körvonala mentén egy furcsa fénycsóva jelenik meg (mintha mágikus aurája lenne, amit persze normál esetben nem szeretnénk látni a képen). Az alábbi képen ezt közelebbről is meg lehet nézni:

Ha ezt a hibát szeretnénk elkerülni, akkor mielőtt elfogadnánk a Shadow/Highlight parancsot kattintsunk a menü alján található Show more options gombra. Ne ijedjünk meg: az alábbi félelmetesen sok beállítási lehetőség fogad majd minket:

Számunkra ezek közül ami most fontos az a Highlights szekción belüli Radius paraméter. Ezt húzzuk le nullára. Láthatóvá válik ezen keresztül, hogy a Radius paraméter határozza meg, hogy a kontrasztos határok mentén millyen széles átmenet mellett léphetnek életbe a kezdeményezett módosítások. Ha nagy a radius érték, akkor óvatosan kezeli a kontrasztos részletek közelében a tónusokat a korrekció, míg ha alacsony ez az érték, akkor drasztikusan megközelíti az ilyen kontúrokat. Jelen esetben nekünk az “aura” eltüntetéséhez az alacsony radius értékre volt szükségünk. Ha ugyanezt a paramétert szintén nullára húzzuk le a Shadows szekcióban, akkor már nem kívánt eredményt érünk el. A fenti kép alapján elfogadva sikeresen korrigáltuk a képet, és most nézzük meg egymás mellett összehasonlítva a kiinduló és javított állapotot:

Jól megfigyelhető, hogy miként változott meg a hisztogramunk a korrekció hatására. A tanúlság az, hogy a hisztogram és a képek tónusállományának ismeretében sokkal magabiztosabban választhatjuk meg korrekcióinkat. A hisztogramokkal kapcsolatban még érdemes megismerkednünk a Curves és a Levels korrekciókkal, de ezeket majd egy másik tutorial keretében mutatom be.

Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

XML- alapú fotógaléria

Előkészületek:

Előszőr is készítsünk egy „xml galéria” nevű mappát, melyben a fájlokat fogjuk tárolni. Ebben a mappában hozzunk létre egy xml fájlt. Például nyissuk meg a notepad -et és az üres dokumentum mentésénél válasszuk az UTF-8 –as kódolást, névnek pedig írjuk be a „galeria.xml”-t. Szükségünk lesz még „GaleriaKepei” nevű almappára. Töltsünk le 4db azonos méretű képet ebbe a mappába.

Az .fla és .swf fájlok szintén az „xml galéria” nevű mappába kerülnek majd, azonos szintre az xml fájllal.

Galéria XML része:

Az xml segítségével lehetőségünk nyílik a galéria tartalmának gyors és egyszerű módosítására, mindenféle bonyolult programozási tudás nélkül, úgy, hogy csak egy képfájl nevét írjuk át a külső xml fájlban.

A galeria.xml fájlba a következőket másoljuk:

<?xml version="1.0″ encoding="utf-8″ standalone="yes"?>

<galeria>

<kep>

<utvonal>GaleriaKepek/1kep.jpg</utvonal>

<kepleiras>Első kép</kepleiras>

</kep>

<kep>

<utvonal>GaleriaKepek/2kep.jpg</utvonal>

<kepleiras>Második kép</kepleiras>

</kep>

<kep>

<utvonal>GaleriaKepek/3kep.jpg</utvonal>

<kepleiras>Harmadik kép</kepleiras>

</kep>

<kep>

<utvonal>GaleriaKepek/4kep.jpg</utvonal>

<kepleiras>Negyedik kép</kepleiras>

</kep>

</galeria>

Diavetítés Flash része

Nyissunk egy új flash dokumentumot, melynek méretei: 510x 400px, háttérszíne: #333333

Képek megjelenítése:

Hozzunk létre egy Movie Clip-et [ctrl+f8], nevezzük „kep_mc”-nek.

Nevezzük el a rétegünket „Foto”-nak. Húzzuk a színpadra az előbb készített Movie Clip-et, majd állítsuk be a property panelon a „kep” instance nevet, melyre az actionscript kódban fogunk hivatkozni.

Képleírások megjelenítése:

Hozzunk létre egy új réteget, nevezzük el „Szöveg”-nek, majd készítsünk rajta egy szövegdobozt, melynek típusa dynamic text, instance neve pedig „kepleiras” .

Előtöltő csík készítése:

Hozzunk létre egy „elotolto_mc” nevű MovieClipet [ctrl +F8]. Rajzoljunk bele 100x3px-es #0000CC színű, keret nélküli téglalapot a Rectangle Tool-lal [R]. Lépjünk vissza a főjelenetbe (Scene1), hozzunk létre egy „Előtöltő” nevű réteget és húzzuk rá az „elotolto_mc” MovieCliepet. Igazítsuk a színpad közepére, Instance neve pedig legyen „elotolto”.

Ezen a rétegen rajzoljunk még egy szövegdobozt [T] az előtöltő csík alá. Típusa legyen dynamic text és adjuk neki a „szamlalo” instance nevet. A szöveg színe legyen fehér, majd igazítsuk a doboz közepére. Ebben a dobozban fogjuk kiiratni a képek töltöttségét százalékban mérve.

Léptető gombok:

Készítsünk új réteget: Gombok.

Tegyünk a színpadra két gombot (pl.: Windows/Common Libraries/Buttons/Circle Buttons/ Circle with arrow gombot). Az egyik instance neve legyen „elore_gomb”, a másiké „hatra_gomb”, majd fordítsuk irányba őket (<- ->).

Actionscript:

Készítsünk egy új réteget az első helyre, nevezzük el „Action”-nek. Nyissuk meg az Action panelt [F9] és másoljuk be a következő kódot:

// meghatározunk egy XML objektumot, amit "sajat_xml”-nek nevezünk el

sajat_xml = new XML();

// behívjuk a külső XML fájlunkból az adatokat a "sajat_xml” objektumunkba

sajat_xml.load(”galeria.xml”);

// letiltjuk a "white spaces”-t, ez gyakorlatilag a szóközök figyelmenkívül hagyását jelenti

sajat_xml.ignoreWhite = 1;

// mi történjen, ha betöltődtek az adatok … Meghívunk egy „function” -t, "loadData”  ebben az objektumban futtassa

sajat_xml.onLoad = loadData;

count = 0;

// function tartalma

function loadData() {

total = sajat_xml.firstChild.childNodes.length;

// Vegye az adatokat az XML-soraiból (sorok: 0,1,2) és helyezze el a szövegmezőben

kepleiras.text = sajat_xml.firstChild.childNodes[count].childNodes[1].firstChild.nodeValue;

kep.loadMovie(sajat_xml.firstChild.childNodes[count].childNodes[0].firstChild.nodeValue,1);

}

//Előtöltő

this.onEnterFrame = function()

{

filesize = kep.getBytesTotal();

loaded = kep.getBytesLoaded();

elotolto._visible = true;

szamlalo._visible = true;

if (loaded != filesize)

{

elotolto._width = 100*loaded/filesize;

szamlalo.text = Math.round((loaded/filesize)*100)+”%”;

} else

{

elotolto._visible = false;

szamlalo._visible = false;

if (kep._alpha<100)

{

kep._alpha += 10;

}

}

};

//Gombok

elore_gomb.onRelease = function()

{

if (count<(total-1))

{

count++;

loadData();

} else

{

count = 0;

loadData();

}

};

hatra_gomb.onRelease = function()

{

if (count>0)

{

count–;

loadData();

} else

{

count = total-1;

loadData();

}

};

Most már tesztelhetjük a galéria működését [ctrl+F8] !

Keret, háttér:
Gyorsan végezzünk el pár lépést, hogy valahogy ki is nézzen a fotó galériánk.

Készítsünk keretet és hátteret a képeinknek:
Hozzunk létre egy keret nevű réteget. A Rectangle Tool-lal [R] rajzoljunk 410×308 px nagyságú, #CCCCCC keretszínű, #666666 kitöltésű téglalapot, majd igazítsuk a színpad közepére. Ezután csak a keret bal felső sarkához kell igazítanunk a „Foto” rétegen található „kep_mc” Movie Clip-et, hogy a képek illeszkedjenek a keretbe.

A következő kiegészítés egy keret lesz az előtöltő csíkhoz. Rajzoljunk 102×6 px nagyságú téglalapot a Rectangle Tool-lal [R], melynek nincs kitöltő színe, csak fekete kerete. Igazítsuk a színpad közepére, így pont az előtöltő csík mögé kerül, és ennek köszönhetően úgy fog látszani, mintha ezt a keretet töltené ki a betöltődés során.

Készen is vagyunk! Tesztelhető a fotógaléria [ctrl+Enter]!

Szerkesztő fájlok letöltése

Szerző: perhiniak

Formatervező és grafikus.
Az FX designport alapítója.
Hivatalos Adobe szakember és oktató.

A alábbi képen láthatjuk az elkészült fotómontázst és az összeállításhoz használt rétegeket. Azok számára, akik jártasak a program használatában innen már nem is kell tovább görgetniük, hiszen a rétegek panel elemei magukért beszélnek. Azoknak viszont, akiknek ez még nem elég segítség következzen a részletesen bemutatása ennek a montázsnak.

Kiindulásképpen egy átlagos színes fotót használunk. Az egyrétegű képfájlok (mint például a JPEG) háttérrétegként nyílnak meg a Photoshop-ban. Ezt jelen esetben hagyhatjuk ebben a félig zárolt formában, csak egy rétegmásolatot kell róla csinálnunk. Ezt többféleképpen tehetjük meg:
- jobb kattintás a rétegre, majd Duplicate layer
- ráhúzzuk a réteget a Layers menü alján lévő New layer ikonra
- a felső menüsorból kiválasztjuk: Layer/Duplicate layer
- beállíthatunk ehhez a parancshoz egy billentyűparancsot is
(én az F2 funkcióbillentyűt használom hozzá mindig, amit könnyen el tudok érni).

A duplikált réteg és a háttérréteg most egyenlőre ugyanazt tartalmazza. Válasszuk ki az alsó réteget és hozzunk létre egy Black and White korrekciós réteget. Ezt a CS3-as és korábbi verziók esetében a rétegek panel alján lévő ikonból tudjuk kikeresni, a CS4-es verzió óta viszont használhatjuk erre a célra a sokkal praktikusabb és kényelmesebb Adjustments panelt is. Ennek az újításnak a célja az volt, hogy a korrekciós rétegek ne külön menüben ugorjanak fel, amik mindig útban vannak és nem látjuk tőlük a képet, hanem legyenek szépen rendezett formában mindig egy panelen belül.

Ne lepődjünk meg, ha a korrekciós réteget hozzáadva a montázshoz nem történik egyelőre semmi változás. A korrekciós rétegek mindig úgy működnek, hogy csak a rétegsorrendben alattuk lévő rétegekre fejtik ki hatásukat. Nagy előnyük, hogy nem véglegesülnek soha, az Image/Adjustments menüből kiválasztott korrekciókkal ellentétben, így könnyedén tudjuk a helyzetüket, vagy beállításaikat utólag is módosítani. Ha kikapcsoljuk a felső réteget akkor láthatjuk, hogy az alsó réteg a fölé helyezett Black and white korrekcióval együtt már fekete-fehérré változott. Mostmár csak a felső színes réteget kell kezelésbe vennünk, ami még egyenlőre teljesen eltakarja az alsó színtelen verziót.

Ahhoz, hogy kitakarhassunk egy rétegből részleteket mindig a maszkolást használjuk, lehetőleg sose a radír eszközt. A radírozással, vagy törléssel véglegesen elvesztjük az eltűntetett részleteket, míg a maszkolással csak ideiglenesen takarjuk őket ki. Ez sokkal rugalmasabb munkamenetet enged meg. A rétegmaszk létrehozását érdemes a legtöbb esetben egy kijelöléssel kezdenünk. Most is csináljunk egy téglalap kijelölést a Rectangular Marquee eszközzel (M a gyorsbillentyűje), ami a színes kép kerete lesz majd. Ezt forgassuk el még mielőtt maszkot csinálnánk belőle. A kijelölésünket úgy tudjuk a tartalomtól függetlenül méretezni és forgatni, hogy kiválasztjuk a menüsorból a Select/Transform Selection parancsot. Ilyenkor a kijelölésünk szélén megjelennek a vezérlőpontok, melyek közül az egyik sarokpont közelében kattintva és nyomvatartva az egeret manuálisan elforgathatóvá válik a kijelölésünk. Ezt a módosítást egy Enter leütésével elfogadhatjuk.

Az így elkészült ferde téglalap kijelölésünket fogjuk hozzáadni a felső rétegünkhöz, de ügyeljünk arra, hogy ez a réteg legyen kiválasztva. A rétegmaszkot szintén több helyről érhetjük el:
- a Layers menü alján lévő Add layer mask ikonnal (balról a harmadik)
- a CS4 verzió óta elérhető Masks panel jobb felső részén található ikonnal
- a menüsorból a Layer/Layer mask/Reveal selection
(és ha a menüsorból erre a parancsra beállítunk valamilyen billentyűparancsot, akkor legközelebb egy gombnyomásra tudunk rétegmaszkot létrehozni kijelölésből).

Most hogy már megvan a maszkunk ideje hozzáadni ehhez a maszkolt felső réteghez a rétegstílusokat. Ezeket úgy érjük el, ha duplán kattintunk a Layers panelen belül az adott réteg bélyegképétől jobbra lévő üres területre, ami kéken világít (ne a réteg nevére, mert azzal a réteget fogjuk tudni átnevezni). Ha jól csináltuk, akkor feljön a Layer style ablak, ahol a következő két pipát tegyük hozzá: Drop shadow és Stroke. Ezek részletes beállításait úgy érhetjük el, hogy a pipálás után a nevükre kattintunk. Az általam használt pontos paraméterek a következőek:

Végül pedig még egy hasznos tipp: ha a rétegmaszkot leválasztjuk a rétegtartalomtól (a lánc ikonra kell kattintani a réteg bélyegképe és a maszk bélyegképe között), és a maszkot kiválasztjuk (rákattintunk a maszk bélyegképére), akkor a mozgató eszközzel (V a gyorsbillentyűje) át tudjuk pozícionálni a színes keretet a képen belül. Így könnyen tudunk utólag is komponálni.

Ebből a tutorialból a következőket érdemes megjegyezni és használni:
- korrekciós rétegek alkalmazása
- kijelölésből rétegmaszk mentése
- rétegstílusok használata
- maszk leválasztása és külön mozgatása a rétegtartalomtól.

Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

XML- alapú diavetítés

Előkészületek:
Előszőr is készítsünk egy „xml diavetítés” nevű mappát, melyben a fájlokat fogjuk tárolni. Ebben a mappában hozzunk létre egy xml kiterjesztésű fájlt. Például nyissuk meg a notepad -et és az üres dokumentum mentésénél válasszuk az UTF-8 –as kódolást, névnek pedig írjuk be a „diavetites.xml”-t. Szükségünk lesz még egy „DiavetitesKepei” nevű almappára is, amelyben helyezzünk el 4db azonos méretű képet. (Nálam 400×300 px.)

Az .fla és .swf fájlok szintén az „xml diavetítés” nevű mappába kerülnek majd, azonos szintre az xml fájllal.

Diavetítés XML része:
Az xml segítségével lehetőségünk nyílik a diavetítés tartalmának gyors és egyszerű módosítására, bővítésére mindenféle bonyolult programozási tudás nélkül, úgy, hogy csak egy képfájl nevét írjuk át a külső xml fájlban.
diavetites.xml fájlba a következőket másoljuk:

<?xml version=”1.0″ encoding=”utf-8″ standalone=”yes”?>

<diavetites delay=”3000″>

<kep>

<utvonal>DiavetitesKepek/1kep.jpg</utvonal>

<kepleiras>Első kép leírása</ kepleiras >

</ kep >

<kep>

<utvonal>DiavetitesKepek/2kep.jpg</utvonal>

<kepleiras>Második kép leírása</ kepleiras >

</kep>

<kep>

<utvonal>DiavetitesKepek/3kep.jpg</utvonal>

<kepleiras>Harmadik kép leírása</ kepleiras >

</kep>

<kep>

<utvonal>DiavetitesKepek/4kep.jpg</utvonal>

<kepleiras>Negyedik kép leírása</ kepleiras >

</kep>

</ diavetites 

Ebben az esetben relatív hivatkozást használtunk a képfájlok elérésére, ami a merevlemezről működtetés esetében helytálló, azonban, ha a képek az interneten találhatóak, vagyis onnan szeretnénk betöltetni őket, akkor ez nem működhet. Ilyenkor abszolút hivatkozást kell alkalmazni (http://WeboldalCíme/MappaNeve/KépNeve)

<diavetites delay=”3000″> -- két kép váltása közti időt határozza meg milliszekundumban.

<kepleiras> ide kerülnek a képről közlendő információink</ kepleiras >

Diavetítés Flash része:
Készítsük el a felhasználói felületet.
Nyissunk egy új ActionScript 2.0 –t használó flash dokumentumot (Diavetites.fla).
A Property panelen a következő paramétereket állítsuk be [ctrl+j]:
- width = 400px
- height = 300px
- background = black

Képek megjelenítése:
Nyomjunk [ctrl+f8] -at egy új szimbólum létrehozásához. Nevezzük el „kep”-nek és válasszuk a Movie Clip típust. Ezzel hozzáadtunk egy „kep” nevű „Movie Clip”-et a Library panelhez.
A Timeline-on adjuk a rétegünknek a „képek” nevet.
Húzzuk be a „kep” szimbólumunkat a színpadra, igazítsuk a bal felső sarokba és gépeljük be a „kep”-et instance névnek. Később az actionscriptben, majd erre az instance névre kell hivatkoznunk.

Képleírások megjelenítése:
Hozzunk létre egy új réteget, nevezzük el „szöveg”-nek.
Szükségünk lesz egy dinamikus szöveg dobozra, ezt a Text tool-lal [T] hozhatjuk létre az új rétegünkön . Rajzoljunk egy szövegdobozt a színpadra és a property paneljén állítsuk a szöveg típusát, Dynamic Text-re. Instance névnek pedig írjuk be a „kepleiras”-t.
Igazítsuk a szövegdobozt, mondjuk a bal alsó sarokba, így ott fognak megjelenni a képleírások. (Ábra 1.)

Actionscript:

Illesszünk be egy új layert, és nevezzük el „Action” -nek. Nyissuk meg az Action panelt [F9], majd másoljuk be a következő kódot:

// meghatározunk egy XML objektumot, amit “sajat_xml”-nek nevezünk el
sajat_xml = new XML();

// behívjuk a külső XML fájlunkból az adatokat a “sajat_xml” objektumunkba
sajat_xml.load(”diavetites.xml”);

// letiltjuk a “white spaces”-t, ez gyakorlatilag a szóközök figyelmenkívül hagyását jelenti
sajat_xml.ignoreWhite = 1;

// mi történjen, ha betöltődtek az adatok … Meghívunk egy „function” -t, (”loadData”)  ebben az objektumban futtassa)
sajat_xml.onLoad = loadData;
count = 0;

// function tartalma
function loadData()
{
total = sajat_xml.firstChild.childNodes.length;
delay = sajat_xml.firstChild.attributes.delay;

// Vegye az adatokat az XML-soraiból (sorok: 0,1,2) és helyezze el a szövegmezőben
kepleiras.text = sajat_xml.firstChild.childNodes[count].childNodes[1].firstChild.nodeValue;
kep.loadMovie(sajat_xml.firstChild.childNodes[count].childNodes[0].firstChild.nodeValue,1);
diavetites();
}
function loadNextRecord()
{
gotoAndPlay(2);
kepleiras.text = sajat_xml.firstChild.childNodes[count].childNodes[1].firstChild.nodeValue;
kep.loadMovie(sajat_xml.firstChild.childNodes[count].childNodes[0].firstChild.nodeValue,1);
diavetites();
}
function diavetites()
{
myInterval = setInterval(pause_diavetites, delay);
function pause_diavetites()
{
clearInterval(myInterval);
if (count<(total-1))
{
count++;
loadNextRecord();
} else
{
count = 0;
loadNextRecord();
}
}
}

Készen is vagyunk! Tesztelhető a diavetítés [ctrl+Enter]!

Szerkesztő fájlok letöltése

A honlap készítői között hivatalos Adobe szakemberek és oktatók, programozók, fotósok, grafikus művészek és webes szakemberek munkálkodnak azon, hogy a legaktuálisabb és legértékesebb tudnivalók kerülhessenek fel folyamatosan az oldalra. A legfontosabb célkitűzés, hogy minden tartalom, még a letölthető segédanyagok, mintafájlok is ingyenesen bárki számára hozzáférhetőek legyenek.

Az indulás során bevezetett négy fő témánk, melyekben oktatóanyagokat (vagy angolosan tutorialokat) közlünk a következőek:

1. Webdesign
2. DTP (azaz kiadványszerkesztés)
3. Grafika
4. Fotó

Ezek alapján lesz a későbbiek során lehetséges a tartalom szűrése a cikkek oldalon belül. Az olvasók érdeklődési körétől függően a későbbiekben majd kialakul, hogy melyik irányzatra van leginkább érdeklődés, és az sem kizárt, hogy ez a paletta igény esetén tovább bővülhet új témákkal.

A bemutatásra kerülő tutorialokhoz esetenként mellékelünk letölthető fájlokat is, ezekkel méginkább segítve a megértést. Fontos tudnivaló, hogy az oldalon közölt összes tartalom és így a letölthető fájlok is csak és kizárólag saját felhasználásra hasznosíthatóak. Kereskedelmi forgalomba nem bocsájthatóak és nem publikálhatóak semmilyen formában csak a készítők hozzájárulásával. Az oldalra felkerült minden tartalom szerzői jogi védelem alatt áll.

Minden építő jellegű kritikát szívesen fogadunk akár komment, akár e-mail formájában és várjuk azok jelentkezését is, akik részt szeretnének venni az oldalon megjelenő tartalmak elkészítésében.

Jó tanulást és szórakozást kívánok mindenkinek a jövőben! Szeretettel és sok hasznos tudnivalóval várunk vissza mindig az FX Designport-on!