WebCity.pl

Projektowanie, tworzenie i promocja stron WWW w teorii i praktyce.

• WiadomoÅ›ci
• ArtykuÅ‚y
• Kursy
• Porady
• Blog
• Forum

---

# webcity 1.0

1. Artykuły
2. Flash, grafika i webdesign
3. Efekt rozmycia

Pierwszą rzeczą, jaką będziemy potrzebować, to oczywiście grafika. Ponieważ Flash nie umożliwia rozmycia obrazu - będziemy musieli to zrobić ręcznie w dowolnym programie graficznym.

NastÄ™pnie musimy zaimportować stworzonÄ… grafikÄ™ do Flasha. Robimy to uruchamiajÄ…c z menu File -> Import -> Import to Library. Z obrazku orginalnego (nierozmytego) tworzymy klip filmowy. NastÄ™pnie tworzymy pusty klip filmowy z dwoma warstwami (layer). Na górnej umieszczamy klip filmowy z obrazkiem orginalnym, a na dolnej obraz rozmazany. Do klipu znajdujÄ…cego siÄ™ na górnej warstwie wstawiamy kod:

onClipEvent(load)
{
        var szybkosc = 0;
        var szybkosc_pojawiania = 5;
        var szybkosc_znikania = 5;
 
        this._alpha = 0
 
        this.onRollOver = function()
        { szybkosc = szybkosc_pojawiania; }
 
        this.onRollOut = function()
        { szybkosc = -szybkosc_znikania; }
        
        function range(ivalue)
        {
                if (ivalue < 0) return 0;
                else if (ivalue > 100) return 100;
                else return ivalue;
        }
}
 
onClipEvent(enterFrame)
{
        this._alpha = range(this._alpha + szybkosc);
}

Podczas Å‚adowania siÄ™ klipu filmowego inicjowane sÄ… trzy zmienne. Pierwsza - szybkosc - okreÅ›la jak szybko (i w którym kierunku) odbywa siÄ™ rozmycie. Kolejne dwie zmienne peÅ‚niÄ… funkcjÄ™ staÅ‚ych - okreÅ›lajÄ… jak szybko zdjÄ™cie ma siÄ™ rozmazywać (szybkosc_znikanie) i jak szybko ma siÄ™ wyostrzać (szybkosc_pojawianie). Można poeksperymentować z tymi wartoÅ›ciami (do czego gorÄ…co zachÄ™cam). Można spróbować efektu w którym obraz szybko siÄ™ wyostrza ale wolno rozmazuje.

Po zainicjowaniu siÄ™ zmiennych ukrywamy klip, nadajÄ…c mu maksymalnÄ… przeźroczystość. NastÄ™pnie definiujemy dwie funkcje, które bÄ™dÄ… wykonywane, gdy użytkownik najedzie myszkÄ… na obrazek, oraz gdy kursor myszki opuÅ›ci obszar klipu. Funkcje te ustawiajÄ… odpowiednio zmiennÄ… szybkosc.

Na koÅ„cu definiujemy funkcjÄ™ range dziÄ™ki której wartość _alpha nie spadnie poniżej zera, ani nie bÄ™dzie wyższa niż 100.

Po wejściu do nowej klatki, zmieniamy wartość _alpha klipu filmowego, odpowiednio ją zmniejszając lub zwiększając.

ZmieniajÄ…c wartość przeźroczystoÅ›ci od wartoÅ›ci minimalnej do maksymalnej, otrzymujemy efekt pÅ‚ynnego przejÅ›cia miÄ™dzy dwoma obrazami. W tym przykÅ‚adzie otrzymujemy efekt rozmywania siÄ™ obrazu. Zamiast rozmycia można spróbować efektu zmiany kolorów (na przykÅ‚ad z rysunku czarnobiaÅ‚ego do kolorowego). Z tym efektem można eksperymentować w nieskoÅ„czoność. Jedyne co potrzeba to odrobina weny twórczej.