Mouse istediğiniz bir şekle dönüştürmek için;

- Mousenizin girmesini istediginiz şekli çizip movie clip haline getirin
- Bu klibe istediğiniz adı verin
- Movie_clip e tıklayıp action bölümüne aşağıdaki kodları yazın

onClipEvent (load) {
Mouse.hide ();
startDrag (this, true);
}

- Faremiz artık yaptığımız movie clip şeklini almıştır. Güle güle kullanın..

Dışarıdan sahneye movie clip loader ile swf yüklemek..

Sahneye boş bir Movie Klip koyarak Movie Klip in instance name ini "swf" yapın
sahneye boş bir dynamic text atın . var:yazi olsun

ilk frame o şu kodlar yazılır

swf._x=0;
swf._y=0;

yazi="yukleniyor"

var swfyukle = new MovieClipLoader();
swfyukle.onLoadStart = function (swf) {
}
swfyukle.onLoadComplete = function (swf){
yazi="yükleme tamamlandı"

}
swfyukle.onLoadInit = function (swf) {
// dışardan yüklenecek swf nin boyutları tanımlanır.
swf._width = 100;
swf._height = 200;
}
swfyukle.loadClip("swf.swf","_root.swf");

Kapatma butonu için fscommand komutunu kullanmanız gerekir bunun
için yeni bir sayfa açıp şunları yapalım;

Bir buton oluşturun(ismi önemli değil)

Bu butona şu komutları verin;

on (release) {
fscommand ("quit");
}
Kapatma butonu için fscommand komutunu kullanmanız gerekir bunun
için yeni bir sayfa açıp şunları yapalım;

Bir buton oluşturun(ismi önemli değil)

Bu butona şu komutları verin;

on (release) {
fscommand ("quit");
}

Yapmak istediğimiz olay. flahs içerisindeki sesi yönetmektir. Yani açma, kapama, sesi azaltma, sesi arttırma gibi işlemler.

Şimdi sitemize müzik koyuyoruz bu müziğin volumesini ayarlamak için
yapacağımız iş 11 tane kutucuk koyuyoruz , kutuyu button yapıoruz
insert/convert to symbol/button şimdi koyduk :)

Şimdi bunu sırayla diziyoruz en üsttekine alttaki kodu yazıoruz
kodu koyuyoruz. Bu bilgisayarın en yüksek şiddeti olur genellikle
üstte olur. En alta koyarsan da olur.

on (rollOver) {
ses.setVolume(100);
ses = new Sound();
}

Kod açıklamaları :

1- on(rollover) ; Bu buttonun üstünde iken yapar bu işlemi eğer
basarak yapmak istiyorsak on(press) yapabilirsiniz

2- Ses.setVolume(100) ; ses:Bu aktif olan müziktir ve en şiddetlisi
100 de dir bunu istediğimiz 100-0 a kadar istediğimiz bir değer
verebiliriz

3- ses = new Sound(); bu da ses kelimesini aktif etmek içindir


Şimdi 11 kutucuğun hepsine sırayla kodları koyuyoruz


1.kutu;
on (rollOver) {
ses.setVolume(100);
ses = new Sound();
}

2.kutu;
on (rollOver) {
ses.setVolume(90);
ses = new Sound();
}

3.kutu;
on (rollOver) {
ses.setVolume(80);
ses = new Sound();
}

4.kutu;
on (rollOver) {
ses.setVolume(70);
ses = new Sound();
}

5.kutu;
on (rollOver) {
ses.setVolume(60);
ses = new Sound();
}

6.kutu;
on (rollOver) {
ses.setVolume(50);
ses = new Sound();
}

7.kutu;
on (rollOver) {
ses.setVolume(40);
ses = new Sound();
}

8.kutu;
on (rollOver) {
ses.setVolume(30);
ses = new Sound();
}

9. kutu;
on (rollOver) {
ses.setVolume(20);
ses = new Sound();
}

10.kutu;
on (rollOver) {
ses.setVolume(10);
ses = new Sound();
}

11.kutu;
on (rollOver) {
ses.setVolume(0);
ses = new Sound();
}

Flashın içine müzik koymak için ctrl+R diyoruz
müziğimizi seçiyoruz ve koyuyoruz.

Flash-MX versiyonuna kadar çizgi ve dolgu gibi şekiller ancak dosyanın hazırlandığı tasarım aşamasında araçlar kutusundaki elemanlarla oluşturulabiliyordu. Bu versiyonla beraber şekil ve çizimleri runtime(çalışma anında) oluşturma şansına kavuşulmuştur.Runtime şekiller oluşturmak için kullanılan metotlara Çizim API`leri denir.

Uygulamalar bölümünde de anlatılan Boya Tahtası çalışması büyük ölçüde bu metotlarla oluşturulmuştur. Çalışmada fare sol tuşuna basarak ayarladığınız özellikte çizim yapabilirsiniz.

Kullanılan kodlar:

lineStyle() , moveTo() , lineTo() , curveTo() , clear() , beginFill() , beginGradientFill() , endFill() olmak üzere 8 tanedir.

Çizim API`leri 3 sayfa olarak anlatılacaktır.( Çizgi oluşturma yöntemleri, dolgu oluşturma yöntemleri ve örnek çalışmalar)

1- ÇİZGİ OLUŞTURMA YÖNTEMLERİ:

lineStyle(çizgi_kalınlığı,renk,alfa); şeklinde kullanılır. Çizginin stilini ayarlamak için kullanılır.Çizgi kalınlığı için 0 ile 255 arası bir değer seçilir. Renk parametresinde ise rengin hexadecimal değeri kullanılır. örneğin kırmızı renk için 0xFF0000 yazılır. Alfa alanına çizimin şeffaflığını ayarlamak için 0 ile 100 arası bir değer yazılır. Tam solid renk kullanmak isterseniz 100 değerini kullanmalısınız.

moveTo(x,y); Çizimin ilk başlayacağı noktanın koordinatlarını verir. x ve y alanına çizimin ilk başlatılacağı x ve y koordinatları yazılır.Bu komutu kullanmadan da çizime başlayabilirsiniz. Flash böyle bir durumda x ve y değerinin sıfır olarak belirlendiği sahnenin sol üst köşesinden çizimi başlatır.

lineTo(x,y); Çizginin başlangıç noktasından sonra ilerleyeceği koordinatları verir.Bu komutu birden fazla kullanarak kare,üçgen,dikdörtgen gibi geometrik şekiller oluşturabilirsiniz. Bir örnekle açıklayalım.

Flash programını açıp 1.kareye şu komutları atayınız:

_root.createEmptyMovieClip( "ucgen", 1 );
with (_root.ucgen){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
lineTo( 100,100 );
lineTo( 0,100 );
lineTo( 50, 50 );
}

veya aynı kodları şu şekilde de yazabilirsiniz:

_root.createEmptyMovieClip( "ucgen", 1 );
_root.ucgen.lineStyle( 5, 0xff00ff, 100 );
_root.ucgen.moveTo( 50, 50 );
_root.ucgen.lineTo( 100,100 );
_root.ucgen.lineTo( 0,100 );
_root.ucgen.lineTo( 50, 50 );

Filmi test ettiğinizde sahnede bir üçgen gözlenecektir.Bu tür çizimlerde ilk komut sanal kalemin yerine geçecek boş bir film klibi oluşturmaktır._root.createEmptyMovieClip( "ucgen", 1 ); Parametre olarak bu klibe ucgen instance name`i atanmıştır ve klip 1.level derinliğine yerleştirilmiştir.Derinlik en az 1 olmalıdır.0 değeri verilirse sahnede mevcut olan diğer semboller kaybolacak yerini oluşturulan bu boş klibe bırakacaktır. Daha sonraki kodlarla çizginin stili ayarlanır. Başlangıç noktası olarak x=50 ve y=50 koordinatları seçilmiştir. Buradan ilk ilerleme noktası 100,100, buradan 0,100 noktasına ilerler ve son olarak başlangıç noktası olarak seçilen 50,50 noktasına ilerleyerek üçgeni tamamlarlar. Alttaki grafiği inceleyebilirsiniz:



curveTo(eğim_x,eğim_y,bitiş_x,bitiş_y); lineTo komutu ile sadece düz çizgiler oluşturulur.Eğimli çizimler için curveTo komutuna ihtiyaç vardır. eğim_x ve eğim_y değerleri çizginin eğim yapacağı kontrol noktasını belirler. x ve y değerleri ise çizginin bitiş noktasıdır. Bir örnekle açıklayalım:

Flash`ın 1.karesine şu kodları yazıp filmi test edin:

_root.createEmptyMovieClip( "parabol", 1 );
with (_root.parabol){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
curveTo( 100,100,50,150 );
}

Sağa eğim yapan vertikal düzlemde bir eğri elde edeceksiniz. Bunu grafikle açıklayalım:



Grafide de görüldüğü gibi curveTo komutunun ilk 2 parametresi eğimin yapılacağı x ve y değerini kontrol etmektedir.

clear(); Yapılan çizimleri silmek istediğinizde kullanacağınız kod grubudur. Flash programını açıp 1.kareye yukarıdaki parabol kodlarını yazalım:

_root.createEmptyMovieClip( "parabol", 1 );
with (_root.parabol){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
curveTo( 100,100,50,150 );
}

Bu parabol instance name`ine sahip bir çizim oluşturacaktır. Sahneye bir buton yerleştirip şu komutu atayın:

on(release){
_root.parabol.clear();
//parabol oluşturulan çizime atanan isimdir
}

Filmi test ettiğinizde parabol çizimi gözlenir.Butona bastığınızda ise bu çizim silinecektir. Sayfanın en üst kısmındaki boya tahtası çalışmasındaki sil butonu bu kod ile çalışmaktadır.

Çizgi kodları bunlardan ibarettir. Dolgu kodları olan beginFill() , beginGradientFill() , endFill() bir sonraki sayfada açıklanacaktır.

2- DOLGU OLUŞTURMA YÖNTEMLERİ:

Çizgi oluşturma metotları ile fareyi sanal bir kalem olarak kullanıp çizgi oluşturabilir veya kare,üçgen gibi geometrik şekiller oluşturabilirsiniz. Bu şekiller dolgu içermediklerinden sahnede yerleştirildikleri alanda arkaplanda ne varsa gözlenecektir. Dolgu içeren şekiller oluşturmanız için ek kodlara ihtiyaç vardır. Bunlar beginFill() , beginGradientFill() ve endFill() komutlarıdır. kodlara geçmeden evvel dolgu türlerinden bahsetmekte yarar var. Flash ile 2 tür dolgu oluşturulur.

a- Solid Dolgular: Tek renk kullanılan dolgulardır. Bu tür bir çalışmada dolguya katabileceğiniz tek özellik saydamlık oranını değiştirmekten ibaret olacaktır.

b- Gradient Dolgular: Geçişken,kademeli veya dereceli dolgular da denilir. Bu tür dolgularda 2 veya üzerinde renk kullanabilirsiniz. 2 tür gradient dolgu vardır

-Linear Dolgu: Doğrusal geçişli dolgulardır.


-Gradient Dolgu: Dairesel geçişli dolgulardır.


Kodlarla renkler arası geçiş tayf eni, dolgunun yatay düzlemle yaptığı açı ve saydamlık değerleri ayarlanabilir. Şimdi kodlara gözatabiliriz.

beginFill(renk,saydamlık): Solid dolgular için kullanılan bir komuttur. Renk alanına kullanılacak rengin hexadecimal kodu, saydamlık alanına 0 ile 100 arasında değişen bir alfa değeri yazılır.

beginFill(0xFF00FF,100); şeklinde. Saydamlık değeri opsiyoneldir. Bir alfa değeri ile renkte saydamlık oluşturmak istemiyorsanız bu parametreyi kullanmayabilirsiniz. beginFill(0xFF00FF); gibi. Bu durumda flash alfa değerini 100 olarak kabul eder.

endFill(): Bir dolgunun tamamlandığını gösteren bir komuttur.bu komutu kullanmadan dolgu oluşturamazsınız.Hem beginFill hem de beginGradientFill komutundan sonra kod grubunu endFill() ile kapatmanız şarttır.

beginGradientFill("dolgu_tipi","renkler","saydamlıklar","oranlar","matrix") : Geçişken dolgular oluşturmaya yarayan bu kod grubunun anlaşılması diğerlerine göre daha zordur. Çünkü mevcut parametrelerin de alt parametreleri mevcuttur. Parantez içindeki koda ait parametreleri sıra ile inceleyelim.

dolgu_tipi: Linear veya radial olarak 2 seçeneğiniz vardır. Bu dolguların görüntüsüne ait grafikler önceden sunulmuştu.

renkler: Bu alanda dolguda kullanılacak renklerin hexadecimal değeri yazılır. Birden fazla renk kullanılacağından bu kodları önce bir diziye almak ve bu dizi elemanları olarak kod içinde kullanmak çok daha uygun olacaktır.örneğin çalışmada 4 renk kullanılacaksa önce bir dizi oluşturulur ve değerler bu diziye eleman olarak atanır:

renkler_array=[0xFF0000,0x00FFFF,0x620086,0x0000FF]; şeklinde. Bu dizinin nasıl kullanılacağı daha sonra tanımlanacaktır.

saydamlıklar: Dolguda kullanılacak renklere uygulanacak alfa değerlerini içerir. Bunu da bir diziye atayalım:

saydam_array=[100,90,100,80];

oranlar: Renklerin biribirine geçişinin ornaını ayarlar. 0 ile 255 arası bir değer verilir. Yine bir dizi oluşturalım:

oran_array=[255,255,125,125];

matrix: En karışık parametre budur. 6 alt grup içerir.

matrix Type:Bu alana daima "box" stringi yazılmalıdır.

x: Gradient renklerin yatay pozisyondaki koorninatıdır.

y: Gradient dolgunun dikey pozisyondaki koordinatıdır.

w: Dolgunun genişliği

h: Dolgunun yüksekliği

r: Dolguya uygulanacak dönüş açısı.Bu değer radyan cinsinden verilir. Bu değer kafanızı karıştırıyorsa ve derece olarak kullanmak isterseniz bir dönüşüm dizini oluşturmalısınız.Şu dizini kullanabilirsiniz:

rotasyon=(istenilen_açı/180)*Math.PI;

Tüm bu açıklamalardan sonra bir gradient dolgu için şöyle bir dizin yazılır:

rotasyon=(45/180)*Math.PI;
matrixOzellikleri = {matrixType:"box", x:-10 , y:-30 , h:150 , w:150 , r: rotasyon}

Burada matrixType herzaman yazılması gerektiği gibi box olarak belirlenmiştir. x değeri -10 alındığından dolgunun yatay konumunun şeklin en solunda 10 piksel daha dış kısmında , y değeri -30 olarak atnadığından dolgunun şeklin dikey konumunun 30 piksel üstünden oluşmasını sağlıyoruz.h ve w değerleri 150 piksel olduğundan dolgunun yüksekliği ve eni bu değere eşitlenir.Son olarak r değeri olarak 45 derece ataması yapılıyor.Burada kullanılan rotasyon fonksiyonu önceden anlatıldığı gibi bu dizinin üstünde oluşturulmalıdır.Dolgu 45 derece sağa rotasyon yapacaktır. Basit bir örnek verelim:

Flash programını açın ve 1.kareye şu komutu vererek filmi test edin:

_root.createEmptyMovieClip( "gradient", 1 );
with ( _root.gradient ) {
renkler = [ 0xFF0000, 0x0000FF];
alfalar = [ 100, 100];
oranlar = [ 0, 255];
rotasyon=(45/180)*Math.PI;
matrix = { matrixType:"box", x:10, y:10, w:70, h:70, r:rotasyon };
beginGradientFill( "linear", renkler, alfalar, oranlar, matrix );
moveTo(10,10);
lineTo(10,100);
lineTo(100,100);
lineTo(100,10);
lineTo(10,10);
endFill();
}

Test sonucunu yukarıdaki bilgilerle beraber değerlendiriseniz bu karmaşık kodu çok daha iyi yorumlayabilirsiniz. Artık bir sonraki sayfamızda örneklere geçebiliriz.

3- ÖRNEK ÇALIŞMALAR:

Üçgen oluşturma:

Flash programını açın ve 1.kareye alttaki kodları yazıp filmi test edin:

_root.createEmptyMovieClip( "ucgen", 1 );
with (_root.ucgen){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
lineTo( 100,100 );
lineTo( 0,100 );
lineTo( 50, 50 );
}

Daire oluşturma:

daireCiz = function(r, x, y) {
c.moveTo(x+r, y);
a = Math.tan(22.5 * Math.PI/180);
for (var aci = 45; aci<=360; aci += 45) {
var sonx = r*Math.cos(aci*Math.PI/180);
var sony = r*Math.sin(aci*Math.PI/180);
var cx =sonx + r*a*Math.cos((aci-90)*Math.PI/180);
var cy =sony + r*a*Math.sin((aci-90)*Math.PI/180);
c.curveTo(cx+x, cy+y, sonx+x, sony+y);
}
}
_root.createEmptyMovieClip("c", 1);
c.lineStyle(3, 0xFFFFFF, 100);
c.beginFill(0x666666, 100);
daireCiz(80, 100, 50);
c.endFill();

Solid dolgu oluşturma:

_root.createEmptyMovieClip( "kare", 1 );
with ( _root.kare ) {
beginFill(0xFFCC00,80 );
moveTo(10,10);
lineTo(100,10);
lineTo(100,100);
lineTo(10,100);
lineTo(10,10);
endFill();
}

Gradient dolgu oluşturma:

_root.createEmptyMovieClip( "gradient", 1 );
with ( _root.gradient ) {
colors = [ 0xFF0000, 0x0000FF];
alphas = [ 100, 100];
ratios = [ 0, 255];
rotasyon=(45/180)*Math.PI
matrix = { matrixType:"box", x:10, y:10, w:70, h:70, r:rotasyon };
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(10,10);
lineTo(10,100);
lineTo(100,100);
lineTo(100,10);
lineTo(10,10);
endFill();
}

Çizgilere animasyon uygulama:

_root.createEmptyMovieClip("cizgi",1);
_root.cizgi._x=100;
_root.cizgi._y=100;
with(_root.cizgi)
{
lineStyle(1,0x006699);
for(i=0; i<360; i+=10) {
acı = i * (Math.PI/180);
moveTo(0,0);
lineTo(100*Math.cos(acı),100*Math.sin(acı));
}
}
_root.cizgi.onEnterFrame = function(){
this._rotation+=1;
};

Değişik bir çalışma için alttaki linkteki oscilloscope adlı örneği inceleyebilirsiniz. Burada da çizim için benzer kodlar kullanılmıştır:

Built-in Classes alanından ulaşabileceğiniz nesne(object) kodları arasında sık kullanılanların daha detaylı anlatımı için ayrı bir bölüm açılması yararlı olacaktır.array, date, math, string, color, movieclip, selection, sound nesnelerini bu bölümde göreceğiz. Diğer nesneler (boolean, buton, key, loadvars, mouse, number, stage, system, textfield, textformat, XML, XML Socket) actionscript kodları ve uygulamalar bölümünde anlatılacaktır.



Array Date
MovieClip
Sound
Color
Math
Selection
String

Diğer kodlarda olduğu gibi Flash bileşenlerine ait tüm kodlar Actionscript 3 `de değiştirilmiştir. Bu bölümde tüm Flash CS3 bileşenlerinin nasıl kullanılacağını basit örneklerle anlatacağız. Bu arada kullanılan kod gruplarında Flash`ın diğer temel kod gruplarındaki değişiklikleri de görme şansına ulaşacaksınız.

User InterFace Örnekleri

Button
CheckBox
ColorPicker
ComboBox
DataGrid
Label
List
NumericStepper
ProgressBar
RadioButton
ScrollPane
Slider
TextArea
TextInput
TileList
UILoader
UIScrollBar

Video Örnekleri

Bu bölüm tek bir sayfa içinde anlatılacaktır. Video elemanlarını tek tek özelleştirerek kullanabilirsiniz.

FLVPlayback && FLVPlayback Captioning

Bu animasyon özellikle incredimail adlı bir mail programının hazırlanmasından sonra popüler olmuştur. Bizim animasyonumuzda salyangoz sayfada 3 kez hareket edecek şekilde hazırlanmıştır.

Sayfamızdaki salyangoz animasyonu incredimail`den alınmıştır.Şayet HTML sayfası üzerinde oynatacağınız animasyon içinde resim dosyaları bulunuyorsa arkaplanın şeffaf olmasına mutlaka dikkat ediniz.

Çok çarpıcı bir görünüm oluşturmasına rağmen animasyonun hazırlanma tekniği son derece basittir ve esas görevi flash değil bir javascript kod grubu sağlamaktadır.

Animasyonu oluşturalım:

1- Önce istediğiniz ebadlarda flash animasyonunuzu oluşturun. Şayet bir resim içerecekse önceden de belittiğimiz gibi resim arkaplanını transparan olarak hazırlayın.

2- Sistem şöyledir. HTML sayfasının üzerine identifier adı verilmiş bir layer eklenir . Bu layer içine flash animasyonu alınır ve layer için kodlara eklenen DIV etiketinden hemen önce aşağıda bahsedilen javascript kodu eklenir. Dreamweaver kullanılıyorsa işlem daha kolay gerçekleşecektir. Önce sayfa üzerine bir layer ekleyin.Layerın içini tıklayarak seçin ve ana menüden swf dosyanızı yükleyin. Kodları açıp swf dosyasının bulunduğu dizine:

eklentisini yapın. Bu basit işlem animasyonunuzu çalıştıracaktır.

3- Dreamweaver kullanmak istemiyorsanız 2. şıkta anlatılanları unutun ve alttaki satırları dikkatle okuyun.

HTML sayfanızı açın. Üstteki menüden Görünüm--> Kaynak seçeneğini tıklayın.Sayfanızın kodları gözlenecektir. Şimdi alttaki kodları kopyalayıp Sayfanızdaki arzu edilen alana yapıştırın:

Önemli kısmlar renkli olarak yazılmıştır. Kırmızı ile yazılan yerler div etiketi ile eklediğiniz layer identifier adıdır.

Yine kırmızı yazılan 750 rakamı ve 350 rakamı swf dosyası animasyonunun sayfanın hangi kısımlarında oluşacağını belitmektedir.750 sol kenar 350 ise üst kenara göre planlanır.750 değerini ne kadar küçültürseniz animasyon başlama yeri o kadar sağa doğru kayar. 350 değerini azaltırsanız animasyon aşağı, çoğaltırsanız yukarı doğru yerleşim gösterir. Uygun değeri deneme yanılma yolu ile bulabilirsiniz.

Film mutlaka transparan kaydedilmelidir.Bu nedenle dizini eklenmelidir.

Dikkat etti iseniz flash kodları arasında EMBED tagı yok. Buradan çıkan sonuç doğal olarak şu oluyor. Bu tür bir sayfa sadece windows işletim sistemine sahip bilgisayarlarda gözükecektir.

Anlatım tarzımızın çok teknik olmadığının farkındayım. Önemli olan bu tür animasyonun teknik ifadesini değil uygulanabilirliğinin kolay olmasıdır diye düşünüyorum. Hazırlamada sorunlarınız olursa lütfen e-mail yolu ile bağlantı kurunuz.

Buyultme efekti hazırlamada kullanılan değişik yöntemler vardır. Bizim hazırladığımız çalışmadaki kodlar anlaşılması en basit olan kodlardır.

1- Ana sahnemize büyültme efektinde kullanılacak resmimizi import edelim( isterseniz metin de kullanabilirsiniz)

2- Resmimizi seçelim ve F8`e basarak sembol iletişim kutusunu açıp davranış olarak film klibi seçeneğini işaretleyelim.İnstance name alanına kucuk_resim yazalım.

3- CTRL+F8`e basarak yeni bir film klibi oluşturun. Kütüphanedeki resmi sahne içine çekelim. Properties panelinde w ve h alanına mevcut boyutları tam 2 katına çıkartacak rakamlarımızı yazalım. Şu anda 2 klibimiz mevcut. 2. klibimiz ilk klibin tam iki katı boyutlarda oluşturulmuştur. Bu 2 değeri ilerde action script komutlarında kullanılacaktır. Filmin örnek adını buyuk_resim olarak ayarlayalım.

4- Buyuk_resim klibimize yeni bir katman ekleyelim. Buraya oval aracı ile dış çerçevesi olmayan bir daire çizelim. Bu maske olarak kullanılacaktır. Bu nedenle boyutunu istediğiniz şekilde ayarlayabilirsiniz.Bu katman üzerine sağ klik yapın properties kısmını işaretleyelim ve mask özelliğini seçelim. Aynı işlemi alttaki katman içinde yapalım ve masked seçeneğini kullanalım.

Bu komutlar Flash5` de de kullanılır. Eğer isterseniz daha önce anlattığımız setMask komutunu kullanabilirsiniz.

5- En üst kısma 3. katmanımızı ekleyelim. Buraya kodları yazacağız.Alttaki 2 katmana birere frame en üstteki aksiyon katmanına da bir keyframe ekleyelim. Yani her üç katmanda da 2 frame bulunmalıdır.

Aksiyon katmanındaki 1.kareyi seçelim ve şu komutları atayalım:

setProperty(buyuk_resim, _x, (getProperty(_root.kucuk_resim, _x)-_x)*2);
setProperty(buyuk_resim, _y, (getProperty(_root.kucuk_resim, _y)-_y)*2);

Kodların karışık gözükmesi sizi sıkıntıya sokmasın. Açıklaması son derece mantıklıdır. Burada yapılan işlem şudur. Maske katmanının konumunu kucuk_resim üzerinde tam gereken noktaya ayarlamaktır. Yani imleç kırmızı gülün üzerine geldiğinde sadece o alanın büyütülmesi için gereken koordinatları bu komutlar sağlamaktadır.

setProperty komutunu verelim. Property kısmına özellik olarak _x kısmını seçelim. Hedef klibimiz buyuk_resim klibidir. Value alanına (getProperty(_root.kucuk_resim, _x)-_x)*2 yazalım. Bildiğiniz gibi getProperty komutu bir film klibinin özelliklerini alır. Bizim istediğimiz özellik _x özelliğidir.Kucuk_resim klibinin _x değerinden mevcut _x değeri çıkartılır ve büyütme işlemi 2 kat yapıldığından 2 değeri ile çarpılır. Aynı işlemi _y değeri içinde yapalım.

6- Sonra 2. kareyi seçelim. gotoAndPlay(1); yazalım. Böylece 1. karedeki kodlar devamlı çalışır durumda olacaktır.

7- Ana sahnemize dönelim. Hala sahnede sadece kücük_resim klibimiz mevcuttur.En üste 2. bir katman ekleyelim. Kütüphanedeki az evvel hazırladığımız buyuk_resim klibimizi resmin orta kısmına koyalım. Bu klibimizi seçip örnek adı olarak zoom yazalım.En üste 3. katmanımızı yerleştirelim. 1.kareyi seçerek

startDrag(_root.zoom, true);

komutunu yazalım. Herşey hazır filmi test edebiliriz.

Bu klipte maske otomatik olarak fareye yapışacaktır. Eğer isterseniz maske için çizdiğimiz daire üzerine görülmez bir buton yerleştirerek release ve press fare olayları ile startDrag ve stopDrag işlemlerini beraberce uygulayabilirsiniz.

Uygulama Downlaod için tıklayınız

Dijital saat hazırlama işlemi oldukça basit komutlar zinciri ile sağlanabilir. Halbuki kronometre hazırlama işlemi zahmetli sayılabilir. Kronometre ile başlayalım.

Dijital kronometre hazırlama: Bu işlem için faydalanılan komutlar getTimer ve entereFrame olayıdır.En önemli prob em ise kronometreyi çalıştırdıktan sonra sıfırlayıp tekrar çalıştırmanın sıkıntılı komutlar zincirini gerektirmesidir. Zorluğu aşabilmenin en pratik yöntemi fonksiyonların kullanılmasıdır. Şimdi alttaki örneği inceleyelim. Gördüğünüz gibi kronometre için 3 buton kullanılmaktadır. Başlama, duraklama ve sıfırlama butonları.

İpucu: Butonlara dikkat ederseniz gömülü bir görünüm içeriyor. Bu işlemi yapmak çok kolay.Butonların dış kenarlarını seçip üst ve sol kenarı siyah, alt ve sağ kenarı beyaz yaparsanız bu tür bir efekt elde edebilirsiniz. Artık kronometremizi oluşturalım:

1- Yeni bir flash sayfası açalım, sahnede dinamik metin kutusu oluşturalım. Kutunun değişken adını goruntu olarak ayarlayalım. Burada yapılan hata isim için instance name kutusunu kullanmaktır. Bu hataya düşmeyelim ve properties panelinde var alanına bu ismi yazalım.İçine istenilen font ve renklerde rakam için ayarlamaları properties panelinde oluşturalım. Burada öneri daima _typewriter fontunun seçilmesi olmuştur.Bu font harfler ve rakamlar için sabit aralık sağladığından rakamlar değişirken zıplama gibi hatalı bir görüntü vermezler. Sayfanın altındaki digital saate bakın. Burada farklı bir font kullanılmıştır. Rakam değişmelerinde minik oynamalar dikkatinizi çekecektir. Kutuya ilk görünümü sağlaması için 0:00:00:00 yazalım. Bunlar sırası ile saat, dakika, saniye ve saniye kesirlerini göstermektedir.Bu katmana isterseniz bizim yaptığımız gibi süslemeleri ekleyebilirsiniz. Şimdi sahnedeki dinamik kutu ve diğer tüm elemanları seçin ve F8`e basın. Sembol çevirim kutusundan film klibini seçin ve hem kütüphane hem de örnek adı olarak kronometre adını yazın.

2- Sahnedeki klibe çift tıklayarak açın. Örnekte gördüğünüz gibi daha önceden hazırladığınız başlama, duraklatma ve sıfırlama butonlarını klip içine yerleştirin. Her üç butonu seçin ve F8 butonuna basarak bunları film klibine çevirelim.Kütüphane ve örnek adı olarak butonlar yazalım. Şu anda elimizde kronometre klibi ve bunun içinde butonlar klibi bulunmaktadır. Bu yuvalanmanın amacı ilerde _parent komutunu kullanacağımız içindir. Butonlar klibini açalım ikinci kareye bir frame ekleyelim. Bu klibe ilerde enterFrame olayı ekleneceğinden tetikleme için ikinci bir karenin eklenmesinde yarar vardır. Şu anda kodları yerleştirmeye hazırız.

3- Butonlar klibini tekrar açalım ve buradaki kırmızı kare şeklindeki butonu seçip şu komutları atayın:

on(release){
_parent.resetle()
}

Sıfırlama düğmemiz bu olacak. _parent bildiğiniz gibi bir üstteki film klibine işaret eder. Demek ki bu butona basıldığında kronometre klibinin ilk karesine yerleştirilecek resetle fonksiyonunu çalıştırarak sahnedeki rakamları sıfırlayacaktır. Bu fonksiyonu daha sonra anlatacağız. Şimdi yeşil renkli başlat butonunu seçelim ve:

on(release){
_parent.oynat()
}

komutunu verelim. Bu da aynı yerdeki oynat fonksiyonunu çalıştıracaktır. Ortadaki duraklat butonunu seçelim:

on(release){
_parent.duraklat()
}

Yukardaki komutlarda duraklat fonksiyonunu çalıştırarak kronometrenin duraklamasına neden olacaktır.

4- Kronometre film klibini açalım ve içindeki butonlar klibini seçelim. Actionscript panelini açalım ve:

onClipEvent(enterFrame){
_parent.guncelle();
}

komutlarını ekleyelim. enterFrame olayı çok önemlidir . Bu klip her tekrarladığında guncelle fonksiyonunu çağırarak buradaki işlemlerin devamlı icra edilmesini sağlayacaktır. Guncelle fonksiyonu kronometrenin çalışması için gereken komutlar zincirini içerecektir.

Bağlantılar hazırlandı, geriye fonksiyonları hazırlamak kaldı. Şu anda 4 tane fonksiyon hazırlayacağız.

- Oynat
- Duraklat
- Resetle
- Guncelle

Kronometre film klibini açalım ve ilk kareye üstteki 4 komutumuzu yazalım:

function oynat(){
if(duraklama){
baslamazamani=getTimer()-gecenzaman;
}else{
baslamazamani=getTimer();
}
duraklama=false;
zamanlama=true;
}


function duraklat(){
zamanlama=false;
duraklama=true;
}


function resetle(){
zamanlama=false;
duraklama=false;
goruntu="0:00:00:00";
}


function guncelle(){
if(zamanlama){
gecenzaman=getTimer()-baslamazamani;
//saat için ayarlar:
gecenzaman_saat=Math.floor(gecenzaman/3600000);
kalanzaman=gecenzaman-(gecenzaman_saat*3600000);
//dakika için ayarlar:
gecenzaman_dakika=Math.floor(kalanzaman/60000);
kalanzaman=kalanzaman-(gecenzaman_dakika*60000);
//rakam 10`un altında olduğunda başa sıfır eklemek için:
if(gecenzaman_dakika<10){
gecenzaman_dakika="0"+gecenzaman_dakika;
}
//saniye için ayarlar:
gecenzaman_saniye=Math.floor(kalanzaman/1000);
kalanzaman=kalanzaman-(gecenzaman_saniye*1000);
//rakam 10`un altında olduğunda başa sıfır eklemek için:
if(gecenzaman_saniye<10){
gecenzaman_saniye="0"+gecenzaman_saniye;
}
//saniyenin kesirleri için ayarlar:
gecenzaman_kesirler=Math.floor(kalanzaman/10);
//kesir sonucu 10`un altında ise sıfır eklemek için:
if(gecenzaman_kesirler<10){
gecenzaman_kesirler="0"+gecenzaman_kesirler;
}
//sonucu dinamik kutuda gösterelim:
goruntu=gecenzaman_saat+":"+gecenzaman_dakika+":"+gecenzaman_saniye+":"+gecenzaman_kesirler;
}
}

İncelemeye guncelle fonksiyonundan başlayalım. Önceden bu fonksiyonu butonlar klibine enterFrame olayı ile bağladığımızdan devamlı tekrarlanan tek fonksiyon olmaktadır. Öbür fonksiyonlar buton tıklaması ile bir kez çalışmaktadır. Guncelle fonksiyonu devamlı çalıştığından aralıksız olarak sistem bilgisindeki geçen süre milisaniye olarak kayda giriyor ve buradaki komutlarla işlenerek saat, dakika ve saniyelerine ayrılıyor. bu yolla dinamik metin kutusundaki geçen süre devamlı güncelleniyor. Nereye kadar ? Diğer butonlara basarak güncelleme işlemi kesilene kadar.

Burada bir zamanlama değişkeni oluşturuluyor ve bu değişkene onun altındaki komutlar atanıyor. Önce geçenzaman hesaplanıyor. Geçenzaman o andaki süre ile başlama anındaki sürenin farkını veriyor. Başlama anındaki süre ise oynat fonksiyonunda tanımlanacaktır. Bu komutla o andaki geçen süre elimizde oluşturulmuştur. Bu süreyi şimdi saat, dakika, saniye ve saniye kesirlerine çevirerek dinamik metin kutusunda gösterilmesini sağlayacağız.

getTimer komutu bilindiği gibi o anki süreyi milisaniye cinsinden verir. Bu değeri 60*60*1000=3.600.000 rakamına bölersek saat cinsinden değeri elde ederiz. Math.floor komutu ile bu değeri yuvarlıyoruz.(gecenzaman_saat=Math.floor(gecenzaman/3600000);)

Saat değerini böldükten sonra kalanzamanı (kalanzaman=gecenzaman-(gecenzaman_saat*3600000); buluyoruz. Kalan zaman içinde daika değeri var mı araştırıyoruz:

Bunun için kalanzamanı 60*1000=60.000 rakamına bölüyoruz. Dakika değerini tesbit ediyoruz. Yine saat işlemindeki gibi kalanzamandan dakika değerini çıkartıp kalan değerde saniyeyi arıyoruz. Bunun içinde kalandeğeri 1saniye 1000milisaniye olduğu için o rakama bölüyoruz. Hala kalan değer varsa o değeride küsürat olarak kullanıyoruz.

Aralarda gördüğünüz if işlemleri elde edilen değer 10 altında bir rakamsa görselliği bozmamak için yanına sıfır eklemek için kullanılmıştır.

Şu anda elimizde geçen süre ayrıntılı olarak mevcuttur. bunu dinamik metin kutusuna atamak için :

goruntu=gecenzaman_saat+":"+gecenzaman_dakika+":"+gecenzaman_saniye+":"+gecenzaman_kesirler;
komutunu ekliyoruz. Aralara görsellik katmak için iki nokta üstüste ekliyoruz. Bunlar değişken değil string olduğundan çift tırnak içine alıyoruz. Bu fonksiyon tamam. Artık devamlı tekrarlanarak görüntümüzü sağlayacaktır.

Duraklat fonksiyonuna geçelim. Durakla butonuna basıldığında bu fonksiyon çağrılacak ve guncelle fonksiyonu içindeki zamanlama değişkeni false olarak atandığından yukardaki komutlar stoplanacak ve o ana kadar geçen sabit değeri gösterecektir. Burada bahsolunan duraklama değişkeni oynat butonuna tekrar basıldığı an kronometrenin gösterilmeyen süreyi de kapsayacak şekilde çalışması için kullanılmıştır.

Resetle fonksiyonunda ise hem zamanlama hemde duraklama değişkeni false olarak atanmıştır.Duraklama fonksiyonu da kalktığı için tekrar oynat butonuna basıldığında kronometre sıfırdan başlayacaktır. Yine görsellik için sıfırlandığını gösteren:
goruntu="0:00:00:00"; işlemini dinamik kutu için hazırlamakta yarar vardır.

Oynat fonksiyonu sonuncu işlemi tamamlamamızı sağlayacaktır. Burada oynat butonuna basıldığı andaki başlama zamanı değerini elde ediyoruz. Duraklamayı false, zamanlamayı true olarak atayarak guncelle fonksiyonunu çalıştırıyoruz. Dikkat ederseniz oynat butonuna 2 nedenle basılmaktadır. Birincisi ilk defa oynatmak için, ikincisi bir kez oynatıp sonra durakla butonuna bastıktan sonra tekrar oynamasını istediğimiz zaman. Peki bu ayırımı nasıl yapacağız? Bir if işlemini yaparak

if(duraklama){
baslamazamani=getTimer()-gecenzaman;

o anki getTimer değerinden o ana kadar geçen süre çıkartılarak başlamazamni değişkenine atanır. Guncelle fonksiyonuda bu değer işlenerek oynat butonuna ikinci kez basılıp basılmadığı anlaşılır.İkinci kez basılmışsa kaldığı yerden değerler işlemeye devam eder. Değilse (else sorgusu yapılır) ilk kez basılmış kabul edilerek işleme devam edilir.

Herşey yerli yerine oturdu. Klip düzgün çalışacaktır.Fakat zor bir çalışma olduğu da bir gerçek.

Dijital saat hazırlama:

Bu örneğimizde özellikle sıfır eklentisi yapılmamış ve _typewriter fontu dışında bir font kullanılmıştır. Rakamların görselliği bozacak şekilde değişirken nasıl oynadığına dikkat edin.

1- Sahneye dinamik bir metin kutusu ekleyin. Kutunun değişken adını goruntu olarak yazın. Görsellik istiyorsanız dosyadaki gibi bazı eklentiler yerleştirin. Sahnedeki tüm elemanları seçip F8`e basarak film klibi haline getirin.

2- Film klibini seçerek actionscript panelini açın. Alttaki kodları ekleyin:

onClipEvent (enterFrame) {
saat = new Date();
mevcut_saat = saat.getHours();
mevcut_dakika = saat.getMinutes();
mevcut_saniye = saat.getSeconds();
if (mevcut_saat<10) {
mevcut_saat = "0"+mevcut_saat;
}
if (mevcut_dakika<10) {
mevcut_dakika = "0"+mevcut_dakika;
}
if (mevcut_saniye<10) {
mevcut_saniye = "0"+mevcut_saniye;
}
goruntu = mevcut_saat+":"+mevcut_dakika+":"+mevcut_saniye;
}

Tüm işlem bu kadar. Şimdi kodları irdeleyelim. EnterFrame işleyicisi önemlidir ve kodların devamlı icra edilmesini sağlar.

Önce saat adında bir nesne tanımlıyoruz. Bu nesnenin sistem saatinden aldığı bilgiyi saat, dakika ve saniye olarak ayrı değişkenlere atıyoruz. Görsellik katmak için bunlara if komutları ekleyerek şayet rakamlar 10 değerinin altında ise asıl rakamın hemen solunda bir 0 görüntüsü oluşturuyoruz. Son olarakta tüm değerleri goruntu adındaki dinamik metin kutusuna atıyoruz. Buradaki çalışma 24 saat üzerindendir. İsterseniz yeni if komutları ile 12`lik bir saat sistemi de oluşturabilirsiniz.