Membuat Animasi Web Dan Interaksi Desain di HTML5 Dengan Adobe Edge

Web standar terbaru, HTML5 dan CSS3 dalam hubungannya dengan JavaScript telah benar-benar mengurangi waktu dan usaha yang terlibat dalam menciptakan grafik, teks, dan situs animasi web kaya. Menggunakan kekuatan HTML5, Anda tidak lagi harus secara manual menulis kode untuk embedding konten multimedia saat CSS3 membuat elemen UI web Anda lebih fleksibel, kuat, dan yang lebih penting lebih mudah untuk ditangani. Jika Anda sudah mencari alat mendesain web yang memungkinkan Anda untuk mengambil keuntungan maksimal dari standar web terbaru tanpa menarik Anda untuk secara manual memasukkan kode untuk setiap elemen UI, Adobe Edge baru diluncurkan mungkin hanya apa yang Anda butuhkan.

Adobe Edge telah terutama ditulis untuk desainer visual, web dan interaksi yang sering berjuang dengan menciptakan gerakan web dan konten animasi menggunakan HTML5, CSS3 dan web JavaScript standar. Itu pada dasarnya gerakan dan interaksi web desain alat untuk membuat konten animasi menggunakan HTML5, CSS3, dan JavaScript. Sementara itu menggabungkan semua alat dasar untuk membuat, mengedit, tweak dan elemen desain web UI, ia menawarkan sebuah koreografer animasi intuitif untuk dengan mudah membuat dan menyesuaikan konten animasi di halaman web Anda. Selain itu, tidak memaksa Anda untuk memulai sebuah proyek baru dari awal, Anda dapat mengimpor file HTML Anda di dalamnya untuk memasukkan komposisi UI baru dan bermain-main-main dengan elemen UI yang ada, seperti, meja, gaya teks, gambar warna, posisi, font, kontainer keselarasan dan banyak lagi.

Antarmuka utama dibagi menjadi 3 bagian. Sidebar kiri memegang alat elemen komposisi yang dipilih UI, side bar kanan memiliki semua daftar utama web elemen UI, termasuk efek bayangan, gambar, teks, sedangkan bagian bawah berisi editor timeline untuk koreografi animasi.


Panel Elemen memungkinkan Anda menampilkan / menyembunyikan elemen yang dipilih dan menguncinya bawah untuk mencegah pengeditan lebih lanjut. Ketika Anda memilih sebuah elemen dari layar utama, segera menyoroti dalam panel Elements, sehingga lebih mudah untuk menyembunyikan atau menguncinya. Ketika Anda membawa penunjuk mouse ke item yang tercantum dalam Elements, ia memberitahu Anda inisial kelas dengan nama, sehingga Anda dapat dengan mudah mengidentifikasinya di file CSS.



Panel properti di sisi kiri menunjukkan komposisi alat untuk elemen UI yang dipilih dari halaman web Anda. Setelah dipilih, Anda dapat mengubah ukuran lokasi, opacity, keluarga teks font, ukuran, dan gaya teks, mengatur transformasi asal, rotasi gambar dan sebagainya.



Editor waktu memungkinkan Anda untuk melihat timeline dari setiap elemen animasi. Jika Anda sedang berhadapan dengan satu file CSS yang besar, klik tombol filter untuk hanya menampilkan elemen-elemen animasi dalam panel Elemen untuk dengan cepat mengedit posisi mereka, warna, ukuran, dll Di bagian bawah-kiri panel, Anda memiliki tombol zoom untuk memperbesar timeline untuk memverifikasi waktu yang dialokasikan dan efek transisi dari semua elemen animasi.



Selain menciptakan cross-browser animasi konten yang kompatibel untuk semua web browser populer, termasuk Firefox, Chrome, Internet Explorer 9, web konten yang dibuat melalui alat ini akan bekerja mulus pada IOS dan Android platform juga. Menurut masyarakat resmi, Preview Edge dalam pengembangan aktif dan akan segera diperbarui dengan sejumlah fitur. Adobe Edge bekerja pada Windows Vista dan Windows 7.

Download Adobe Edge

Copied and Translated from here