Bagaimana Mengubah Ukuran Stage Ujung Adobe Edge - dummies

Panggung adalah tempat Anda akan menempatkan elemen Anda, seperti gambar, teks, dan benda yang ditarik. Panggung adalah jendela HTML aktif, yang berarti apa yang Anda lihat di layar, adalah apa yang audiens Anda lihat saat mereka melihat dan berinteraksi dengan komposisi Anda. Anda dapat mengukur Panggung dengan beberapa cara yang berbeda:

• Pixels: Adobe Edge Animate CC memungkinkan Anda menyetel Panggung agar tetap berukuran tertentu tidak peduli ukuran jendela browser.

• Persentase: Bagi yang lebih memilih desain web yang lebih responsif.

• Menguji desain web responsif: Anda mungkin ingin mengubah warna latar belakang Stage untuk menguji responsivitas desain Anda.

Ukuran Panggung dengan nilai piksel

Kemungkinan besar salah satu langkah pertama yang ingin Anda ambil adalah mengukur Panggung dengan benar. Jika Anda berencana untuk memasukkan animasi Anda ke dalam halaman web yang ada, tentukan dulu berapa banyak ruang yang Anda inginkan agar animasi Anda ambil di halaman itu, dan kemudian ukurankan Stage sesuai dengan itu.

Untuk mengubah ukuran Stage, klik nomor oranye di bagian Stage panel Properties - di kolom paling kiri di dekat bagian atas layar - seperti yang ditunjukkan. Mengklik nomor lebar atau tinggi memungkinkan Anda mengetik dimensi yang tepat (dalam piksel) yang Anda inginkan agar Panggung Anda miliki.

Jika Anda tidak ingin mengetikkan angka, Edge Animate memberi Anda metode alternatif untuk mengubah ukuran Stage: Cukup letakkan kursor di atas salah satu nomor oranye. Bila kursor berubah menjadi tanda panah ganda (seperti ditunjukkan), Anda dapat mengeklik dan menyeret untuk menambah atau mengurangi ukuran Panggung.

Ukuran Stage Anda dengan persentase ukuran layar

Jika Anda ingin membuat animasi yang tidak sesuai dengan dimensi tertentu, maka Anda harus beralih dari piksel (px) menjadi persentase (%), dengan mengklik toggle (lihat gambar ini). Ini adalah salah satu langkah untuk menciptakan desain web yang responsif. Bila Anda mengukur persentase berdasarkan persentase layar dan bukan berdasarkan nilai piksel, ukuran Stage itu sendiri sesuai dengan ukuran elemen induk.

Salah satu contoh elemen induk bisa menjadi jendela browser itu sendiri - jika animasi itu adalah halaman web mandiri. Namun, jika animasi adalah salah satu bagian dari halaman web, maka elemen induknya bisa menjadi elemen div dimana animasi disarangkan.

Agar Stage Anda memenuhi keseluruhan jendela browser, setel lebar dan tinggi Stage menjadi 100%, seperti yang ditunjukkan pada gambar ini. Agar Stage Anda memenuhi separuh jendela browser, atur Stage menjadi 50%; dan seterusnya, tergantung pada seberapa banyak jendela browser yang Anda inginkan untuk ditempati oleh animasi Anda.

Secara default, latar belakang Panggung berwarna putih. Oleh karena itu Anda tidak akan melihat perbedaan di Stage saat Anda beralih antara px dan%.

Untuk menguji perbedaan antara menggunakan px dan% untuk ukuran Stage, ubah warna latar belakang Stage menjadi sesuatu yang lain dari warna putih, seperti warna merah. Kemudian bereksperimen dengan dimensi dan dimensi px yang berbeda untuk melihat efek yang berbeda.

Untuk mengubah warna latar belakang Stage (seperti yang ditunjukkan), klik kotak putih untuk menampilkan pemetik warna.

Anda dapat memberi tahu Edge Animate untuk menjaga proporsi lebar dan tinggi sama dengan mengklik ikon Link Lebar dan Tinggi (disorot dalam gambar ini). Secara default, ikon Link Lebar dan Tinggi dimatikan; Dengan default yang berlaku, Edge Animate tidak akan menjaga lebar (atau tinggi) dalam proporsi yang sama saat Anda mengubah ukurannya.