Curs d’Edge Animate CC

Curs Edge

Descripció del curs

Adobe Edge Animate CC és el Flash per HTML5 , permet crear animació amb o sense interactivitat per a navegadors moderns d\’ordinador , smartphones i tablets , de forma fàcil i ràpida .

Objectius:

¿ Què aprendràs en aquest curs d\’Edge Animate CC ?

1 . Generar contingut gràfic des de Photoshop o Illustrator . Reutilitzar il · lustracions vectorials de Flash .2 . Crear composicions noves , importació de gràfics per a la web .3 . Crear diferents tipus d\’animacions per banners , intros …

keyframing : crear fotogrames clau i Edge Animate crea una transició gradual .
Pining ( inversa - directa ) : una forma simplificada i flexible de keyframing , modificant les propietats dels objectes a l\’escenari, interactivament amb el ratolí .
Mostra - amagar: que el JavaScript desactivar keyframe visibilitat .
Flipbook : animació frame a frame .
Animacions niuades amb símbols : molt útil en objectes amb animacions secundàries , terciàries …
Rutes de moviment : amb traçat vectorials editables ( novetat Edge Animate CC ) .

5 . Posicionament relatiu vs . absolut : posició i escala d\’objectes , no en píxels sinó percentual .6 . Afegir interactivitat .7 . Integració amb fluxos de treball :

Enriquir el contingut d\’un projecte web , amb efectes animats o interactius .
Exportació i integració de l\’animació a : Dreamweaver , DPS ( revistes digitals InDesign ) , IbooksAuthor …

Usos d\’Edge Anima\’t CC

• Animacions web HTML5 : banners , intros … mitjançant una interfície gràfica , sense escriure codi CSS3 . Suportat per navegadors moderns , en ordinador , tablets i smartphones .• Animació interactiva : usant JavaScript, API propi Edge Animate , jQuery i altres llibreries JavaScript.• Integració amb : Dreamweaver i witgets per a publicacions digitals DPS - InDesign i IbooksAuthor .La creació del contingut gràfic s\’ha de fer des d\’Illustrator , Photoshop ..

Temari del curs

Què és Edge Anima\’t i Interfície

Animació HTML5 vs Flash - SWF . Descàrrega , requeriments mínims . Versió CC trial o subscripció Creative Cloud . Compatibilitat entre versions .
Recórrer finestres . Eines . Tecles acceleradores . Espais de treball . Canviar idioma .
Panells : Escenari , Línia de temps , Elements , Propietats (veure equivalència amb regles CSS ) .

Generació de contingut gràfic i importació a Edge

Flash: reutilitzar contingut gràfic .
Illustrator i Photoshop : exportació de múltiples pàgines , en format jpg , png , SVG ( vectorial HTML5 ) .
Panell Propietats: dimensions i color l\’escenari …
Importació i multi -importació : arxius gràfics suportats . Actius carpeta images .
Selecció i Edició d\’objectes : Eina de selecció i Transformar . Alinear , distribuir , organitzar ( ordre d\’apilament ) .

Animacions no interactives

Tipus d\’animació: keyframing , pinning ( inversa - directa) , Mostra - amagar , flipbook .
Reemplaçar imatge i editar en origen .
Efectes d\’acceleració Easing a canals d\’animació : lineal , acceleració , frenada , rebot …
Afegir animació a contingut HTML existent.
Símbols i implantació. Compartir símbols ( importació - exportació ) .
Rutes de moviment transformables .
Màscares de retallada i filtres .
Disseny líquid : objectes amb escala i posició percentual . Centrat i escalat de l\’Escenari .
Textos : Fonts web . Text viu seleccionable i indexable a Google.

Animacions interactives amb fragments de codi

S\’obtenen sentències predefinides , sense necessitat d\’escriure codi .

Animació amb bucle , assignació d\’accions a un Activador .
Hipervincles : a URL pàgines web remotes .
Textos dinàmics : canviar el contès d\’una caixa de text dinàmicament .
Obtenir símbol : trucar a la línia de temps independent d\’un símbol , des d\’un altre nivell .
control àudio, etc …

àudio

Importació arxius d\’àudio compatibles amb HTML5 mitjançant un nou Panell , sense escriure codi .
Associar esdeveniments d\’àudio a objectes oa un activador en la línia de temps .
Crear amb transicions amb propietat volum per intensificar o esvair so .

Animacions interactives avançades

Conmumtador Botó desplegar - replegar menú : Control dinàmic de la línia de temps amb JavaScript . Etiquetes -label . Variables Boolean i condicionals .
Drag and Drop : Arrossegar i deixar anar objectes .
Random : animació amb moviment aleatori .
Efecte Paralax : animació interactiva sincronitzada pe amb la posició de la barra d\’ scroll .
Carregar contingut HTML dins un objecte .
Càrrega de scripts : importació de biblioteques JavaScript ( pe jQueryUI … ) mitjançant el nou Panell .

Testejar , provar l\’animació en :

in - stage : a l\’escenari. in - browser : al navegador. Assignar diferents navegadors d\’escriptori.
simulador - IOS : viewport . Dispositius : smartphone o tablet ( iPad , iPhone , Android … )

Pre- publicació i publicació

Pantalla d\’ Precàrrega per a web i DPS . Pantalla de Nivell - inferior per a navegadors antics que no suporten HTML5 .
Integració amb Dreamweaver CS6 i CC . Publicacions digitals : DPS , IbooksAuthor .

Novetats i millores de la versió Edge Anima\’t CC 3.0

Àudio : importació arxius d\’àudio compatibles amb HTML5 mitjançant nou Panell , sense escriure codi . Associar esdeveniments d\’ àudio a un activador en la línia de temps o objectes i crear transicions (pe intensificar o esvair so ) .
Centrat i escalat de l\’Escenari : mantenint la proporció respecte a la finestra del navegador .
Imatge de pòster . OAM amb transparència : per DPS actualment no suportada , per a publicacions PDF , només PNG i JPG .
Animació amb rutes de moviment millorades : basat en traçat vectorials editables , opció d\’auto - orientació i escalar i girar .
Esdeveniment swipe : escombrat horitzontal a dreta i esquerra amb el ratolí o dit .
Eina comptagotes : prendre i emmagatzemar mostres de color d\’objectes de l\’escenari .
Càrrega de scripts : afegiu biblioteques JavaScript ( pe jQueryUI … ) per ampliar els seus projectes Anima\’t amb el nou panell de càrrega d\’scripts . La importació pot ser des de fonts locals i en línia .