4.DrawAPI_.pdf

18. Przyciski c.d.

Zdarzenia, które można podpiąć pod przyciski mogą również obejmować sytuacje

przebywania kursowa nad przyciskiem i wyjechania kursora myszy poza obszar przycisku.

on(rollOver)

{

//gdy najedziemy myszą nad przycisk

}

on(rollOut)

{

//gdy wyjedziemy myszą poza przycisk

}

Zdarzenia te można wykorzystać do zaprojektowania gry zręcznościowej.

Ćwiczenie:

wykorzystując zdarzenia rollover i rollout utwórz grę o zasadach zgodnych z grą dostępną w

załączniku stuntoy.swf

Przyciski też można w prosty sposób przesuwać konstruując przycisk i podpinając pod niego

następujący kod:

on(press)

{ startDrag(""); }

on(release)

{stopDrag();}

Przykład 18_1

Następnie przedstawiony zostanie sposób tworzenia rozwijanych okienek dialogowych. Na

wstępie należy utworzyć symbol typu movie clip, który będzie zawierał wspomniane okno.

Insert->new symbol (Movie clip)

Następnie należy utworzyć wewnątrz cztery warstwy, które będą odpowiednio

przechowywały.

1. Wygląd otwartego okna dialogowego i wygląd okna zamkniętego

2. Następnie dodajemy grafikę symbolizującą przyciski w prawym górnym rogu okna. Dal

okna rozwiniętego:

Jak i dla okna zwiniętego:

3. Pod grafiki symbolizujące przyciski zwinięcia i rozwinięcia okna należy podłożyć

niewidoczne przyciski, które powinny przekierować animację do sąsiedniej klatki. Gdy

okno jest zwinięte (klatka 2)

on (press) {

gotoAndStop(1);

}

Gdy okno jest rozwinięte (klatka 1):

on (press) {

gotoAndStop(2);

}

4. Gdy chcemy aby okno po rozwinięciu zawierało jakieś treści to na dodatkowej warstwie

można umieścić tekst (mogą być również przyciski, które będą wywoływały kolejne

akcje)

5. Skonstruowany w ten sposób MovieClip należy umieścić na scenie, nadać mu nazwę (np.

okno) i następnie zatrzymać aby dwuklatkowa animacja nie zaczęła się odtwarzać

automatycznie.

Przykład18_2

Aby teraz nowo stworzone okno dialogowe z przykładu 18_2 móc wykorzystać w innych

aplikacjach należy utworzyć nowy projekt, wstawić przycisk i podpiąć pod niego akcję

on (press) {

loadMovieNum("Przyklad18_2.swf",1);

}

Powyższy kod ładuje animację zawartą w zewnętrznym pliku .swf.

Przykład18_3

Uwaga: Rozkładanie animacji na mniejsze elementy i ładowanie ich w zależności od potrzeb

znacznie optymalizuje wielkość projektu.

Ćwiczenie:

Wykorzystaj umiejętności zdobyte przy tworzeniu rozwijanych okienek dialogowych i

przycisków, które można przemieszczać i utwórz menu o funkcjonalności identycznej jak w

załączonym przykładzie menu.zip

19. Rysowanie z poziomu ActionScriptu

Do tej pory wszystkie rysowane kształty powstawały z poziomu graficznego interfejsu

użytkownika. Istnieje jednak możliwość rysowania z poziomu Action Scriptu. Wykorzystuje

się do tego następujące metody:

1. moveTo (x,y) – funkcja, która jest bardzo często używana. Przesuwa wirtualny ołówek do

punktu (x,y) aby z tego punktu rozpocząć rysowanie. Jeśli się tego nie wywoła to rysowanie

rozpoczyna się w punkcie (0,0)

2. lineTo(x,y) – funkcja rysuje linię od bieżącego położenia ołówka do punktu (x,y). Po

narysowaniu ołówek automatycznie jest przesuwany do punktu (x,y) i z tego punktu może

rozpocząć rysowanie.

Uwaga: Rysunek nie będzie widoczny jeśli wcześniej nie stworzy się stylu rysowania

LineStyle. Po narysowaniu lini nie trzeba używać moveTo aby przesunąć się na koniec linii.

Wirtualny ołówek w ędruje tam automatycznie.

Uwaga: Jako że Action Script jest językiem obiektowym, to metody te wywołujemy na rzecz

obiektu. Takim podstawowym obiektem we Flashu są Movie Clipy. Tworzymy pusty Movie

Clip, na rzecz którego wywołujemy metody.

Przykład :

// Na początku utwórz pusty MovieClip, który będzie

zawierał linię

// (może być stworzony na poziomie _root)

_root.createEmptyMovieClip ("holder",1);

// definiujemy styl linii

// 1: grubość

// 0x000000: kolor (biały)

// 100: alpha - przezroczystość

holder. lineStyle (1,0x000000,100);

// ustawiamy ołówek w punkcie (150,200)

holder. moveTo (150,200);

// rysujemy linię do punktu (300,200)

holder. lineTo (300,200);

3. curveTo(controlX,controlY,anchorX, anchorY) rysuje krzywą która ędzie kończyła się w

punkcie (anchorX, anchorY) i będzie wyginała się w stronę punktu (controlX, controlY).

Przykład

_root.createEmptyMovieClip ("holder",1);

holder. lineStyle (1,0,100);

holder. moveTo (100,100)

holder. curveTo (150,150,100,200);

// aby zlokalizować punkt (150,150) dopisz:

holder. lineTo (150,150)

holder. lineTo (100,100)

Jak łatwo zaobserwować krzywa nie przechodzi przez punkt kontrolny, lecz dąży w

jego stronę. Aby jednak przechodziła przez punkt kontrolny należy nieco

zmodyfikować kod.

// Definiujemy punkt początkowy i końcowy

x1=100;

y1=200;

x2=450;

y2=200;

this.onEnterFrame=function (){

// Obliczamy punkt kontrolny

controlX=_xmouse*2-(x1+x2)/2;

controlY=_ymouse*2-(y1+y2)/2;

// Wymazujemy poprzednią linię

this.clear ();

this.lineStyle (1,0,100);

this.moveTo (x1,y1);

this.curveTo (controlX,controlY,x2,y2);

}

Zauważmy, że należy ponownie zdefiniować lineStyle po wymazaniu metodą clear.

4. beginFill(rgb, alpha)/endFill

Metoda służy do wypełniania kolorem tworzonego kształtu. Wstawiamy beginFill przed metodą

moveTo i endFill zaraz po zakończeniu rysowania. Zauważ również, że jeśli kształt nie jest

zamknięty to Flash zrobi to sam.

_root.createEmptyMovieClip ("holder",1);

holder. lineStyle (1,0,100);

holder. beginFill (0xABCDEF,50);

holder. moveTo (100,100)

holder. lineTo (150,150);

holder. lineTo (150,200);

holder. endFill() ;

5. clear

Metoda czyści moviClip.

Poniżej zamieszczone są przykłady rysujące kilka podstawowych brył.

Kwadrat:

_root.createEmptyMovieClip ("holder",1);

holder. lineStyle (1,0,100);

// definiujemy połowę długości boku kwadratu

width=30;

// Centrum kwadratu jest w punkcie (150,150)

holder. moveTo (150-width,150-width);

holder. lineTo (150+width,150-width);

holder. lineTo (150+width,150+width);

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: