Flash Tema Yapımı
Flash çalışmamızda flash template yapacağız daha önce farklı uygulamalar ile tema hazırlamıştık. Yeni çalışmamızın flash tema tasarlamak isteyen meraklılara örnek olacağı kanısındayım. İlk olarak arka plan hazırlayalım. Fash temamızın ebatları 900X600 pixels olacağı için hazırladığım arka plan resmini isterseniz buradan indirebilirsiniz.
Flash çalışma sayfamızı açalım 900x600px hazırladığımız arka planı sahneye alalım.
1-Arka plan resmimizi sahneye ortalayalım F8 graphic yapalım layer adı bg yazalım.
2-İlk olarak bir buton yapalım butonu istediğiniz şekilde yapabilirsiniz. Buton yapımını anlatmıyorum basit bir buton hazırlamanız yeterlidir. Unutmadan hazırlanan butonları movie clip yapacağız. Butonu hazırladığımıza göre bg layer üzrine yeni bir layer ekleyelim layer adı b1 olsun buton seçili instance name kutusuna p1 yazalım tüm 11 frameye keyframe ekleyelim. Frameler arasına create motion tween verelim 1.framede alpa değerini 0 yapalım.
3-Hazırladığımız butonu movie klip yapmıştık ben klip için btn_mc1 adını kullandım kütüphanede buton klipi çoğaltalım çalışmamızda 6 adet buton olacağı için sırası ile çoğaltalım btn_mc1, btn_mc2 sırası ile isimlendirebiliriz.
4-b1 layer üzerine sırası ile yeni layerler ekleyerek b1 layerdeki işlemi tekrarlayalım. Her movie klip sahnede seçili durumda iken instance name kutusuna sırası ile p1,p2,p3,p4,p5,p6 isimlendirelim. Kolay anlamanız için kütüphanedeki görünümüde ekledim. Sizi aldatmasın ben butonu animasyonlu yapmak için Up, Over yerleri için klip oluşturdum.
5-Hazırladığım arka plan resimde üst sağ köşeye 2 buton yeri oluşturmuştum şimdi oraya buton hazırlayıp ekleyelim b6 layer üzerine layer ekleyelip layer adlarını üstbut-1 ve üstbut-2 olsun.Unutmayalım hazırladığınız butonları “movie clip” yapalım. İnstance name kutularına aynı sıralamayı takip ederek p7 ve p8 yazalım.
6-Butonları hazırlamış olduk sayfalarımızı düzenledikten sonra sayfalara yönlendirme kodunu ekleyeceğiz.
Şimdi sayfaları yapalım.üstbuton layer üzerinde yeni layer ekleyelim 11 frameye keyframe ekeleyeip text tool aracını seçip dynamic text yazımızı ekleyelim. Uzun yazı eklemek için scrollbar ekleyelim Windows>Components penceresinde UIScrollbar yazımızın yanına ekleyelim. Örnek resim
7- Eklediğimiz scrollbar seçili yapıp properties panelden parameters açalım “targetİnstanceName“ kutusuna scrollbar yazalım. Şimdi yazıyı seçili yapıp instance name kutusuna “scrollbar”yazalım.
8-Sağ boş yere resim ekleyelim Sayfa layer 11 framede yaptığımız işlemeri seçili yapalım F8 movie clip yapalım name olarak “sayfalar” yazalım. Sayfalar klipin içine girelim layer1 adını değişelim layer adı text olsun. Yeni layer ekleyelim layer adı “photo” olsun text laere eklediğimiz resmi oradan silip photo layerde aynı yere ekleyelim. Text layer 11.frameye keyframe ekleyelim 6 frameye gelip insert blank keyframe ekleyelim 1.frameye gelelim şimdi sayfa başlığı yazıyı notrmal text yazalım. photo layerinde 11 framesine keyframe ekleyelim.
9-11.framede aynı yazımız ekli durumda yapacağımız şey oradaki yazıyı istediğimiz yazı ile değişmek olacak photo layerin 11.framesinde resmimizi değişelim yeni resmi ekleyebiliriz text layerde yazımız değişti şimdi 21 frameye keyframe ekleyelim 16 framede insert blank keyframe ekleyelim.
10-İki sayfa hazırladık diğer sayfaları aynı uygulamayı tekrarlayarak 8 adet menümüz olduğundan 8 adet sayfayı tamamlayalım. Photo layer üzerine yeni layer ekleyelim layer adı “label” olsun 1.frameye “stop” ekleyelim frame seçili instance name kutusuna “anasayfa” yazalım 11.frameye keyframe ekleyelim instance name kutusuna “hakkimizda” yazalım 21.frameye keyframe eklip instance name kutusuna “photoshop” yazalım örnek uygulamayı 71 frameye kadar devam edelim. Örnek resmi inceleyin layer 3 görünen isimler instance name isimleri oluyor.
11- Sayfaları hazırlamış olduk ana sayfaya scene1 geri dönelim sayfalar layerinde sayfalar klipi sahnede seçili durumda instance name kutusuna “sayfa” yazalım. Sayfalar layeri üzerine yeni layer ekleyelim layer adını mask olarak yazalım 11. frameye keyframe ekleyip rectangle tool aracı ile sahneye sayfamızı kapatacak kadar dış çizgizi olmayan dikdörtgen oluşturalım. F8 graphic yapalım name “sayfamask” olsun.
12-Mask layer 23 frameye ve 37 framelere keyframe ekleyelim 11.frameye gelelim maskı yazının üst tarafına kaydıralım 23 framede yazımızı tam kapatıyor durumda 37 framede maskı yazı sayfamızın alt tarafına kaydıralım layerler arasına create motion tween verelim. Mask layer üzerine gelip sağ klik mask uygulayalım.
13- Şimdi kodlarımızı ekleyelim ilk olarak mask layer üzerinde yeni layer ekleyip layer adını action yazalım. 1.framede actions paneli açalım ekli kodları ekleyelim.
sayfalar = p1.txt = "anasayfa"; p2.txt = "hakkimizda"; p3.txt = "photoshop"; p4.txt = "flashders"; p5.txt = "videoders"; p6.txt = "galeri"; p7.txt = "referanslar"; p8.txt = "iletisim";
14-Action layerin 11. framesine keyframe ekleyelim ekli kodları actions paneli açıp ekleyelim. 11.framede instance name kutusuna “play”yazalım
sayfa.gotoAndStop(sayfalar); sayfa_eski = sayfalar;
15-23.frameye keyframe ekleyip actions paneli açıp stop ekleyelim.
stop();
16-24 frameye keyframe ekleyip actions panele ekli kodları ekleyelim.
if( sayfalar == sayfa_eski )
{
prevFrame();
}
16-37 frameye keyframe ekleyip actions panele ekli kodu ekleyelim.
gotoAndPlay("play");
17- Butonlarımıza komut verelim buton kliplere scene1 sahnede tıklayalım içine girdiğimizde buton olarak göreceğiz sahnede seçili yapıp sağ klik actions paneli açıp ekli kodu girelim.
on (release) {
_root.sayfalar = txt;
_root.play();
}
18-Anasayfadaki tüm buton kliplerimizin içine tek, tek girip ekli kodu ekleyelim.
19-Artık çalışmamızı bitirdik son olarak tüm layerlerin görünümünü vereyim.
20-Çalışmayı test edelim F12 direk sayfa üzerinden izleyebilirsiniz veya Ctrl +Enter
21-Çalışmada boş kalan yerler logo header kısmıdır sizler istediğiniz çalışmayı yapabilirsiniz. İzlediğiniz örnek çalışmada farklılıkları görebilirsiniz.
çok güzel bi ders teşekkürler
selamun aleykum hazırladığınız derler için çok teşekkür ederim yalnız bu dersleri video halinde hazırlamanız mümkün müdür? şimdiden teşekkürler
Video olarak ekleyebilirim fakat video sitelerine yüklemem gerekir. Siteye yüklersem bana maliyet oluşturmakta. Fakat ekli dersleride gayet ve sade anlatmaya çalışıyorum derslerin FLA dsyalarınıda ekliyorum takıldığınız yerlerde destek olabilirim.
Gerçketen çok güzel bir çalışma
arkadslar bu calısmanı bunun fla dosyası yokmu acıll
admin fla’sını ekliyorum demişsinde.biz bulamadık.haber verirsen sevinirim.
Sayın necip benim önerim siz sorun yaşadığınız yerleri ekleyin bende açıklama yapayım en azından diğer katılımcılarada faydalı olur sanıyorum.
Admin sayfadaki ses açma kapama düğmesinide anlatabilirmisin
Sitede arama yapın ses açma kapama konusunda hazırlanmış dersler mevcut oradaki çalışmayı uyarlayabilirsiniz.
Eline sağlık ustam. Senin sayende flashla büyük yol aldım.
Bir dahaki derste flash websitende header de duran resimdeki gibi efekt(ler) yapmayı öğretirsen çok sevineceğim. Öyle bir derse çok ihtiyacım var.
Saygılarımla…
Flash web sitem hangisi oluyor.
Headerde duran gökdelen gibi bir bina varya ondaki efekt
Sayın Adminim Bu Flash we Bite Yapımını Videolu Olarak Anlatamazmısınız yada Hazei olarak varmı çok yapmayı İstiyorum ..
Flash çalışmanız başlayın konuyu sırası ile yapın takıldığınız yerlerde destek veririm.
ya ne kadar iyi bir insansin sen admin
harikasin hersekilde yardimci oluyosun sayende flash’da cok ilerledik ben macromedia flash 8 de yapabilirmiyiz?
Bu Dersi Videolu Olarak AnlatırmısınıZ!!
güzel bir ders olmuş . ancak fla dosyasını ekleyebilirmisiniz. bu şekilde anlamamız mümkün değil. fla sı olursa hiç değilse butonları mcleri daha iyiincelebiliriz . lütfen fla sınıda ekleyiniz…
Yorum Yazın
Photoders Hakkında
Rastgele Yazılar
Son Yorumlar
Etiketler
3D Advanced Animasyon Animation Balans Efekt Bir Objenin Yansıması Bir Resim Efekti buttons Calculator Chrome Text Colors Photoshop Tutorial cursor dancer dans day Dynamic Efekt Efekti Effect etiket fire Flash dalga effect Flash Dalga Effect-1 Flash Motion Guide Flash Resim (images) Animasyon Flash Resim Albüm Hazırlama flash site yapımı Foto manipilasyon Teknikleri Fotoğraf Gezegen Header Icon iletişim formu images_effect Kabarcık (Bubble) Brushes kontrol Lazer Liquify tool Logo Love smiley Manipulasyon manzarada renk değişimi menü Model Mouse Photo Photoders Text Efekt Photoders toolbar Photo Effect (Resim Efekti) Photo Keskinlik Efekti Photoshop Brushes Photoshop değişik bir çalışma Photoshop ile ilginç çalışma Photoshop resim çalışması Photoshop Tutorials Photo Tutorial Plazma Tv Powerful Preloader Renk Değişimleri Resim (images) effect Resim Balans Uygulamaları (Levels) Resim Efekti Ses Silüet (Silhouettes) Brushes Sis (Fog) Effect Tutorial Sound Stars Tutorials Sıra Dışı photo Border Efekti Text efekt tutorials Text Yansıma ve Gölge Efekti Wallpaper starbrust effect Web Logo Yağmur (Rain) Effect Yıldız (Star) Photo EffectBağlantılar
Son Yazılar
En Çok Yorumlananlar
Tavsiye Siteler