Flash – płynne przejścia między zdjęciami

Zaczynamy od wczytania pierwszego zdjęcia na warstwie pierwszej (layer 1). Następnie klikamy prawym przyciskiem myszki na pierwszej klatce w/w warstwy i zaznaczamy “create motion tween”. Ustawiamy się następnie na klatce 50 i wciskamy F6, następnie na klatce 60 i znów F6.
Teraz tworzymy nową warstwę (layer 2) i wczytujemy na niej drugie zdjęcie. Projektowanie stron www jest jak widać zajęciem mało absorbującym, jednak wymagającym nabrania nieco wprawy i doświadczenia. Następnie przeciągamy klatke ze zdjęciem na klatkę numer 50. Klikamy prawym i wybieramy “create motion tween”. Następnie ustawiamy się na klatce 60 tej samej warstwy (layer 2) i klikamy F6. To samo robimy na klatce 110.

Mamy tym samym dwie warstwy z dwoma zdjęciami, musimy dodać teraz przejście między zdjęciami. Pierwszemu zdjęciu na warstwie pierwsze w klatce 60 ustawiamy przezroczystość alpha 0%, natomiast zdjęciu drugiemu w klatce 50 też alpha 0%. Tym sposobem zdjęcie pierwsze będzie znikać w tym samym czasie gdy zdjęcie drugie będzie się pojawiać. Powstanie w ten sposób efekt płynnego przejścia. Aby był on płynniejszy możemy przyśpieszyć ilość klatek na sekunde np. do 30. (ustawienia dokumentu). Dalsza część kursu już wkrótce! Zapraszamy do czytania pozostałych artykółów w blogu, co umili oczekiwanie na kolejne części tutoriala!

A w między czasie zapraszam do przeczytania krótkiego tutoriala dotyczącego instalacji Lightboxa

1. Pierwszy krok to pobranie skryptu ze strony autora: http://www.huddletogether.com/projects/lightbox2/ oraz wgranie go na serwer w miejsce gdzie znajdują się pliki naszego serwisu.

2. Następnie w headzie strony umieścić należy link do pliku css oraz do skryptu:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src=”js/prototype.js” type=”text/javascript”></script>

<script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>

<script src=”js/lightbox.js” type=”text/javascript”></script>

3. Ostatnio etap to dołożenie rel=”lightbox” do linku do obrazka tak aby wyglądał on w ten sposób:

<a rel=”lightbox” href=”images/image-1.jpg”></a>

Więcej informacji na temat projektowania stron w oparciu o dodatki JavaScript, znajdziesz także na blogu projektowanie-stron-www.eu .