Docstoc

Macromedia Flash(3)

Document Sample
Macromedia Flash(3) Powered By Docstoc
					                                           Macromedia Flash
    1. Umieszczanie plików Flash na stronie.
Macromedia Flash tworzy dwa typy plików: w trakcie edycji pliki .fla oraz po zakończeniu – pliki .swf (którym
mogą towarzyszyć pomocnicze pliki .html oraz .js). Wewnątrz naszych stron można je umieścić za pomocą
znacznika OBJECT.
    a) Utwórz stronę, na której zamieścisz znacznik OBJECT z przykładu 1 - umieszczamy go
             otwierając nową stronę w edytorze NVU,
             zapisując ją na dysku,
             przełączając się do widoku Źródło, gdzie wewnątrz znacznika BODY wklejamy
                 zaprezentowany poniżej fragment kodu .
    b) Prześlij stronę na serwer i obejrzyj w przeglądarce zawartość animacji.
    c) Zrób to samo dla kodu z przykładu 2

                                               Przykład 1:
<object width="620" height="480">
<param name="movie" value="http://www.dailymotion.com/swf/4MyyGLhTonaYGicqp"></param>
<param name="allowfullscreen" value="true"></param>
<embed src="http://www.dailymotion.com/swf/4MyyGLhTonaYGicqp"
type="application/x-shockwave-flash" width="620" height="480" allowfullscreen="true"></embed>
</object>

                                               Przykład 2:
<object style="width: 1000px; height: 500px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto;"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="spel">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.server2cda.com/games4/attractors.swf" />
<param name="quality" value="high" />
<embed src="http://www.server2cda.com/games4/attractors.swf" quality="high" width="1000" height="500"
name="spel" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
            2. Tworzenie przycisków w Macromedia Flash

      Początek pracy
      a) otwórz program Macromedia Flash CS3 Professional PL, wybierz ‘nowy plik Action Script 2.0’

                                                                                                     Oś czasowa




Warstwy

                                                      Scena
                                                                                                     Kolory

Narzędzia
                                                                                                     Biblioteka obiektów

Właściwości




      Tworzenie animacji polega na umieszczaniu na scenie animowanych elementów.
      Elementy możemy tworzyć za pomocą narzędzi dostępnych po lewej stronie ekranu.
      Poszczególne elementy na scenie mogą być ułożone na różnych, definiowanych przez nas warstwach, które są
      kolejno nad sobą .
      Dodatkowo zmiany zachowań reprezentujemy poprzez klatki kluczowe umieszczane na danej warstwie – zgodnie
      z przebiegiem osi czasowej (środkowa część góry ekranu).
      Zdefiniowane obiekty możemy umieścić w bibliotece symboli, która znajduje się po prawej stronie ekranu.
      Jeżeli którekolwiek okno zostanie przypadkiem zamknięte – możesz je przywrócić poprzez menu Okno
      b) Ustaw wielkość sceny (w oknie właściwości na dole ekranu, przycisk Rozmiar) na 150 (szerokość) x 300
         (wysokość) pikseli (nie punktów! – to jednostka miary drukarskiej różna od piksela); w oknie zmiany
         rozmiaru nadaj nazwę (pole: tytuł) ‘przyciski miast’
Tworzenie przycisku i stan up (pokazywany na początku oraz gdy myszka jest poza przyciskiem)
c) z menu ‘Wstaw’ wybierz ‘Nowy symbol’; wprowadź jego nazwę jako ‘przycisk_gdansk’; wybierz jego typ
   (tekst) jako ‘przycisk’ (później możesz ponownie zmienić jego nazwę dwukrotnie klikając na jego nazwie w
   okienku biblioteki symboli)
d) Zwróć uwagę, że na osi czasowej pojawiły się cztery stany (up, over, down, hit) odpowiadające stanom
   przycisku (wyłączony, kursor ponad, włączony, przyciśnięty myszką)
e) Zmień nazwę warstwy z ‘warstwa 1’ na ‘tlo’ (klikając na nazwie –
   po dwukrotnym kliknięciu nazwa warstwy się podświetli)
f) Utwórz nową warstwę (kwadracik w oknie sceny jak obok lub polecenie
   Wstaw / Oś czasu / Warstwa) i nazwij ją ‘tekst’
   a następnie zaznacz ją jako aktywną (przez kliknięcie w nią)
g) wybierz narzędzie tekst (                       ) i ustaw parametry tekstu na ‘Tekst statyczny’ , ‘Arial’, 18
   pkt, wyśrodkowany,                              kolor: ciemnoniebieski
h) kliknij w pobliżu środka sceny (zaznaczonego jako mały krzyżyk na środku)
   i wprowadź tekst ‘Gdańsk’
i) za pomocą narzędzia zaznaczenia (                  ) przenieś tekst tak, by jego
   środek znalazł się nad krzyżykiem                  oznaczającym środkiem sceny
   (tak jak obok jest pokazane!)
j) zapisz projekt na dysku (Plik / Zapisz) pod nazwą moje_przyciski
                                                 przycisk nie będzie miał tła w stanie up,
                                                  zatem zaczynamy definicję
                                                  kolejnego stanu – ‘over’ – tak jak opisane dalej.




Stan over: (pokazywany gdy ktoś najedzie myszką na przycisk)
k) Na osi czasowej zaznacz klatki z obu warstw (tlo i tekst), które znajdują się
    pod stanem ‘over’ i wstaw klatkę kluczową (Wstaw / Oś czasu / Klatka
    kluczowa) – tak wstawisz klatki na obie warstwy od razu
l) pole tekstowe zostało skopiowane do stanu ‘over’
m) klikając na polu tekstowym znajdującym się na scenie a następnie zaznaczeniu myszką tekstu, zmień jego
    kolor na ciemnozielony (możesz to też zrobić zaznaczając pole tekstowe narzędziem zaznaczenia z okna
    narzędzia)
n) zaznacz klatkę ‘over’ na warstwie ‘tlo’,
o) z okna narzędzi wybierz prostokąt - w jego właściwościach ustal krzywiznę
    (w oknie właściwości, graficznie pokazane jako łuk) na 100; jako kolor
    wypełnienia (kubełek) wybierz średnio intensywny zielony; ustaw kolor linii (ołówek) na brak
    (przekreślony kwadrat, jak obok) ; następnie narysuj koło (lub zaokrąglony prostokąt), które
    będzie tłem przycisku – tak, by było nieco większe od napisu ‘Gdańsk’:
                                                   p) Korzystając z narzędzia zaznaczenia przenieś utworzony
                                                       kształt na środek sceny.
                                                   q) Stan ‘over’ został ukończony
Stan down: (pokazywany gdy przycisk jest wciśnięty)
r) Zaznacz stan down na obu warstwach
s) wstaw klatkę kluczową
t) aby ukryć warstwę tekst przyciśnij klatkę
    na warstwie tekst w kolumnie oznaczonej okiem
    (oznaczającą widoczność warstwy, jak obok)
u) Zaznacz klatkę ‘down’ na warstwie ‘tlo’, zaznaczając tym samym narysowane wcześniej koło
v) W narzędziu koloru (w prawym górnym rogu okna, wygląda jak obok;
    jeżeli nie jest widoczne – włącz je przez Shift + F9 albo przez menu Okno)
    wybierz narzędzie gradient radialny (przejście między kolorami w kształcie
    koła, pole Typ: radialny); zwróć uwagę, żeby gradient definiować dla
    wypełnienia (kubełek w oknie jak obok) a nie obwódki
    (ołówek w oknie jak obok)
w) Dwukrotnie klikając na próbkę koloru na gradiencie
    (kwadraciki na dole ekranu jak obok) - po lewej stronie gradientu
    wybierz kolor biały, po prawej – dowolnie wybrany kolor
                                                                    x) Ponownie włącz wyświetlanie warstwy
                                                                       tekst (klikając na krzyżyku pod symbolem
                                                                       oka) – sprawdź, czy napis jest czytelny i
                                                                       w razie potrzeby zmień kolory gradientu
                                                                    y) Zapisz plik na dysku (Plik / Zapisz)




Umieszczenie przycisku na scenie
z) Aby wyjść z trybu edycji symbolu kliknij przycisk ‘scena 1’
   (znajduje się między sceną a osią czasową),


                                                                 aa) Przeciągnij przycisk ‘przycisk_gdansk’ z
                                                                     biblioteki symboli na scenę
                                                                      (w jej górną część)
Stan hit: (pokazywany gdy ktoś kliknie myszką na przycisku)
bb) W oknie biblioteki symboli (po prawej stronie) dwukrotnie kliknij ikonkę przycisku
    ‘przycisk_gdansk’, aby powrócić do edycji przycisku
    (klikając na nazwę mówisz że chcesz zmienić nazwę elementu, a nie o to chodzi)
cc) Stan hit określa zachowanie podczas kliknięcia – chcemy, aby tylko fragment był aktywny
dd) Zaznacz klatkę ‘hit’ na warstwie ‘tlo’ i wstaw klatkę kluczową
ee) Za pomocą narzędzia zaznaczenia dwukrotnie kliknij koło, by przejść do jego edycji
ff) Wciśnij przycisk myszy poza kołem a następnie zaznacz jego górną część
gg) Wciśnij klawisz ‘delete’ by usunąć zaznaczoną górną część koła
hh) Podobnie usuń dolny fragment koła, by uzyskać kształt jak obok
                                                                  ii) Pozostały
                                                                      fragment definiuje aktywny obszar
                                                                      przycisku – działanie warstwy hit będzie
                                                                      widoczne dopiero po umieszczeniu
                                                                      przycisków na serwerze




Sprawdzenie wyglądu
jj) Kliknij przycisk scena 1 aby przejść do sprawdzenia całości przycisku
kk) Zapisz utworzony przycisk na dysku (Plik / Zapisz)
ll) Z menu sterowanie wybierz opcję ‘Aktywuj proste przyciski’
mm)     Sprawdź jak działa przycisk (przejedź nad nim myszką, naciśnij)
nn) Z menu sterowanie wyłącz opcję ‘Aktywuj proste przyciski’
Animacja przycisku: Dołączymy prostą animację, a zawartość klatki’ down’ przesuniemy nieco by stworzyć
wrażenie ruchu
oo) Za pomocą narzędzia zaznaczenia dwukrotnie kliknij przycisk znajdujący się na scenie - rozpoczynając jego
     edycję (to samo możesz zrobić dwukrotnie klikając ikonkę przycisk_gdansk w bibliotece symboli)
pp) Na listwie czasowej kliknij klatkę ‘down’ na warstwie ‘tlo’
qq) Skopiuj zaznaczone koło z gradientem do schowka (Edycja / Kopiuj)
rr) Kliknij klatkę ‘over’ na warstwie ‘tlo’, zaznaczając tym samym jednorodne koło
ss) Kliknij klawisz F8 przekształcając zaznaczenie w symbol (lub wybierz Modyfikuj / Konwertuj na symbol) ;
     nadaj mu nazwę ‘przycisk_animowany’, a w polu typu (tekst) ustaw Klip filmowy;
     kliknij też środkowy punkt zaczepienia (Pole: Rejestracja)
tt) W bibliotece symboli dwukrotnie kliknij ikonę nowo stworzonego symbolu (‘przycisk_animowany’) aby
     rozpocząć jego edycję
uu) W klatce nr 5 wstaw ‘pustą klatkę kluczową’
vv) Z menu Edycja wybierz ‘Wklej w miejscu’ aby wkleić wcześniej zapamiętane w schowku koło z
     wypełnieniem gradientowym (z kroku ll)
ww) We właściwościach (na dole ekranu) wybierz pole Klatki pośredn.:kształt (animację kształtu)
xx) Wciśnij Enter by obejrzeć animację
yy) Wstaw nową warstwę
zz) Na nowej warstwie zaznacz klatkę 5 i wstaw ‘pustą klatkę kluczową’
aaa) wybierz Okno / Operacje (lub wciśnij F9) a następnie dla nowo wstawionej klatki (zwróć uwagę, by na
     zakładce było umieszczone Warstwa 2: Klatka 5) wpisz polecenie jak niżej (możesz to samo zrobić
     wybierając z lewego panelu polecenie Funkcje globalne / Sterowanie osią czasu / stop i dwukrotnie ją
     kliknąć).
     Po wykonaniu zamknij okno z poleceniem.
     Polecenie do wklejenia to:
                                   stop();




bbb)    Dwukrotnie kliknij ‘przycisk_gdansk’ by powrócić do jego edycji
                                                                ccc) Dla stanu ‘down’
                                                                     przesuń obiekty
                                                                     (kolejno kliknij:
                                                                     koło oraz napis) o
                                                                     dwa piksele w pionie i w poziomie
                                                                     (przez dodanie 2 w pionie i poziomie);
                                                                     pozycję znajdziesz we właściwościach
                                                                     (na dole ekranu) jako x: i y:; zwróć
                                                                     uwagę, że dla wartości ujemnych
                                                                     dodanie 2 zmniejszy moduł liczb
                                                                     ujemnych, a więc np. z –30 zrobi się –28
                                                                     (a nie –32)
                                                                ddd)      Zapisz dokonane zmiany (Plik /
                                                                     Zapisz)
Dołączenie dźwięku
eee) Aby dołączyć dźwięk do animacji kliknięcia przycisku ściągnij z Internetu plik dźwiękowy ‘click.wav’
     Dźwięki można pobrać ze stron:
    http://members.tripod.com/~buggerluggs/ie/wav-dir184.htm
    http://www.freesound.org/tagsViewSingle.php?id=64 (wymaga zalogowania)
fff) Wybierz plik / importuj / importuj do biblioteki , wskaż ściągnięty plik ‘click.wav’
ggg)      Wstaw nową warstwę – nadaj jej nazwę ‘dzwiek’
hhh)      Wstaw klatkę kluczową dla stanu ‘down’
                                                                       iii) Z biblioteki przeciągnij symbol
                                                                            dźwięku na scenę; zwróć uwagę co się
                                                                            stało na osi czasowej




Powielenie przycisków
jjj) Przełącz się do widoku ‘scena 1’ i obejrzyj działanie przycisku; jeżeli masz słuchawki – możesz również
     usłyszeć wstawiony dźwięk podczas wciskania przycisku
kkk)     W panelu biblioteka symboli zaznacz ‘przycisk_gdansk’ i skopiuj go wciskając prawy przycisk myszy i
     wybierając z menu kontekstowego opcję ‘powiel’
lll) Nadaj nowemu przyciskowi nazwę ‘przycisk_gdynia’
mmm) Otwórz nowo utworzony przycisk (‘przycisk_gdynia’)
nnn)     Na wszystkich klatkach warstwy tekst zmień za pomocą narzędzia zaznaczenia tekst Gdańsk na Gdynia
                                                                        ooo)     W ten sam sposób utwórz
                                                                             przycisk ‘przycisk_sopot’ dla miasta
                                                                             Sopotu
Umieszczenie nowych przycisków na scenie
ppp)     Przełącz się do widoku ‘scena 1’
qqq)     Umieść nowo utworzone przyciski poniżej przycisku ‘przycisk_gdansk’
rrr) Zapisz projekt (Plik / Zapisz)
sss) Sprawdź wygląd przycisków wybierając sterowanie | testuj film




Umieszczenie linków
ttt) Aby dodać łącza do plików kolejno wejdź do edycji przycisków (dwukrotnie na nich klikając)
     ‘przycisk_gdansk’, ‘przycisk_gdynia’, ‘przycisk_sopot’
uuu)     Dla każdego z nich wybierz Okno / Operacje (lub wciśnij F9) a następnie w dolnym lewym okienku
     wybierz ‘Scena 1’, (powinno to pokazać po prawej stronie na dole zakładkę oznaczoną nazwą aktualnie
     edytowanego przycisku); w oknie po prawej stronie wpisz kod jak niżej, zastępując słowo login swoim
     loginem oraz strona.html nazwą strony, którą chcesz otworzyć (jeżeli jest ona w tym samym katalogu, to
     wystarczy wpisać samą nazwę strony).
     Po wklejeniu w dolnym lewym oknie, pod elementem Scena 1 powinna pojawić się nazwa aktualnie
     edytowanego przycisku – jako potwierdzenie umieszczenia skryptu z nim związanego.
     Po wykonaniu zamknij okno z kodem.
     Kod do wklejenia to:
                                 on (release) {
                                   getURL("http://www.zie.pg.gda.pl/~login/strona.html", "_self");
                                 }




vvv)    Zapisz projekt (Plik / Zapisz)
Generowanie kodu do publikacji na stronie
www) Aby opublikować swój projekt najpierw ustaw parametry – Plik / Ustawienia publikowania
xxx)     W zakładce formaty wybierz HTML (.html) oraz Flash (.swf)
yyy)     Aby wygenerować pliki - wybierz przycisk Publikuj a potem OK.
zzz) W katalogu roboczym powstaną pliki .html (przykładowa strona WWW wyświetlająca wygenerowaną
     animację), .swf (animacje Flash), .js (towarzyszące skrypty uruchamiające).
     Musisz je umieścić na serwerze a następnie uruchomić.




Dodatek: Umieszczanie własnych plików Flash na stronie

Aby umieścić własny plik Flash na własnej stronie należy:
      1. wykonać animację Flash
      2. Utworzyć prezentację w postaci przeznaczonej do przesłania na serwer (uzyskać pliki .html, .swf,
           .js)
      3. Umieścić pliki .swf oraz .js na serwerze
      4. Skopiować na własną stronę (pisaną w HTML) zawartość znaczników SCRIPT z wewnątrz pliku
           .html wygenerowanego przez Flash
      5. Umieścić swój plik na serwerze

Przykładowa zawartość wygenerowanego przez Flash pliku .html wygląda jak niżej; na zielono zaznaczono
fragmenty, które muszą zostać przekopiowane do własnego pliku .html, na szaro zaś – to, czego kopiować nie
należy.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>przyciski2</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
      if (AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
      } else {
            AC_FL_RunContent(
                  'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio
n=9,0,0,0',
                  'width', '150',
                  'height', '300',
                  'src', 'przyciski2',
                  'quality', 'high',
                  'pluginspage',
'http://www.macromedia.com/go/getflashplayer',
                  'align', 'middle',
                  'play', 'true',
                  'loop', 'true',
                  'scale', 'showall',
                  'wmode', 'window',
                  'devicefont', 'false',
                 'id', 'przyciski2',
                 'bgcolor', '#ffffff',
                 'name', 'przyciski2',
                 'menu', 'true',
                 'allowFullScreen', 'false',
                 'allowScriptAccess','sameDomain',
                 'movie', 'przyciski2',
                 'salign', ''
                 ); //end AC code
      }
</script>
<noscript>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c
ab#version=9,0,0,0" width="150" height="300" id="przyciski2"
align="middle">
      <param name="allowScriptAccess" value="sameDomain" />
      <param name="allowFullScreen" value="false" />
      <param name="movie" value="przyciski2.swf" /><param name="quality"
value="high" /><param name="bgcolor" value="#ffffff" />     <embed
src="przyciski2.swf" quality="high" bgcolor="#ffffff" width="150"
height="300" name="przyciski2" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-
shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
      </object>
</noscript>
</body>
</html>

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:25
posted:4/20/2010
language:Polish
pages:10
pptfiles pptfiles
About