Adobe Edge Creative Cloud Uygulamaları

• Nisan 29, 2024

HTML5, JavaScript ve CSS3, web, tabletler ve telefonlar için etkileşimli animasyon oluşturmak için Flash kadar popüler hale geldi. Adobe^R, Edge Animate ve diğer Edge uygulamaları, işinizi kolaylaştırmak için birçok ön ayarlı çok kullanıcı dostu bir yazılımdır.

Zaman çizelgesi animasyonu canlandırmanın en popüler yoludur ve Adobe, gerçek dünya hareketlerini taklit edebilen ve yerleşik hareket hızı ile yeni Edge Animate hareket yollarını kolaylaştırmıştır. Zaman çizelgesine animasyon işaretçileri ekleyen İğnele düğmesiyle veya Edge Animate uygulamasının otomatik olarak hareket yollarına dönüştürdüğü sahnede nesnelerin sürükleyip bırakılarak zaman çizelgesi boyunca kolayca animasyon ekleyebilirsiniz. Sahnedeki nesnelere yaptığınız değişiklikleri kaydeden ve bu değişiklikleri ana kare animasyonuna dönüştüren Kaydet düğmesini bile kullanabilirsiniz. Edge'in ayrıca, Eylemler panelinin, her eylemin panelde kendi sekmesi bulunan karışık bir sürümü vardır. Adobe Edge ve Google Chrome tarayıcı kombinasyonu ile animasyonlarınızı test etmek kolaydır.

Flash animasyonunu biliyorsanız, Edge'de etkileşim eklemenin, her animasyon öğesi için iç içe geçmiş zaman çizelgeleri kullanabileceğiniz ve en yaygın etkileşimler ve animasyonlar için önceden yüklenmiş kod snippet'lerini uygulayabileceğiniz Flash iş akışına benzediğini fark edeceksiniz. Bu kod parçacıkları, oynat, duraklat, devam ettir ve durdur gibi oynatma animasyonlarının yanı sıra tıklama, fareyle üzerine gelme ve hatta köprüler gibi temel düğme eylemleri için sıcak alanlar oluşturur. Bu kod snippet'lerine özel kod eklemek için doğrudan Eylemler paneline yazabilirsiniz. Elbette, Eylemler panelinde kendi HTML5, JavaScript ve CSS3 kodunuzu elle kodlayabilirsiniz. Bu tür web ve animasyon programlama genellikle harici JavaScript Kitaplıklarına dayandığından, bu harici kaynaklara bağlantılar bile ekleyebilirsiniz.

Animasyon, Edge uygulama grubu ile yapabileceklerinizin sadece bir parçasıdır. Web tasarımının en önemli yönlerinden biri, masaüstünden cep telefonlarına kadar her türlü ekran için duyarlı veya esnek bir web sitesi oluşturmaktır. Bu, her ikisi de Edge Reflow'da bulunan araçların bir parçası olan medya sorguları ve yüzde tabanlı ızgara düzenleri ile yapılır. Edge Reflow, projeniz için kod üreten bir WYSIWYG çalışma ortamıdır. Bu kod, özellikle web sayfalarından e-kitap okuyucularına kadar her şey tarafından giderek daha fazla desteklenen WebKit olmak üzere en yeni web standartları için günceldir.

Edge Reflow'da bir düzen oluşturmak, Kutu aracıyla HTML div kapsayıcılarını ızgaraya çizmek kadar kolaydır ve bu div'ların mutlak konumlandırılması, her ekran boyutu için gerektiğinde yeniden boyutlandırmasına veya dönüştürmesine olanak tanır. Bu nasıl çalışıyor? Bunun sırrı, üç veya daha fazla ekran çözünürlüğü için minimum ve maksimum parametreleri ayarlayarak Medya Sorgu Yöneticisi'nde özelleştirebileceğiniz Medya Sorgularıdır. Bu parametreler, tasarımın en yakın ekran boyutu için ne zaman yukarı veya aşağı dönüşeceğini belirler. Bu değişikliklerin ne zaman gerçekleşeceğini görselleştirmenize yardımcı olan, çalışma alanının üstündeki her ekran boyutu için renk kodlu görsel işaretleri gerçekten çok seviyorum.

En fazla zaman kazandıran Edge özelliklerinden biri, özel CSS3 stillerinizi birkaç proje üzerinde nasıl kolayca kullanabileceğiniz ve böylece tutarlı stilleri nasıl koruyabileceğinizdir. Bu aynı zamanda güncellemeyi neredeyse otomatik hale getirir. Adobe, Edge Reflow Styling paneliyle bunu iş akışınızın bir parçası haline getirdi. İşleri düzenli tutmak için, arka planlar veya kenarlıklar gibi her stilin kendi bireysel bölümü vardır. Renkleri ve diğer parametreleri ve katmanlar hiyerarşisini doğrudan bu sekmelerden kontrol edebilirsiniz. Bu özelleştirilmiş stiller otomatik olarak CSS stil kurallarına dönüştürülür ve bu kurallar yeniden kullanım için kopyalanabilir / yapıştırılabilir.

Geçmişte, web sayfanızı önizlemek için değişiklikleri kaydetmeniz, bir web tarayıcısına geçmeniz ve sayfayı yenilemeniz gerekiyordu. Adobe, Edge Inspect ve Chrome tarayıcısının bir kombinasyonunu kullanarak bu adımların sayısını azalttı. Artık projenizin masaüstünden, tabletten cep telefonuna kadar birden fazla cihazda nasıl görüntüleneceğini önizleyebilirsiniz. Gerçekten sevdiğim bir özellik, bu önizlemelerin ekran görüntüsünü istemcilere ve ekip üyelerine e-postayla göndermek veya Creative Cloud'da işbirliği için kullanmaktır.

Son olarak, hala ham kodla çalışmayı sevenlerimiz için Adobe'nin Edge Kodu var. Kod penceresi soldaki birkaç kontrolle düzenli değil ve Edge Code size canlı bir önizleme sunmak için Google Chrome ile entegre oluyor. Kodunuz uzun ve elverişsiz hale geldiğinde, bir kaplama penceresindeki bir öğeye eklenmiş tüm stilleri listeleyen Hızlı Düzenleme özelliğini kullanarak bireysel öğe düzeyine inebilirsiniz. Edge uygulamaları Creative Cloud'un bir parçası olduğundan, Adobe Edge Web Yazı Tiplerini, Google Web Yazı Tiplerini ve Typekit yazı tiplerini doğrudan Kenar Kodunun içinden kullanabilirsiniz. Edge Code, dış yazı tipini içeren başlık komut dosyası etiketini oluşturur.

HTML5, JavaScript ve CSS3, mobil cihazların popülaritesi nedeniyle eski animasyon tekniklerini hızla değiştirirken, bu entegre Edge uygulamaları ve diğer Adobe uygulamalarıyla entegrasyonları, çoklu cihaz tasarımı ve geliştirme iş akışının yeni neslidir.

Açıklama: Bu yazı için finansal olarak tazmin edilmedim. Adobe, bu inceleme amacıyla bir Creative Cloud üyeliği sağladı.Benim düşüncelerime dayanarak görüşler tamamen benim.

Telif Hakkı 2018 Adobe Systems Incorporated. Tüm hakları Saklıdır. Adobe ürün ekran görüntüleri, Adobe Systems Incorporated'ın izniyle kullanılmıştır. Adobe, Photoshop, Photoshop Albümü, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Köprü, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Havai Fişek, Contribute, Captivate, Flash Catalyst ve Flash Paper Amerika Birleşik Devletleri ve / veya diğer ülkelerde Adobe Systems Incorporated'in [a] tescilli ticari markaları veya ticari markalarıdır.

Video Talimatları: Tutorial on how to programme a Flash Interactive colouring page with AS2 coding. (Nisan 2024).