Ders Adı: Flash ile E-mail Formu Hazırlamak
Kategorisi: Flash Örnekleri
Ekleyen: zebaniz - Tarih: 07.11.2005 - 18:19

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: ('webmaster@sitenizinadi.com'). Bu işlemden sonra bu satır: @referers = ('webmaster@sitenizinadi.com'); ş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 = "webmaster@aeystudio.com";
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.

Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=34
Web Sitesi: http://www.aeyStudio.com