Wstęp

Temat który od zawsze męczył rzesze flashowców :) - jak uzyskać efekt stopniowanej maski. Problem został rozwiązany w wersji 8, gdzie dynamiczne maski mają możliwość korzystania ze stopniowanej przeźroczystości, więcej w tutorialu: Efekt maski z gradientem we Flashu 8. Co jednak, jeśli z jakiegoś powodu nie możemy wyeksportować animacji do najnowszej wersji Flash Playera, lub nie dysponujemy 8 wersją Flasha? Istnieje kilka trików i obejść na takie sytuacje, poniżej przedstawiam jeden z nich.

Przykład:

Przykład przedstawia maskę z animowanym obiektem jednolitego koloru i niejednolitym tłem.

Jak podejść do problemu:

Po pierwsze trzeba przeanalizować sytuację. Jeśli w naszej animacji animowany obiekt jest jednego koloru, możemy to wykorzystać. Załóżmy że mamy jednokolorowy tekst na różnokolorowym (być może nawet zmiennym) tle. Normalnie powinno się to wykonać poprzez ustawienie maski z gradientem i jednolitego animowanego tekstu, ale dysponując ograniczonymi możliwościami możemy... - podmienić obiekty!.

Rozwiązanie

Jeśli na warstwie maski zrobimy animowane pole tekstowe, a maskowany obiekt będzie gradientem, uzyskamy pożądany efekt. Ale po kolei:

1. Tworzymy trzy warstwy i nazywamy je: tło, maska, gradient
2. Na warstwie tła umieszczamy dowolne elementy które mają się znajdować pod animacją
3. Tworzymy statyczne pole tekstowe na warstwie maska, oraz animujemy je dowolnie
4. Rysujemy prostokąt z gradientem (od koloru do przeźroczystości) na warstwie gradient
5. Ustawiamy atrybuty warstwy maska na "mask"
6. Testujemy <Ctrl>+<Enter>
7. Voila! :)

Wnioski

Proponowane rozwiązanie nie załatwia wszystkich sytuacji gdzie potrzebna jest maska z półprzeźroczystością (gradientem), do każdego takiego problemu trzeba podejść indywidualnie. Polecam zapoznanie się z tutorialami które podałem w sekcji linki.

Masz jakieś pytania lub sugestie, może zauważyłeś błąd w powyższym artykule? Napisz do mnie.

Autor: Łukasz Mazurek. 30 czerwca 2005r
ostatnia aktualizacja: 25 października 2006r

Pliki

.fla i .swf skompresowane w archiwum .zip:

• pliki źródłowe do przykładu Efekt maski z gradientem (Flash MX 2004),
• pliki źródłowe do przykładu Efekt maski z gradientem (Flash MX)

Linki

• Flash 4 Gradient Mask - alternatywne podejście do masek z przeźroczystością (w języku ang.)