Posts tagged ‘alladyn’

Jak to zwykle bywa pare zbiegów okoliczności:

  • zaczęło się do tego wpisu
  • później dodatkowe pomysły na animacje pojawiały się w nieregularnych odstępach
  • później powstał ten layout
  • później 3 wieczorki i strona gotowa

Z tych właśnie zbiegów okoliczności powstała mała stronka: slidemenus.bedkowski.pl

Jak widać  to oczywiście wycinek możliwości samej biblioteki, ale jakoś trzeba przyciągnąć uwagę.

Trochę upłynęło czasu od ostatniego wpisu, ale byłem dość zajęty pracą na dwoma niezmiernie ciekawymi projektami. Oba są związane ze skryptami ECMA, jeden z nich dotyczy języka JavaScript i jest rozszerzeniem projektu Alladyn w wersji 1.6. Pomysł chodził mi po głowie od dawna, ale dopiero do niedawna dojrzał na tyle, iż uznałem, że czas sie za niego zabrać.

Podstawowe założenia:

  • dodawanie klatek kluczowych poprzez metode addFrames
  • dodawanie klatek oznaczonych labelką
  • wywoływanie animacji „ciągiem” korzystając z metody play
  • wywoływanie animacji korzystając z numeru klatki
  • wywoływanie animacji korzystając z labelki
  • możliwość definowania sztucznej własności, która zawiera callback do skryptu, który ma być wykonany w danej ramce
  • integracja z jQuery
  • definiowanie własności clip korzystając z cztero-elementowej tablicy (clip:rect)
  • dodanie obsługi własności dotyczących kolorów (background-color/border-color/color)
  • obsługa kolorów poprzez trój-elementową tablicę kolejnych składowych RGB
  • dodanie obslugi rownan ruchu Robert’a Penner’a

Wszystkie elementy udało się zrealizować, wynik można obejrzeć tutaj.

Dorzuciłem także parę przykładów:

Zapraszam również do mojego nowszego wpisu, slidemenus oraz strony z demo.

Jeżeli podoba Ci się ten projekt to zapraszam również do obejrzenia, projektu obiektowych komententów skyjs.

Na jednym forum pojawiło się pytanie o to jak zrobić przejście między obrazkami no i od razu pomyślałem o Alladynie, a przy okazji chciałem sprawdzić na ile tak naprawdę ułatwia on pracę i nie zawiodłem się – zrobienie animacji zajeło niecałe pół godzinki i poza samym efektem fade, dodałem jeszcze rozwijanie/zwijanie jako dodatkowy bajerek. Gdyby api było bardziej przyjazne niż 3 literowe skróty poszłoby jeszcze szybciej. No cóż trzeba się bedzie tym zająć 🙂

Efekt tutaj

Wersja druga

Dzisiaj Eclipse CDT wali jakieś fochy, więc kolejnej części rvalue konwertera nie będzie, ale za to mam coś z zupełnie innej beczki. Otóż serfując po sieci natrafiłem na taką oto stronę gdzie animację boksów wykonano, za pomocą flasha i actionscriptu, jednak miałem wrażenie, że to lekka przesada, nie mówiąc o brakach w SEO, no ale pewnie radzą sobie inaczej. Tak czy owak, zaprzągłem do pracy Alladyna i efekt jest w miarę podobny (trzebaby dodać obsługe easein/out), no ale jak na godzinną animacją to chyba całkiem nieźle. Efekt tutaj – kliknięcie w dany boks przenosi go na srodek (tryb zgodności ze standardami to moja poprawka:)).