Aplikacje Adobe Edge Creative Cloud

• Może 2, 2024

HTML5, JavaScript i CSS3 stały się niemal tak popularne jak Flash do tworzenia interaktywnych animacji dla Internetu, tabletów i telefonów. Cegła suszona na słońcu^R Edge Animate i inne aplikacje Edge to bardzo przyjazne dla użytkownika oprogramowanie z wieloma ustawieniami ułatwiającymi pracę.

Animacja na osi czasu jest nadal najpopularniejszym sposobem animacji, a Adobe ułatwiło to dzięki nowym ścieżkom ruchu Edge Animate, które mogą naśladować ruchy w świecie rzeczywistym i dzięki wbudowanemu ułatwieniu. Możesz łatwo dodawać animacje wzdłuż osi czasu za pomocą przycisku Przypnij, który dodaje znaczniki animacji do osi czasu lub przeciągając i upuszczając pozycjonowanie obiektów na scenie, które Edge Animate automatycznie konwertuje na ścieżki ruchu. Możesz nawet użyć przycisku Nagrywaj, który rejestruje zmiany, które wprowadzasz w obiektach na scenie, i przekształca je w animację klatek kluczowych. Edge ma także własną wersję panelu Operacje, która jest uporządkowana, a każda akcja ma własną kartę w panelu. Testowanie animacji jest łatwe dzięki połączeniu Adobe Edge i przeglądarki Google Chrome.

Jeśli znasz animację Flash, zauważysz, że dodanie interaktywności w Edge przypomina przepływ pracy Flash, ponieważ możesz używać zagnieżdżonych osi czasu dla każdego elementu animacji i stosować wstępnie zainstalowane fragmenty kodu dla najczęstszych interakcji i animacji. Te fragmenty kodu obsługują zarówno animacje odtwarzania, takie jak odtwarzanie, pauza, wznawianie i zatrzymywanie, a także tworzą gorące obszary dla podstawowych działań przycisków, takich jak kliknięcie, najechanie kursorem, a nawet hiperłącza. Aby dodać niestandardowy kod do tych fragmentów kodu, możesz wpisać bezpośrednio w panelu Operacje. Oczywiście możesz ręcznie kodować własny HTML5, JavaScript i CSS3 w panelu Operacje. Ponieważ ten typ programowania stron internetowych i animacji często opiera się na zewnętrznych bibliotekach JavaScript, można nawet dodawać linki do tych zewnętrznych źródeł.

Animacja to tylko część tego, co możesz zrobić z grupą aplikacji Edge. Jednym z najważniejszych aspektów projektowania stron internetowych jest stworzenie strony internetowej reagującej lub elastycznej dla wszystkich typów ekranów, od komputerów stacjonarnych po telefony komórkowe. Odbywa się to za pomocą zapytań o media i płynnych układów siatki opartych na wartościach procentowych, które są częścią narzędzi dostępnych w Edge Reflow. Edge Reflow to środowisko pracy WYSIWYG, które generuje kod dla twojego projektu. Ten kod jest aktualny dla najnowszych standardów internetowych, szczególnie WebKit, który jest coraz bardziej obsługiwany przez wszystko, od stron internetowych po czytniki ebooków.

Budowanie układu w Edge Reflow jest tak proste, jak rysowanie kontenerów div HTML na siatce za pomocą narzędzia Box, a bezwzględne ustawienie tych div pozwala na zmianę ich rozmiaru lub transformację w zależności od potrzeb dla każdego rozmiaru ekranu. Jak to działa? Sekretem są Zapytania o media, które można dostosować w Menedżerze zapytań o media, ustawiając minimalne i maksymalne parametry dla trzech lub więcej rozdzielczości ekranu. Te parametry określą, kiedy projekt zmieni się w górę lub w dół dla najbliższego rozmiaru ekranu. Naprawdę podoba mi się kolorowe znaczniki wizualne dla każdego rozmiaru ekranu w górnej części obszaru roboczego, które pomagają wizualizować, kiedy nastąpią te zmiany.

Jedną z najbardziej oszczędzających czas funkcji Edge jest to, jak łatwo można ponownie wykorzystać niestandardowe style CSS3 w kilku projektach, a tym samym zachować spójne style. To sprawia, że ​​aktualizacja jest prawie automatyczna. Adobe uczyniło to częścią twojego przepływu pracy dzięki panelowi Stylizacja Edge Reflow. Aby utrzymać porządek, każdy styl, taki jak tła lub obramowania, ma swoją własną sekcję. Możesz kontrolować kolor i inne parametry, a także hierarchię warstw, bezpośrednio z tych kart. Te niestandardowe style są automatycznie konwertowane na reguły stylów CSS, które następnie można skopiować / wkleić w celu ponownego użycia.

W przeszłości, aby wyświetlić podgląd strony, trzeba było zapisać zmiany, przejść do przeglądarki internetowej i odświeżyć stronę. Adobe zmniejszył liczbę tych kroków, używając kombinacji Edge Inspect i przeglądarki Chrome. Teraz możesz podejrzeć, jak Twój projekt będzie wyświetlany na wielu urządzeniach, od komputera, tabletu po telefon komórkowy. Jedną z funkcji, którą naprawdę lubię, jest możliwość zrobienia zrzutu ekranu z tymi podglądami w celu wysłania wiadomości e-mail do klientów i członków zespołu lub użycia w Creative Cloud do współpracy.

Wreszcie, dla tych z nas, którzy nadal lubią pracować z surowym kodem, Adobe ma Edge Code. Okno kodu jest uporządkowane z kilkoma kontrolkami po lewej, a Edge Code integruje się z Google Chrome, aby zapewnić podgląd na żywo. Kiedy kod staje się długi i nietypowo długi, możesz przejść do poziomu poszczególnych elementów za pomocą funkcji Szybkiej edycji, która wyświetla wszystkie style dołączone do elementu w oknie nakładki. Ponieważ aplikacje Edge są częścią Creative Cloud, możesz używać czcionek internetowych Adobe Edge, czcionek internetowych Google i czcionek Typekit bezpośrednio z poziomu kodu Edge. Edge Code wygeneruje tag skryptu nagłówka, który ściąga zewnętrzną czcionkę.

Ponieważ HTML5, JavaScript i CSS3 szybko zastępują starsze techniki animacji ze względu na popularność urządzeń mobilnych, te zintegrowane aplikacje Edge, a także ich integracja z innymi aplikacjami Adobe, są kolejną generacją przepływu pracy projektowania i programowania wielu urządzeń.

Ujawnienie: Nie otrzymałem rekompensaty finansowej za ten artykuł. Firma Adobe zapewniła członkostwo Creative Cloud na potrzeby tej recenzji.Opinie są całkowicie moje na podstawie moich doświadczeń.

Prawa autorskie 2018 Adobe Systems Incorporated. Wszelkie prawa zastrzeżone. Zrzuty ekranowe produktów Adobe zostały przedrukowane za zgodą Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst i Flash Paper jest / są [a] zarejestrowanym znakiem towarowym lub znakami towarowymi Adobe Systems Incorporated w Stanach Zjednoczonych i / lub innych krajach.

Instrukcje Wideo: Adobe Creative Cloud - sprawdź jak to działa! (Może 2024).