Flex ve Adobe AIR uygulamalarının prototipini oluşturma

Sayfalar panelini diğer güçlü Fireworks özellikleriyle birleştirerek, hızla etkileşimli web ve yazılım prototipleri oluşturabilirsiniz. Son halini almış bir prototipi işlevsel bir siteye dönüştürmek için prototipin Adobe Flash^®, Adobe Flex^®, Adobe AIR™ veya Adobe Dreamweaver^® uygulamasına dışa aktarılması yeterlidir.

Prototip oluşturma iş akışları hakkında genel ipuçları için Fireworks Developer Center'daki şu makalelere bakın:

• Nick Myers'in Fireworks ile etkileşimli ürünler tasarlama konulu makalesi: http://www.adobe.com/go/learn_fw_interactiveproducts_tr

• Dave Cronin'in prototip oluşturmada sektör trendleri konulu makalesi: http://www.adobe.com/go/learn_fw_prototypingtrends_tr

• Matt Stow'un Fireworks'te önceden oluşturulmuş CSS şablonlarını kullanma konulu makalesi: Prebuilt CSS templates in Fireworks CS4 (Fireworks CS4'te önceden oluşturulmuş CSS şablonları).

• Jim Babbage'ın Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling (Fireworks CS4 Nasıl Yapılır pasajları: İçe aktarma, dışa aktarma, semboller, prototip oluşturma, ölçekleme) başlıklı makalesi.

• Dave Hogue'un etkileşim tasarımı ve çabuk prototip için Fireworks yazılımını kullanma konulu video eğitimi:

  • Bilgi ve etkileşim tasarımı için Fireworks yazılımını kullanma: http://www.adobe.com/go/learn_fw_infointeract_tr

  • Fireworks ile etkileşimli prototipler oluşturma: http://www.adobe.com/go/learn_fw_creatinginteractivepro_tr

  • Fireworks ile hızlı prototip oluşturma: http://www.adobe.com/go/learn_fw_rapidpro_tr

  • Tüm tasarım sürecinin parçası olarak Fireworks: http://www.adobe.com/go/learn_fw_completedesignpro_tr

• Fireworks ile bir web sitesi uygulaması tasarlama konulu makale: http://www.adobe.com/go/learn_fw_designwebsiteapp_tr

• Kumar Vivek'in Fireworks yazılımını kullanarak mobil cihazlar için tasarım oluşturma konulu makalesi: http://www.adobe.com/go/learn_fw_designmobiledevices_tr

Uygulama arabirimlerinin prototipini oluşturma hakkındaki video eğitimleri için www.adobe.com/go/lrvid4034_fw_tr adresine bakın.

Sayfalar oluşturma

Sayfalar panelinde, başlangıç tasarımınız için istediğiniz sayıda sayfa veya ekran oluşturun. Tasarım geliştikçe, gerekiyorsa sayfa ekleyip çıkarabilirsiniz.

Ortak tasarım öğeleri yerleştirme

Tuval üzerinde, gezinme çubukları ve arka plan görüntüleri gibi birden çok sayfa arasında paylaşmak istediğiniz tasarım öğelerini yerleştirin. Öğeleri hizalamak için Akıllı Kılavuzlar'ı kullanın. Maksimum esneklik için mizanpajınızı CSS ile yapılandırın. (Bkz. Akıllı Kılavuzlar ve CSS tabanlı mizanpajlar oluşturma.).

Ortak öğeleri birden çok sayfa arasında paylaşma

Ortak öğeleri paylaştığınızda, tek bir değişiklik, tüm etkilenen sayfaları otomatik olarak günceller. İçerdiği tüm öğeleri paylaşmak için bir ana sayfa kullanın veya öğelerin alt kümelerini kopyalamak için katmanları paylaşın. (Bkz. Bir ana sayfa kullanma ve Katmanları paylaşma.)

Tekil sayfalara özgün öğeler ekleme

Her sayfada, özgün tasarım, gezinme veya biçim öğeleri ekleyin. Ortak Kitaplık panelinde, tasarım sürecini hızlandıran birçok düğme, metin kutusu ve açılır menü bulacaksınız. Flex Components, HTML, Mac, Web ve Uygulama ile Menü Çubukları klasörlerindeki bileşen sembollerinin, ayrı sembol örnekleri için özelleştirebileceğiniz özellikleri vardır. (Bkz. Bileşen sembolleri oluşturma ve kullanma.)

Bağlantılarla basit kullanıcı gezinmesini taklit etme

Dilimler, etkin noktalar veya gezinme düğmeleri gibi web nesnelerinden, prototipinizin çeşitli sayfaları arasında bağlantı kurun. (Bkz. Bir Fireworks belgesindeki sayfalara bağlanma.)

Son halini almış etkileşimli prototipi dışa aktarma

Fireworks, tümü sayfalarda gezinme için köprüleri tutan birçok çıktı formatı sunar. Aşağıdaki makalelere bakın:

• Esnek, CSS tabanlı bir prototipi istemcilerle paylaşmak veya Adobe Dreamweaver uygulamasında düzenlemeye devam etmek için bkz. CSS mizanpajını dışa aktarma.

• Daha geleneksel tablo tabanlı bir prototip oluşturmak için bkz. Fireworks HTML'yi dışa aktarma.

• Yorumlar veya baskı için prototipin bir PDF sürümü dağıtmak için bkz. Adobe PDF dosyalarını dışa aktarma.

• Bir Flex uygulaması prototipi oluşturmak için bkz. Flex uygulamalarının prototipini oluşturma. Bir Adobe AIR uygulaması oluşturmak için bkz. Bir Adobe AIR uygulaması oluşturma.

CSS tabanlı mizanpajlar oluşturma

Bir Fireworks belgesinde, CSS tabanlı katmanlar tasarlayabilir ve ardından bunları katmanlarınızı çoğaltan CSS kurallı HTML sayfalarına dönüştürebilirsiniz. CSS tabanlı mizanpajlar, standart tabanlı bir yaklaşım sağlar ve farklı tarayıcılarla uyumlu bir kod verir.

CSS tabanlı HTML sayfa mizanpajları oluşturma hakkındaki video eğitimi için www.adobe.com/go/lrvid4035_fw_tr adresine gidin. Ayrıca aşağıdaki kaynaklara bakın:

• Fireworks'te CSS ve görüntü dışa aktarma konulu eğitim: http://www.adobe.com/go/learn_fw_exportcssimages_tr.

• Fireworks ile standartlarla uyumlu web tasarımları oluşturma konulu eğitim: http://www.adobe.com/go/learn_fw_standardscompliantdesign_tr.

CSS sayfa mizanpajı hakkında

Fireworks nesnelerin yerleşimini inceleyen bir dışa aktarma motoru kullanarak sayfaları tasarlamanıza ve HTML ve CSS kodunu anında dışa aktarmanıza olanak sağlar. Ayrıca, sayfa hizalamasını ayarlayabilir ve tekrarlayan bir arka plan görüntüsü belirleyebilirsiniz.

Ortak Kitaplık'taki HTML klasörü içindeki kullanılabilir HTML öğelerini kullanabilirsiniz. HTML klasöründe düğme, açılır liste nesneleri ve metin alanları gibi HTML öğeleri vardır. Bu öğelerin özelliklerini Sembol Özellikleri panelini kullanarak düzenleyebilirsiniz. Biçim öğelerinden herhangi birisini sayfaya sürüklediğinizde, dışa aktarma motoru CSS tabanlı mizanpajları dışa aktarırken <form> etiketleri ekler.

Bir dilime yerleştirdiğiniz herhangi metin dışa aktarılan HTML içinde görüntü olarak belirir. Bu metnin metin olarak belirmesini istiyorsanız, Ortak Kitaplık'taki HTML bileşenlerini kullanın. HTML bileşenleri, başlık 1-6 ve bağ öğeleri içerir.

CSS tabanlı mizanpajlar için kurallar

CSS tabanlı mizanpajlar oluştururken beklenen sonuçları elde etmek için birkaç kural gözetilir.

Dışa aktarma motoru dikdörtgenlere yerleştirilmiş metinleri dışa aktarır. Yalnızca dikdörtgen dilimlerle kaplanan görüntüler dışa aktarıldığından, dışa aktarılacak görüntülerin üzerine dilimler yerleştirin. Bu dilimler, dışa aktarma motoruna görüntülerin nerede olduğunu bildirir.

Dışa aktarma motoru, metin, görüntü ve dikdörtgenlere dikdörtgen bloklar gibi davranır. Mizanpaj içinde yerleştirmek üzere mantıksal satır ve sütunları belirlemek için bu nesnelerin boyut ve konumunu inceler. Sınırlarının üst üste binmemesi için nesneleri dikkatlice yerleştirin.

Dışa aktarma motoru, nesneler veya nesne grupları arasına yerleştirilebilen temiz bir görüş açısı bulunan mantıksal kısımlar arar. Dışa aktarma motorunun sütun mizanpajını koparan bir mantıksal satır eklemesini önlemek için sütun mizanpajlarınızı bir dikdörtgenle kapsayın.

Sayfanızı tasarladığınızda, dikdörtgenin alt öğesi gibi davranmak istediğiniz nesneleri kapsamak için dikdörtgenler kullanın. Dışa aktarma motoru, bu tür alt öğe-ana öğe ilişkilerini algılar. Dışa aktarma motoru, Kural 3'teki gibi mantıksal satır ve sütunlar için alt öğeleri tarar.

Bu kurallara ek olarak aşağıdakileri gözetin:

• Dışa aktarma motoru yalnızca temel dikdörtgenleri dışa aktarır. Dikdörtgenlerin yuvarlak köşelerini dışa aktarmak için üstlerine dikdörtgen dilimler yerleştirin.

• Dikdörtgen konturlarını dışa aktarmak için dikdörtgen dilimleri bunlara sahip dikdörtgenlerin üstüne yerleştirin.

• Sembolleri dışa aktarmak için üstlerine dikdörtgen dilimler yerleştirin.

• Dikdörtgen veya metne uyguladığınız filtreleri dışa aktarmak için üstlerine dikdörtgen dilimler yerleştirin.

Bir CSS mizanpajı dışa aktarma

Fireworks, CSS tabanlı dosyalar olarak oluşturduğunuz mizanpajları dışa aktarmanıza olanak sağlar. Daha sonra bu CSS tabanlı dosyaları Dreamweaver veya bir diğer CSS uyumlu düzenleyicide açabilir ve düzenleyebilirsiniz.

Belge demosu oluşturma

Üzerinde çalıştığınız Fireworks belgesinin bir demosunu oluşturabilirsiniz. Demo, özellikleri göstermek için bir tarayıcıda açılır ve size sayfalar arasında gezinme olanağı sağlar.

1. Komutlar > Geçerli Belgeden Demo Oluştur'u seçin.

2. Demo oluşturmak istediğiniz sayfaları seçin ve Demo Oluştur'u tıklatın.

3. Klasörü seçin ve Aç'ı tıklatın.

Flex uygulamalarının prototipini oluşturma

Flex için prototip oluşturma süreci, web siteleri ve yazılım arabirimleri için kullanılan iş akışı gibidir. (Bkz. Prototip oluşturma iş akışı.) Fireworks uygulamasıyla, Flex bileşenlerini tuval üzerine sürükleyebilir, özelliklerini belirtebilir ve oluşan kullanıcı arabirimini MXML'ye aktarabilirsiniz. Flex Builder'da kullanıcı arabirimini daha da geliştirebilirsiniz.

Flex kullanıcı arabirimi oluşturma

Sayfalar panelini kullanarak, başlangıç tasarımınız için istediğiniz sayıda arabirim ekranı oluşturun.

Mizanpaj içine Flex tasarım bileşenleri ekleme

Tuval üzerinde, Ortak Kitaplık'taki Flex klasöründen Flex bileşenleri ekleyin. Bu bileşen sembolleri, umduğunuz sonuçları almanızı sağlamak için özel olarak MXML dışa aktarma ile çalışır. Belgenizi MXML olarak dışa aktardığınızda, bu sembollerin her biri ilgili MXML etiketlerine dönüştürülür. Flex bileşenleri olarak tanınmayan nesneler bunun yerine bit eşlemler halinde dışa aktarılır ve MXML'ye bir <mx:Image> etiketi üzerinden bağlanır. (Bkz. Bileşen sembolleri oluşturma ve kullanma.

İmleç, Kaydırma Çubuğu ve Araç İpucu sembolleri, bu bileşenlerin doğrudan Fireworks'ten MXML'ye çevirisi olmadığından bir MXML çıktısı sırasında yok sayılır. Örneğin, Kaydırma Çubuğu sembolü, otomatik olarak içerikleri kaydırılabildiklerinde Flex kabı örneklerinde görünür. Fireworks'te, bu semboller yalnızca bir arabirim tasarımının kısımlarının nasıl işlediğinin göstergesi olarak sunulur.

Ortak Flex bileşenlerini birden çok sayfa boyunca paylaşma

Birden çok sayfa boyunca tek bir Flex bileşenini paylaştığınızda, tek bir değişiklik otomatik olarak tüm etkilenen sayfaları (veya ekranları) günceller. İçerdiği tüm Flex bileşenlerini paylaşmak için bir ana sayfa kullanabilir veya bileşenlerin alt kümelerini kopyalamak için katmanları paylaşabilirsiniz. (Bkz. Bir ana sayfa kullanma ve Katmanları paylaşma.)

Flex bileşenleri için özellikleri belirleme

Sembol Özellikleri panelinde (Pencere > Sembol Özellikleri), tuvale eklediğiniz her Flex bileşeni için özellikler ve olaylar belirleyebilirsiniz.

Flex mizanpajını MXML'ye dışa aktarma

Flex kullanıcı ara birimi mizanpajını dışa aktarın ve oluşan MXML dosyasını Flex içinde açın. Fireworks gerekli MXML'yi tüm stilleri ve mutlak konumunu koruyarak dışa aktarır. Flex geliştiriciler, Flex içinde mizanpajı yeniden oluşturmak zorunda olmadan bu arabirimi kullanabilir.

Flex bileşeni özelliklerini düzenleme

Sembol Özellikleri panelinde, Flex bileşenlerinin özelliklerini ve olaylarını düzenleyebilirsiniz.

Fireworks belgesini MXML'ye dışa aktarma

Fireworks, Adobe Flex Builder'da kullanmak için bilinen bileşenler olan Ortak Kitaplık varlıklarını etkinleştirerek zengin İnternet uygulamalarını düzenlemenize yardımcı olur. Fireworks, stil ve mutlak konumunu korunan gerekli Flex kodunu dışa aktarır.

Bir Flex uygulaması prototipini sonlandırdığınızda, Flex Builder'da daha ileri düzenleme için onu MXML'ye dışa aktarın. Tasarım görünümünde prototip, dışa aktarılmayan imleçler ve kaydırma çubukları gibi bileşenler hariç Fireworks uygulamasındakiyle aynı görünür.

Flex kaplamaları oluşturma ve dışa aktarma

Fireworks uygulamasında, Flex bileşenleri kaplayabilir ve onları Flex tabanlı web siteleri ve uygulama ara birimleri oluşturmada kullanmak üzere dışa aktarabilirsiniz.

Flex bileşenlerini kaplama

Flex kaplama şablonlarına bağlı olarak çok çeşitli Flex bileşenleri için kaplamalar oluşturabilir ve onları Fireworks uygulamasında düzenleyebilirsiniz.

1. Komutlar > Flex Kaplama > Yeni Flex Kaplaması'nı seçin.

2. Aşağıdakilerden birini yapın:

   • Tüm kullanılabilir bileşenler için Flex kaplamaları oluşturmak üzere Çoklu Bileşenler'i seçin.

     Fireworks, tüm kullanılabilir bileşenler ile tek bir belge oluşturur.

   • Oluşturmak istediğiniz kaplamalar için bileşenler belirtmek üzere Belirli Bileşenler'i seçin.

     Yalnızca eklenen belirli bir stilli bileşenleri veya bileşenin tüm örneklerini seçin.

3. Tamam'ı tıklatın.

Flex kaplamalarını dışa aktarma

MXML dışa aktarma sınırlamaları

Flex MXML dışa aktarma özelliğini kullanmadan önce, onun olanak ve sınırlamaları hakkında bilgi sahibi olmak önemlidir:

MXML'ye dışa aktarma, onları Fireworks'te değiştirmiş olsanız da Flex içindeki bileşenler için kaplamalar oluşturmaz. MXML dışa aktarma sadece Flex içindeki MXML belgelerini oluşturur. Bu belgeler, MXML etiketlerine dönüştürülemeyen Fireworks nesneleri için bağlı görüntüleri de içerir. Bu görüntüler MXML belgesine <mx:Image> etiketleri yoluyla eklenir.

Çünkü, MXML dışa aktarma Flex ile kullanılmak üzere etiket tabanlı belge oluşturmak için tasarlanmıştır, dilimler görüntü veya tablo hücreleri oluşturmada göz önüne alınmazlar. MXML dışa aktarma görüntüler oluşturur, görüntü formatını ve sıkıştırma yöntemini belirlemek için belgenin en iyileştirme ayarlarını kullanır.

MXML dışa aktarma özelliği, Fireworks''deki Flex bileşeni üzerindeki bir MXML etiketinin özelliklerine dayanır. Fireworks, sınırlı sayıda özelliğe sahip Flex bileşenleri alt kümeleri sağlar.

Stiller olarak bilinen özellikler, oluşturulmuş MXML etiketlerinden ayrılır, ancak bir <mx:Style> içinde aynı MXML belgesinde tutulur. Fireworks, harici bir CSS dosyasındaki stilleri tanımlayamaz.

MXML çıktısı için tasarımlar ve mizanpajlar oluştururken, çerçeveleri kullanmayın. Bir belgede farklı tasarımlara sahip olmak isterseniz sayfaları kullanın.

Adobe AIR uygulamalarının prototipini oluşturma

Fireworks için Adobe^® AIR™, bir Fireworks prototipini masaüstü uygulamasına dönüştürme olanağı sağlar. Örneğin, bazı prototip sayfaları verileri görüntülemek için diğer her sayfayla etkileşimde bulunur. Bir kullanıcının bilgisayarına yüklenebilen küçük uygulamalar içine bu sayfaların kümesini paketlemek için Adobe AIR'i kullanabilirsiniz. Kullanıcı uygulamayı masaüstünden çalıştırdığında, prototipi bir tarayıcıdan bağımsız olarak kendi uygulama penceresinde yükler ve görüntüler. Kullanıcı, İnternet bağlantısı olmadan yerel olarak kendi bilgisayarlarından prototipe gözatabilir.

Ethan Eismann'ın Adobe AIR ve deneyimli marka konulu makalesine bakın: http://www.adobe.com/go/learn_fw_airexperiencebrand_tr.

Adobe AIR fare olayları ekleme

Belgenizdeki nesnelere önceden tanımlanmış AIR fare olayları ekleyebilirsiniz. Fireworks önceden tanımlanmış dört fare olayı sağlar: pencereyi kapat, pencereyi sürükle, pencereyi büyüt ve pencereyi küçült.

1. Tuval üzerinde fare olayı davranışı uygulamak istediğiniz nesneleri seçin.

2. Komutlar > AIR Fare Olayları'nı seçin ve olayı belirleyin.

Bir Adobe AIR uygulamasını önizleme

Herhangi bir Adobe AIR uygulaması parametresi ayarlamadan bir Adobe AIR uygulamasını önizleyebilirsiniz.

Bir Adobe AIR uygulaması oluşturma

Bir Adobe AIR uygulamasını dijital sertifikayla imzalama

Bir dijital imza, yazılımın yazarı tarafından oluşturulduğundan beri uygulama için kodun değiştirilmediğinin veya bozulmadığının güvencesini sağlar. Tüm Adobe AIR uygulamaları için dijital imza gerekir ve imza olmadan yüklenemez.