Pomoc
Ten tutek będzie o prostej, a jakże wygodnej, nowoczesnej i atrakcyjnej rzeczy jaką jest Drag and drop(podnieś i puść). Dzięki temu, Twój movieClip po kliknięciu i przytrzymaniu lewego przycisku myszy, podniesie się, i będziesz mógł go położyć w innym miejscy na scenie. Przydaje się to szczególnie podczas projektowania różnych widgetów, odtwarzaczy MP3, czytników RSS, czy masy innych elementów.
Żeby zaprezentować Ci działanie takiego elementu muszę stworzyć nowy plik Action Script 3. Jeśli masz już element któremu chcesz dodać właściwość Drag and drop, to przejdź do kroku trzeciego, jednak upewnij się, że nadałeś "instance name" swojemu movieClipowi.
[OUTCOME]
Przygotowania
1. Tworzę nowy plik Action Script 3:
2. Importujemy jakiś obiekt, zdjęcie czy obrazek. Jeśli masz swój obiekt MovieClip, nie robisz tego. Aby zaimportować grafikę naciśnij "ctrl + r", następnie wybierz swój obrazek. Jeśli Twój orazek jest za duży możesz użyć narzędzia Free Transform Tool(Q) aby go zmniejszyć.
3. Wybierz narzędzie selection tool(naciśnij "V"). Następnie zaznacz zaimportowaną grafikę. Trzeba ja przekonwertować na obiekt MovieClip. Aby to zrobić wciśnij "F8" na klawiaturze. Następnie nazwij swój obiekt. Nazwa dowolna
4. Grafika stała się obiektem Movie Clip, teraz możemy na nią wpływać poprzez Action Script, jednak zanim to zrobili musimy nadać "instance name" w panelu "properties" naszemu MovieClipowi, dzięki temu będziemy mogli się odwoływać do niego z poziomu Action Script.
Jak będzie działał kod
Zatrzymajmy się na chwilę i pomyślmy, jak będzie działa nasz kod, co trzeba zrobić i jakich funkcji użyć.
Więc podniesienie elementu, ma się odbyć po kliknięciu i przytrzymaniu lewego przycisku myszki. Będzie działać to tak, że kiedy klikamy na swój movieClip i przytrzymujemy, przenosimy go w dowolne miejsce na scenie oraz, klikamy jeszcze raz żeby movieClpi "upadł" i pozostał w tym miejscu.
Więc, będziemy potrzebowali funkcji która wykryje kiedy użytkownik kliknie i przytrzyma lew przycisk myszy na movieClipie. Musimy tą funkcje przypisać do tego movieClipu. Potrzebna będzie też funkcja która wykryje, kiedy użytkownik puści lewy przycisk myszy. Wtedy musimy zatrzymać dalsze przemieszczanie się movieClipu.
Piszemy!
5. Otwórz panel "actions"(F9) i napisz poniższy kod:
emotka.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function drag(e:MouseEvent):void {
emotka.startDrag();
}
emotka.addEventListener(MouseEvent.MOUSE_UP, drop);
function drop(e:MouseEvent):void {
emotka.stopDrag();
}
Zaraz wytłumaczę Ci jak działa kod. Jeśli go skopiowałeś i wkleiłeś, to pamiętaj, że musisz zmienić słowo "emotka", na nazwę którą podałeś w polu "instance name". Inaczej kompilator zwróci Ci błąd.
emotka.addEventListener(MouseEvent.MOUSE_DOWN, drag);
Na początku dodajemy nasłuch do naszego MovieClipu za pomocą funkcji "addEventListener". W pierwszym parametrze tej funkcji musimy podać rodzaj zdarzenia. Piszemy Mouse Event(bo chodzi nam o zdarzenia związane z myszką) a następnie po znaku kropki wybieramy konkretny rodzaj zdarzenia. Wybieramy MOUSE_DOWN, czyli "mysz wciśnięta(przytrzymana)" czyli jest to zdarzenie kiedy klikasz i przytrzymujesz lewy przycisk myszy na tym MovieClipie. W kolejny argumencie podajemy nazwę funkcji która ma się wykonać, jeśli zdarzenie wystąpi(MovieClip zostanie naciśnięty myszką). Wpisujemy "drag". Oczywiście, żeby funkcja ta zadziałał trzeba ją napisać, zrobimy to niżej.
function drag(e:MouseEvent):void {
emotka.startDrag();
}
Na samym początku piszemy słowo "function" aby poinformować flasha, że piszemy funkcję. Dalej podajemy jej nazwę, musi być taka samą jaką podaliśmy w drugim argumencie funkcji "addEventListener" czyli wpisujemy "drag"(podnieś). Przekazujemy event do funkcji wpisując w nawiasach "e:MouseEvent" po słowie drag. Następnie wpisujemy znak ":" i napiszmy "void", ponieważ funkcja nie zwraca żadnej wartości. Otwieramy nawias klamrowy i wciskamy enter, aby przejść do nowej linij.
W nowej linij naszemu movieClipowi przypiszemy metodę "startDrag" która odpowiada za rozpoczęcie przenoszenia, nie musimy jej pisać ponieważ jest ona "wbudowana" w AS3.
Pozostała część kodu jest podobna, z tym że różni się rodzajem zdarzenia i posiada funkcję która kończy przenoszenie - stopDrag.
emotka.addEventListener(MouseEvent.MOUSE_UP, drop);
Swojemu movieClipowi po znaku kropki przypisujesz funkcję, która oczekuje(nasłuchuje) na zdarzenie, zdarzeniem tym jest "MouseEvent.MOUSE_UP", występuje ono gdy użytkownik puszcza lewy przycisk myszki. Kiedy już go puści to trzeba wskazać funkcję która ma się wykonać. Piszemy że funkcja ta nazywa się drag. Piszemy ją na niżej:
function drop(e:MouseEvent):void {
emotka.stopDrag();
}
Wszystko tak samo, z tym że funkcja nazywa się "drop" a w jej ciele(czyli wszystko pomiędzy "{ }" ) zamiast metody "startDrag", piszemy "stopDrag", która zatrzyma i puści nasz movieClip.
To wszytko, prosta a przydatna rzecz! mam nadzieję że się Wam przyda
Zobacz: [OUTCOME]
Użytkownik Jacked edytował ten post 18 styczeń 2011 - 23:35
Cytuj
Odpowiedz
