Więc zaczynamy od otwarcia naszej strony we Flash i zaczynamy pracę ! Dobrze byłoby gdybyś już miał przygotowane wszystkie zdjęcia oraz miniaturki, które chcesz umieścić w swojej witrynie !
Jeśli już masz wszystko przygotowane i Twój szablon już jest we Flash to przejdź do podstrony "galeria" (czy też tak jak ją nazwałeś) klikając na linii czasu pierwszą klatkę Twojej podstrony (u mnie jest to klatka 21) tak jak jest to pokazane na obrazku, po czym kliknij na Klip Filmowy - chodzi o to kółko, które znajduje się w prawym dolnym rogu na zdjęciu ! Oczywiście kliknij dwa razy żeby wejść do tego klipu !
Jeśli już jesteś w środku tego, to teraz możesz zaimportować swoje miniaturki do galerii, ale przed tym dobrze będzie jeśli stworzysz nową warstwę dla tych miniaturek ! Teraz wybieramy PLIK-IMPORTUJ-IMPORTUJ NA STÓŁ MONTAŻOWY, pojawia się okno i zaznaczasz wszystkie miniaturki, które chcesz dodać na stronę ! Rozmieść je według uznania, (tak jak chcesz) i przechodzimy do kolejnego etapu tworzenia galerii !
OK, jeśli już to wszystko masz zrobione to musimy teraz zrobić z tych miniatur przyciski, które będą prowadziły odwiedzających do większych zdjęć :) Żeby sobie ułatwić pracę tworzymy nową warstwę na której zrobimy mały kwadrat czy prostokąt (według uznania). Wybieramy "narzędzie prostokąt" (R) i rysujemy na stole montażowym prostokąt o wymiarach takich samych jak Twoje miniaturki (ja rysuje prostokąt 100x100 pikseli) oczywiście kolor wybierasz jaki chcesz (ja wybiorę biały)
Ten kwadrat posłuży nam jako jeden przycisk, który będziemy powielać po to aby stworzyć kolejne przyciski ! Teraz żeby wszystko ładnie wyglądało, wystarczy że przeciągniesz ten biały kwadrat na pierwszą miniaturkę !
Tak jak to widzisz na obrazku powyżej, kwadrat jest zaznaczony więc możemy go prze konwertować na przycisk. Wybieramy z klawiatury F8 i nadajemy mu nazwę !
Jak widzisz ja nazwałem przycisk "btnmini1" ale możesz go nazwać jak tylko chcesz ! Zaznacz typ - "przycisk" i naciśnij OK ! Teraz już mamy prawie gotowy przycisk do naszej galerii. Żeby nadać mu kilka efektów, kliknij na niego dwa razy i pojawi się nowa linia czasu !
Tutaj możesz zrobić kilka ciekawych rzeczy, jeśli w pierwszej klatce zmienisz kolor lub krycie tego przycisku będzie ten efekt widoczny gdy użytkownik nic nie będzie robił, jeśli nie najedzie myszką nic się nie stanie. Żeby coś się zadziało musisz przejść do drugiej klatki za pomocą przycisku F6 i możesz też zmienić kolor lub krycie ! Kolejna klatka odpowiada ze kliknięcie, chodzi o to że jeśli użytkownik kliknie w Twój przycisk zmieni się on chyba, że nic nie zrobisz (nie zmienisz koloru czy krycia), no i ostatnia klatka odpowiada za aktywne pole przycisku czyli tam w sumie nic nie robisz, tylko klikasz F6 i przechodzimy dalej !
Ja sobie ustawie w pierwszej klatce krycie na 50%, drugą na 0% i pozostałe tak samo jak drugą ! Teraz przejdź do Klipu Galeria !
Teraz musimy stworzyć trochę więcej przycisków niż jeden :) Proponuje to zrobić w ten sposób, że gdy najedziesz na kwadrat myszką, naciśnij lewy przycisk myszki i z klawiatury wybierz ALT, powinien się zmienić kursor w biały kolor z plusem, jeśli tak to wystarczy przeciągnąć myszkę i masz już kolejny przycisk załatwiony ! Zrób to samo z kolejnymi przyciskami !
No to przyciski mamy gotowe, teraz musisz przejść do panelu "właściwości", w którym trzeba każdemu z przycisków nadać nazwę instancji ! Zaznacz jeden przycisk i wpisz nazwę jaką chcesz !
Zrób tak z każdym przyciskiem i przechodzimy dalej !
OK, rozumiem że wszystko już zrobiłeś ? Idziemy dalej. Przejdź do zakładki OKNO-SKŁADNIKI (CTRL+F7) pojawi Ci się okno, w którym musisz przejść do "User Interface" - rozwija się lista i wybieramy "UILoader" po prostu tworzysz sobie nową warstwę, zaznaczasz UILoader i przeciągasz go na stół montażowy w miejsce gdzie chcesz aby było wyświetlane Twoje zdjęcie !
Jak widzisz we właściwościach jest to Klip Filmowy, któremu też musimy nadać nazwę, możesz wpisać dowolną, ja wpisze "myUILoader"
No to już mamy prawie wszystko !
Znowu przejdź do zakładki "okno" i wybierz "wycinki kodu", pojawi się okno. Zaznacz przycisk pierwszy i wybierz "podprogramy obsługi zdarzeń"
Wybieramy pierwszą opcję - "Zdarzenie - kliknięcie myszą", klikamy na to dwa razy. Teraz wyskoczy nowe okienko "operacje" i stworzy nam nową warstwę na linii czasu !
Teraz musimy usunąć kawałek kodu i wpisać coś takiego co będzie pobierało nasze zdjęcia po kliknięciu myszką w miniaturkę. O co chodzi ? Przede wszystkim ważne jest żeby Twoje zdjęcia, które będą wyświetlane na stronie muszą być zapisane w jednym folderze z plikiem Twojej strony, przykładowo "index.fla" i w tym folderze możesz utworzyć nowy folder ze zdjęciami ! Zrób tak jak ja to robię na obrazkach !
Jeśli tak zrobiłeś jak na zdjęciu to wiesz, że to co tam wpisaliśmy to nazwa instancji tego małego kwadratu, który będzie pobierał z folderu "Photo" zdjęcia o nazwie "1.jpg". Mam nadzieje że wiesz o co mi chodzi, jeśli nie to pewnie zrozumiesz to szybko, bo wcale nie jest to takie trudne :)
Podobnie musimy zrobić z pozostałymi miniaturami. Nie musisz już używać wycinków kodu, wystarczy że będziesz kopiował ten skrypt i podmieniał zdjęcia. Jeśli będziesz kopiował to musisz zmieniać nazwę przycisku, dopisując np. 2,3,4,5... nazwę funkcji 2,3,4,5... no i zdjęcia ! Zrób wszystko tak jak na obrazku.
OK, jeśli już masz wszystko gotowe to możesz zamknąć okno operacji i przy użyciu CTRL+ENTER zobaczyć jak działa Twoja galeria !
Jak widzisz wszystko działa poprawnie ale coś dziwnego stało się z naszymi zdjęciami. Teraz zamknij okno wyeksportowanego filmu i kliknij na UILoader, po prawej stronie pojawią się jego właściwości gdzie należy odznaczyć "scaleContent"
Myślę, że wszystko teraz już powinno działać poprawnie, więc weź przetestuj film aby zobaczyć poprawnie działającą galerię (CTRL+ENTER)
Jak widzisz u mnie działa wszystko poprawnie, mam nadzieje że przyda Ci się to ! Zapraszam również do obejrzenia filmu lub na mój kanał Youtube !
mozesz mi pomoc, jestem nowy w tym, z kad mam wziac ten szablon? czy bez szablonu tez mozna zeobic taka galerie?
OdpowiedzUsuńDzięki szwagier, męczyłem sie nad zrobieniem aranżatora do mebli. Dzieki twojemu tutkowi zrobiłem go w 20 minut. Mam już podstawowy, teraz musze wykminić jak tu zrobić, żeby oprócz zmiany koloru okleiny, można zmieniac blaty, uchwyty pozostawiając wybór okleiny aktywny. Myślałem nad wykorzystaniem transparency z png . Jakiś pomysł ?
OdpowiedzUsuńPozdrawiam