Amaç: Bu hafta zaman doğrusuna (timeline) ve çerçevelere (frames) bağlı kalmadan uygulama geliştirmeyi sağlayan yüksek seviyeli taşıyıcılar (containers) sunan ekranları öğreneceksiniz.
EKRANLARLA ÇALIŞMAK
Flash MX 2004 ile birlikte sunular, form tabanlı uygulamalar gibi karmaşık ve hiyerarşik Flash belgelerinin tasarlanması için yapısal tasarım bloklarından oluşan kullanıcı yönetim arayüzü içeren ekranlar (screens) geliştirilmiştir. Flash oynatıcılar, ekranlarla tasarlanmış filmleri oynatabilir. Flash ile ekran tabanlı iki tür belge oluşturulabilir: Multimedya sunusu ya da slayt gösterisi gibi sıralı içerik için uygun olan Flash Slayt Sunusu ve zengin internet uygulamaları içeren doğrusal olmayan form tabanlı uygulamalar.
Ekranlar gerçekte birer movie clip nesnesidir ve dolayısıyla her bir ekran kontrol edilebilir. Form uygulamalarında varsayılan olarak tüm ekranlar gösterilirken slayt sunularında her bir ekran belli bir anda gösterilir. Ekranlar çeşitli olayları yayınlayabilir. Örneğin belli bir ekran gözükür kılındığında bir sesin çalınması ya da bir video dosyasının oynatılması gibi olaylar tetiklenebilir.
Ekran Özelliğini Kullanan Yeni Bir Sunuyu Başlatmak
Yeni bir slayt sunusu başlatmak için File → New komutuyla çıkan yeni belge penceresinde Flash Slide Presentation tercihi seçilirse şekilde gösterilen tek slaytlı sunu ekrana gelir.
EKRANLARLA ÇALIŞMAK
Flash MX 2004 ile birlikte sunular, form tabanlı uygulamalar gibi karmaşık ve hiyerarşik Flash belgelerinin tasarlanması için yapısal tasarım bloklarından oluşan kullanıcı yönetim arayüzü içeren ekranlar (screens) geliştirilmiştir. Flash oynatıcılar, ekranlarla tasarlanmış filmleri oynatabilir. Flash ile ekran tabanlı iki tür belge oluşturulabilir: Multimedya sunusu ya da slayt gösterisi gibi sıralı içerik için uygun olan Flash Slayt Sunusu ve zengin internet uygulamaları içeren doğrusal olmayan form tabanlı uygulamalar.
Ekranlar gerçekte birer movie clip nesnesidir ve dolayısıyla her bir ekran kontrol edilebilir. Form uygulamalarında varsayılan olarak tüm ekranlar gösterilirken slayt sunularında her bir ekran belli bir anda gösterilir. Ekranlar çeşitli olayları yayınlayabilir. Örneğin belli bir ekran gözükür kılındığında bir sesin çalınması ya da bir video dosyasının oynatılması gibi olaylar tetiklenebilir.
Ekran Özelliğini Kullanan Yeni Bir Sunuyu Başlatmak
Yeni bir slayt sunusu başlatmak için File → New komutuyla çıkan yeni belge penceresinde Flash Slide Presentation tercihi seçilirse şekilde gösterilen tek slaytlı sunu ekrana gelir.
Window → Other Panels → Screens komutuyla ekran slaytları gizlenir ya da açılır. Her slayt ekranı kendi zaman doğrusuna sahiptir.
Uygulama: Yeni slaytlar eklemek ve slaytlarla çalışmak
1- Presentation ya da slide1 yazan ekrana sağ tıklayıp çıkan menüden Insert Screen komutunu veriniz. Aynı seviyede slide2 isminde yeni bir slayt eklenir.
2- Presentaion, slide1 ve slide2 slaytlarını sırayla seçili duruma getiriniz ve her birinin çalışma alanına herhangi bir nesne grafik çiziniz ya da nesne ekleyiniz.
3- Ctrl + Enter tuş ikilisiyle filminizi çalıştırınız. 2. slayt ekranına eklediğiniz grafik öğelerinin gözükmediğini fark etmiş olmalısınız.
4- Slide1 slaydını farenin sol tuşuna tıklayarak seçiniz ve sağ tuşa tıklayın. Çıkan menüden Insert Nested Screen komutunu verin. Şekil 8.3’te görüldüğü gibi slide1 ve slide2 slaytları arasına slide3 isimli biraz iç tarafa doğru girintili yeni bir slaytın eklenmiş olması gerekir.
5- Yeni eklediğiniz slaytı seçin ve araç çubuğundan metin aracını seçiniz (Text Tool - A). Çalışma alanına Merhaba yazınız.
6- Açtığınız belgenin isminin yazılı olduğu sol üst köşenin hemen altında yazılı yere tıklayarak zaman doğrusunu gözükür kılınız.
7- Slide3 isimli slayt ekranına yazmış olduğunuz yazıyı seçiniz. Insert → Timeline → Create Motion Tween komutuyla hareket canlandırması oluşturunuz.
8- 30. kareye gidiniz ve sağ tıklayınız. Çıkan menüden Insert Keyframe komutunu veriniz.
9- 30. karede yer alan yazıyı çalışma sayfasının dilediğiniz bir noktasına taşıyınız. Filminizi çalıştırınız.
Uygulama: Yeni slaytlar eklemek ve slaytlarla çalışmak
1- Presentation ya da slide1 yazan ekrana sağ tıklayıp çıkan menüden Insert Screen komutunu veriniz. Aynı seviyede slide2 isminde yeni bir slayt eklenir.
2- Presentaion, slide1 ve slide2 slaytlarını sırayla seçili duruma getiriniz ve her birinin çalışma alanına herhangi bir nesne grafik çiziniz ya da nesne ekleyiniz.
3- Ctrl + Enter tuş ikilisiyle filminizi çalıştırınız. 2. slayt ekranına eklediğiniz grafik öğelerinin gözükmediğini fark etmiş olmalısınız.
4- Slide1 slaydını farenin sol tuşuna tıklayarak seçiniz ve sağ tuşa tıklayın. Çıkan menüden Insert Nested Screen komutunu verin. Şekil 8.3’te görüldüğü gibi slide1 ve slide2 slaytları arasına slide3 isimli biraz iç tarafa doğru girintili yeni bir slaytın eklenmiş olması gerekir.
5- Yeni eklediğiniz slaytı seçin ve araç çubuğundan metin aracını seçiniz (Text Tool - A). Çalışma alanına Merhaba yazınız.
6- Açtığınız belgenin isminin yazılı olduğu sol üst köşenin hemen altında yazılı yere tıklayarak zaman doğrusunu gözükür kılınız.
7- Slide3 isimli slayt ekranına yazmış olduğunuz yazıyı seçiniz. Insert → Timeline → Create Motion Tween komutuyla hareket canlandırması oluşturunuz.
8- 30. kareye gidiniz ve sağ tıklayınız. Çıkan menüden Insert Keyframe komutunu veriniz.
9- 30. karede yer alan yazıyı çalışma sayfasının dilediğiniz bir noktasına taşıyınız. Filminizi çalıştırınız.
Sonuç olarak slide1’in altına yuvalanmış (Nested) olarak eklenen slide3’ün içeriği gözükürken slide1 ile aynı seviyede yer alan slide2’nin içeriği gözükmez. Eğer sonraki slaytlara geçerken önceki slaytların da içeriğini görmek istiyorsanız ilgili slayt grubunun üstünde yer alan slayt seçilir (Şekil 8.3’te presentatio” ve slide1 isimli slaytlar) ve Parameters panelinde overlayChildren değeri true olarak ayarlanır.
Sunuya Harici İçerik Yüklemek
Sunuya eklenen her bir slaydın contentPath özelliği bulunmaktadır. Bu özellik yardımıyla slaytlara harici SWF dosyaları ya da resim eklemek mümkündür. Böylece her bir slaydın ayrı bir SWF dosyası gibi davranması sağlanabilir. Bu özellik, Flash yazılımının Professional sürümlerinde bulunmaktadır. Örneğin üç ayrı konuşmacının her biri için bölümlern ayrıldığı slayt sununuzun olduğunu varsayınız. Her bir konuşmacıdan kendileri için ayrı bir sunu hazırlamalarını istediğinizi düşününüz. Siz, sonradan ekleyeceğiniz bu üç ayrı sunuyu içerisinde barındıracak ana slayt sunusunu hazırlarsınız. Ana slayt sunusunun şekil 8.5’te resmedildiği gibi düzenlendiğini varsayalım.
Sunuya Harici İçerik Yüklemek
Sunuya eklenen her bir slaydın contentPath özelliği bulunmaktadır. Bu özellik yardımıyla slaytlara harici SWF dosyaları ya da resim eklemek mümkündür. Böylece her bir slaydın ayrı bir SWF dosyası gibi davranması sağlanabilir. Bu özellik, Flash yazılımının Professional sürümlerinde bulunmaktadır. Örneğin üç ayrı konuşmacının her biri için bölümlern ayrıldığı slayt sununuzun olduğunu varsayınız. Her bir konuşmacıdan kendileri için ayrı bir sunu hazırlamalarını istediğinizi düşününüz. Siz, sonradan ekleyeceğiniz bu üç ayrı sunuyu içerisinde barındıracak ana slayt sunusunu hazırlarsınız. Ana slayt sunusunun şekil 8.5’te resmedildiği gibi düzenlendiğini varsayalım.
Her bir konuşmacı için ayrılmış slaytların contentPath özelliği kullanılarak ya da ActionScript kodu yazılarak SWF dosyaları eklenir. Contentpath değeri ayarlamak istediğiniz slayt seçilir ve Parameters paneli açılır. Şekil 8.6’da gösterildiği gibi yüklenmek istenen dosyanın yolu contentPath satırına yazılır. Bir diğer yol ActionScript kodu yazmaktır. Örneğin Anasunu isimli sunu seçilir ve Actions paneli açılır. Kod alanına aşağıdaki gibi kod dizisi yazılır.
konusmaci_1.contentPath = “sunu1.swf”;
konusmaci_2.contentPath = “sunu2.swf”;
konusmaci_3.contentPath = “sunu3.swf”;
Böyle bir uygulama yapıldığında Anasunu ve giriş isimli sunuların içeriği gözükür ve diğer sunular altta kalır. ActionScript denetimiyle bu sorun çözülebilir. Bu çözüme dair adımlar, Uygulamada gösterilmiştir.
Uygulama: Sunuya harici içerik eklemek
1- Yeni bir slayt gösterisi başlatınız. Şekilte görüldüğü gibi 4 adet slayttan oluşan bir slayt sunusu hazırlayınız.
2- Anasunu isimli slaydı seçiniz ve çalışma alanına başlık için uygun bir metin yazınız.
3- Giriş isimli slaydı seçiniz ve aşağıdaki kodu yazınız.
on(mouseUp){
gotoNextSlide();
}
4- Giriş isimli slayda hazırlayacağınız sununun içeriğine uygun bir giriş yazısı ekleyiniz.
5- Konusmacı_1 isimli slaydı seçiniz ve aşağıdaki kodu ekleyiniz.
on(reveal){
this.contentPath= “sunu1.swf”;//Buraya elinizdeki bir dosyayı ekleyin!
}
on(mouseUp){
gotoNextSlide();
}
6- Konusmacı_2 isimli slayt için de 5. adımı uygulayınız. Contentpath değeri için “sunu2.swf” yazınız.
7- Konusmacı_3 isimli slayt için de 5. adımı uygulayınız. Gotonextslide() komutu yerine gotoSlide (“Anasunu”) komutunu, contentPath için sunu3.swf yazınız. Bu sunuyu çalıştırdığınızda Anasunu ve giriş isimli sunuların içeriği ekrana gelir. Giriş sunusuna fare hareketini izleyen eylem yöneticisi eklediğiniz için fare imlecini sunu içindeki bir nesne üzerine getirdiğinizde el şeklini alır. Tıkladığınız anda konusmaci_1 adlı sunuya geçilir. Eğer ilerleme işleminin slaytların üzerine tıklayınca gerçekleşmesini istemiyorsanız her bir slaydın üzerine buton ekleyebilirsiniz. Slayt ekranları için yazdığınız fare izleyicisi kodunu butonlara eklediğinizde aynı işlem gerçekleşir. Her bir slayt için film gezginini (Movie Explorer) kullanabilir ve slaytların zaman doğrusu karelerinde hangi öğelerin olduğunu görebilirsiniz. Window → Movie Explorer komutuyla film gezgini penceresini açınız. Her bir slayt için film gezgini penceresinde yeralan butonlara ( ) sırayla tıklayacak olursanız gezgin penceresi içerisinde ilgili öğeler listelenir.
Uygulama: Sunuya ses yüklemek ve kontrol etmek
1- Uygulamada tasarladığınız sunuyu açınız.
2- Konusmaci_3 slaydını seçiniz ve ActionScript kodunu siliniz (contentPath ve gotoSlide kodları silinecek).
3- Flash filminizin kütüphanesine eklemek üzere bir ses dosyası yükleyiniz. Bu işlem için File → Import → Import to Library komutunu çalıştırınız. Açılan
pencereyi kullanarak bilgisayarınızdan dilediğiniz formatta (MP3, WAV, AIF) bir ses dosyası seçiniz.
4- Kütüphane penceresi açık değilse açınız ve listeye eklenen ses simgesine sağ tıklayınız. Çıkan menüden Linkage komutunu çalıştırınız.
5- Açılan Linkage Properties penceresinde Linkage: değeri olarak Export for ActionScript değerini seçiniz.6- Identifier: alanına ses yazınız.
konusmaci_1.contentPath = “sunu1.swf”;
konusmaci_2.contentPath = “sunu2.swf”;
konusmaci_3.contentPath = “sunu3.swf”;
Böyle bir uygulama yapıldığında Anasunu ve giriş isimli sunuların içeriği gözükür ve diğer sunular altta kalır. ActionScript denetimiyle bu sorun çözülebilir. Bu çözüme dair adımlar, Uygulamada gösterilmiştir.
Uygulama: Sunuya harici içerik eklemek
1- Yeni bir slayt gösterisi başlatınız. Şekilte görüldüğü gibi 4 adet slayttan oluşan bir slayt sunusu hazırlayınız.
2- Anasunu isimli slaydı seçiniz ve çalışma alanına başlık için uygun bir metin yazınız.
3- Giriş isimli slaydı seçiniz ve aşağıdaki kodu yazınız.
on(mouseUp){
gotoNextSlide();
}
4- Giriş isimli slayda hazırlayacağınız sununun içeriğine uygun bir giriş yazısı ekleyiniz.
5- Konusmacı_1 isimli slaydı seçiniz ve aşağıdaki kodu ekleyiniz.
on(reveal){
this.contentPath= “sunu1.swf”;//Buraya elinizdeki bir dosyayı ekleyin!
}
on(mouseUp){
gotoNextSlide();
}
6- Konusmacı_2 isimli slayt için de 5. adımı uygulayınız. Contentpath değeri için “sunu2.swf” yazınız.
7- Konusmacı_3 isimli slayt için de 5. adımı uygulayınız. Gotonextslide() komutu yerine gotoSlide (“Anasunu”) komutunu, contentPath için sunu3.swf yazınız. Bu sunuyu çalıştırdığınızda Anasunu ve giriş isimli sunuların içeriği ekrana gelir. Giriş sunusuna fare hareketini izleyen eylem yöneticisi eklediğiniz için fare imlecini sunu içindeki bir nesne üzerine getirdiğinizde el şeklini alır. Tıkladığınız anda konusmaci_1 adlı sunuya geçilir. Eğer ilerleme işleminin slaytların üzerine tıklayınca gerçekleşmesini istemiyorsanız her bir slaydın üzerine buton ekleyebilirsiniz. Slayt ekranları için yazdığınız fare izleyicisi kodunu butonlara eklediğinizde aynı işlem gerçekleşir. Her bir slayt için film gezginini (Movie Explorer) kullanabilir ve slaytların zaman doğrusu karelerinde hangi öğelerin olduğunu görebilirsiniz. Window → Movie Explorer komutuyla film gezgini penceresini açınız. Her bir slayt için film gezgini penceresinde yeralan butonlara ( ) sırayla tıklayacak olursanız gezgin penceresi içerisinde ilgili öğeler listelenir.
Uygulama: Sunuya ses yüklemek ve kontrol etmek
1- Uygulamada tasarladığınız sunuyu açınız.
2- Konusmaci_3 slaydını seçiniz ve ActionScript kodunu siliniz (contentPath ve gotoSlide kodları silinecek).
3- Flash filminizin kütüphanesine eklemek üzere bir ses dosyası yükleyiniz. Bu işlem için File → Import → Import to Library komutunu çalıştırınız. Açılan
pencereyi kullanarak bilgisayarınızdan dilediğiniz formatta (MP3, WAV, AIF) bir ses dosyası seçiniz.
4- Kütüphane penceresi açık değilse açınız ve listeye eklenen ses simgesine sağ tıklayınız. Çıkan menüden Linkage komutunu çalıştırınız.
5- Açılan Linkage Properties penceresinde Linkage: değeri olarak Export for ActionScript değerini seçiniz.6- Identifier: alanına ses yazınız.
7- Konusmacı_3 slaydına 3 adet düğme eklemek için Window → Common Libraries → Buttons komutunu çalıştırınız.
8- Flash 8 için Playback rounded düğme grubunu açınız ve oynatma, durdurma, ileri sarma düğmelerini sahneye ekleyiniz.
9- Oynatma düğmesine değişken adı olarak play_btn, durdurma düğmesine değişken adı olarak stop_btn ve ileri sarma butonuna değişken adı olarak ileri_btn değerlerini giriniz.
10- Konusmacı_3 slaydının zaman doğrusunu açınız ve birinci kareye Actions panelinde aşağıdaki kodu yazınız.
var song_sound:Sound = new Sound();
song_sound.attachSound("ses");
play_btn.onRelease = function() {
song_sound.start();
};
stop_btn.onRelease = function() {
song_sound.stop();
};
ileri_btn.onRelease = function(){
gotoSlide("Anasunu");
}
11- Filminizi çalıştırınız. Konusmacı_3 slaydına gelindiğinde oynat ve durdur düğmelerini kullanarak sesin nasıl kontrol edildiğini görünüz. İleri düğmesine tıkladığınızda sununun başına dönmeniz gerekir.
8- Flash 8 için Playback rounded düğme grubunu açınız ve oynatma, durdurma, ileri sarma düğmelerini sahneye ekleyiniz.
9- Oynatma düğmesine değişken adı olarak play_btn, durdurma düğmesine değişken adı olarak stop_btn ve ileri sarma butonuna değişken adı olarak ileri_btn değerlerini giriniz.
10- Konusmacı_3 slaydının zaman doğrusunu açınız ve birinci kareye Actions panelinde aşağıdaki kodu yazınız.
var song_sound:Sound = new Sound();
song_sound.attachSound("ses");
play_btn.onRelease = function() {
song_sound.start();
};
stop_btn.onRelease = function() {
song_sound.stop();
};
ileri_btn.onRelease = function(){
gotoSlide("Anasunu");
}
11- Filminizi çalıştırınız. Konusmacı_3 slaydına gelindiğinde oynat ve durdur düğmelerini kullanarak sesin nasıl kontrol edildiğini görünüz. İleri düğmesine tıkladığınızda sununun başına dönmeniz gerekir.
ÖLÇME VE DEĞERLENDİRME
1. Ekranlar zaman doğrusundan ve çerçevelerden (frame) bağımsız çalışma ortamı
sağlar……….
2. Ekranlar yardımıyla slayt sunusu gibi sıralı içerik uygulamaları yapılabilir…………
3. Bir sununun slaytlarını ActionScript kodlarıyla kontrol etmek mümkün
değildir…………
4. Gotoframe() komutu slaytlar arasında gezinmeyi sağlayan bir fonksiyondur…………
5. Contentpath parametresi slaytlara içerik yüklemek amacıyla kullanılır…………
6. Overlaychildren parametresi alt slaytlara geçişte önceki slaytların gözükmesini ya da
kaybolmasını sağlar…………
7. Gotonextslide() fonksiyonu ilgili slaydın bir sonraki çerçevesine (frame) gitmeyi
sağlar…………
8. Ekranlara eklenen her bir slayt movie clip nesnesidir…………
9. Playhidden parametresi false olarak ayarlandığında ilgili slayt gizlense bile içeriği
oynatılmaya devam eder…………
11. On() eylem yöneticisi slayt ekranlarında kullanılamaz…………
sağlar……….
2. Ekranlar yardımıyla slayt sunusu gibi sıralı içerik uygulamaları yapılabilir…………
3. Bir sununun slaytlarını ActionScript kodlarıyla kontrol etmek mümkün
değildir…………
4. Gotoframe() komutu slaytlar arasında gezinmeyi sağlayan bir fonksiyondur…………
5. Contentpath parametresi slaytlara içerik yüklemek amacıyla kullanılır…………
6. Overlaychildren parametresi alt slaytlara geçişte önceki slaytların gözükmesini ya da
kaybolmasını sağlar…………
7. Gotonextslide() fonksiyonu ilgili slaydın bir sonraki çerçevesine (frame) gitmeyi
sağlar…………
8. Ekranlara eklenen her bir slayt movie clip nesnesidir…………
9. Playhidden parametresi false olarak ayarlandığında ilgili slayt gizlense bile içeriği
oynatılmaya devam eder…………
11. On() eylem yöneticisi slayt ekranlarında kullanılamaz…………