Flash Dersleri A-Z Resimli Anlatım

[Jaqen]

Flash Dersleri A-Z Resimli Anlatım


Flash Animasyon Paleti (Timeline)

Flash'ın en önemli paleti olan Timeline paleti (Zaman Çizelgesi) ile animasyondaki hareketlendirme, ses ekleme, tweening ve actions (yapılacak faaliyetleri) uygulamalarını yapmamızı sağlamaktadır. Yukarıdaki resimden de anlaşılacağı üzere Timeline paleti yatay bir zeminde sıralanmış layer ve frameleri içermektedir. Bu zeminde layerler üst üste sıralanırken frame ler yanyanadırlar. Layerlerin birbirlerinin altında veya üstünde sıralanış biçimi ve amaçları Photoshop Layers bölümünde anlattıklarımız ile hemen hemen aynıdır.
Layerlerin isimlerini değiştirmek için Layer 1 yazan yere çift tıklamanız, çıkan pencerede yeni ismini yazmanız yeterlidir. Layerlerin üzerlerine basılı tutatarak aşağı ve yukarı taşıyabilirsiniz. Yeni bir Layer yaratmak için Insert>Layer veya yukarıdaki resimde gördüğünüz [ + ] işaretine basmalısınız. Silmek için ise Layeri tıklayarak işaretli hale getirip yukarıdaki resimde altta bulunan çöp kovasına tıklamanız yeterlidir.
Layer Modları: Current Mode: Üzerinde kalen işareti olduğu zamandır. Çalışılan Layeri gösterir. Herhangi ibr nesne eklenirse doğrudan bu Layer'e eklenir. Normal Mode: Layerde hiç bir şey yapılmadığını gösterir. Locked Mode: Layeri kilitleyerek hiç bir nesne seçilmemesini sağlar. Hidden Mode: Layerdeki hiç bir nesne görünmez ve seçilmez. Outlines Mode: Bu mode geçirdiğiniz Layer'i animasyon yaparken etrafı çizgi şeklinde transparan bir şekilde görürsünüz.Bu da size arka plandaki Layerde çalışırken kolaylık sağlar. Herhangi bir modu normal hale getirmek için işaretin üzerine tıklamanız yeterlidir.
Frame bölümüne yeni bir frame eklemek için F5 tuşuna, frame'i silmek içinde Shift+F5 tuşuna basabileceğimiz gibi, istediğimiz frame e farenin sağ tuşuna basıp açılan menüden Insert Frame ile frame ekleyebilir, Remove Frame ile o frame'i silebiliriz. Yine aynı şekilde Keyframe eklemek için F6 tuşuna, boş bir Keyframe için F7 tuşuna, Keyframe silmek için Shift+F6 tuşuna basabileceğimiz gibi Keyframe eklemek istediğimiz frame'e farenin sağ tuşuna basıp açılan menüden Insert Keyframe ile Keyframe ekleyebilir, Insert Blank Keyframe ile boş bir keyframe ekleyebilir veya Clear Keyframe ile Keyframe'i silebiliriz. Ayrıca Frame leri Kes (Cut), Kopyala (Copy), Yapıştır (Paste) ile kopyalayıp taşıyabiliriz.
Herhangi bir frame'e fare ile çift tıkladığınızda açılan Frame Actions Penceresinden, link verme, oynatma, durdurma, ses ekleme, birbirleri arasında etkileşimleri vb. gibi bütün faaliyetleri (actions) yaptırabilirsiniz. Seçili olan layerde iken sahnede yaptığımız her çizim o layer'in frame'ini doldurur.
Flash da animasyonlar TWEENING olarak tanımlanır. İki çeşit animasyon şekli vardır: Motion Tweening (Hareket Animasyonu) ve Shape Tweening (Şekil Animasyonu). Yukarıdaki resme dikkat ederseniz; Motion Tweening (Hareket Animasyonu) uygulandığı zaman, frame bölümü, Layer 1 de açık mavi renkte gösterildiği gibi şekil alır, Shape Tweening (Şekil Animasyonu) uygulandığı zaman ise frame bölümü, Layer 3 deki gibi açık yeşil renkteki gibi şekil alır. Layer 2 de ise herhangi bir animasyon yoktur.
Bir nesneye TWEENING uygulanması için o nesnenin Symbol (Simge) olması gerekir. Bir nesneyi sembol yapmak için o nesneyi seçili hale getirip, Insert>Convert to Symbol ( veya F8 ) ile sembole çevirmemiz gerekir. Yada ilk baştan yeni bir Sembol yaratacaksak Insert>New Symbol (veya Ctrl+F8) ile sembolümüzü yaratmalyız. Flash'ın anladığı sembol çeşitlerinin Movie Clip , Button ve Graphic olarak üç çeşit olduğunu tekrar hatırlatalım.
Bu anlatılanları örneklerde daha iyi anlayabilirsiniz.

Library



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. Ayrıca 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. Hazırladığımız imajlara bazı effectler verebilmemiz için onları Flash'ın anlayacağı Sembollere (Bunlar üç çeşittir: Movie Clip, Button, Graphic) çevirmemiz gerekir. Bunun için hazırladığımız imaj hangi Layer de ise o Layer'e tıklayarak imajı seçili hale getirip, Insert>Convert to Sembol (F8) ile imajımız hareketli bir görüntü, animasyon ise "Movie Clip", işlevsel olarak buton ise "Button", sadece bir grafik ise "Graphic"'e çevirmeliyiz ki Flash, bu sembollerin durumuna göre işlem yapabilsin.
Library (Kütüphane) içinde bu sembollerden başka, dışarıdan import ettiğimiz resim ve ses dosyaları da bulunur. Kütüphane içinde sembollerimizi karıştırmamak için klasörler oluşturup, sembolleri bunların içlerine taşıyabiliriz. Kütüphaneden seçtiğimiz nesneyi mauseumuz ile sürükle-bırak yoluyla sahnemizin içine taşıyabiliriz..

[Jaqen]

Flash Sahne (Scene)



Her türlü çizimi gerçekleştirdiğimiz nesneleri yerleştirdiğimiz bölümdür. Animasyonu, bu bölümü kullanarak oluştururuz. Sahnede oluşturduğumuz her çizim zaman çizelgesindeki (Timeline) seçili olan çerçevenin (frame) içini dolu hale getirir. Bu çalışma alanında sembol haline getirdiğimiz objeler kütüphane (library)'de yer alır. Sahnenin sağ alt kısmında kısa yol ikonları bulunmaktadır. Bu ikonlar sırasıyla (soldan sağa) info, mixer, character, instance, movie explorer, actions, library pencerelerine üzerlerine bir kere tıklama ile erişmemizi sağlar. Sol alt köşede ise çalışma alanını yüzde olarak büyüklüğü belirlememizi sağlayan popup pencere yer almaktadır. Çalışma alanında gri bölgede yaptığımız çizimler kamera alanının dışında yer alan bölgelerdir, yani çalışmamızı publish (ctrl+enter) ile sunum haline getirdiğimizde bu alanlardaki (gri alanda) çizimler gözükmeyecektir.

[Jaqen]

Web'de Yayınlama - Publish

Büyük emekler vererek hazırladığımız animasyonumuzu ( fla ) formatında *.fla soyadlı bir döküman olarak kaydettik. Ancak animasyonumuzu web'de yayınlayabilmemiz için ( swf ) formatında *.swf soyadlı bir döküman olması gereklidir. Bu işlemi Flash Programı, içindeki "Publish" komutu ile ( fla formatındaki dökümanı swf formatına çevirme ) yapar.
Flash'ın arabirimindeki File Menüsünü açtığımız zaman Publish Setting (Ctrl+Shift+F12), Publish Preview ve Publish (Shift+F12) komutlarını görünür.
Flash'da hazırladığımız dökümanlarımız yayına hazırlamak için öncelikle Publish ayarlarını yapmamız gerekir. File>Publish Setting (Ctrl+Shift+F12) penceresin de Formats, Flash, HTML şeklinde üç tane sekme vardır. Aşağıdaki animasyonda Load Movie örneğini hazırladığımız dökümanımızın Default Publish ayarlarını görebilirsiniz.
Bu sekmeleri inceleyelim;
Formats: Bölümünde dökümanımızı hangi formatta yayınlayacağımız tespit edebiliriz. Burada Flash ve HTML seçenekleri default olarak işaretlidir ve biz Flash movie olarak yayınlayacağımız için bir değişiklik yapmamıza gerek yoktur. Alltaki Use default names işaretini kaldırıp yukarıdaki pencerelere yazdığımız yeni isim ile publish edebiliriz.
Flash: Bölümü seçenekler, JPEG kalitesi, ses dosyaları ayarları ve Flash versiyon ayarları gibi çeşitli ayarların yapıldığı bölümdür. Bu bölümde de bir değişikliğe gerek yoktur. Aynen (default olarak) kalabilir.
HTML: Bölümünde Template ve Dimensions bölümleri de aynen default kalabilir. Playback bölümünde Pausedat Start'ı işaretlersek animasyon web sayfasında belirdiği zaman hareket etmeden bekler, Loop: animasyonu devamlı olarak oynatır. Display Menüdeki işareti kaldırırsanız sayfadaki animasyona sağ tuş yapınca ortaya çıkan Zoon In, Play, Loop gibi komutların bulunduğu menü yerine sadece "About Macromedia Flash Player 5." menüsü görünür.Quality, Window Mode, HTML Alignment, Scale, Flash Alignment web sayfasının HTML kodlarını belirlemeye yarar. Bu ayarları değiştirerek animasyonun web sayfasındaki konumunu ayarlayabilirsiniz. En altta bulunan Show Warning Messages deki seçim Flash Player'ı olmayan bir kullanıcı tarafından sayfanız ziyaret edilince ziyaretçiye Flash Player'ı yüklemesini hatırlatır. Aynen kalmasında fayda vardır.
Flash animasyonunun bir HTMLsayfasında görünebilmesi için bazı kodlara ihtiyaç vardır.
Örnek olarak, Load Movie bölümümüzde anlattığımız animasyonun Publish özelliklerinin gösterildiği aşağıdaki animasyonun kodları şu şekildedir:

<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=540HEIGHT=440> <PARAM NAME=movie VALUE="publish.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolorVALUE=#FFFFFF><EMBED src="publish.swf" quality=high bgcolor=#FFFFFF WIDTH=540 HEIGHT=440 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED> </OBJECT>

Buradaki <OBJECT> taglarının <EMBED> taglarını kapsamış olduğuna dikkat ediniz. Bu sıra ile olması önemli, çünkü <OBJECT> tag'ı Internet explorer tarafından, <EMBED> tagı Netscape tarafından tanınıyor. Bu kod ziyaretçinin browser'ında gerekli plug-in 'in yüklü olduğunu varsayıyor. Bu arada kırık bir link resmi gösteriyor. Bu arada bütün son sürüm browserlarda en son Flash Player Plug-in in çıktığını da hatırlatalım. classid, OBJECT 'e bağlıdır ve Internet Explorer'a gerekli ActiveX dosyası eğer kurulmamışsa indirip kurmasını söyler. Aynı işi yapan PLUGINSPAGE, EMBED ile beraber çalışıyor ve Macromedia Shockwave indirme sitesine link veriyor. Diğerleri dökümanınızın özellikleri ile ilgili kodlardır.
Kodları da kısaca açıkladıktan sonra bu kodları kendi web sayfamıza yerleştirmek için ise File>Publish (Shift+F12) ile publish ettiğimiz dökümanımız fla dosyasını hangi klasöre kaydettiysek aynı isim ile o klasörün içine dökümanımız .*swf uzantılı Flash Player Movie dosyası ile dökümanımızın görüntülendiği HTML dosyasını otomatik olarak yerleştirir. İşte bu HTML dosyasını açıp sağ tuş ile kaynak kodunu (View Source) açıp içindeki <OBJECT classid= ile başlayıp, </OBJECT> ile biten kodu, işaretleyerek seçip, kopyalayıp (Ctrl+C) kendi web sayfanızın HTML kodu arasına yapıştırabilirsiniz (Ctrl+V).

[Jaqen]

Flash Araç Kutusu (Toolbox)

Gördüğünüz gibi diğer grafik programlarının (Photoshop, ImageReady, Paint vb.) araç kutusuna çok benzemektedir. Üç bölüm halindeki Araç Kutusunda Tools bölümünde seçim aracı, kement, yazı aracı, kalem, fırça, boya kutusu gibi vektörel çizim yapmamıza yarayan araçlar mevcuttur. View bölümünde Hand Tool ve Zoom Tool, Color bölümünde çizeceğimiz grafiğin kenar ve iç renklerini seçebileceğimiz renk paleti, Options bölümünde de Tools dan seçtiğimiz araçlara ait çeşitli ayarları yapmamızı sağlayan ikonlar mevcuttur. Şimdi bu bölümleri ve araçlarını kısaca açıklayalım;

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.

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)

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.

Options Bölümü: Tools bölümünde seçilen araçlara ait çeşitli ayarlamaların yapıldığı bölümdür. Örnekleri yaparken bu bölümü daha detaylı olarak anlayabilirsiniz.

[Jaqen]

Web Butonları Yapımı

Bu bölümde, Flash da hazırlanmış web butonlarının yapılışını ve link verilişini daha geniş olarak inceleyeceğiz.
Bunun için "Graphic" ve "Button" özelliğinde olan iki tane obje hazırlayacağız.
Her zaman olduğu gibi yukarıdaki örneğin yapılışını anlatarak konuya açıklık getireceğiz.





1- Insert>NewSymbol (Ctrl+F8) ile Graphic özelliğinde ve "button" adında objemizi yarattık. Rectangle Tool'u seçip, Rectangle Settings ile Corner Radius: 25 yazdık ve OK dedik. Ancak Stroke Color'ı iptal edelim ki butonumuz daha etkili olsun. Objemiz Layer 1'e yerleşti.
2- Layer 1'i tıklayıp seçili hale getirdik ve Fill panelinde Linear Graident'i seçip renklerini aşağıdaki gibi ayarlayıp (#000099 - #00FFFF), boyadık ve kova aracı seçili iken, Transform Fill aracı ile de renk geçişlerini düzenledik. Objemiz yan taraftaki görüntüyü aldı.



3- Layer 1'i tıklayarak seçili hake getirdik, Ctrl+C ile kopyaladık ve yeni bir Layer yaratıp (Layer 2), kopyaladığımız görüntüyü yapıştırdık (Ctrl+V).



4- Layer 2 deki görüntüyü klavyedeki oklar yardımıyla ilk görüntünün (layer 1 deki görüntü) tam üzerine taşıdık ve Modify>Transform>Scale and Rotate ile Scale:85, Rotate:180 değerleri yazıp OK diyerek, objemizi küçültüp-döndürdük.

5- Yeni bir layer yarattık (Layer 3) açık mavi renk ile Tıkla yazıp, butonumuzun ortasına taşıdık.

6- Mixer Panelini açtık (Window>Panels>Mixer). Fill Color rengini beyaz olarak seçtik, Alpha değerini 0 yaptık ve üstteki ok'a tıklayarak açılan menüden Add Swatch ile Swatches paneline gönderdik.


7- Fill Panelinde yeni bir Linear graident yaratıp, önceden Swatches paneline gönderiğimiz rengi seçip renk geçişlerini yan taraftaki gibi ayarladık.

8- Yeni bir Layer yarattık ( Layer 4). Rectangle Tool ile butonumuzun ortasıdan ve Layer 2 deki görüntünün hizasından sağ tarafa doğru çizdik.

9- Kova aracı seçili iken, Transform Fill aracı ile de renk geçişlerini yan taraftaki gibi düzenledik.

10- Arrow Tool (V) seçip, objemizi Scale aracını kullanarak eninden küçülttük.

Böylece butonumuz oluşmuş oldu.

Şimdi bu butonu aktif hale getirip hem başka bir web sayfasına gitmesi için (URL) hem de e-mail göndermek için (mailto: ) link verilmesini göreceğiz.

Yeni bir sembol yaratalım Insert>New Symbol (Ctrl+F8). Açılan Symbol Properties penceresinde adını "active button" yazıp button'u işaretleyip Ok diyelim.


11- Önceden hazırladığımız "button" isimli ve graphic özellikli objemizi, üzerinde çalıştığımız "active button" isimli button özellikli objemizin sahnesine kütüphaneden çekip taşıyalım. Button özellikli objelerin Timeline larında özelleştirilmiş dört adet Frame bulunur. Bunlar Butonun özelliklerini belirler, Up:Normal görünümü, Over: Mause üzerine gelince görünen görüntüsü, Down: Mause ile tıklayınca veya üzerinden ayrılıncaki görüntüsü, Hit: Mause'un algılama alanını belirler.
Kütüphaneden taşıdığımız Objemiz Up Frame inde yerini aldı.

12- Down Frame ine sağ-tuş yaparak, Insert Keyframe ile bir keyframe ekledik.

Modify>Transform>Scale and Rotate ile Scale:85, Rotate:0 değerleri yazıp OK diyerek, objemizi küçülttük.

Böylece butonumuzu tamamladık.
Control>Test Movie (Ctrl+Enter) ile test edebilirsiniz.

13- Şimdi butonumuza link vermeyi göreceğiz.
Sahnemize döndük .
Kütüphaneden "active button" isimli objemizi sahnemizdeki çalışma alnına taşıyıp, Scale yardımıyla büyüklüğünü sahnemiz göre ayarladık.

14- Sahnedeyken objemizin üzerine sağ-tuş yaparak, Actions u seçtik. Açılan Object Actions panelinde GetURL actions una çift tıkladık. Bir web sayfasına yani URL ye link vermek için Object Actions panelindeki alt tarafta bulunan URL kısmına web sayfasının URL sini yazmalısınız. (Örn; aeyStudio.com - Photoshop, ImageReady Tips, Flash Tutorials, interfaces, images, web design )

15- Şayet bir e-mail adresine link vermek isterseniz Object Actions panelindeki alt tarafta bulunan URL kısmına mailto: ibaresi ile beraber e-mail adresini yazmalısınız. (Örn; mailto:[email protected] )

[Jaqen]

Actions Script Örnekleri - Script 01

Bu bölümde bazı script örneklerini inceleyeceğiz.
Ancak script yazmaktansa yazılmış olan hazır scriptleri kullanacağız.
Yan taraftaki örneğimizdeki, mouse üzerine gelince döngü sağlayan movie'i oluşturmak için sadece iki tane obje hazırlayacağız. Bunlardan birisi Graphic özelliğinde diğeri ise Movie Clip özelliğinde olacak. Bütün işlemi script gerçekleştirecek.


1- Öncelikle Flash'ı açıp ve 300x245 pixels ebatlarında #666666 rengindeki sahnemizi hazırladık.
İlk yapacağımız objemiz yanda görünen ve "Merhaba, denemek istermisiniz?" yazısı olacak. Bunun için Insert>New Symbol ile Symbol Properties den Graphic'i seçip, "omega text" adını verip OK dedik Character panelinden Verdana, 26 points ve beyazı seçerek Text Tool ile yazıyı yazdık.


2- Şimdi de Movie Clip'i hazırlayalım. Insert>New Symbol ile Symbol Properties den Movie Clip'i seçip, "omega movie" adını verip OK dedik . "omega movie" isimli Movie Clip'in Layer Penceresine gidip, Layer 1'in adını "omega text layer" olarak değiştirdik. Library den "omega text" isimli grafiğimizi çekip sürükleyerek çalışma alanımızın ortasına taşıdık. (Dikkat! Döngünün muntazam ve tam ortadan başlaması için çalışma alanının ortasındaki işaretine dikkat edin ve çekerek taşıdığınız yazıyı bu işarete göre ortalayın.) Aynı Layer de Timeline da 2. Frame'e gelip sağ tuş ile Insert Frame ile yeni bir frame ekleyin. Layer penceresine gelip yeni bir layer yaratın (Layer 2) ve adını da "script" olarak değiştirin. "script" Layerindeki 2.Frame' gelip iki defa tıklayarak açılan Frame Actions Penceresine, aşağıdaki script kodunu (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V). Sonrada karışmaması için Frame Actions Penceresini kapatın (X).

// ### General Notes### // All of the methods, conditionals etc on this frame have been described either // within comments in the Object Actions box for the omegaMovie instance on the // main timeline or in the the first couple of tutorials (1. Duplicating Movie // Clip Instances & 2. Random Movement). // NB/ Note that duplicateMovieClip() can either be called as a global method // e.g. duplicateMovieClip(path, newName, depth) (where path can be a string // to the target clip to duplicate or can be a movie clip object reference // i.e. "_root.omegaMovie" and _root.omegaMovie would both be legal), or a // method of the movieclip class e.g. _root.mc.duplicateMovieClip(newName, depth). // NB/ References to variables declared and assigned in the onClipEvent(load) // event handler in the Object Actions box for the omegaMovie instance on the // main timeline can referred to using a relative reference e.g. counter or // by using the absolute reference or path e.g. _root.omegaMovie.counter. if (_root.omegaMovie.hitTest(_root._xmouse, _root._ymouse, false)) { // 1 if (primed == true) { // 2 if (counter == 1) { // 3 duplicateMovieClip (_root.omegaMovie, "baselineClip", 0); } duplicateMovieClip ("_root.omegaMovie", "omegaMovie"+counter, counter); // 4 setProperty ("_root.omegaMovie"+counter, _rotation, degDiff*counter); // 5 var baselineAlpha = getProperty("_root.baselineClip", _alpha); // 6 if (baselineAlpha>0) { setProperty ("_root.baselineClip", _alpha, baselineAlpha -= alphaScale); } for (var i = counter-numOfClips; i<counter; i++) { // 7 var alphaNum = getProperty("_root.omegaMovie"+i, _alpha); if (alphaNum>=0) { setProperty ("_root.omegaMovie"+i, _alpha, alphaNum -= alphaScale); } else { removeMovieClip ("_root.omegaMovie"+i); } } counter += 1; // 8 } if (primed == false) { // 9 for (var i = counter-numOfClips; i<counter; i++) { // 10 var alphaNum = getProperty("_root.omegaMovie"+i, _alpha); var rotaNum = getProperty("_root.omegaMovie"+i, _rotation); if (alphaNum>=0) { setProperty ("_root.omegaMovie"+i, _alpha, alphaNum -= alphaScale); setProperty ("_root.omegaMovie"+i, _rotation, rotaNum += degDiff); } else { removeMovieClip ("_root.omegaMovie"+i); } } var baselineAlpha = getProperty("_root.baselineClip", _alpha); // 11 if (baselineAlpha<100) { setProperty ("_root.baselineClip", _alpha, baselineAlpha += alphaScale); } counter += 1; // 12 remclips += 1; if (remClips>numOfClips) { // 13 counter = 1; remClips = 1; primed = true; } } } if ((!_root.omegaMovie.hitTest(_root._xmouse, _root._ymouse, false)) && counter != 1) { // 14 primed = false; // 15 for (var i = counter-numOfClips; i<counter; i++) { // 16 var alphaNum = getProperty("_root.omegaMovie"+i, _alpha); var rotaNum = getProperty("_root.omegaMovie"+i, _rotation); if (alphaNum>=0) { setProperty ("_root.omegaMovie"+i, _alpha, alphaNum -= alphaScale); setProperty ("_root.omegaMovie"+i, _rotation, rotaNum += degDiff); } else { removeMovieClip ("_root.omegaMovie"+i); } } var baselineAlpha = getProperty("_root.baselineClip", _alpha); if (baselineAlpha<100) { setProperty ("_root.baselineClip", _alpha, baselineAlpha += alphaScale); } counter += 1; remclips += 1; if (remClips>numOfClips) { counter = 1; remClips = 1; primed = true; } } Script'i yapıştırdıktan sonra Frame Actions Penceresini görmek için Tıklayınız!


3- Şimdi sahnemize gelelim (Scene 1) ve Layer 1 in adını "background text layer" olarak değiştirelim ve Library den "omega movie" isimli movie clip'i sürükleyerek sahnemizde istediğimiz yere yerleştirelim. Bu "omega movie" isimli movie clip'e de actions script vereceğiz. Sahnemizde (Scene 1) iken üzerine sağ tuş yaparak Actions 'u seçelim. Açılan Object Actions Penceresine de aşağıdaki script kodunu yine (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V).

// ### onClipEvent (load)### // 1. onClipEvent (load) executes when the clip first appears on the stage. // 2. body of load event handler is executed after any code on the timeline // where the movie clip first appears e.g. if there was a scripts layer // above the omega movie layer then that would be executed before // the body of the onClipEvent (load) below. // ###INITIALIZE### // 1. create 6 new nonlocal variables: // counter - tracks duplicated clip number. // degDiff - degrees difference in the rotation of numerically adjacent // instances of duplicated clips. // alphaScale - sets the increment in _alpha between numerically adjacent // duplicated clips. // numOfClips - calculates how many clips with values of _alpha between // 0 and 100 and adds one so that movie clips that have been faded to // an _alpha value <= 0 are sequentially deleted from the stage using // removeMovieClip(). Math.ceil() method rounds up a number to the // next integer. // remClips is used to keep track of which instances of the duplicated // movie clip have been removed from the stage. // primed is a Boolean for keeping track of the status of duplicated and // removed movie clip instances. // 2. stop() the movie clip, omegaMovie. onClipEvent (load) { var counter = 1; var degDiff = 10; var alphaScale = 5; var numOfClips = Math.ceil((100/alphaScale)+1); var remClips = 1; var primed = true; stop (); } // ### onClipEvent (enterFrame)### // 1. onClipEvent (enterFrame) executes repeatedly for as long as the clip is // on the stage regardless of whether the clip is playing or stopped. // 2. all flash movies are constantly running even when nothing is moving on // the screen or a playhead is stopped on a frame. // 3. body of onClipEvent (enterFrame) handler is executed before any code that // that appears on the timeline of the clip containing the handler. // ### mc.hitTest()### // 1. determines whether coordinates for a point are located inside the movie // clip mc e.g. _root.omegaMovie // 2. mc.hitTest(x, y, shapeFlag), 3 arguments: // x = horizontal coordinate of point to test // y = vertical coordinate of point to test // shapeFlag = optional Boolean sets whether collision detection should detect // against the bounding box of mc (false) or the actual pixels of mc (true), // defaults to false if not supplied. // 3. x = _root._xmouse: // _root property stores a reference to the main timeline of the current document // level. // _xmouse is a floating point number reflecting the horizontal coordinate of the // the mouse pointer's hotspot relative to the coordinate space of mc where // mc._xmouse. If mc = _root (i.e. _root._xmouse) then the xmouse coordinate is // measured consistently relative to the stage. If mc = movieclip (e.g. // omegaMovie._xmouse) then the xmouse coordinate is given relative to the // registration point of the instance mc (e.g. omegaMovie). // 4. y = _root._ymouse: // _root - see 3. above. // _ymouse - see 3. above. // 5. false: // see 2. shapeFlag above. // ### _root.omegaMovie._visible = false### // 1. clips duplicated from hidden (i.e. _visible = false) clips still have // _visible = true by default (see duplicateMovieClip in scripts layer, frame 2 in // movieclip omega movie). // ### _root.omegaMovie.gotoAndPlay(2)### // 1. sends the playhead for the omegaMovie instance to frame 2 of that instance // and in this case executes the code in frame 2 of the scripts layer. onClipEvent (enterFrame) { if (_root.omegaMovie.hitTest(_root._xmouse, _root._ymouse, false)) { _root.omegaMovie._visible = false; } _root.omegaMovie.gotoAndPlay(2); } Script'i yapıştırdıktan sonra Object Actions Penceresini görmek için Tıklayınız!


4- Yine sahnemizdeki (Scene 1) layer penceresinden yeni bir Layer yaratıp adını da "background text layer" olarak değiştirin. Buraya da Text Tool ile uyarı yazısı olan "mouse u yukarıdaki yazının üzerine getirin" şeklinde (Character panelinden Times New Roman Tur, 12 points ve #CCCCCC rengini seçerek) yazıyı yazın. Son olarak da bu layeri "background text layer" inin altına çekerek taşıyın.

Actions Script Örnekleri - Script 02

Yan taraftaki örneğimizdeki, döngü içindeki küreleri gösteren movie'i oluşturmak için sadece iki tane obje hazırlayacağız. Bunlardan birisi Graphic özelliğinde diğeri ise Movie Clip özelliğinde olacak. Bütün işlemi script gerçekleştirecek.
1- Öncelikle Flash'ı açıp ve 200x145 pixels ebatlarında #999999 rengindeki sahnemizi hazırladık.
İlk yapacağımız objemiz bir küre olacak. Bunun için Insert>New Symbol ile Symbol Properties den Graphic'i seçip, "sphere" adını verip OK dedik . Tools dan Oval Tool (O)'u seçerek, Fill Panelinden de Radial Gradient i seçip beyaz ve siyah renkleri kullanarak küremizi çizelim.

2- Şimdi de Movie Clip'i hazırlayalım. Insert>New Symbol ile Symbol Properties den Movie Clip'i seçip, "sphere_movie" adını verip OK dedik . "sphere_movie" isimli Movie Clip'in Layer Penceresine gidip, Layer 1'in adını "sphere graphic instance" olarak değiştirdik. Library den "sphere" isimli küre şeklindeki grafiğimizi çekip sürükleyerek çalışma alanımızın ortasına taşıdık. Aynı Layer de Timeline da 2. Frame'e gelip sağ tuş ile Insert Frame ile yeni bir frame ekleyin. Layer penceresine gelip yeni bir layer yaratın (Layer 2) ve adını da "script" olarak değiştirin. "script" Layerindeki 2.Frame'e sağ tuş ile Insert Blank Keyframe ile boş bir keyframe ekleyin. 1.Frame' gelip iki defa tıklayarak açılan Frame Actions Penceresine, aşağıdaki script kodunu (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V). Sonrada karışmaması için Frame Actions Penceresini kapatın (X).
// Boolean variables for tracking the direction // (up/down, left/right) of each duplicated clip var right = true; var down = true; // variables storing the randomly generated values // which determine the pixel increment moved in X // and Y dimensions each frame var speedX = _root.speedGenerator(); var speedY = _root.speedGenerator(); gotoAndStop(2); Script'i yapıştırdıktan sonra Frame Actions Penceresini görmek için Tıklayınız!

3- Şimdi sahnemize gelelim (Scene 1) ve Layer 1 in adını "sphere movie clip instance" olarak değiştirelim ve Library den "sphere_movie" isimli movie clip'i sürükleyerek sahnemizin ortasına yerleştirelim. Timeline da 3. Frame'e gelip sağ tuş>Insert Frame ile frame ekleyelim. Layer penceresine gelip yeni bir layer yaratın (Layer 2) ve adını da "script" olarak değiştirin. "script" Layerindeki 1.Frame'e sağ tuş>Insert Blank Keyframe ile boş bir keyframe ekleyip üzerine çift tıklayarak açılan Frame Actions Penceresine de aşağıdaki script kodunu (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V).
// number of clips var numOfClips = 10; //1 // minimum pixel distance clip instances can be moved each frame var minSpeed = 0.1; //2 // stage height and width need to be provided manually as there is no explicit // property containing this information var stageWidth = 200; //3 var stageHeight = 145; // height, half height, width and half width of the original movie clip var origClipHeight = _root.sphere._height; //4 var origClipHalfHeight = origClipHeight/2; var origClipWidth = _root.sphere._width; var origClipHalfWidth = origClipWidth/2; // generates a value between minSpeed and 1 function speedGenerator() { //5 do { var r = (Math.floor(Math.random()*100))/100; } while (r < minSpeed); return r; } // next 2 functions generate random x and y coordinates for initial placement of // duplicated clips function xStart () { //6 do { var xBegin = (Math.random()*stageWidth); } while (xBegin < origClipHalfWidth || xBegin > (stageWidth - origClipHalfWidth)); return xBegin; } function yStart () { do { var yBegin = (Math.random()*stageHeight); } while (yBegin < origClipHalfHeight || yBegin > (stageHeight - origClipHalfHeight)); return yBegin; } // calculates current x and y coordinates of each clip and updates coordinates function moveIt () { //7 for (var i = 0; i < numOfClips; i++) { xLoc = _root["sphere" +i]._x; //8 halfWidth = _root["sphere"+i]._width/2 if ((xLoc + halfWidth < 200) && _root["sphere"+i].right == true ){ //9 _root["sphere"+i]._x += _root["sphere"+i].speedX; } else { //10 _root["sphere"+i].right = false; _root["sphere"+i]._x -= _root["sphere"+i].speedX; } if ((xLoc - halfWidth > 0) && _root["sphere"+i].right == false ){ _root["sphere"+i]._x -= _root["sphere"+i].speedX; } else { _root["sphere"+i].right = true; _root["sphere"+i]._x += _root["sphere"+i].speedX; } yLoc = _root["sphere" +i]._y; halfHeight = _root["sphere"+i]._height/2 if ((yLoc + halfHeight < 145) && _root["sphere"+i].down == true ){ _root["sphere"+i]._y += _root["sphere"+i].speedY; } else { _root["sphere"+i].down = false; _root["sphere"+i]._y -= _root["sphere"+i].speedY; } if ((yLoc - halfHeight > 0) && _root["sphere"+i].down == false ){ _root["sphere"+i]._y -= _root["sphere"+i].speedY; } else { _root["sphere"+i].down = true; _root["sphere"+i]._y += _root["sphere"+i].speedY; } } } // duplicates clips and places them randomly on the stage for (var i=0; i<numOfClips; i++) { //11 _root.sphere.duplicateMovieClip("sphere" + i, i); _root["sphere"+i]._x = xStart(); _root["sphere"+i]._y = yStart(); } // sets the visibility of the original clip instance to false (invisible) //12 _root.sphere._visible = false; Script'i yapıştırdıktan sonra Frame Actions Penceresini görmek için Tıklayınız!

Yine "script" Layerindeki 2. Frame sağ tuş>Insert Blank Keyframe ile boş bir keyframe ekleyip üzerine çift tıklayarak açılan Frame Actions Penceresine de aşağıdaki script kodunu yine (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V).
// invoke function moveIt() to update // duplicated clip location moveIt();

Yine "script" Layerindeki bu defa 3. Frame sağ tuş>Insert Blank Keyframe ile boş bir keyframe ekleyip üzerine çift tıklayarak açılan Frame Actions Penceresine de aşağıdaki script kodunu yine (Seç ile tıklayarak) seçip, kopyaladığınız (Ctrl+C) scripti yapıştırın (Ctrl+V). // call moveIt() here too to update //location every frame moveIt(); // self-explanatory really! gotoAndPlay(2);

Hepsi bu kadar, Ctrl+Enter ile animasyonları izleyebilirsiniz

[Jaqen]

Popup Pencere Açmak

Bu bölümde, Flash da hazırlanmış bir butona tıklayınca istenilen ölçüde açılan popup pencere örneğini ve bunun için gerekli olan JavaScript kodlarını inceleyeceğiz.
Öncelikle Flash da "Button" özelliği olan objenizi hazırlayınız.

Örnek olarak butona tıklayınca önceden hazırladığımız deneme.html sayfasının H:150, W:200 ölçülerinde popup olarak açılmasını istediğimizi varsayarak, aşağıdaki uygulamamızı yapalım;

1- Sahnemizde bulunan buton'a sağ-tuş yaparak Actions'u seçin. Açılan Object Actions Panelinde GetURL bölümüne, aşağıdaki JavaScrit kodunu yazalım;



Kod:
javascript:launchwin('deneme.html' , 'newwindow' , 'height=150,width=200')

Flash da hazırladığımız bu movie mizi pop-up.fla olarak istediğimiz bir klasöre kaydedelim (File>Save).
Daha sonra File>Publish (Shift+F12) ile web de yayınlamak üzere publish edelim.
Önceden pop-up.fla dosyasını kaydettiğimiz klasöre dikkat ederseniz, Flash tarafından otomatik olarak pop-up.swf ve pop-up.html adlarında iki tane daha dosya yaratıldı.
2- pop-up.html sayfasını notepad ile açıp, Flash kodlarını seçin, kopyalayıp (Ctrl+C), server'ınızda yayınlayacağınız ve butonu kullanacağınız esas web sayfanızın HTML kodları arasına yapıştırın (Ctrl+V).
Flash HTML kodlarını almak hakkında geniş bilgi için [Webde Yayınlama (Publish)] bölümüne bakınız.

3- Aşağıdaki JavaScript kodlarını da kopyalayın,
ve yine server'ınızda yayınlayacağınız esas web sayfanızın etiketleri arasına yapıştırın

[Jaqen]

Sayfa Yükleme - Preloading

Ziyaret ettiğiniz Flashlı web sayfalarında sık sık gördüğünüz "Sayfa Yükleniyor, Lütfen Bekleyiniz.." gibi önceden bir uyarı yazısı veya bir animasyon görünür, sayfa yüklemesi bitince de esas animasyon ortaya çıkar. Bu bölümde bu işlemin nasıl yapıldığını göreceğiz.
Bu uygulama için öncelikle 2 tane Scene (Sahne) gerekmektedir. Birinci Scene (sahne) de esas movie (film) yükleninceye kadar görünecek olan daha küçük size da küçük bir animasyonumuz olmalı, ikinci Scene (sahne) de de esas animasyonumuz olmalıdır.
Birinci Scene (Sahne) de yani küçük animasyonun olduğu sahnede de "If Frame is Loaded" actions'ı olmalıdır. Yani - Şayet esas animasyondaki belirttiğim Frame ler yüklenmişse esas animasyonu oynat - diyeceğiz.
Bu uygulamayı daha iyi anlatabilmek için yukarıdaki örnek animasyonu nasıl yaptığımızı sizlere açıklayalım;
1-Öncelikle yeni bir Movie (film) oluşturalım [ File>New (Ctrl+N)]. Sahnemizin içine sağ tuş ile tıklayarak Movie Properties'i seçelim. [Modify>Movie (Ctrl+M)]. Buradan movie mizin Frame hızını, dökümanımızın ebatlarını, arkaplan rengini seçebiliriz (biz yukarıdaki örnekte, 12 frame, 400x200 px ve #CCFFCC olarakta arka plan rengini seçtik).
2-Daha sonra ikinci Scene seçme işlemi için de Window>Panels>Scene ile Scene (sahne) panelini açtık. Burada "Scene1" olarak birinci sahnemiz görünmektedir. İkinci bir sahne yaratmadan önce karışmaması için Scene1'e isim vermek için üzerine çitf tıklayarak açılan pencereye "preloader" yazdık ve 1.sahnemizin adı "preloader" oldu. Buraya küçük animasyonumuzu hazırlayacağız.
Daha sonra Scene Panelinin altındaki Add Scene tuşuna tıklayarak ikinci Scenemizi yarattık onda çift tıklayarak "animation" adını verdik. Scene Panelinde "preloader" ve "animation" adlarında 2 tane Scene (Sahne) miz oldu.
3-Scene panelinde "animation" a tıklayarak "animation" sahnesine geçtik ve esas moviemiz olacak olan yukarıdaki örnekteki basit animasyonu hazırladık.
4-Esas moviemiz bitince Scene Panelinden "preloader" ı tıklayarak "preloader" sahnesine küçük animasyonumuzu hazırlamak için geçtik. Burada da bir grafik hazırlayabilirsiniz yada bizim yaptığımız gibi yazı olarak da bu küçük animasyonu hazırlayabilirsiniz. Biz "Yükleniyor Lütfen Bekleyin..." şeklinde yazan bir Movie Clip hazırladık. Bunun için öncelikle Insert>New Symbol (Ctrl+F8) ile yeni bir sembol yaratmak için Symbol Properties'i açarak adına "loading" yazıp bir Movie Clip yarattık. Tools dan Text Tool 'u seçip "Yükleniyor Lütfen Bekleyin..." şeklinde yazdık. Bu yazıya Alpha efekti vermek için Layer 1 de ve 1. Frame de seçili iken Insert>Convert to Symbol (F8) ile "loadtext" adını yazarak Graphic olarak sembol'e çevirdik. Timeline da 10 frame'e gelerek sağ tuş ile Insert Keyframe (F6) ile bir keyframe ekledik ve 10. Frame'de iken Effect Panelinden Alpha seçip değerini 0 olarak verdik. Sonrada 1 ve 10. Frame lerin ortasına sağ tuş ile tıklayarak Create Motion Tween'i tıkladık. 10. Frame çift tıklayarak açılan Frame Actions Panelinden GoTo'yu seçerek gotoAndPlay (1); scriptini verdik. Böylece "loading" isimli Movie Clip imizi bitirdik. Şimdi bunu "preloader" isimli sahnemiz taşıyacağız.
5-Scene Panelinden "preloader" ı seçerek "preloader" sahnemize geçtik ve Layer 1 de iken Library deki "loading" isimli Movie Clip imizi mause ile tutup çekerek sahnemizin içine taşıdık.
"loading" isimli Movie Clip Layer 1 de 1.Frame'e yerleşti. Layer 1'in adını "Loading_Text" olarak değiştirdik. 10.Frame gelip sağ tuş ile Insert Frame i işaretleyerek Timeline da yeni bir Frame yarattık. Daha sonra Layer Penceresinde iconuna tıklayarak Insert Layer ile yeni bir Layer yarattık. Layer 2 olan bu layerında adını "actions" olarak değiştirdik ve Loading_Text layerinin altına taşıdık. Şimdi "actions" layer'ındaki Frame lere actions vereceğiz.
"actions" Layer'ındaki Timeline da 8. Frame'e gelip sağ tuş ile Insert Keyframe ile bir keyframe yarattık, üzerine çift tıklayarak açılan Frame Actions Panelinden If Frame is Loaded'ı seçtik, alttaki bölümde bulunan "Scene" kısmına esas moviemizin bulunduğu scene adı olan animation yazdık, "Type" kısmı Frame Number olarak kaldı, "Frame" kısmına da animation isimli esas moviemizin bulunduğu sahnemizdeki timeline daki en son frame in numarası olan 95 yazdık. Aynı yere bu defa Go To scriptini işaretleyerek "Scene" kısmına animation yazık, "Type" kısmı aynen kaldı, "Frame" kısmına da 1 yazdık (en alttaki Go to and Play in işaretli olmasına dikkat edin). Yani Türkçesi, - "animation" sahnesindeki 95. Frame yüklendiyse aynı sahnedeki 1. Frame'e git ve oynat - dedik. ifFrameLoaded("animation", 95) {}gotoAndPlay ("animation", 1);
Karışmaması için Frame Actions panelini kapatabilirsiniz.
6- Tekrar Layer penceresine gelip actions layerindeki Timeline daki 9. Frame'e gelip sağ tuş ile Insert Keyframe ile bir keyframe yarattık, üzerine çift tıklayarak açılan Frame Actions Panelinden Go To scriptini işaretleyerek aşağıdaki kısımları olduğu gibi bıraktık. Bunun da Türkçesi, hani yukarıda - 95. Frame yüklendiyse 1. Frame git ve oynat - demiştik ya şimdi de - şayet yüklenmediyse bu sahnede kalıp uyarıya devam et - diyoruz. gotoAndPlay (1);
İşte hepsi bu kadar...
7- Kontrol etmek için Ctrl+ENTER'e basarsanız animasyonunuzu test etmiş olursunuz.

Şayet mesaj kısmına farklı şeyler yazdırmak istiyorsak, yani "görüntü yükleniyor" - "görüntü yüklendi" - gibi birkaç tane mesaj uyarısı vereceksek, birinci Scene (Örneğimizdeki "preloader" sahnesi)'deki frame sayısını arttırıp "If frame loaded" komutlarını bölmek lazımdır. Yani her mesaj uyarısına karşılık gelen iki adet frame koymamız gerekecek. Ve her ilk frame'de esas animasyonun belli bir kısmını yüklenmişse devam edecek, ikinci frame'inde ise döngüye devam edecek şekilde olmalıdır. Yani 100 frame'den oluşan esas animasyona iki adet mesaj vereceksek Scene 1'de dört frame olması lazımdır. 1. frame'e esas animasyonun 50 frame yüklenmişse 2. frame git , 2. frame'de ise geri kalan 50 frame yüklenmişse oynat dememiz lazımdır. Bu frame'lerin altına ilave Layer açarak istediğimiz mesajları yazdırabiliriz.

[Jaqen]

Flash ile E-mail Formu Hazırlamak

Gönderdikten sonra Flash Form'a geri dönmek için sayfayı Yenileyebilirsiniz!

Bu bölümümüzde Web sitelerinde sık sık kullanılan e-Mail formu nun Flash da hazırlanışını inceleyeceğiz.
Konuyu daha iyi anlatabilmek için yukarıdaki örnek form-mail'i nasıl yaptığımızı sizlere açıklayalım;

1-Öncelikle hazırlayacağımız formu çalıştıracak olan formmail.pl dosyasını indirin, notepad ile açıp,

@referers = ('worldwidemart.com','206.31.72.203'); satırını bulun ve bu satırdaki parantez içindeki ve ('.......') tek tırnak işaretleri arasına mail adresinizi girin [ ( ) işaretine dikkat! ]. Örn: ('[email protected]'). Bu işlemden sonra bu satır: @referers = ('[email protected]'); şeklinde olacak.
Yaptığınız bu küçük değişikliği kaydederek notepad'i kapatın. formmail.pl dosyasını CuteFtp gibi bir FTP programı ile web alanınızda cgi-bin klasörü içine gönderip CHMOD 755 yapın (Şayet CHMOD ayarını yapmasını bilmiyorsanız Tıklayın!).

Form mail için gerekli olan formmail.pl dosyasının işi bitti.
Ancak sizin form-mail için ayrı bir dosyanız varsa burada kendi dosyanızı kullanabilirsiniz.

2-Artık Flash 5'i açıp mail formumuzu hazırlayabiliriz..
Öncelikle Sahnedeki boş alana sağ tuş yaparak Movie Properties'den Dimensions bölümünden Width:450, Hight: 250 değerlerini girerek sahnemizin alan ölçülerini belirledik (Yani hazırlayacağımız objemiz 450x250 pixels boyutlarında olacak), aynı yerden Background Color menüsünden sahne rengimiz #FF9900 olarak seçip OK dedik. Formumuzun zeminini hazırlamak için Insert>New Symbol (Ctrl+F8) ile yeni bir sembol penceresi (Symbol Properties) açıp, adına form_zemin yazıp, alttaki listeden Graphic'i seçip OK dedik.
Formumuzun zeminin istediğimiz gibi hazırladık. form_zemin isimli graphic özellikli objemiz Library de yerini aldı. (Window>Library - Ctrl+L) Artık çalışma alanının sol üst köşesindeki ile sahnemize geçebiliriz.

3- Layer 1'e çift tıklayarak adını form_zemin olarak değiştirdik ve Library'den hazırladığımız form_zemin isimli grafiğimizi sağ tuşa basılı tutarak sahnemize çekip, istediğimiz yere yerleştirdik (Timeline daki 1. Frame doldu). Layer penceresindeki Insert Layer ikonuna tıklayarak yeni bir Layer (Layer 2)yarattık ve adını da anabaşlık olarak değiştirip, form_zemin Layer'inin altına sürükleyerek taşıdık. Yazı Aracını kullanarak, Font olarak Arial Tur ve renk olarak beyaz'ı seçerek "form mail" yazdık. Yazımızı kopyalayıp yapıştırdık (Ctrl+C , Ctrl+V), yapıştırdığımız yeni yazının rengini siyah ile değiştirdik ve klavyedeki oklar yardımıyla sağa ve aşağıya hareket ettirerek yerini belirleyerek ilk yazıya gölge yapmasını sağladık.


4- Insert>New Symbol (Ctrl+F8) ile yeni bir sembol penceresi (Symbol Properties) açıp, adına button yazıp, alttaki listeden Button'u seçip OK dedik.
Up, Over, Down, Hit Frame lerine keyframeler ekleyerek herbirini istediğimiz renkleri vererek doldurduk. Böylece butonumuz da bitmiş oldu ve Library de yerini aldı.
Oluşturduğumuz bu butondan birisini "Sil" komutunda, diğeri de "Gönder" komutununda kullanacağımız için sahnemizde iki tane bulunacaklar.
Butonumuzu tamamladıktan sonra ile sahnemize geri döndük.

5- Layer penceresine gelip Insert Layer ikonuna tıklayarak yeni bir Layer (Layer 3) yarattık ve adını da button olarak değiştirdik.
Library den "button" isimli Buttonumuzu sürükleyerek sahnemizdeki form zemininin altına "Sil" komutunu oluşturacak buton için taşıdık. Tekrar Library den "button" isimli Buttonnumuzu, bu defa "Gönder" komutunu oluşturması için çekip sürükleyerek sahnemize "Sil" komutu verecek olan butonun yanına taşıdık.
Böylece formun zemini şekillenmiş oldu. Şimdi yan taraftaki resimde koyu renk ile görünen boş alanlara konu başlıklarını vereceğiz.

6- Layer penceresine gelip ikonuna tıklayarak yeni bir Layer (Layer 4) yarattık ve adını da başlıklar olarak değiştirdik.
Yazı Aracını kullanarak, Font olarak Arial Tur, 12 points, koyu ve renk olarak beyaz'ı seçerek sıra ile "Adınız", "Soyadınız", "e-Mail", "Mesajınız", "Sil", "Gönder" olarak, örnek form da gördüğünüz konu başlıkları yazdık.
Daha sonra hepsini tek tek işaretleyerek Modify>Break Apart (Ctrl+B) ile text özelliğinden çıkardık.

7- Şimdi form daki yazı alanlarını oluşturacağız. Tekrar Layer penceresine gelip ikonuna tıklayarak yeni bir Layer (Layer 5) yarattık ve adını da yazı alanları olarak değiştirdik. Text Options Panelini açtık (Window>Panels>Tex Options). Üst taraftaki açılır menüden Input Text'i seçtik, bunun hemen alttında bulunan açılır menüden Single Line'ı seçtik.


Yazı Aracını kullanarak, "Adınız" konu başlığı karşısındaki boş alana tıkladık, ancak içine herhangi bir yazı yazmadık. Seçili alanın enini ve boyunu buradaki boş alanımıza göre ayarladık. Text Options Panelinine giderek burda aktif hale gelen Variable: kısmına Adı yazdık. Character paneline gidip yazılacak yazının özellikleri olan Arial Tur, 20 points, koyu ve Siyah rengi seçtik.

Aynı işlemi "Soyadınız" konu başlığı karşısına uyguladık, ancak Variable: kısmına Soyadı yazdık.
Tekrar aynı işlemi bu defa "e-mail" konu başlığı karşısına uyguladık, ancak Variable: kısmına email yazdık.

"Mesajınız" konu başlığı kısmında ise bu defa açılır menüden Multiline'ı seçtik, Variable: kısmına da Mesajı yazdık ve yan tarafta aktif hale gelen Word wrap kutucuğunu işaretledik.

Text Options özelliklerini ayarladıktan sonra Mail Form undaki yazı alanlarımız seçili hale geldi.

8- Şimdi formu gönderene Teşekkür yazısı hazırlayacağız. "başlıklar" isimli Layer'e tıklayarak seçili hale getirelim. 2.Frame'e yeni bir keyframe ekleyelim (F6). Character Panelinden Arial Tur, 46 points, Koyu ve beyaz rengi seçerek Formu gönderdiğin için, Teşekkürler: yazdık.
"yazı alanları" Layerine tıklayarak seçili hale getirdik, 1. Frame deki "Adınız" konu başlığı karşısındaki Variable:Adı olan yazı alanını kopyaladık (Ctrl+C) ve 2. Frame'e yeni bir keyframe ekleyerek (F6) kopyaladığımız yazı alanını bu keyframe'e yapıştırdık (Ctrl+V). Böylece teşekkür yazısının altında, formu gönderen kişinin adının belirmesini sağladık. Yani Formu gönderene adı ile hitap ederek teşekkür ediyoruz.

9- Artık Actions lara geçebiliriz. Tekrar Layer penceresine gelip ikonuna tıklayarak yeni bir Layer (Layer 6) yarattık ve adını da Actions olarak değiştirdik. 1.Frame'e çift tıklayarak açılan Frame Actions Panelinden Basic Actions>Stop'u seçtik. Frame Actions Penceresinde [ stop (); ] script komutu belirdi. Aynı şekilde 2.Frame'e de çift tıklayarak açılan Frame Actions Panelinden yine Basic Actions>Stop'u seçtik. Frame Actions Penceresinde [ stop (); ] script komutu belirdi. Böylece Frame Actions'u bitirdik.


10- Şimdi button lara Actions vereceğiz. Öncelikle üzerinde "Sil" yazan button'a sağ tuş ile tıklayarak açılan menüden Actions'u seçtik. Açılan Object Actions paneline;
on (release) {
Adı = "";
Soyadı = "";
email = "";
Mesajı = "";
}
script ini yazdık. Karışmaması için Object Actions Panelini üstteki X işaretinden kapattık.

11- Şimdi de üzerinde "Gönder" yazan button'a sağ tuş ile tıklayarak açılan menüden Actions'u seçtik. Açılan Object Actions paneline;
on (release) {
subject = "Flash Form";
recipient = "[email protected]";
loadVariablesNum ("http://www.aeystudio.com/cgi-bin/formmail.pl", 0, "GET");
gotoAndPlay ("ThankYou");
}
script ini yazdık.
Dikkat ederseniz burada recipient = kısmına e-mail adresimizi, loadVariablesNum ("http://www.aeystudio.com/cgi-bin/formmail.pl", 0, "GET"); kısmına da önceden hazırlayıp, web alanımıza gönderdiğimiz formmail.pl dosyamızın tam adresini yazdık.
Bir hatırlatma yapalım, Flash ile dış programlar arasında bağlantı kurulabilecek 2 adet önemli komut, loadVariables ve getURL komutlarıdır.
Burada bir hatırlatma yapalım, e-mail adresi olarak kendi e-mail adresinizi, formmail.pl dosyasının yolu olarak da dosyanın kendi serverınızdaki URL adresini yazmalısınız. Aksi taktirde uygulamanızı test edemezsiniz.


Hepsi bu kadar. Şimdi ilk denemenizi yapın ve formunuzu doldurup gönderdikten sonra mail programınızı açıp mail'inizin gelmesini bekleyin.

[Jaqen]

Flash ile Açılır Menü ve Web Butonları Yapımı

Bu bölümde üzerine tıklayınca açılan menü yapılmasını göreceğiz ve bu menüyü sahnemizin istediğimiz yerine çekip taşıyacağız (drag). Bunları yaparken de web butonlarının nasıl yapıldıklarını da incelemiş olacağız.
Bu işlemleri yapmak ve daha iyi anlayabilmek için her zaman olduğu gibi yan taraftaki örnek objemizin yapılışını inceleyeceğiz.
1- Öncelikle Flash'ı açtık ve 300x250 pixels ebatlarında beyaz zeminli olan sahnemizi hazırladık.
İlk yapacağımız objemiz yanda görünen ve açılır menümüzn kapalı halini gösteren Menü isimli obje olacak. Bu objeyi yaparken de aynı zamanda Web Butonu yapılmasını da görmüş olacağız. Bunun için Insert>New Symbol ile Symbol Properties den Graphic'i seçip, "baslık" adını verip OK dedik .
"baslık" isimli Graphic özellikli objemiz Library de belirdi. Araç Çubuğundan Rectangle Tool'u ( R ) seçtik ve düğmemizin kenarlarını belirlemek için Rectangle Tool seçili iken araç Çubuğunun altındaki Options'dan Round Rectangle Radius'u işaretleyip açılan pencereden kenar

yuvarlama değerini 15 olarak yazıp Ok dedik. Stroke Color' ı No Color'ı seçtik. Daha sonra Fill Color'ı seçip (Kapalıysa, Window>Panels>Fill ile doldurma panelini açalım.) Fill Panelinde pop-up menüden Linear Gradient'i seçtik ve renkleri yan taraftaki resimde göründüğü gibi belirledik şeklimizi Rectangle Tool ile
çizdik ve kova aracı ile boyadık. Daha sonra (Kova aracı seçili iken) Araç kutusunun alt tarafında bulunan Transform Fill aracını seçtik. Bu araç, "Gradient" ile boyanan alanlarda renk geçişleri arasını istediğimiz gibi düzenlememizi sağlar. Şeklimizin üzerine 2 defa tıklayarak renkler üzerinde transform yapacağımız işaretleri belirledik. İşaretlenen ve (o) ile gösterilen noktadan tutarak aşağıya doğru döndürdük. Merkez (O) ve kenar ( ) noktalarından da istediğimiz etkiyi yaratana kadar aşağı-yukarı, sağa-sola çekerek renk geçişlerini ayarladık.



Ayarlamalar neticesi şeklimizin renklerini oluşturduk.Renk ayarlamasını bitirdikten sonra yeni bir Layer açarak Text aracını kullanarak beyaz renkte "Menü" yazdık ve şeklimizin istediğimiz bölümüne taşıyarak yerleştirdik. Yazımıza gölge vermek için beyaz yazımızın altına siyah renkte aynı yazıyı yazıp alttaki siyah yazıyı klavyedeki oklar yardımıyla sağa ve aşağıya çekerek gölgeyi oluşturduk.



Böylece hem "baslık" isimli ve Graphic özellikli objemizi tamamlamış olduk, hem de Web Butonlarının nasıl yapıldığı hakkında bilgi sahibi olduk.

2- Şimdi de açılan menü de liklerimizin bulunduğu zemin olan "link tabanı" isimli Graphic özellikli sembolümüzü hazırlayacağız.
Yeni bir sembol yarattık. Insert>New Symbol ile "link tabanı" isimli Graphic özellikli sembolun çalışma alanına Rectangle Tool ile istediğimiz gibi bir şekil çizebiliriz.

Örnek objede, kenar yuvarlama değeri 10 olan ve önceki sayfada anlattığımız gibi aynı Linear Gradient renkleri ile boyayıp, Transform Fill ile de renk efektlerini vererek yan taraftaki şekli yarattık. Böylece "link tabanı" isimli sembolümüzün hazırlanması da bitmiş oldu.
3- Şimdi de açılan menüde ("link tabanı" üzerinde) görünecek olan link yazılarını hazırlayacağız.

Bunun için yeni bir sembol yaratıp (Insert>New Symbol), Symbol Properties den Button özelliğini seçerek adına da "anasayfa button" diyeceğiz ki üzerlerine tıklayınca ilgili linklere ulaşılabilsin. "anasayfa button" için Up Frame'inde iken Yazı Aracı (Text Tool) seçili iken Character Panel inden Arial Tur, 20 points ve beyaz rengi seçerek [ Ana Sayfa ] yazısını yazdık ve yazıyı seçip, koyala-yapıştır (Ctrl+C, Ctrl+V) ile beyaz yazının altına yapıştırıp rengini siyah olarak değiştirip, düzenleyerek yazıya gölge etkisi verdik. Up frame'inde iken Sağ tuş ile Copy Frames ile frame'i kopyaladık ve Over Frame'ine gelerek sağ tuş Paste Frames ile Over'a yapıştırdık. Mause üzerine gelince renk değişikliği sağlamak için üstteki yazının rengini siyah, alttaki yazının rengini de link tabanı rengine uygun bir renk ile değiştirdik. Tekrar bu frame'i de kopyalayarak Hit Frame'ine yapıştırıp, mause un etki alanını sağlamak için altına kırmızı bir alan çizdik. Butonumuzu tamamladık. Siz uygulamanızda bu renkleri istediğiniz gibi değiştirebilirsiniz.
Aynı yolu kullanarak, "galerim button", "linkler button", "kimim button" ve "email button" isimli butonlarımızı hazırladık. Böylece link vereceğimiz bütün butonlarımızı tamamlamış olduk. Actions lara daha sonra geleceğiz.
4- Açılan menümüzü çalıştırmak için gerekli olan butonun yani "menu button" u hazırlayalım. Insert>New Symbol ile "menu button" adında Button özelliği olan yeni bir sembol yaratık. Up Frame'inde iken (ki burada sadece Up Frame'inde çalışacağız) önceden hazırladığımız "baslık" isimli ve Graphic özellikli sembolü Library den çekip çalışma alanımıza taşıdık. Layer 1 in adını "menu" olarak değiştirdik ve yeni bir Layer yaratıp (Layer 2), adını da "drag" olarak değiştirdik. Bu Layer'e, ( ) resmini çizdik (Siz buraya herhangi bir şekil çizebileceğiniz gibi File>Import ile önceden hazırladığınız bir imajı da taşıyabilirsiniz). Menümüz tamamlanınca, bu şekle basılı tutulup sürükleyerek Menünün sahne üzerinde taşınması sağlanacağından, bu şekil sadece sahne üzerinde yapılacak taşıma işleminde mouse'un etki alanını belirlemeye yarıyor.
5- "Drag" isimli butonu hazırlayalım. Tekrar Insert>New Symbol ile "drag" ismindeki butonun sadece Hit Frame'ine, Rectangle Tool ile mause un etki alanını belirlemek için ve yukarıda örnek el şeklindeki imajın büyüklüğün de rengi önemli olmayan bir şekli çizdik. "Drag" isimli butonumuz da bitti.
Böylece Menü için gerekli olan bütün sembolleri bitirmiş olduk.
Şimdi menümüzü çalıştıracak olan ve hazırladığımız bütün sembollerin yerleşip, Actions ların verileceği ve sonunda Flash Sahnesinde tek Layer ve tek Frame'e yerleşecek olan Movi Clip özelliğindeki "Menu" isimli sembolu hazırlayacağız.

6- "Menu" isimli sembolü hazırlıyoruz.
Insert>New Symbol ile " Menü" isminde Movie Clip özelliğinde sembolü yarattık.
Frame 1 in adını "menu" olarak değiştirdik ve Library den "link tabanı" isimli sembolü çalışma alanımıza çektik. Aynı Layer ve Frame de iken tekrar Library den "anasayfa button", "galerim button", "linkler button", "kimim button" ve "email button" isimli butonlarımızı da çalışma alanımıza çekip "link tabanı" üzerine istediğimiz gibi yerleştirdik. Örneğimizde buradaki butonlara link vermedik ancak sizler her birinin üzerine tek tek sağ tuş ile tıklayıp Actions'u seçip, linklerini verebilirsiniz.
Link vermeyi bilmiyorsanız Buton Yapımı sayfasına bakınız.
Ancak örneğimizdeki açılan menüdeki, linklere basınca menünün tekrar kapanması için Basic Actions>Go To'yu seçip Object Actions Panelinin en altındaki Frame:kısmına 9 yazdık.

7-Yeni bir Layer yaratıp adını "menu button" olarak değiştirdik. Buraya da "menu button" isimli sembolü Library den çekip taşıdık. Çalışma alanına yan taraftaki şekilde görüldüğü gibi yerleştirdik. 8- "menu" isimli Layer'e tıkladık, 5. Frame'e keyframe ekledik (F6). Aynı şekilde 10. Frame'e de keyframe ekledik (F6).
1. Frame'e geldik ve üzerine çift tıklayarak Frame Actions'u açıp, Basic Actions>Stop'u seçtik. stop ();
5. Frame'e gelip aynı uygulama ile aynı Frame Actions'u seçtik. stop ();
10. Frame'e gelip üzerine çift tıklayarak Frame Actions'u açıp, Basic Actions>Go To'yu seçtik. gotoAndPlay (1);
Tekrar 1. Frame'e gelip sağ tuş ile açılan menüden Create Motion Tween'i seçtik. Aynısını 5. Frame'e de uyguladık.
Bu defa "menu button" isimli Layer'e tıkladık ve 10. Frame'e sağ tuş ile tıklayarak açılan menüden Insert Frame ile yeni bir frame ekledik.

9- Şimdi yukarıda belirlediğimiz keyframe ler arasında menüyü hareket ettirip, istemediğimiz yerdeki görüntüsünü yok etmek için maske (Mask) uygulayacağız.
"menu" Layer'ini tıkladık ve 5. Frame'e gelip üzerinde linkler bulunan link tabanını aşağıya doğru klavyedeki oklar yardımıyla taşıdık. Yani 5. Frame'e gelince menü listesi aşağıda olacak. Aşağıdaki yerini belirleyince yeni bir Layer yarattık ve adını da "maske" olarak değiştirdik. Rectangle Tool ile link tabanını kapatacak bir şekil çizdik (animasyon sırasında görünmeyeceği için rengi önemli değil..). Bu, "maske" isimli Layer'e sağ tuş ile tıklayarak açılan menüden Mask'ı seçtik. Böylece animasyon sırasında menü listesini görünmez yaptık. Bütün bu anlatılanlardan sonra Layer penceremiz ve çalışma alanımız yan taraftaki görüntüyü aldı.

10- "menu button" isimli Layerde bulunan yine "menu buton" isimli butonumuza Action vereceğiz.
Önce "menu button" isimli Layer'e tıkladık. daha sonra altta çalışma alanında bulunan button özelliğindeki imaja sağ tuş ile açılan menüden Actions'u seçip, açılan Object Actions Panelinden Basic Actions>Go To'yu seçtik. on (release) {play ();}
Böylece bu butona basınca animasyonun çalışmasını sağlamış olduk.
11- Şimdi de menüyü taşıyacak olan drag butonun yerleştireceğiz. "menu button" Layer'ine tıklayarak yeni bir layer yarattık ve adını da "drag button" olarak değiştirdik. Library den aynı isimdeki "drag button" Button unu çekip sahnedeki "el" resminin üzerine yerleştirdik. Üzerine sağ tuş yaparak Actions'u seçtik ve Object Actions Panelinden Actions>Start Drag ve ardından Stop Drag'ı seçtik. on (press) { startDrag ("");} on (release) { stopDrag ();}


Böylece açılır ve taşınır menümüzü bitirmiş olduk.