Share
Edge er det nyeste designverktøyet for å treffe Adobe Labs. Det lar designere bringe animert innhold til nettsteder, ved hjelp av webstandarder som HTML5, JavaScript og CSS3.
Under denne introduksjonen skal vi gjøre kjent med grensesnittet, undersøke tidslinjen og bruke litt animasjon til et virkelig prosjekt.
Vi begynner med å bli kjent med programgrensesnittet.
I denne raske skjermbildet kommer vi til å sjekke ut tidslinjen og bli animert.
I løpet av denne tredje øvelsen skal vi ta det vi har lært i de to foregående videoene, og gjør det virkelig.
Hva genererer Adobe Edge i form av filer og kode? Vel, et lite Edge-prosjekt bryter ut en mappe som ser noe ut som dette:
Du kan tydelig se Edge-prosjektfilen pluss alt distribusjonsinnhold. Det er en html-fil med tilhørende css og js-filer, så en hel mengde aktiva, inkludert jQuery, noen js-verktøy og uansett import du har gjort i prosjektet.
Når det gjelder koden generert, sjekk kilden til basen html. Kunne ikke vært enklere!
test
Innholdet blir lagt til scenen gjennom javascriptfilen og manipuleres deretter.
innhold: dom: [id: 'Rectangle1', type: 'rect', rect: [88,82,119,106], fyll: ['rgba (192,192,192,1)'] 0,0,1) "," ingen "],, id: 'Image1', type: 'bilde', rekt: [0,0,755,600], fyll: ['rgba (0,0,0,0) ',' images / Image.png '],, id:' Text1 ', type:' tekst ', rekt: [155,77,0,0], tekst: "bit av tekst" Arial Black, Gadget, sans-serif ", [24," "," rgba (0,0,0,1) "," normal "," ingen "," "],,] symbolInstanser: [] ,
Accentsconagua