Posty bez odpowiedzi | Aktywne tematy





Znajdziesz nas na:
FACEBOOK  |   TWITTER  |   YOUTUBE


Ogłoszenie

Drogi Użytkowniku!

W związku z rozpadem ekipy forum i totalnym zlekceważeniem przez administratora powoli kończymy swoją działalność. Wszystkim stałym jak i nowym użytkownikom serdecznie dziękujemy za lata współpracy i zaangażowania w rozwój serwisu, który niestety nie podołał tak dużej transformacji na jaką liczyliśmy.

Podpisano ~Stara Gwardia LGForum aka. KP500.PL


Regulamin forum


Regulamin Forum - viewtopic.php?f=22&t=580
Wideo Poradnik - viewtopic.php?f=5&t=13253
Poradnik 3w1 - viewtopic.php?f=5&t=1806
Loadery - viewtopic.php?f=5&t=13909
Reset na logo LG - viewtopic.php?f=5&t=7217
Odchudzanie Cust - viewtopic.php?f=5&t=12695
Softy/Custy do pobrania - viewtopic.php?f=228&t=18364
ZANIM ZAPYTASZ - PRZECZYTAJ.... - viewtopic.php?t=13131
Informacja o modyfikacjach - viewtopic.php?f=7&t=28095



Nowy temat Ten temat jest zamknięty. Nie można w nim pisać ani edytować postów.  [ Posty: 1 ] 
Autor Wiadomość
PostZamieszczono: 23 kwie 2010 15:31 

Rejestracja: 27 gru 2009 17:35
Posty: 623
Pochwały: 215
Płeć: Mężczyzna
Marka telefonu: LG
Model telefonu: GT540
Wersja SW/OS: Android 2.3.4
Sieć: Plus
WIEM ze topic powinien być w sekcji "Tutoriale", ale myślę, ze tutaj jest bardziej odpowiednie miejsce ;)

Tutorial stworzony specjalnie dla kp500.pl. Jeśli chcesz zmieścić go na innej stronce, podaj imie autora(ow, jeśli ktoś dopisze coś od siebie) i link do tego tematu.

Intro:
Mozna nauczyć się flash'a ucząc się z gotowych motywów itp, lecz nic nie zastąpi dobrego wytłumaczenia. Na pewno jest tutaj wiele osób, które maja tonę naprawdę fajnych pomysłów na motyw, a możliwe ze nie wiedza zbytnio jak ten pomysł zrealizować.
Tak wiec postanowiłem przekazać swoja wiedzę na temat tegoż języka, i proszę także innych twórców o pisanie swoich spostrzeżeń, samodzielnie napisanych skryptów, aby powstał jeden wielki i zrozumiały tutorial..
Flash to dość prosty język, wystarczy tylko zaczaić o co w nim chodzi, zrozumieć go, a wszystko samo się ułoży ;)
Screeny będą w formie linku, gdyż długość tego postu będzie ogromna jeśli dodam je w znaczniku [img]...
Jeśli jesteś osoba o słabych nerwach, chciałbyś wszystko umieć od razu, lepiej w ogolę tego nie próbuj.
Radze wam dokładnie przećwiczyć każdy punkt zanim przejdziecie do następnego.

1 cześć.
A więc zacznijmy od podstaw tworzenia motywów do naszego kochanego ciasteczka ;)
_________________________________________________________
PODSTAWY

1. Nowy dokument powinien mieć ustawienia (screen = http://img191.imageshack.us/img191/8698/ustd.png):
- "Flash Player" nie wiekszy niz 8
- Action Script nie wiekszy niz 2
- Size oczywiscie 240x400 pixeli
- Liczba FPS'ow oznacza plynnosc klatek, np jeśli ustawimy 1 FPS to animacja będzie przeskakiwać co jedna klatkę. Osobiście zawsze ustawiam 24. Cookie więcej niż 25 nie pociągnie z racji procka jaki w nim siedzi.

Ustawienia gotowe, co teraz?
Rada od siebie: Utwórz warstwę pt. "Action Layer" (nazwa niekoniecznie taka) i tam kładź wszystkie skrypty, które dotyczą całego dokumentu.
Nie każde skrypty umieścisz w określonej grafice, a niemal każdy skrypt umieścisz w warstwie, potrzeba tylko trochę wiedzy. Jednakże do warstwy z akcjami polecam dodawać tylko skrypty dotyczące całego dokumentu.
Reszta tutoriala będzie się opierała właśnie na tym założeniu.
Teraz dodaj te skrypty do "Action Layer" (dodawaj bez myslnika, po // będę opisywał skrypt. W dokumencie po tych znakach można sobie także dopisać swój komentarz do skryptu, aby rozpoznać co jest co...):
- _focusrect = false; //ten skrypt eliminuje żółte pola po wciśnięciu czerwonego klawisza na telefonie.
- getURL("FSCommand:setHighQuality", 2); //jak nazwa wskazuje, ten skrypt ustawia jakosc dokumentu, przy czym 2 to max.
- Jesli chesz ukryc tekst operatora i nie zmulic przy tym telefonu:
getURL("FSCommand:Idle_CMD", "TrayOpen");
getURL("FSCommand:Idle_CMD", "TrayClose");

Następnie otwórz swój program graficzny (GIMP, PhotoShop etc) i twórz!
2. Kiedy już masz gotowa grafikę i rozmieściłeś ja na dokumencie flash tak jak chciałeś:
- Guziki np. do menu - zaznacz LMB (lewy przycisk myszy) i wciśnij F8. Name ustawiasz opcjonalnie, jest to wygodne, aby każdą grafikę w bibliotece nazwać inaczej, gdyż potem unikasz konfliktow z innymi plikami, ktore pod dana nazwa już istnieją. W tabelce "Type" masz 3 wybory: Graphic, Button i Movie Clip. W grafice nie zamieścisz zadnego AS (action script'u) wiec uzywaj tego typu tylko do jakichs grafik. Button - ten typ polecam do uzywania wszelakich guzikow i w pozniejszych czesciach tutoriala, do podrozowania miedzy klatkami, ale to pozniej. Movie clip z kolei uzywam do animacji. Narazie zostawmy Graphic i Movie Clip i skupmy sie na podstawach.
Wybierz typ guzika "Button", nastepnie "OK". Zaznacz jeszcze raz ten guzik i wcisnij F9. W tym okienku umieszczamy Action Scripty. http://www.mediafire.com/?h0meyznzkz5, tutaj macie link do pliku tekstowego ze spisem AS'ow do poszczególnych okienek na telefonie.
Jednak umieszczenie samego AS'a nie wystarczy. System nie wie co z nim zrobić, dlatego są poprzedzenia rożnego typu:
on (press) {
kod
} //Ten "poprzednik" sygnalizuje ze dany AS ma byc uzyty podczas klikniecia na guzik

on (release) {
kod
} //Ten z kolei sygnalizuje ze akcja ma sie odbyc po puszczeniu guzika (uzywajac tego poprzednika mozna zjechac palcem z guzika i akcja sie nie odbedzie)

Jest jeszcze sporo innych ale narazie interesujemy sie tylko tymi.
Przyklad kodu do guzika prowadzacego do topmenu - reakcja dotyku na wcisnieciu, akcja na puszczeniu guzika:
on (press) {
getURL("FSCommand:Common_CMD", "TouchFeedback^KEY_PRESSED");
}
on (release) {
getURL("FSCommand:IdleSoftkey_CMD", "Cmd4");
}

Podsumowanie: LMB na instancje + F8 - konwersja grafiki na symbol.
LMB na instancje + F9 - wlaczenie okna z akcjami
on (press) {kod} / on(release) {kod} - poprzedniki skryptu
Movie clip - typ symbolu, uzywany do widgetow, animacji.
Button - typ symbolu, uzywany do wszelakich guzikow
Graphic - typ symbolu, uzywany do grafiki (nie mozna zamiescic AS)


Mysle ze podstawowe ruchy co nieco wytlumaczylem. Teraz tutorial rozejdzie sie w wiele stron, sam nie wiem od czego zaczac, gdyz jest tego naprawde duzo...

_________________________________________________________
2 cześć.
Hmm naprawdę ciężko wymyslec od czego by tu zacząć, ponieważ na tym etapie jest wiele tak samo ważnych i mniej ważnych rzeczy...
No to zacznijmy od dupereli ;)

GRAFICZNE EFEKTY DOTYKU

Jak pewnie zauważyliście używając kodów z poprzedniej części tutoriala, nie ma żadnych efektów na guzikach kiedy na nie klikamy, a mimo to w wielu motywach są podświetlenia, czy inne bajery.
A wiec, jest kilka sposobow na graficzny efekt klikniecia guzika.

3. Prosty efekt nadania przezroczystosci na wcisniecie: Do wczesniej poznanych "poprzednikow" skryptu dopisz "this._alpha = 90;". Przyklad:

on (press) {
getURL("FSCommand:Common_CMD", "TouchFeedback^KEY_PRESSED");
this._alpha = 80;
}
on (release) {
getURL("FSCommand:IdleSoftkey_CMD", "Cmd4");
this._alpha = 90;
} //Przyjzyj sie chwile do "this.[...]" poniewaz to bedzie tematem nastepnych podpunktow

- Chcawszy zrobic bardziej wymyslne efekty dotyku, np. podswietlenie, po prostu stworz rzadane
podswietlenie w programie graficznym (koniecznie dodaj na nim troche przezroczystosci), skopiuj go do
projektu, przekonwertuj na "Button" (patrz podpunkt 2) i kliknij na nim 2 razy LMB. Wszedles w tryb edycji tegoz
"Buttona". Na dolnym pasku, obok warstw masz pokazane 4 klatki (screen = http://img130.imageshack.us/img130/6480/highlightsp.png)
Kliknij na 1-wsza klatke "Up" i 4x wcisnij F6. Jako ze nas interesuje tylko "Down i Hit" kliknij na klatke "Up" i
wcisnij klawisz "Delete", a nastepnie zrob to samo z klatka "Over".
Wychodzimy z trybu edycji poprzez klikniecie 2x LMB gdzies na pustym polu. Kod dodajemy w ten sam sposob co do
zwyklego guzika, tzn F9 i piszemy ;)


Podsumowanie: F6 - nowa klatka
2x LMB na instancji - tryb edycji
_________________________________________________________
KLATKI

4. Nastepny podpunkt poswiece systemowi klatek. Dzieki temu wytworowi mozemy tworzyc strony (patrz moj motyw HTC HD2), animacje, a nawet widget'y, czy tzw. widget boxy (ja osobiscie robie wiekszosc rzeczy wlasnie na podstawie klatek, lecz jak by to bardziej doswiadczony tworca motywow powiedzial - "OMG Noob..", mimo to wierzcie mi ze ten noobowski styl jest duuuzo latwiejszy niz inne skomplikowane sposoby)
Generalnie sprawa jest prosta, mimo to wymaga troche poswiecenia czasu.
Spojrz na screen z podpunktu 3 (podswietlenia), tam wspomnialem juz troche o klatkach. Aby stworzyc nowe klatki kliknij na 1-wsza klatke na polu z nimi (screen = http://img535.imageshack.us/img535/1985/klatki.png) i wcisnij F6. Kliknij na kwadrat, ktory wlasnie sie pojawil (te kwadraciki symbolizuja klatki) i jeszcz raz tworz ;)

Przechodzenie z klatek do klatek:
Robisz to samo co z jakimkolwiek guzikiem, (F8 > Button | F9) W ramce z AS wklejasz skrypt taki jak np. do topmenu, z tym ze zamiast skryptu odpowiedzialnego za przejscie do topmenu wpisujesz:
gotoAndStop(2); albo gotoAndPlay(2) - 1-wszy skrypt jesli chcesz od razu przejsc do okreslonej klatki, a 2-gi jesli chcesz przeniesc sie do jakiejs klatki i odtworzyc jej animacje (kolejne klatki).

UWAGA! Zeby myk z klatkami dzialal, musisz dodac w "Action Layer" skrypt stop(); - inaczej klatki beda grane jako powtarzajaca sie animacja (czyt. migotanie)
Jeszcze mala uwaga do uzywania animacji z gotoAndPlay(x); - na ostatniej klatce, gdzie jest koniec animacji, takze dodaj skrypt (stop);

Tutaj wchodzi nastepny typ guzika opisany w podpunkcie 2 - Movie Clip. Mianowicie ma on oddzielne klatki, sam w sobie (tzn w trybie edycji) i uzywanie tego sposobu jest duzo wygodniejsze z tym ze jesli chcemy uruchomic animacje z tego movie clip'a zamiast gotoAndPlay/Stop(x); musimy dac nazwa_instancji.gotoAndPlay/Stop(x);.
Zmiana nazwy instancji - wcisnij na wczesniej zrobiony movie clip, przypomnij sobie ustawienia dokumentu, gdzie zmieniales ich wartosci, z tym ze teraz spojrz troche wyzej. Jest tam pole tekstowe z napisem <Instance Name>, wpisz tam cos i ta nazwe uzyj we wczesniej wspomnianym skrypcie. Wiecej na ten temat w nastepnym podpunkcie.

Podsumowanie: Samo w sobie;)
_________________________________________________________
SZERSZE UZYWANIE KODOW.

5. W poprzednim podpunkcie (3) napisalem, abys przyjzal sie miejscu w kodzie z "this.[...]"
Generalnie chodzi w tym o to, ze kod po "this." dziala do tej instancji, w ktorej zamiescilismy kod, a jesli damy
zamiast this. - guzik. to akcja bedzie dotyczyla instancji pt. "guzik". Np.
uzywajac kodu this._alpha = 80; mozemy dodac guzik._alpha = 80; co sprawi ze po
kliknieciu guzika X, efekt przezroczystosci pojawi sie na guziku Y.

Ten trick jest przydatny np do tworzenia guzikow z 2 akcjami, np widget on/widget off. Tak naprawde
to sa 2 rozne guziki, nie 1.
Prosty przyklad guzika uruchamiajacego/wylaczajacego widget:
- Tworzymy 2 przyciski, 1 nazywamy clock_on, a 2 clock_off
- guzik clock_on ustawiam gdzies na ekranie, a clock_off dokladnie 250pixeli dalej na osi X ukladu
wspolrzednych (np. guzik 1 x=0, guzik 2 x=250)
- Do 1 dodaje nastepujacy kod:
on (release) {
analog_clock.gotoAndStop(2); //To jest kod przejscia klatek okreslonego Movie clipa opisanego rowniez w podpunkcie 5.
clock_on._x = clock_on._x + 250; //Ten sprawi ze nasz guzik clock_on zmieni swoje polozenie o 250px (wyjdzie poza ekran)
clock_off._x = clock_off._x - 250; //A ten z kolei umiesci guzik do wylaczania na miejscu wlaczajacego.
}

- Do 2 (off) taki:
on (release) {
analog_clock.gotoAndStop(1);
clock_off._x = clock_off._x + 250;
clock_on._x = clock_on._x - 250;
} //Ten kod odwroci kod ustawienia z poprzedniego kodu, tzn guzik clock_on wroci na swoje miejsce

Jest to jeden z najprostszych kodow na "guzik z 2 akcjami", a jest ich sporo ;)

Podsumowanie: nazwa_instancji. dziala praktycznie do kazdego kodu, symbolizujacego dzialanie.

_______________________________________________________
WIDGETY STOSUJAC SYSTEM KLATEK.

6. Jak juz wczesniej wspomnialem, mozliwe jest stworzenie widgetow uzywajac systemu klatek. Ten podpunkt bedzie oparty na 2 poprzednich, wiec nie zabierajcie sie do niego bez dokladnego przestudiowania tamtych.
- Wykonaj teraz to co napisalem w 5 podpunkcie (2 guziki z kodami danymi wyzej, nazwij i ustaw je tak jak trzeba).
- Teraz wstaw pole tekstowe i napisz byle co (na tym etapie opisze zwykle pojawianie sie/znikanie tekstu, widgety dzialaja na tej samej zasadzie).
- Nazwa instancji "analog_clock" (bez "", nazwa taka jak w skryptach wyzej, zeby bylo prosciej).
- Przekonwertuj te pole tekstowe do "Movie clip".
- Wcisnij na nim 2x LMB. Jestes w trybie edycji.
- Dodaj klatke, tak zeby bylo ich 2.
- Zaznacz pierwsza na polu z klatkami, wcisnij F9 i dodaj skrypt stop(); zeby instancja nie "wariowala".
- Usun zawartosc 1 klatki (zaznacz na polu i wcisnij delete) >> Wyjdz z trybu edycji.

Jesli wykonales wszystko poprawnie, po wcisnieciu "guzika z 2 akcjami" powinien sie pojawic napis, ktory wykonales, a po wcisnieciu go jeszcze raz, napis powinien zniknac.

To byl tylko przyklad jak stworzyc prosty widget (jego zdolnosc do ruchu w nastepnym podpunkcie). Wszystko dziala na tej samej zasadzie, czytajac to powinienes juz wiedziec co zrobic (pozmieniac) aby moc stworzyc nastepny widget. Bierz wszystko na rozum, a samo sie zalapie ;)

_______________________________________________________
ZAPISYWANIE KLATEK | POZYCJI WIDGETOW. ZDOLNOSC DO RUCHU WIDGETU

7. Zapisywanie pozycji widgetow i ich zdolnosc do ruchu musza byc w jednym miejscu aby zapisanie pozycji dzialalo, dlatego odlozylem to na teraz.
- Dodaj ten skrypt do "Action Layer"

widgetdata = _global.mflash_DataRead("Idle.WidgetSet", "WidgetType^WidgetState^TrayOrder^PositionX^PositionY", "SSNNN", 0, 6);
function SetWidgets(){
analog_clock._x = widgetdata[0].PositionX;
analog_clock._y = widgetdata[0].PositionY;
widget_2._x = widgetdata[1].PositionX;
widget_2._y = widgetdata[1].PositionY;
}
SetWidgets();

analog_clock.onPress=function(){
startDrag(this);
}
analog_clock.onRelease=function(){
stopDrag();
getURL("FSCommand:Idle_CMD", "WidgetPositionChange"+"^"+0+"^"+_root.analog_clock._x+"^"+_root.analog_clock._y);
}

widget_2.onPress=function(){
startDrag(this);
}
widget_2.onRelease=function(){
stopDrag();
getURL("FSCommand:Idle_CMD", "WidgetPositionChange"+"^"+1+"^"+_root.widget_2._x+"^"+_root.widget_2._y);
}

Jest to przyklad zapisania 2 widgetow i przy okazji nadania im mozliwosci ruchu. analog_clock to nazwa instancji tak jak w wyzej wymienionych punktach.
UWAGA! Mozna zapisac maksymalnie 7 widgetow (0-6) i tyle samo uzywajac skryptow do zapisywania pozycji szybkich kontaktow (2 ekran z oryginalnego motywu), razem 14 pozycji. Sam nie wiem jeszcze jak tego uzywac, aczkolwiek kod bedzie napewno podobny.
Mozliwe jest ze jesli zapiszemy pozycje duzej ilosci widgetow, motyw bedzie mulil jak siemasz. Dlatego Android theme by Thorzeus94 itp. sa nie zdatne do uzytku.

8. Zapisywanie klatek.
- Zapisywanie klatek w przeciwienstwie do widgetow jest nieograniczona, i przy tym nie muli telefonu. Jest tylko jeden maly problem, mianowicie po wcisnieciu klawiatury wybierania, wszystko zostaje wymazane, motyw idzie spowrotem do 1 klatki, tak jakby tego zapisywania w ogole nie bylo.
Tak wiec:
- Do np. guzika dodaj skrypt (musi znajdowac sie takze w ktoryms z poprzednikow, nie ma najmniejszego znaczenia w ktorym):
NAZWA.data.saved = 1; //1 to liczba, dzieki ktorej dokument rozpozna co zapisales. Mozna tam wstawic tylko i wylacznie liczbe.
NAZWA.flush(); //Tu gdzie pisze "NAZWA", mozesz umiescic dowolny wyraz. Ulatwia to rozpoznanie, ktory skrypt zapisuje co.
- Do "Action Layer" dodaj nastepujacy skrypt:
var NAZWA = SharedObject.getLocal("saved"); //Gdzie nazwa, wpisz to samo co w skrypcie wymienionym wyzej.
if (NAZWA.data.saved == 1) //Jesli dokument zapisal date "1"
{
gotoAndStop(2); //Po ponownym uruchomieniu motywu, wykona ta akcje. W tym przypadku przejdzie do klatki nr.2
}
if (NAZWA.data.saved == 2) //W ten sposob dodawaj kolejne zapisy.
{
gotoAndStop(3);
}

var NAZWA =[...] jest tak jakby wytlumaczeniem, co sygnalizuje "NAZWA", kazda inna trzeba tak samo wytlumaczyc, numerki mozna uzywac znowu od 1...
Mozna zapisac takze wiele roznych rzeczy uzywajac tego skryptu!



Aktualizacja | 30 kwietnia 2010.


TAPETA TELEFONU.
9. A no wlasnie zapomnialem o ladowaniu tapety telefonu do motywiku ;) Nie bede sie zbytnio rozpisywal, instrukcji tez nie bedzie - mysle ze gotowy plik ulatwi sprawe calkowicie ;)
Link: http://www.przeklej.pl/plik/bg-fla-0010bn3cq2mv
Po prostu wklej do motywiku i bedzie automatycznie ladowal tapete telefonu.

ODTW. MP3 NA WIDGECIE.
10. Tytul piosenki, album itp.
- Dodajemy ten kod do Action Layer:
function updateAll()
{
var _loc4 = _global.mflash_DataRead("Idle.WidgetMusicPlayer", "State", "S", 0, 1);
var _loc3 = _global.mflash_DataRead("Idle.WidgetMusicPlayer", "Title^Artist^Genre^BGM", "SSSS", 0, 1);
_root.songtitle.text = " " + _loc3[0].Title + " - " + _loc3[0].Artist + " ";
}
- Tworzymy pole tekstowe, dynamiczne. Instance name "songtitle"
No i to wszystko ;)
11. Kody do guzikow.
- Wszystko dziala na tej samej zasadzie co guziki do topmenu itd, z tym ze zamiast kodu do topmenu wpisujemy nastepujace:
fscommand("Idle_CMD", "WidgetMusicControl^Play"); //Play
fscommand("Idle_CMD", "WidgetMusicControl^Pause"); //Pause
fscommand("Idle_CMD", "WidgetMusicControl^Next"); //Next
fscommand("Idle_CMD", "WidgetMusicControl^Prev"); //Previous
fscommand("Idle_CMD", "WidgetMusicControl^Stop"); //Stop

Play/Pause mozna zrobic takze w jednym guziku sposobem klatek lub wyzej opisanym sposobem zmiany pozycji guzika.
_______________________________________________________
Topic bedzie stale aktualizowany. Kiedy ja sie czegos dowiem, przypomne, lub jesli jakis inny tworca motywow podrzuci mi jakas sugestie nie zawarta w tutorialu.
Aha, chcialem przeprosic za swoje bledy skladniowe. Nie moge sie tego pozbyc ;(
ZYCZE UDANYCH WYTWOROW! :)


Pochwały przyznane za post: 31

Ostatnio zmieniony 30 kwie 2010 09:55 przez Kulesiak, łącznie zmieniany 4 razy

Na górę
Offline Wyświetl profil  
 
Wyświetl posty nie starsze niż:  Sortuj wg  
Nowy temat Ten temat jest zamknięty. Nie można w nim pisać ani edytować postów.  [ Posty: 1 ] 



Kto jest online

Użytkownicy przeglądający to forum: Nie ma żadnego zarejestrowanego użytkownika i 2 gości


Nie możesz tworzyć nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz dodawać załączników

Szukaj:
Przejdź do:  
cron


Powered by ® Forum Software © phpBB Group. Theme created StylerBB.net
Samsung Avila, Monte, Wave, Galaxy - LG forum - Jak usunąć Śledzika? - Centrum Nokia - Centrum Samsung Corby
Copyright © 2009-2011 by n3h