FLASH'A GİRİŞ... Flash, Macromedia firmasının ürettiği vektörel tabanlı popüler bir animasyon (canlandırma) hazırlama programıdır. Flash ı iyi kullanmak için hayal gücünüze güvenmeli ve nesnelerin uzaydaki konum ve hareketlerini kafanızda canlandırdıktan sonra bunların içinde bulunduğu bir senaryoyu tasarlamalısınız. İlk aşamada karmaşık canlandırmalar yerine daha kolay ve basit düzeyde animasyon ve projeler hazırlamalıyız. Tabii her yaptığımız animasyona daha önceden bir senaryo hazırlamamız lazımdır. Yazdığımız bu senaryoyu aşama aşama filmimizin karelerine aktaracağız. Bu planlı bir şekilde işlemler yapmamızı sağlayacaktır. İlk başlarda her zaman amatör bir ruhla başlayalım. Tam anlamıyla öğrenmek için çok çalışmalı Flash'ı tanımadan önce web sayfasının ne gibi teknolojiler içerdiğine bakalım. Öncelikle web sayfalarının içerik olarak iki elemandan oluştuklarını söyleyebiliriz. Bunlardan birincisi text'ler, ikincisi bitmap lardır. Web sayfalarında bulunan her karakter, sayfayı oluşturan html dosyasının uzunluğunu bir byte arttıracaktır. Bir sayfada yaklaşık 3000 harf olduğu ve karakter sayısının sayfa uzunluğuna aynen yansıdığı düşünülürse, her sayfa dosya uzunluğunun 3000 byte (3kb) artmasına neden olacaktır. Web sayfasının içeriğini oluşturan ikinci elemanlar ise, sayfalara esas ağırlığı veren ve sayfaların tarayıcıya yüklenmesini zorlaştıran bitmap (resim) çalışmalardır. Bu durum Bitmap resimlerin çalışma prensipleri nedeniyle HTML dosyası içinde fazla alan kaplamalarından kaynaklanmaktadır. Bitmap çalışmaların boyutları pixel (nokta) olarak verilir. 200x300 pixel olarak verilen bir resmin genişliği 200 nokta, yüksekliği ise 300 noktadan oluşur. Resmin toplamda kapladığı alan ise 60.000 noktadır. Resmi oluşturan her renk ve şekillerle ilgili bilgiler, bu noktacıkların içinde teker teker saklanır. Her resim için ölçü olmasa da, yukarıda ölçüleri verilen resmin en sıkıştırılmış hali 60.000 Byte olarak kabul edilir. Tam sayfa bir yazının ekranımıza gelmesi tahmini 1-2 saniye sürerken, resim aracının internet tarayıcımıza yüklenmesi kat kat daha fazla zamanımızı alacaktır. Dolayısıyla, bu da internet kullanıcımızın yavaşlamasına neden olacaktır. 1
Bitmap'ın yanı sıra başka teknoloji ise, vektör teknolojisidir. Adını AUTOCAD ile duyuran bu çizim teknolojisi ilk başta teknik ve mühendislik için kullanılmış, daha sonraları ise değişik uygulama alanlarına yayılmıştır. Vektör teknolojisinde bütün çizimler ve oluşturulan nesneler, sanki matematiksel bir fonksiyon gibi ele alınır. Bitmap kullanırken çizdiğimiz bir daire bir sürü noktadan oluşurken, vektör çizimi için söz konusu olan sadece bir yarıçap (r) ve dairenin çizileceği x-y koordinatlarıdır. 200x300 piksel boyutlarındaki bir bitmap resimde dairenin yarıçapının değişmesi, resmi oluşturan 60.000 noktanın içerdiği bilgilerin değişmesi anlamına gelir. Halbuki vektör tabanlı bir resimde aynı daire için hafızada tutulan x,y ve r değerlerinden sadece r'nin değerini değiştirmekle, dairenin yarıçapını değiştirmiş oluruz. Zamanla vektörlerin kullanım alanları genişleyip, grafik ve resim işleme programlarında da uygulanmaya başlanmıştır. Bunun nedeni ise piksel tabanlı programlara göre çok daha hızlı çalışmasıdır. Grafikerlerin kullandığı Corel Draw, Adobe Illustrator programlara verilebilecek en iyi örneklerdendir.hem üzerinde yapılan işlemlerin hızlı olması, hem de dosya boyutlarının fazla yer tutmaması nedeniyle, dünyanın en büyük oyun programları üreten firmaları bile, vektör motorlu oyunlar üretmeye başlamışlardır. Televizyonda seyrettiğimiz filmlerin hepsi aslında fotoğraflardan oluşur. Bir yumurtanın aşağıya düşmesini filme aldığınızda ve film şeridinde baktığınızda, kare kare fotoğraflar görürsünüz. Gerekli ekipmanlarla bu kareleri (Frame) hızlı bir şekilde ekrana aktarırsak, yumurtayı "düşüyormuş gibi" görürüz. Bu filmi bilgisayar ortamına aktardığınızı düşünün. Saniyede 24 kare olmak üzere 3 saniyelik bir animasyon için 72 tane resim demektir (Dosyanın boyutunu da siz düşünün artık.). Oysaki Flash'ta yumurtanın sadece ilk karede ve son karede nerede olacağını belirtirsiniz. Aradaki görüntüyü Flash sizin için tamamlar. Bütün 2
bunlar için sadece kendi formatında bir iki satır kod yazarak, son derece ufak, Web için mükemmel dosyalar oluşturur. (Flash aynı zamanda GIF, MOV, AVI, EXE vs. olarak çıktı verebilir. Bunlardan daha sonra bahsedeceğiz.) Kareler ardarda gösterilirse kelebek "kanat çırpıyormuş gibi" görünür. Flash'ta açıp, üzerinde değişiklikler yapabileceğiniz dosya formatı.fla'dır. Bu dosyayı Publish (Yayınlamak) adı verilen bir aşamadan geçirdikten sonra, kullanacağınız yere göre çıktılar alırsınız. Publish ettiğiniz (Dosya ile çalışırken F12'ye basın veya File*Publish menüsünü kullanın.) tüm dosyalar.fla dosyasının kayıtlı olduğu klasörde oluşturulur. Programı yüklediğinizde Default (Varsayılan) çıktı formatları, Web için kullanacağınız. SWF ve HTML dir. SWF Internet ortamı için hazırlanmıştır ve Browser'da adres satırına yazılarak çalıştırılabilir. HTML içinde kullanmak isterseniz bir dizi kod satırını sayfanıza eklemelisiniz. Bu kodları burada yazmıyorum çünkü, her kod gibi değişken özellikteler ve Flash bizim için HTML dosyasını oluşturuyor. Herhangi bir metin editörü ile kaynak kodlarını incelemeniz mümkün olacaktır. Olur ya, değişik formatta çıktılar almak istersiniz. Hemen File*Publish Settings menüsünü kullanarak istediğiniz formatları işaretleyin. Publish düğmesine basın. İşte hepsi bu. Çalışmalarınızı tek adımda hayata geçirmenize olanak sağlaması, Flash'ı üstün kılan özelliklerden sadece bir tanesi. Publish Settings Penceresi 3
Gülü seven dikenine katlanır hesabı, bu teknolojinin de bazı nazları yok değil. Yazının başında belirttiğim gibi, Internet'te Flash ile hazırlanmış SWF dosyalarını izlemek için bir Plug-in'e (Eklenti) ihtiyaç vardır. Hatta işletim sistemlerine ve Browser tiplerine göre ayrı ayrı Plug-in'ler gereklidir. HTML ve FLASH Html' nin tarihi ve anlamından yola çıkarak, internetin çalışma prensiplerini de göz önünde bulundurursak aşağıdaki gibi bir sonuç çıkartabiliriz. İçinde bulunduğumuz iletişim çağında veri transferi, hızlı bir evrim geçirmektedir. Yakın tarihe kadar veri transferi ve haberleşme ara yüzü sadece yazı karakterleri(text) ile sınırlıydı. Hyper Test Markup Language sayesinde internet ortamındaki sunumlar artık sadece yazı ile değil, resim ilaveli yapılabilmektedir. www protokolü zaman içersinde daha fazla kullanılmaya başlanmış ve sayfalarda ses ve resim kullanımının yoğunlaşmasına neden olmuştur. Ancak buna bağlı olarak da hız ve kalite konusunda problemler ortaya çıkmıştır. Bu problemleri asmak için, uydu teknolojisi, yeni yazılımlar, yeni versiyonlar, Java ve diğer konularda çalışmalar yapılırken Flash da önemli gelişmelerden biri olarak yerini almıştır. Şimdiye kadar web sayfasının tek hakimi HTML idi. Bu nedenle internet üzerinde sayfa hazırlayanlar HTML' nin zahmetli kod yazma isinin üstesinden gelmek zorundaydılar. Java bu tahtı sarsmak yerine sağlamlaştırdı ve elinden geldiğince HTML'ye destek verdi ve bu sayede HTML gerçek bir standart oldu.html'ye veri tabanı konusundaki desteği de CGI,ASP,PHP gibi programlama araçları sağladılar. Her şey yerli yerine oturmuştu, ama hala bir eksik vardı; "Animasyon,ses ve hareket" İşte bu eksikliği de Macromedia firması gidererek bu konuda HTML'ye Flash ile destek verdi. Flash ile oluşturulan tüm çalışmalar. HTML içine sanki bir resimmiş gibi yerleştirilmekte ve HTML ile sorunsuz çalışabilmektedir. Ayrıca Front Page ve Diğer HTML editörleri ile uyumu sayesinde Flash, gün geçtikçe daha vazgeçilmez bir web tasarım aracı haline gelmiştir. Böylece yeni bir standart format oluşmuş oldu: SWF (Shock Wave Flash). Flash yardımcı programları diye adlandırabileceğimiz bu programlar da artık münferit olarak SWF ürünleri verebiliyor. Ayrıca bu ürünler, üzerinde hiçbir değişiklik yapılmadan HTML içinde de kullanılabiliniyor. 4
FLASH IÇIN DONANIM VE YAZILIM GEREKSINIMLERI Donanım Gereksinimleri: 133 MHz Intel Pentium işlemci ve Windows 95/98, NT4, 2000, ME, XP, 32 MB RAM, 40 MB Kullanılabilir disk alanı, 256 renk 800x600 çözünürlük ekran desteği. Yazılım gereksinimleri: Windows: Microdoft Windows 95, 98, Me, NT, 2000, Xp, Tarayıcılardan Netscape Navigator 3 + Plug - in ve üstü. Linux: Pentium tabanli Linx Redhat 5.1 veya Linux Slackjware 3.5, Netscape Navigator 3 ve üstü(standart Yükleme). Öneri 1. Flash movie Için : SWF 2. Flash çalismalari için : FLA 3. Müzik arsivi için : SOUNDS 4. Resim arsivi için : IMAGE Yukarıdaki klasörleri açalım ve Flash Kullanırken de Export, Import Save ve Save As işlemlerini hepsini bu klasörler üzerinden yapalım. Böylece herhangi bir karışıklığa neden olmadan Flash öğrenirken bir yandan da kendi arşivimizi oluşturmuş oluruz. Sonuç olarak her yaptığımız web sayfasını flash yapacağız diye bir kaide yoktur. Nasıl bir web sayfası yapılacağına karar verildikten sonra bunu en kolay hangi ara yüz ile yapacağımıza karar verip en kısa ve en güzel şekilde bunu gerçekleştirmeliyiz. 5
FLASH'I YERLEŞTİRMEK... Flash ile animasyonlarınızı yaptınız, File/Export komutuyla SWF yaptınız ve şimdi bunu html sayfanıza yerleştireceksiniz. Bunu bir kaç yoldan yapabiliriz. 1-Object olarak: Bunun için web sayfanıza eklemeniz gereken komut aşağıdaki gibi olmalıdır. <!--Buradan--> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="468" height="60"> <param name=movie value="swf_dosyanızın_ismi.swf"> <param name=quality value=high> </object> <!--buraya kadar--> Buradaki width ve height taglarıyla movienizin boyutunu; movie tagıyla swf dosyanızın yolunu ve ismini; quality tagıyla movienizin gösterilirken hangi görüntü kalitesinde gösterileceği belirlenir. 2-Gömerek (Embed) Bunun için sayfanıza eklemeniz gerek komut aşağıdaki gibi olmalıdır. <!--Buradan--> <embed width="468" height="60" quality="high" src="swf_dosyanızın_ismi.swf"> </embed> <!--buraya kadar--> 3-Hem Object olarak Hem de Gömerek Bunun için sayfanıza eklemeniz gerek komut aşağıdaki gibi olmalıdır. <!--Buradan--> <object width="468" height="60" classid="clsid:d27cdb6e-ae6d-11cf-96b8-6
444553540000"> <param name="quality" value="high"> <param name="src" value="swf_dosyanızın_ismi.swf"> <embed width="468" height="60" quality="high" src="swf_dosyanızın_ismi.swf"> </embed> </object> <!--buraya kadar--> 4-Otomatik olarak(önerilen:)) Flash oluşturduğunuz swf dosyasını otomatik olarak html sayfanızın içine koyabilir. Bu özelliğinden faydalanabilmek için File/Publish komutunu seçmeniz yeterli veya F12 ye basarakta açılacak bir browser sayfasında animasyonunuzu görebilirsiniz. Değişik seçenekleri görmek istiyorsanız File/Publish Settings bölümünden bazı özellikleri isteğinize göre değiştirebilirsiniz. FLASH IN TEMELLERİ Uygulamanın kurulması, yeni bir dökümanın yaratılması, dökümanların kapatılması ve dosyaların kaydedilmesi için kullanılan yöntemler standarttır. Flash ı cd den kurmak için, kurulum yazılımı gereken tüm adımlar sırasında kılavuzluk eder. Flash ı çalıştırmak için, Flash simgesine çift tıklamak yeterlidir. Yeni bir doküman yaratmak için, File menüsünden New seçeneği seçilir. Mevcut bir dökümanı açmak için, File menüsünden Open seçilir, açılmak istenen dosya seçilir ve Open tıklanır. Dökümandaki değişiklikleri kaydetmek için, File menüsünden Save seçilir. Çalışılan dosyayı kapatmak için, File menüsünden Close seçilir. Eğer son değişiklikler kaydedilmemişse uyarı kutusu gelir ve iteğe göre onaylanır.sürekli olarak bir Flash dökümanı tipi üzerinde çalışılacaksa (örneğin belirli bir boyda ve aynı zeminde ya da aynı öğelere sahip bir doküman yaratılacaksa) bu temel doküman bir şablon olarak kaydedilebilir. Bunun için, doküman aç.ılır, File menüsünden Save As Template seçilir. (Save As Template komutu, Flash dökümanlarını tekrar kullanmak üzere kaydetmeyi sağlar. Şablonlar özel kategorilerde kaydedilebilir, onlara isim ve açıklama verilebilir). 7
Flash Çalışma Ekranı Titlebar Menubar Main toolbar TimeLine Work Area (Çalışma alanı) Stage 8
Titlebar (başlık çubuğu), açık olan dosyanın ismini gösterir. Menubar (menü çubuğu), üzerine tıklandığında Flash ın sahip olduğu komutların bulunduğu menüleri gösterir. Main toolbar (ana araç paleti),en çok kullanılan temel ve ana araçların kısayollarının bulunduğu palettir. Timeline (zaman çizelgesi), filmi oluşturan kareler, katmanlar ve sahnelerin yerleştirilip sıralandığı bölümdür. Stage (sahne), bir Flash filmini oluşturan tüm grafiksel öğeleri içeren alandır. Working area (çalışma alanı), sahneyi çevreleyen bölgedir. Çalışma sahasında olan nesneler filmde görüntülenmez. Toolbox (araç paleti), vektör grafikler oluşturmayı sağlayan temel çizim ve araç seçenekleri içerir. Timeline (Zaman Çizelgesi) Sahne içersinde oluşturulan yada dışarıdan programa ithal edilen bir nesnenin, hareketlendirilmesini sağlayan, hareketin hangi zaman aralıklarında gerçekleştirileceğini belirten alandır. Animasyona ait, temel hareketlendirme işlemlerinin tümü bu bölümde gerçekleştirildiği için, Flash animasyonlarının beynini oluşturur. Bu alanda her nesnenin hareketi için farklı bir Layer (Katman) kullanılması zorunludur. Aynı zaman diliminde birden çok nesnenin hareketi bu şekilde sağlanabilir. Ayrıca hazırlanan animasyonun kaç Frame (Kare)' den oluşacağı da bu alanda belirlenebilir. Frame sayısı arttıkça animasyonun zaman boyutu ve bunun doğru orantılı olarak dosya boyutu o denli büyücektir. Bu yüzden bu alan animasyonun sunumu için oldukça önemlidir. Timeline'ın sağ kısımında bulunan framelerden herhangi birine tıklanıldığında o karede bulunan içerik stage'de görünür. Eğer Timeline görünmüyorsa View menüsünden Timeline seçeneğini tıklanmalıdır. Timeline'da geçerli sahne, katman gizleme, katman kilitleme, anahat görünümü, oynatım göstergesi, kare numaraları, Onion seçenekleri,sahnelerin listesi,sembollerin listesi, katmanlar, durum çubuğu, katman ekleme, katman silme, kare görünümü menüsü, kare hızı, görünümü ortalama seçenekleri bulunur. 9
Katmanı kilitle Katmanı gizle Anahat görünümü Oynatım göstergesi Timeline katmanlar Potansiyel kareler katman ekle Hareket kılavuzu ekle Katman klasörü ekle Katman sil Onion skin seçenekleri Oynatım göstergesini kare penceresinde ortala Kare hızı Geçerli kare numarası Timeline, bir Flash penceresinin herhangi bir yanında sabitlenebilir. Timeline ı doküman penceresinin sağında veya solunda dikey olarak sabitlemek, çok sayıda katmana aynı anda erişimi sağlar. Timeline ı dikey olarak sabitlemek erişilecek kare sayısını artırır. Timelin yaratılan her dökümanda görülür. Stage (Sahne) Stage (sahne), bir flash filmini oluşturan tüm grafiksel öğeleri içeren alandır. Tıpkı filmin oynatıldığı perde gibi düşünülebilir. Bu perdenin büyüklüğü ve rengi Document Properties (doküman özellikleri) iletişim kutusundan kontrol edilebilir. Document properties iletişim kutusunu açmak için, Modify menüsünden Document seçilir. Veya Ctrl+J ye basılır. Bir başka yol, timeline ın durum çubuğundaki kare hızı göstergesine çift tıklanır. Document Properties iletişim kutusundan Stage nin Arka plan rengini ayarlar Sahne ölçülerini ayarlar Varsayılanı geri yükler görünümüyle ilgili tüm parametreler ayarlanabilir. Renk kutusuna tıklandığında (Background Color), içinden seçim yapılacak renkler gösterilir. Make defaults a tıklandığında bu parametreleri Varsayılan haline getirir Ölçü birimi seçimi Kare hızını ayarlar 10
yaratılan tüm dökümanların varsayılanları kılar. Ölçü birimini ayarlamak için, Document properties iletişim kutusunda Ruler Units menüsü tıklanır. Açılan birim listesinden çalışmayı tercih edilen ölçü birimi seçilir. Stage nin boyunu ayarlamak için, Document properties iletişim kutusunda Dimensions (boyutlar) kısmındaki Width (genişlik) ve Height (yükseklik) alanlarına istenilen değerler girilir. Flash, Ruler Units e seçili olan ölçü birimini otomatik olarak atar. Filmdeki tüm öğeleri kapsayacak kadar büyük bir Stage oluşturmak için, Document properties iletişim kutusunun Match (uydur) kısmından Contents (içerik) düğmesine tıklanır. Stage boyunun kullanılabilecek maksimum baskı boyunu ayarlamak için, Document properties iletişim kutusunun Match kısmından Printers düğmesine tıklanır. Arka plan rengini ayarlamak için, Document Properties iletişim kutusundan Background Color (zemin rengi) kısmı seçilir ve renk seçenekleri gelir. Buradan istenilen renk seçilir. Kare hızını ayarlamak için,document properties iletişim kutusunun Frame Rate alanına bir değer girilir. Bilgi çubuğu (info bar), hangi moda çalışıldığını belirtir (filmi düzenlemek, yada filmin içindeki bir sembolü veya grubu düzenlemek). Bilgi çubuğunun açılır menüleri, sahneler arasında geçiş yapmayı, düzenlemek üzere bir sembol seçerek anında sembol düzenleme moduna geçmeyi ve stage i görmek üzere büyütme oranını değiştirmeye yarar. Cetveller ve Izgaralar Cetveller sahnede yer alacak nesnelerin boylarının belirlenmesinde bize kolaylık sağlamaktadır. Nesneleri istenilen uzunlukta çizmemizde yardımcı olur. Çizimlerde kolaylık sağlayacak cetvelleri açmak için View menüsünden Rulers seçeneğine tıklanmalıdır. Yada kısayol olması amacıyla Ctrl+Alt+Shift+R tuş kombinasyonuna basılarak işlem gerçekleşir. 11
Cetveller ile ilgili ayarlar kısmı Modify menüsünden Movie seçeneği seçilerek yada Ctrl+M tuşlarına basılarak yapılır. Karşımıza gelen Movie Properties menüsünden Ruler Units seçeneği ölçü birimini ayarlamamızı sağlamaktadır. Izgara nesnelerin tam yerleştirilmesinin sağlanması ve istenilen şekilde çizilmesinin sağlanması için ızgara bölümüne ihtiyaç duyulmaktadır.izgara çizgilerini açmak için, View menüsünden Grid seçeneği seçilir yada Ctrl+Alt+Shıft+G tuşlarına basılır.nesneleri oluşturduğumuz ekranda ızgara çizgileri görünür hale gelmiştir. Izgara rengini ayarlamak için, View menüsünden Grid Edit Grid seçilir ve Color kutusuna tıklanır. Renk paletinden bir renk seçilir. Izgara araşığını ayarlamak için, View menüsünden Grid Edit Grid seçilir. Width ve Height alanlarına değer girilir. Grid ileitşim kutusunda, Save Default düğmesine tıklanarak ayarların tümü yeni dökümanlar için varsayılan hale getireilebilir. Snap Çizim yaparken oluşturduğumuz nesnelerin filmin ızgara çizgileri ile hizalanmasını sağlamaktadır. Snap özelliğini açmak için, araç çubuğundan mıknatıs simgesine sahip tuşa tıklayarak, View menüsünden Snap seçeneği seçilerek yada klavyeden Ctrl+Alt+G kısayol tuşuna basılarak Snap özelliği açılmaktadır. Snap ayarlarını Snap to grid seçeneği ile belirliyoruz. Bu seçeneğe girmek için File menüsünden Accuracy seçeneği seçilmelidir. Buradaki Snap to grid seçeneğinin altında 5 alt seçenek bulunmaktadır. Bu seçenekler; Off: Kapalı Must be Close: Yakın olmalı Normal: Normal Can be distant: Uzak olabilir 12
Always snap: Her zaman kenetle Toolbox (Araç Kutusu) Araç kutusu (toolbox), Flash ın çizim araçlarını ve animasyon için grafikleri yaratıp düzenlemekte kullanılacak diğer araçları içerir. Araç kutusunu görmek için, Window menüsünden Tools seçilir. Gizlemek için, tekrar Window menüsünden Tools seçilir. Araç kutusunun yerini değiştirmek için, araç kutusunun üst tarafındaki mavi mavi çubuk tıklanır ve farenin tuşu basılıyken istenilen yere sürüklenir. Araç ipuçlarını açmak için, Edit menüsünden Preferences (tercihler) seçilir. Preferences iletişim kutusunda General (genel) sekmesi seçilir. Show Tooltips onay kutusu işaretlenir. 13
Tools Bölümü: Arrow Tool:Çalışma alanındaki(sahnedeki) grafikleri editlemek ve özelliklerinde değişiklik yapabilmek için kullanılır.(v) Subselec Tool: Pencil, Brush, Line, Oval veya Rectangle araçları ile oluşturulmuş grafikleri ve grafiklerin dış çizgilerini editlemek, yeniden şekillendirmek için kullanılır.(a) Line Tool: Düz çizgi çizmek için kullanılır. Çizginin özelliklerini Stroke paneli (Window>Panels>Stroke) ile istediğiniz gibi ayarlayabilirsiniz.(n) Lasso Tool: Kement Aracı denir. İmajınız üzerinde serbestçe çizerek Arrow aracından farklı olarak değişik şekillerde seçimler yapabilirsiniz.(l) Pen Tool: Düzgün çizgiler ve yumuşak eğriler çizmek için bu araç kullanılır. Etkili ve denetimli seçim alanları sağlar, yapılacak imajın düzgün kenar rotaları-yönleri çizmemize izin verir. Ayrıca çizgilerin birleşim noktalarını da bu araç ile editleyebilirsiniz.(p) Text Tool: Yazı yazmak için kullanılır. Yazının özelliklerini değiştirmek için yine panel penceresini açmamız gerekecek. (Window>Panels>Character veya Ctrl-T) Bu panel ile yazının fontunu, rengini, büyüklüğünü ve diğer özelliklerini belirleyebilirsiniz.(t) Oval Tool: Oval şekiller çizmek için kullanılır. Colors bölümünden dış çerçeve çizgi rengini ve iç dolgu rengini belirtebiliriz.(o) Rectangle Tool: Kare ve dikdörtgenel şekiller çizmek için kullanılır. Yine colors bölümünden dış çerçeve çizgi rengini ve iç dolgu rengini belirtebiliriz.(r) Pencil Tool:Kalem aracıdır. Kalem etkisi ile çizgiler çizmeye yarar.(y) Brush Tool: Fırça etkisi sağlar ve boyama yapmamıza yarar.(b) Ink Bottle Tool: Mürekkep etkisi ile boyama sağlar.(s) Paint Bucket Tool: Boya Kovası ile seçili alanı, Fill Color daki renk ile doldurabilirsiniz.(k) Dropper Tool: İstenilen rengin üzerine tıklatınca o rengi Fill Color'a ekler. Renk seçim aracıdır.(i) Eraser Tool: Silgi aracıdır.(e) 14
View Bölümü: Hand Tool: Ekrana sığmayacak şekilde büyültülen imajlarda görünmeyen yerlere ulaşmak için kullanılır.(h) Zoom Tool: İmajın istenilen bölümüne yakınlaşmayı veya uzaklaşmayı sağlar.(m,z) Colors Bölümü Stroke Color:İmajın dış çerçeve rengini belirler. Stroke Panelinden (Window>Panels>Stroke) çizginin çeşidini ve kalınlığını ayarlayabilirsiniz. Fill Color: İmajın iç dolgu rengini belirler. Default Colors: Kenar rengini siyah, iç dolgu rengini beyaz yapar. No Colors: Seçiminize göre Stroke Color veya Fill Color'a herhangi bir renk atamaz. Swap Colors: Dış çerçeve ve iç dolgu rengini birbiriyle değiştirir. Menubar (Menü Çubuğu) Üzerine tıklandığında Flash ın sahip olduğu komutların bulunduğu menüleri gösterir Main Toolbar ( Ana Araç Paleti) Flash ta çok kullanılan temel ve ana araçların kısayollarının bulunduğu palettir. Paste (Yapıştır) Copy (Kopyala) Cut (Kes) Undo (Geri Al) Redo (Yinele) Snap (Kapma) Align (Hizalama) Open (Aç) New (Yeni) Print Preview (Baskı Önizleme) Print (Yazdır) Save (Kaydet) Rotate (Döndürme) Straighten Scale (Düzleştirme) (Ölçekleme) Smooth (Yumuşatma) 15
Kontrol Araç Çubuğu Oluşturulan Flash filmini, çalışma ekranında ve test ekranında gösterime sokar. Eğer filmde herhangi bir eylem sözkonusu değilse kontroller pasif duruma geçer. Stop (Filmi Durdur) Rewind (İlk anahtar kareye git) StepBack (Bir önceki kareye git) Go To End (Son anahtar kareye git) StepForward (Bir sonraki kareye git) Play (Filmi Oynat) Grafiklerin Çeşitli Büyütme Oranlarıyla İzlenmesi Nesneleri gerçek boyunda görmek için, View menüsünden Magnification > 100 % seçilir. Veya Satge in bilgi çubuğunun en sağında yer alan Zoom Control alanlına 100 % değeri girlir. Ve Enter a basılır. % 100 de, Flash nesneleri son filmdeki boylarına mümkün olduğu kadar yakın bir boyda gösterir. Stage in sağ alt köşesindeki Zoom Control alanına istnilen büyütme yüzdesi girilir. Yakınlaşmak için, 100 den büyük bir değer, uzaklaşmak için de 100 den küçük bir değer girilir. Enter a basılarak seçilen değer Stage e uyarlanır. NOT : Show Frame (Kareyi Göster), açık olan geçerli pencereden Stage in tümünü gösterecek şekilde büyütme sağlar. Show All (Tümünü Göster), geçerli pencerede Stage deki tüm öğelerin görüleceği bir büyütme oranı sağlar. Stage deki Belirli Nesnelere veya Alanlara Zoom Yapmak Araç kutusundan büyüteç (Magnifier) aracı seçilir. İmleç bir büyüteç haline getirilir. Enlarge (Büyüt) seçeneği seçilir. İmleç Stage alanına getirilir ve yakınlaşılacak alan seçilir. Doğrudan yakınlaşılmak istenen alan veya öğe tıklanır. Flash Zoom Control alanındaki büyütme oranını iki kat artıtır ve tıklana noktayı görüş penceresinin merkezine ayarlar. 16
Tıklayıp sürükleyerek görmek istenen nesneyi içine alan bir seçim dikdörtgeni yaratılır. Flash pencereyi seçilen alanla doldurur. Enlarge (büyüt) seçeneği Reduce (küçült) seçeneği Uzaklaşmak için, araç kutusundan Magnifier REduce(küçült) seçeneği seçilir. İmleç Stage alanına getirilir ve alan üzerinde tıklanır. Paneller Hakkında Paneller, masaüstünde açık kalarak çalışırken kolay erişim sağlayan pencerelerdir. Color Mixer gibi bazı paneller, yeni öğeler yaratırken kullanılacak nitelikleri ayarlamayı ya da üzerinde değişiklik yapmayı sağlar. Movie Explorer ve Scenes gibi diğer paneller de,flash dökümanlarını organize etmeyi ve içinde gezinmeyi sağlar. Properties Inspector paneli, seçilen öğeler hakkında bilgi almayı ve üzerlerinde değişiklik yapmayı sağlar. Bir panel penceresini açmak için, Window menüsünden istenilen panel seçilir. Bir panel penceresini kapatmak için, panelin Option menüsünden Close Panel seçeneği seçilir. Açık olan tüm panelleri kapatmak için, Window menüsünden Close All Panel seçilir veya bir panel penceresinin kapatma kutusuna Alt tuşuna basılarak tıklanır. 17
Bir panel penceresini genişletmek veya toparlamak için, panel başlığının yanındaki üçgen simgesi tıklanır. Bir panel penceresinin yerini değiştirmek için, başlık çubuğuna tıklanır ve pencere sürüklenerek yeni konumuna taşınır. Çok sayıda paneli bir veya daha fazla pencerede gruplayarak daha fazla çalışma alanına sahip olunabilir. Pencere içindeki panel diğerlerinden bağımsız olarak toparlanabilir veya genişletilebilir. Varsayılan panel grubunu açmak için, Window menüsünden Panel Sets Default Layout seçilir. Property Inspector Hakkında Propety Inspector (Özellik Denetçisi), bağlama duyarlıdır ve seçimi yansıtacak şekilde sürekli değişir. Aktif Flash dökümanı, seçilen bir grafiksel öğe (şekil, gruplanmış şekil, sembol, metin bloğu, Bitmap veya video klip) veya seçilen bir kare hakkında bilgi gösterir. Aynı zamanda pek çok araç parametresinin ayarlandığı ve seçilen öğelerin niteliklerinin değiştirildiği yerdir. Property Inspector ı açmak için, Window menüsünden Properties seçilir. Property Inspector ı kayan hale getirmek için, Property Inspector ın sol üst köşesindeki dokulu alana tıklanır ve panel pencerenin kenarından uzağa götürülür. Property Inspector ı sabitlemek için, Property Inspector kayan haldeyken, panelin sol üst yanındaki çubuğa tıklanır ve panel uygulama penceresinin üst veya alt kenarına sürüklenir. Sabitlenmiş Property Inspector ı genişletmek veya toparlamak için, panelin panelin sol üst köşesindeki üçgene tıklanır. Panelin alt yarısını göstermek veya gizlemek için, panelin sağ alt 18
köşesindeki tıklanır. üçgene Eğer Property Inspector açıksa, Property Inspector ı kapatmak için Window menüsünden Properties seçilir. Flash Property Inspector penceresini kapatır. Library (Kütüphane) Film içerisinde kullanılan sembol, ses, grafik, film gibi materyallerin saklandığı paneldir. Kütüphane içerisinde yer alan materyallerin oluşturulma tarihleri, boyutları ve çeşitleri kontrol edilebilir. Library (Kütüphane) içinde bu sembollerden başka, dışarıdan import edilen resim ve ses dosyaları da bulunur. Kütüphane içinde sembolleri karıştırmamak için klasörler oluşturup, semboller bunların içlerine taşınabilir. Kütüphaneden seçilen nesne mouse ile sürükle-bırak yoluyla sahnenin içine alınabilir. Window>Common Libraries ile Flash ile standart olarak gelen semboller kütüphanesini görebiliriz. İçinde bir çok hazır sembol bulunmaktadır. İsterseniz bunları grafiğin çizildiği sahneye mause ile taşıyarak kullanabilirsiniz. Ctrl+L ile veya Window>Library ile açtığımız imaj kütüphanesinde o anda üzerinde çalıştığımız Flash Movie'de kendimizin hazırladığı semboller ve animasyonları görebiliriz. Object Actions (Nesne Eylemleri) Bu panel ile eylem komutlarını nesneler ve kareler için kullanabilme imkanı sağlar. Geliştirilmiş eylem komutları ile interaktif filmler oluşturulabilir. 19
Klavye Kısayollarını Özelleştirmek Flash ın varsayılan kısayol tuşları çizim araçlarına ve menü komutlarının çoğuna klavyeden hızlıca erişmeyi sağlar. Ancak bazı işlemlerin kısayolu yoksa bunu kullanıcı oluşturabilir. Flash ile birlikte, Fireworks 4, FreeHand 10 ya da Adobe Illustrator, Photoshop6 yla aynı klavye kısayolarını kullanmayı sağlayan 5 ilave kısayol grubu daha gelir. Kısayol grupları arasında geçiş yapmak için, Edit menüsünden Keyboard Shortcuts seçilir. Açılan iletişim kutusundan Current Set seçilir. Ve kısayol gruplarından biri seçilir. Yeni özel bir kısayol grubu yaratmak için, kısayol grubu seçildikten sonra, Keyboard Shurtcuts iletişim kutusunda sağ üst köşedeki Duplicate Set düğmesine tıklanır. Yeni bir isim girilir. Duplicate Set OK e tıklanır. Flash yeni kısayol grubunu Commands penceresinden erişilebilir hale getirir. Yeni bir kısayol atamak için, Edit menüsünden Keyboard Shurtcuts seçilir. Açılan iletişim kutusunda Current Sets menüsünden üzerinde değişiklik yapmak istenilen kısayol grubu seçilir. Commands menüsünden aşağıdaki seçeneklerden biri seçilir Flash ın düzenleme ortamında kullanılan bir komut üzerinde değişiklik yapmak için, Drawing Menu Commands seçilir Flash ın film test etme ortamında kullanılan bir komut üzerinde değişiklik yapmak için, Test Movie Menu Commands seçilir. 20
Bir çizim aracına erişen bir komutu değiştirmek için, Drawing Tools seçilir. Flash ın script dili ActionScript lerin yaratılmasında kullanılan bir komutu değiştirmek için, Actions Panel Commands seçilir. Seçili komutların listesi, onlara atanmış durumdaki klavye kısayolları Commands penceresinde belirir. Commands penceresinde değiştirilmek istenen komutun veya aracın adı seçilir. İletişim kutusunun Description alanında öğenin kısa bir açıklaması görülür. Öğeye atanmış kısayollar, Shortcuts listesinde ve Press Key alanında görünür. Add Shortcut düğmesine tıklanır. Klavyeden öğeye erişmek için kısayol olarak kullnmak istenen tuşlara basılır. Flash kısayolu Pres Key alanına girer. Change düğmesine tıklayarak kısayol grubu güncellenir. Bir kısayolu silmek için, Remove Shortcut düğmesine tıklanır. Add Shortcut düğmesi Remove Shortcut düğmesi 21
UYGULAMALAR İlk çalışmamız, bir tekerleği döndürmek olsun Oval Tool ile bir daire çizip Line tool ile bir çentik atalım. seçiniz. Aşağıda olduğu gibi ilk frame üzerine fare ile sağ tıklayıp Create Motion Tween tıklayalım. Aşağıda olduğu gibi, 30. frame üzerine gelip fare ile sağ tıklayıp Insert Keyframe yi 1.film karesini (frame) farenin sol tuşu ile işaretleyip, Properties kısmını aşağıda olduğu gibi ayarlayınız (CW, 1 bu saat yönüne 1 tur attırması anlamına gelir) Sonrasında 30. kareyi seçtikten sonra çizmiş olduğumuz dairenin yerini değiştireceğiz. İşte bu kadar. Son olarak çalışma alanında iken enter tıklanırsa veya Control Play tekerleğinizin döndüğünü görürsünüz. 22
Control Test Movie veya Ctrl+enter ile swf formatında çalıştırırız. Çalışmayı kaydettiğimiz yere swf olarak her çalıştırdığımızda kayıt eder. İkinci çalışmamız bir dairenin kareye dönüşmesini sağlayalım. Bunun için ilk olarak 1.framede bir daire oluşturalım, sonra örneğin 30. frameye gelip sağ tıklayıp Insert Blank Keyframe i tıklayıp boş olan sayfada dairenin olduğu yere veya başka yere bir kare çizelim. Daireden kareye dönüşüm yaptıracak aracımızı 1.frame ye gelip Properties ten Tween seçeneğini shape olarak seçelim ve çalıştıralım. Üçüncü çalışmamızda, bir boru içerisinden geçen oyuncak bir araba yapalım. Bunun için sahneye bir araba çizelim. Arabanın tekerleğini çizelim ve bu tekerleği Fare ile seçtikten sonra F8 tuşuna tıklayıp gelen pencereden Movie clip seçeneğini seçtikten sonra adını tekerlek koyalım ve ok tuşu ile kapatalım. Tekerleğimiz mavi bir çerçeve içerisinde görünecektir. Şimdi bunu fare ile iki kez tıklayarak tekerleğin sağa dönmesini sağlayacağız burada son frameyi 4 alıp dönme sayısını 1 veya deneme yanılma ile değişik değerler verebilirsiniz (1. etkinlikte yapılanları hatırlayınız). İşinizi bitirdikten sonra boş alana iki kez tıklayarak ana sahneye ulaşıp, tekerleğin bir kopyasını oluşturarak arabaya tekerlekleri yerleştirelim. 23
Şimdi de tünel işlevi görecek nesnemizi çizelim. Bunun için tünelin dışı ve içini ayrı pencerelerde çizeceğiz. Bunlar da diğer sayfadaki nesneler olacak. Aşağıdaki şekiller ve arabamızdan oluşan toplam 3 nesnemiz var elimizde. Aşağıdaki gibi Insert Layer ile yeni tünel içi ve dışı için iki farklı layer ekleyeceğiz. Ve bu üç layer e araba, tüneliçi ve tüneldışı şeklinde adlandıralım Adlandırmak için iki kez Layer1,2,3 yazan yere tıklamalı ve ismi oraya yazmalıyız. Her layer ismine göre nesneleri yerleştirelim. En üstte tüneldış layer i olacak ve tünelin dışını temsil eden nesnemiz buraya eklenecek, ikinci sırada araba ve üçüncüde tüneliç olacak. Arabamızı sahnenin dışına alalım ve araba layerini motion özelliği ile 1. ve 40. frame arasında hareket ettirelim; tüneliç ve tüneldış ı yerinde bırakalım. 1.frame de aracımız sol uçta, 45. frame de sağ uçta olacak. Artık çalıştırabiliriz. 3. etkinlikteki tüneli saydam yapıp içindeki aracı görmek istiyorsak şu yolu takip etmeliyiz: window color mixer den tüneldış nesnesinin alpha değerini örneğin 70 yaparsak tünelimizin dış yüzeyi saydamlaşacak ve araç görünecektir. 24
Dördüncü çalışmamızda yukarıdan düşerken gittikçe hızlanan bir top örneğini oluşturalım. Top için bir daire ve topun gölgesi için bir elips oluşturalım. Üçüncü etkinlikteki katman (layer) kavramını burada da kullanacağız. Top için top layerı, gölge için gölge layerı oluşturalım. Top ve gölgenin 1. karelerini (frame) motion özelliği atamamız gerekir. Bunun için 1. framede iken fareyi sağ tıklatyıp create motion tween özelliğini seçmemiz veya aşağıdaki resimde olduğu gibi Properties ten Tween özelliğini motion yapmamız gerekir. 1.framede topu yukarıda bir yerde, gölgeyide aşağıda ve topa göre daha büyük yapalım. Her iki layer(katman) için de 40. frameye gelip fareyi sağ tıklayarak Insert keyframe i işaretleyelim.topu bu framede gölgeye değdirelim, bunu yaparken gölgenin boyutunu da küçültelim. Yalnız burada önemli olan, top ilk harekete başlarken yavaş, yere çarptığında hızlı olması gerekir. Bunun için top ve gölgenin 1. ve 40. framesi fare ile seçili iken Properties teki Ease değerleriyle oynamak lazım. Ease değeri 100 ile -100 arasında değer almaktadır. Bu değer -100 ise durma durumu, 100 ise en hızlı olma durumunu belirtir. 25
1. frame seçili iken Ease değerini -100, 40. framede ise 100 alırsak, top yukarıdan yere düşerken gittikçe hızlanacaktır. Aynı şekilde topun yere çarpıp tekrar yükselmesi için 70. frame, alçalması için 100. frame (burada yükseliş ve alçalış aynı sürede gerçekleşeceğinden bu aradaki frame sayısının aynı olmasına dikkat ediniz), tekrarı için 120. ve 140. frame, tekrarı için 150. ve 160. frame ve en son olarak 165. ve 170. frameleri kullanalım. 170. frame ile 200. frame arasında da top yerde dursun. Tabii ki bunları yaparken Ease değerlerini uygun kullanmanız gerekir, top nerede hızlanır (-100 ile 0 arası), nerede yavaşlar (100 ile 0 arası) bu tür hareketleri iyi kestirmek gerekir. Topa küre özelliğini renklerle verdik. Bunun için window color mixer veya Shift+F9 kısayolu ile açtığımız Colur mixer i kullanırız. Burada Type kısmından dairesel renk, çizgisel renk veya kaplama olarak resim kullanabilirsiniz. Çizdiğimiz daireyi küre gibi göstermek için Radial özelliğini kullandık. Beşinci olarak, düğmeler yardımıyla 3. etkinlikte yaptığımız aracımızın hareketini kontrol edelim. Bunun için iki düğme oluşturacağız. oynat ve durdur düğmeleri. Düğmeler için ayrı bir düğme layer i oluşturalım. İki tane oynat ve durdur adındaki nesneyi ayrı ayrı seçip F8 kısayolu ile button özelliği verelim. 26
Düğmelerin üzerine gelindiğinde, tıklandığında renk ve şekil değiştirmek için şu yolu izleyelim: örneğin oynat düğmesini iki kez tıkladığımızda aşağıdaki resimle karşılaşırız. Up, Over, Down ve Hit bölümlerini doldurmak için F6 kısayolunu kullanmalı ve içeriği değiştirmeliyiz. Şimdi çalışma alanından boş bir yere iki kez tıklayarak düğme özelliklerinin dışına çıkalım. Düğmeyi fare ile seçtikten sonra window actions veya F9 kısayolu ile aşağıdaki açılan kod penceresinden play i seçelim ve iki kez tıklayalım. Bu işlemle düğmeye her tıkladığımızda oynat eylemi gerçekleşecektir. 27
Framelerden düğme framesinin 1.layer ini seçip Actions penceresinden stop komutunu kullanalım. Aynı komutu durdur düğmesi için de gerçekleştirelim ve çalışmamızı test edelim. Bu çalışma ile de düğmelerin mantığını ve yönlendirmeyi öğrenmiş olduk. Altıncı olarak ses eklemeyi ve düğmelerde veya canlandırmalarda (animasyonlarda) ses kullanma ile ilgili bir örnek çalışma yapalım. Window Library veya Ctrl+L tuşu ile kütüphaneye (library) ulaşıp, Flash içerisindeki veya sizin inport (aldığınız) ettiğiniz düğme (button), film (movie) veya seslere (sound) ulaşabilirsiniz. Kütüphanenize dışardan ses almak için File Inport yolunu kullanmanız yeterlidir. Bu yöntemle sadece ses değil, diğer dökümanları da alabilirsiniz. Aşağıdaki resimde yukarıda anlatıldığı şekilde alınan bir ses dosyasının Library e alınmış hali gözükmektedir. 28
Bu ses dosyasını farenin sol tuşuna basılı tutarak çalışma alanına götürür ve bırakırsak ses eklemiş oluruz. Ancak çalışma alanında herhangi bir görüntü göremezsiniz. Eklediğiniz ses katmanlar kısmındaki frame lerde görünür. Aşağıdaki resimde Tiny, Small, Normal seçenekleri zaman çizgisinin daha büyük/küçük görünmesi için kullanılır. Framedeki ses şekildeki gibi görünür, çizgilerin yoğunlaştığı bölgeler sesle doğru orantılı olarak artar. Ses üzerinde düzenleme yapmak için Properties ten edit düğmesine tıklamalıyız. Bundan sonra karşımıza bir sonraki sayfada bulunan pencere karşımıza çıkacaktır. Bu penceredeki araçları kullanarak sesin alçalması, yükselmesi, sol/sağ hoparlörden gelmesi/durdurulması, Soldan sağa veya sağdan sola sesin geçiş yapması gibi işlemler yapılabilmektedir. 29
Sesi düzenledikten sonra (bu zorunlu değildir, isteğe bağlıdır) bu sesi senaryo içerisinde mi yoksa düğmede mi kullanacağınıza karar vermeniz gerekir. Eğer sesi düğmede kullanacaksanız, örneğin fare ile düğme üzerine geldiğinizde ses çıkmasını istiyorsanız düğmenin over özelliğine sahip karesine eklemeniz gerekir. Aşağıdaki çalışmayı da uygulamaya çalışın, bir nevi tekrar olacak ve basit komutlar öğreneceksiniz. Basit Shape Tweening Tekniği 1- İlk Flash dersimizde (gerçi Flashla ilgilenmeye başlayanların ilk öğrendiği tekniklerden biridir) bir neysneyi başka bir nesneye dönüştüreceğiz. 2- Rectangle (R) bir kare çizelim. 3-15. Frameye faremizin sağ tuşuyla tıklayarak Insert Blank Keyframe (F7) yi seçelim. Böylece 15. Frameye boş bir frame eklemiş olduk. 30