Aplicații Adobe Edge Creative Cloud

• Aprilie 26, 2024

HTML5, JavaScript și CSS3 au devenit aproape la fel de populare ca Flash pentru crearea de animație interactivă pentru web, tablete și telefoane. Chirpici^R Edge Animate și celelalte aplicații Edge sunt un software foarte ușor de utilizat, cu multe presetări pentru a vă facilita munca.

Animația Timeline este încă cea mai populară modalitate de a anima și Adobe a făcut-o mai ușoară cu noile căi de mișcare Edge Animate, care pot imita mișcările din lumea reală și cu ușurarea integrată. Puteți adăuga cu ușurință animația de-a lungul cronologiei cu ajutorul butonului Pin, care adaugă markeri de animație în linia de timp sau prin poziționarea drag and drop pe obiectele pe care Edge Animate le transformă automat în căile de mișcare. Puteți utiliza chiar și butonul Înregistrare care înregistrează modificările pe care le faceți obiectelor de pe scenă și transformă aceste modificări în animație de cadre cheie. Edge are, de asemenea, propria sa versiune a panoului Acțiuni, care este neclintit cu fiecare acțiune având propria filă în panou. Testarea animațiilor dvs. este ușoară cu o combinație între Adobe Edge și browserul Google Chrome.

Dacă sunteți familiarizat cu animația Flash, veți observa că adăugarea de interactivitate în Edge seamănă cu fluxul de lucru Flash, prin faptul că puteți utiliza timeline cuibărit pentru fiecare element de animație și puteți aplica fragmente de cod preinstalate pentru cele mai comune interacțiuni și animații. Aceste fragmente de cod gestionează atât animația de redare, cum ar fi redare, pauză, reluare și oprire, precum și creează zone fierbinți pentru acțiunile de bază ale butonului, cum ar fi clicuri, ridicare și chiar hiperlink-uri. Pentru a adăuga cod personalizat la aceste fragmente de cod, puteți introduce direct în panoul Acțiuni. Desigur, puteți codifica manual HTML5, JavaScript și CSS3 în panoul Acțiuni. Deoarece acest tip de programare web și animație se bazează adesea pe Bibliotecile JavaScript externe, puteți adăuga chiar și linkuri către aceste surse externe.

Animația este doar o parte din ceea ce puteți face cu grupul de aplicații Edge. Unul dintre cele mai importante aspecte ale designului web este crearea unui site web care să răspundă sau să fie flexibil pentru toate tipurile de ecrane, de la desktop la telefoane mobile. Acest lucru se realizează cu interogări media și machete de grilă fluide, procentuale, ambele fac parte din instrumentele găsite în Edge Reflow. Edge Reflow este un mediu de lucru WYSIWYG care generează codul pentru proiectul dvs. Acest cod este actualizat pentru cele mai recente standarde web, în ​​special WebKit, care este din ce în ce mai susținut de toate, de la pagini web la cititori electronici.

Construirea unui layout în Edge Reflow este la fel de ușoară precum desenarea containerelor HTML HTML în grilă cu instrumentul Box și poziționarea absolută a acestor divs le permite redimensionarea sau transformarea, după cum este necesar pentru fiecare dimensiune a ecranului. Cum funcționează asta? Secretul este Interogări media pe care le puteți personaliza în Media Query Manager prin setarea parametrilor minim și maxim pentru trei sau mai multe rezoluții de ecran. Acești parametri vor determina momentul în care proiectarea se va transforma în sus sau în jos pentru cea mai apropiată dimensiune a ecranului. Îmi plac foarte mult indicatoarele vizuale codate prin culori pentru fiecare dimensiune a ecranului din partea de sus a spațiului de lucru, care vă ajută să vizualizați când vor apărea aceste modificări.

Una dintre caracteristicile Edge care economisesc mai mult timp este modul în care puteți reutiliza cu ușurință stilurile CSS3 personalizate pe mai multe proiecte și, astfel, să mențineți stiluri consistente. Acest lucru face, de asemenea, actualizarea aproape automată. Adobe a făcut din aceasta o parte a fluxului de lucru cu panoul Styling Edge Reflow. Pentru a menține lucrurile neclintite, fiecare stil, cum ar fi fundaluri sau margini, are propria secțiune individuală. Puteți controla culoarea și alți parametri, precum și ierarhia straturilor, direct din aceste file. Aceste stiluri personalizate sunt convertite automat în reguli de stil CSS, care pot fi apoi copiate / lipite pentru reutilizare.

În trecut, pentru a previzualiza pagina web, aveai nevoie pentru a salva modificările, a comuta la un browser web și a reîmprospăta pagina. Adobe a redus numărul acestor pași folosind o combinație de Edge Inspect și browserul Chrome. Acum puteți previzualiza modul în care proiectul dvs. va fi afișat pe mai multe dispozitive de pe desktop, tabletă și telefon mobil. O caracteristică care îmi place foarte mult este posibilitatea de a face o captură de ecran a acestor previzualizări pentru a trimite un e-mail către clienți și membrii echipei sau pentru a o folosi pe Creative Cloud pentru colaborare.

În cele din urmă, pentru cei dintre noi cărora le place în continuare să lucreze cu cod brut, Adobe are Edge Code. Fereastra de cod este neclintită cu doar câteva controale din stânga și Edge Code se integrează cu Google Chrome pentru a vă oferi o previzualizare live. Când codul dvs. devine lung și nefolositor, puteți descărca la nivelul elementelor individuale utilizând funcția Editare rapidă care listează toate stilurile atașate unui element dintr-o fereastră de suprapunere. Deoarece aplicațiile Edge fac parte din Creative Cloud, puteți utiliza fonturile Web Adobe Edge, fonturile Web Google și fonturile Typekit direct din Codul Edge. Edge Code va genera eticheta de script a antetului care intră în fontul extern.

Deoarece HTML5, JavaScript și CSS3 înlocuiesc rapid tehnici de animație mai vechi datorită popularității dispozitivelor mobile, aceste aplicații Edge integrate, precum și integrarea lor cu celelalte aplicații Adobe reprezintă următoarea generație a fluxului de lucru pentru proiectare și dezvoltare a mai multor dispozitive.

Dezvăluire: nu am fost compensat financiar pentru acest articol. Adobe a furnizat un membru Creative Cloud în scopul acestei recenzii.Opiniile sunt complet ale mele pe baza experienței mele.

Copyright 2018 Adobe Systems Incorporated. Toate drepturile rezervate. Captura (ecranele) de produs Adobe tipărite cu permisiunea Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Elementele Premiere, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst și Flash Paper este / sunt [o] marcă înregistrată [sau] sau o marcă comercială a Adobe Systems Incorporated în Statele Unite și / sau în alte țări.

Instrucțiuni Video,: How to Edit Vertical Video Footage (Aprilie 2024).