A fent látható egyszerű frame by frame animáció elkészítése lépésről lépésre.
Hozzunk létre egy új dokumentumot az alábbi paraméterekkel:
A hátteret konvertáljuk réteggé dupla kattintással és nevezzük el bg-nek.
A bg rétegen alkalmazzunk Gradient Overlay-t:
Hozzunk létre egy új réteget, a neve legyen 1. Rajzoljunk rá egy 30x30 képpont méretű kört az Ellipse Tool-al a Shift gombot lenyomva tartva, hogy az arányokat tartsuk:
A körön Inner Shadow, Gradient Overlay és Stroke stílusokat állítsunk be az alábbiak szerint:
A kör most már így néz ki:
Hozzunk létre három másolatot a körből, helyezzük el egyenlő távolságra egymástól és nevezzük el szám szerint emelkedő sorrendben:
Nyissuk meg a Window -> Layer Comps panelt. Hozzunk létre egy új állapotot, és nevezzük el alapnak. A láthatóság, pozíció és stílusok is kerüljenek rögzítésre.
A Layer Comps panelben elmentettük a rétegeink jelenlegi beállításait:
Az 1 nevű rétegen módosítsuk a Gradient Overlay-t az alábbiak szerint:
Ekkor az első kör zöld színűre változik. Mentsük most el ezt az állapotot is, adjunk hozzá egy új állapotot a Layer Comps panelen, nevezzük el 1-nek, mert ez lesz az animáció első képkockája. Elég, ha a stílust elmentjük, a pozíció és láthatóság nem változott az alaphoz képest.
Másoljuk le a réteg stílusát, jobb egérgomb, majd a helyi menüből válasszuk a Copy Layer Style opciót.
Töltsük vissza a Layer Comps panelen az alapállapotot, majd a 2 nevű rétegen illesszük be a stílust (jobb gomb -> Paste Layer Style). Mentsük el az állapotot a Layer Comps panelen 2 néven. A műveletet ismételjük meg a maradék két körön is. A végeredmény az animáció négy állapota + az alapállapot kell legyen elmentve a Layer Comps panelen.
Nyissuk meg a Window -> Animation panelt. Ha Timeline van kiválasztva, akkor váltsunk át Frame animation-re. A panel jobb felső sarkában lévő menüből válasszuk a Convert to Frame Animation opciót.
Az ismétlések számát állítsuk Forever-re. A megjelenítés idejét 0,5 sec-re. Hozzunk létre 4 képkockát, és mindegyiken állítsuk be a megfelelő állapotot a Layer Comps panelen:
A play gombbal tesztelhetjük az animációt. Ha elkészültünk, exportáljuk GIF formátumban. Válasszuk a File -> Save for Web & Devices... opciót.
Használjuk ki a 256 színes maximum korlátot, a fájl mérete így is csak 10Kbyte lesz. Az átlátszóságot kapcsoljuk ki.
A végeredmény:
A forrás PSD innen tölthető le.
Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...
Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...
Szerintem azt sehogy....
Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......
Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....
Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...
Ha három fázisod van, akkor három fázisú Fi relét kell venni....
Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...
"3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...
Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....
Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...
Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....
Nagyon érdekes volt, köszi