Membuat tampilan jam dengan Watch Face Studio

Panduan ini menjelaskan alat dan jendela utama yang disertakan dalam Watch Face Studio (WFS).

Gambar 1. Layar utama Watch Face Studio.

Alat

WFS menyertakan alat berikut:

• Tambahkan Komponen: membuka daftar komponen yang dapat ditambahkan ke tampilan jam.
• Maju dan Mundur: memindahkan komponen yang dipilih ke depan atau ke belakang.
• Kelompokkan dan Batalkan pengelompokan: mengelompokkan beberapa komponen sehingga dapat dikontrol sebagai satu komponen atau memisahkan kelompok komponen.
• Tambahkan Mask: mencakup semua atau bagian lapisan lain berdasarkan garis batas bentuk di lapisan bawah.
• Build: membuka dialog build.
• Jalankan di perangkat: membuka dialog untuk melihat pratinjau tampilan jam di perangkat.

Komponen

Tambahkan komponen yang berbeda sebanyak yang diinginkan ke tampilan jam. Anda juga dapat menggunakan sumber desain yang disesuaikan untuk komponen Anda. Misalnya, menampilkan data detak jantung atau jumlah langkah dengan komponen teks, atau menambahkan gambar kustom untuk meluncurkan aplikasi.

Tipe komponen

Komponen yang didukung dijelaskan di bagian berikut.

Kanvas tampilan jam

Setel warna kanvas untuk lapisan bawah tampilan jam:

Teks

Secara default, kolom teks berupa teks normal. Teks normal bersifat statis dan tidak berubah. Di jendela properti untuk kolom teks, Anda dapat mengubah kolom teks dari teks normal ke teks data. Teks data berubah dan diisi berdasarkan tag.

Untuk mengetahui informasi selengkapnya, lihat Ekspresi tag.

Pilih opsi Terapkan Teks-Melengkung untuk membuat teks yang melengkung dengan tampilan jam:

Tentukan kurva teks dengan menyetel Lebar (L) dan Tinggi (T). Mengubah L dan T otomatis mengubah dimensi komponen teks Anda. Untuk menentukan posisi teks, pilih salah satu preset rentang. Rentang tambahan dapat dibuat dengan menentukan Mulai dan Jarak sudut. Tetapkan perintah teks ke searah jarum jam (CW) atau berlawanan arah jarum jam (CCW).

Bentuk

Menambahkan berbagai bentuk, seperti elips dan persegi panjang.

Gambar

Mengimpor gambar kustom.

Animasi

Mengimpor urutan gambar untuk animasi, seperti yang dijelaskan pada langkah-langkah berikut.

1. Buat urutan animasi dengan program desain, seperti Adobe Flash atau Adobe Premiere.
2. Klik Tambahkan Komponen > Animasi untuk menambahkan file animasi ke tampilan jam Anda.
3. Pilih urutan gambar dari file browser Anda, lalu klik Upload.
4. Edit animasi dengan mengubah urutan gambar, menghapus gambar, atau menambahkan gambar.

5. Setel Nilai pemicu untuk menentukan kapan Anda ingin animasi diputar.

   Setel nilai pemicu ke Tampilan Jam aktif untuk memulai animasi segera setelah tampilan jam ditampilkan. Opsi lainnya mencakup Ketuk, Setiap Detik, Setiap Menit, dan Setiap Jam. Anda juga dapat menunda waktu mulai menggunakan Penundaan dan memasukkan jumlah detik.

Opsi tambahan untuk animasi mencakup hal berikut ini:

• Putar ulang otomatis: segera mengulangi animasi setelah selesai hingga gangguan, seperti penonaktifan layar, terjadi.
• Ulang penundaan: menetapkan penundaan di antara iterasi animasi berulang.
• Lanjutkan Pemutaran: menentukan apakah akan melanjutkan animasi atau memulai dari awal saat pemutaran dihentikan karena gangguan, seperti menerima notifikasi atau panggilan telepon.
• Sembunyikan sebelum memutar: menentukan apakah akan menyembunyikan animasi hingga pemutaran terpicu.
• Sembunyikan setelah selesai: menentukan apakah akan menyembunyikan animasi saat pemutaran selesai.

Multimedia

Impor gambar animasi seperti file AGIF, Lottie, atau WEBP.

Tambahkan gambar multimedia seperti yang dijelaskan pada langkah-langkah berikut:

1. Klik Tambahkan Komponen > Multimedia.
2. Pilih file dari file browser Anda, lalu klik Upload.
3. Tetapkan Nilai Pemicu ke waktu mulai animasi.

Perlu diingat bahwa ukuran, resolusi, dan jumlah frame gambar multimedia dapat memengaruhi performa perangkat dan konsumsi baterai. Gambar multimedia dimuat secara asinkron selama operasi dan mungkin mengalami penundaan saat diputar, bergantung pada kemampuan smartwatch pengguna dan berbagai karakteristik gambar.

Jarum analog

Menambahkan jarum jam analog untuk jam, menit, dan detik:

Buka file browser untuk memilih file gambar yang akan diimpor untuk setiap jarum.

Jarum jam analog memiliki properti Rotasi. Properti ini mencakup opsi berikut:

• Sinkronkan dengan
• Zona Waktu
• Rotasi
• Nilai
• Efek Gerakan

Sinkronisasikan Dengan memiliki opsi berikut:

• Jam dalam Hari
• Menit dalam Jam
• Detik dalam Menit
• Hari dalam Sebulan
• Bulan
• Hari
• Hari dalam Tahun
• Fase Bulan

Opsi Detik dalam Menit hanya berfungsi dengan efek gerakan Sweep. Efek ini ditetapkan secara otomatis saat Anda menambahkan komponen bekas.

Jam digital

Opsi untuk jam digital mencakup Tanggal dan Waktu:

Saat menambahkan Tanggal, tambahkan komponen teks dengan tag tanggal. Tampilan default untuk tanggal adalah DAY_WEEK_S MON_S DAY_1_31_Z.

Saat menambahkan Waktu, tambahkan komponen teks dengan tag jam digital. Layar default untuk waktu digital adalah HOUR_1_12_Z:MIN_Z:SEC_Z.

Status progres

Tambahkan status progres ke tampilan jam Anda untuk memantau berbagai aktivitas. Opsi untuk komponen status progres mencakup status progres linear dan melingkar. Tentukan posisi status progres dengan memilih salah satu dari enam preset rentang. Rentang tambahan dapat dibuat dengan menentukan Mulai dan Jarak sudut. Tetapkan perintah status progres ke searah jarum jam atau berlawanan arah jarum jam.

Pengelolaan komponen

Kelola komponen Anda menggunakan alat WFS. Anda dapat menambahkan, mengelompokkan, membatalkan pengelompokan, dan mengurutkan komponen pada tampilan jam, seperti yang dijelaskan di bagian berikut.

Menambahkan komponen

Tambahkan komponen menggunakan tombol +:

Saat menambahkan komponen, komponen tersebut ditempatkan di posisi default pada kanvas. Komponen otomatis dipilih sehingga Anda dapat mengubahnya dengan mudah.

Mengelompokkan atau membatalkan pengelompokan komponen

Grup adalah kombinasi dari satu atau beberapa komponen. Semua komponen dapat dikelompokkan. Pengelompokan dapat dibatalkan.

Menambahkan mask atau membatalkan mask komponen

Saat Anda menggunakan grup mask, bentuk lapisan paling bawah menentukan area yang terlihat dari grup mask. Lapisan di atasnya hanya muncul melalui garis batas bentuk dari lapisan paling bawah.

Misalnya, jika Anda menempatkan gambar segitiga di lapisan paling bawah dan gambar serta animasi di lapisan di atasnya, gambar dan animasi hanya akan muncul melalui garis batas segitiga dari lapisan paling bawah.

Untuk membuat grup mask, lakukan hal berikut:

1. Pilih lapisan yang ingin dikelompokkan.
2. Pilih Tambahkan Mask dari area hot key, atau klik kanan lapisan dan pilih Tambahkan Mask.

Untuk merilis grup mask di jendela Lapisan, lakukan langkah berikut:

1. Pilih grup mask.
2. Pilih Batalkan Mask dari area hot key, atau klik kanan lapisan dan pilih Batalkan Mask.

Jendela pratinjau

Jendela pratinjau adalah area kerja utama Anda saat mendesain tampilan jam.

Tambahkan semua elemen tampilan jam ke kanvas yang ditampilkan di jendela pratinjau. Pada kanvas, tarik elemen ke posisi, ubah ukuran, atur, dan putar elemen tersebut.

Jendela lapisan

Jendela lapisan menampilkan daftar komponen dan grup yang ditampilkan di jendela pratinjau. Setiap komponen memiliki lapisannya sendiri secara default.

Dalam jendela lapisan, tindakan berikut tersedia:

• Telusuri: menelusuri lapisan menurut nama.
• Tampilkan/Sembunyikan: menampilkan atau menyembunyikan lapisan. Lapisan tersembunyi tidak diputar di jendela pratinjau.
• Warna tema: mengaktifkan atau menonaktifkan warna tema Anda.
• Ganti nama: mengubah nama lapisan dengan mengklik dua kali kolom nama dan memasukkan nama baru.

Mengklik kanan di lapisan akan menampilkan opsi menu berikut:

• Kunci/Buka Kunci: mengunci lapisan sehingga tidak berpindah pada kanvas.
• Mengelompokkan/Membatalkan Pengelompokan: mengelompokkan beberapa komponen sehingga dapat dikontrol sebagai satu komponen atau memisahkan kelompok suatu komponen.
• Menambahkan Mask/Membatalkan Mask: mencakup semua atau sebagian lapisan lain berdasarkan garis batas bentuk di lapisan bawah atau menghapus lapisan dari grup mask.
• Tukar gambar: memindahkan file gambar dari satu lapisan ke lapisan lainnya. Hanya ditampilkan untuk gambar.
• Warna lapisan: Menambahkan label warna ke lapisan untuk membedakan antarlapisan.

Baris kondisional

Baris kondisional memungkinkan Anda menampilkan dan menyembunyikan komponen pada tampilan jam serta mengontrol perilaku komponen. Gunakan baris kondisional untuk mengubah tampilan jam sebagai respons terhadap kondisi tertentu, seperti waktu, jumlah langkah, baterai, atau peristiwa.

Saat Anda menambahkan komponen, kondisi waktu ditetapkan secara default. Untuk menyesuaikan kondisi ini, klik ikon kondisi pada lapisan yang diinginkan. Untuk menyetel kondisional agar berulang, klik kanan area frame, lalu pilih Loop.

Perlu diingat bahwa lapisan yang tidak ditampilkan tidak akan mengurangi performa atau memengaruhi masa pakai baterai Anda.

Anda dapat menyetel tampilan jam untuk merespons waktu, jumlah langkah, status baterai, atau peristiwa, seperti yang dijelaskan di bagian berikut.

Waktu

Tampilan jam dapat berubah secara dinamis berdasarkan interval waktu. Misalnya, tampilan jam dapat terang saat siang hari dan berangsur menjadi gelap setelah waktu yang ditentukan. Anda dapat menyetel waktu untuk diukur dalam jam, menit, atau detik.

Tambahkan kondisi waktu menggunakan langkah-langkah berikut:

1. Buat lapisan.
2. Atur jangka waktu untuk mengontrol kapan setiap lapisan ditampilkan. Pilih panel awal, lalu pilih rentang waktu.
3. Klik dan tarik dari panel awal ke panel akhir.
4. Ulangi langkah 2 dan 3 guna menetapkan jangka waktu untuk setiap lapisan.
5. Klik Jalankan untuk melihat pratinjau perubahan.

Untuk menampilkan tampilan jam yang berbeda untuk setelan 12 jam dan setelan 24 jam berdasarkan setelan yang dipilih di ponsel pengguna, lakukan hal berikut:

1. Tambahkan dua komponen jam digital, komponen pertama untuk versi 12 jam dan komponen kedua untuk versi 24 jam.
2. Tempatkan keduanya di posisi yang sama.
3. Tambahkan kondisi 12 jam dan 24 jam ke baris kondisional komponen.
4. Setel jangka waktu guna menampilkan jam digital pertama untuk lapisan 12 jam dalam format 12 jam, dan menampilkan lapisan lainnya dalam format 24 jam.

Kontrol waktu

Penggeser kontrol waktu memungkinkan Anda melihat tampilan jam. Gunakan fitur ini untuk melihat pratinjau bagaimana tampilan jam akan berubah sepanjang hari. Tarik penggeser ke waktu tertentu atau lihat animasi tampilan jam Anda dengan menggunakan tombol putar dan maju cepat.

Jumlah langkah

Anda dapat mendesain tampilan jam untuk berubah secara dinamis sesuai dengan jumlah langkah pengguna. Misalnya, Anda dapat membuat tampilan jam yang berubah berdasarkan persentase sasaran langkah harian yang telah dicapai.

Baterai

Anda dapat mendesain tampilan jam untuk berubah secara dinamis sesuai dengan persentase masa pakai baterai smartwatch yang tersedia.

Peristiwa

Anda dapat mendesain tampilan jam agar berubah secara dinamis sesuai dengan status perangkat, seperti baterai lemah atau notifikasi belum dibaca. Untuk melakukannya, pilih peristiwa yang diinginkan dan gambar atau animasi yang ingin Anda tampilkan selama peristiwa tersebut.

Jendela properti

Setiap komponen memiliki berbagai properti yang dapat diubah. Misalnya, Anda dapat mengubah warna angka pada jam digital atau memilih apakah jarum jam mengukur jam, menit, atau detik.

Panel tindakan

Panel tindakan dalam jendela properti memungkinkan interaksi dengan tampilan jam Anda. Misalnya, Anda dapat mengizinkan pengguna mengetuk komponen untuk mengubah gambar, membuka aplikasi lain, atau mengukur detak jantung.

Gaya

Gunakan tab gaya untuk mengubah gaya lapisan yang dipilih. Anda dapat menambahkan gaya untuk gambar, gambar multimedia, indeks, dan komponen jarum. Anda dapat menambahkan hingga 30 warna tema dan 10 gambar.

Gunakan Customization Editor untuk menerapkan gaya kustom ke komponen.

Dalam dialog Customization Editor, Anda dapat menyesuaikan gaya setiap komponen, lapisan, dan nama. Anda juga dapat menyusun ulang atau menggabungkan gaya dalam dialog ini.

Anda dapat menambahkan hingga 30 warna tema ke tab Style. Setiap warna tema dapat memiliki hingga tiga variasi warna.

Setel warna ini di tab Layer atau Properties. Di tab Layer tetapkan warna dengan mengalihkan ikon Apply Theme Color hingga tiga kali.

Di tab Properties, atur warna dengan memilih tombol pilihan Apply Theme Color.

Warna

Terapkan warna tertentu ke komponen Anda, atau simpan warna tema untuk tampilan jam. Untuk detail, tema warna awal adalah hitam putih.

Tampilan gambar

Ubah tampilan gambar menggunakan kontrol berikut:

• Hue: mengontrol tone warna.
• Saturasi: membuat warna gambar lebih atau kurang mencolok.
• Kecerahan: menyebabkan warna gambar menjadi lebih terang.

Tampilan teks

Gunakan tab Text appearance untuk menyetel perataan teks dan gaya font. Hiasi teks dengan memilih Add Bitmap Font di Setelan Project. Jika Anda ingin menggunakan ukuran font default di antara font bitmap yang ditambahkan ke project, pilih Apply Default Font Size.

Jalankan

Anda juga dapat menjalankan tampilan jam dalam WFS di panel Run. Anda dapat menyesuaikan waktu, tanggal, level baterai perangkat, jumlah langkah pengguna, detak jantung pengguna, atau nilai giroskop dalam WFS untuk menguji tampilan jam dalam berbagai situasi. Anda juga dapat menyesuaikan gaya lain yang ditetapkan di Customization Editor, termasuk jumlah notifikasi yang belum dibaca, ekspresi tag, atau baris bersyarat. Pratinjau Jalankan dapat disetel ke Aktif atau Selalu aktif. Jika menggunakan Selalu aktif, WFS menampilkan nilai Current-On Pixel Ratio dan tombol Analyze.

Uji tampilan jam di perangkat menggunakan Run on device.

Untuk detail selengkapnya, lihat Menguji tampilan jam.