Flash CS4 Kaynakları

Örnek: Animasyon portföy parçası



Bu örnek, ActionScript bit'lerini tam, ya da ActionScript yönünden ağır bir uygulamada nasıl bir araya getirebileceğini görmeniz için size ilk fırsatı sunmak üzere tasarlanmıştır. Animasyon portföy parçası, varolan bir doğrusal animasyonu (örneğin, istemci için oluşturulan bir parça) alıp bu animasyonu birleştirmek için uygun olan bazı küçük etkileşimli öğeleri çevrimiçi bir portföye nasıl ekleyebileceğinizi gösteren bir örnektir. Animasyona ekleyeceğimiz etkileşimli davranış, izleyenin tıklatabileceği iki düğmeyi içerir: bu düğmelerden biri animasyonu başlatmak ve biri de ayrı bir URL'ye (örn. portföy menüsü veya yazarın ana sayfası) gitmek içindir.

Bu parçayı oluşturma işlemi şu ana bölümlere ayrılabilir:

  1. ActionScript ve etkileşimli öğeler eklemek için FLA dosyasını hazırlama.

  2. Düğme oluşturma ve ekleme.

  3. ActionScript kodu yazma.

  4. Uygulamayı test etme.

Etkileşim eklemeye hazırlama

Animasyonumuza etkileşimli öğeler ekleyebilmemiz için, öncelikle yeni içeriğimizin ekleneceği bazı yerler oluşturularak FLA dosyasının ayarlanması yardımcı olacaktır. Bu işlem kapsamında, Sahne Alanı'nda düğmelerin yerleştirilebileceği gerçek alanın oluşturulması ve FLA dosyasında farklı öğeleri ayrı tutmak için "boşluk" oluşturulması yer alır.

Etkileşimli öğeler eklemek üzere FLA'nızı ayarlamak için:

  1. Etkileşim ekleyeceğiniz doğrusal bir animasyonunuz yoksa, tek ara hareket veya şekil arası gibi tek bir animasyonlu yeni bir FLA dosyası oluşturun. Aksi takdirde, projede sergilediğiniz animasyonu içeren FLA dosyasını açın ve yeni bir çalışma dosyası oluşturmak için bu FLA dosyasını yeni bir adla kaydedin.

  2. İki düğmenin (biri animasyonu başlatmak ve biri de yazar portföyüne ya da ana sayfaya bağlanmak için) ekranın neresinde görüntülenmesini istediğinize karar verin. Gerekirse, bu yeni içerik için Sahne Alanı'nda bazı boşlukları temizleyin veya Sahne Alanı'na bazı boşluklar ekleyin. Animasyonda yoksa, birinci karede bir karşılama ekranı oluşturmak isteyebilirsiniz. (Büyük ihtimalle Kare 2 veya sonrasında başlatılması için animasyonu kaydırmak istersiniz.)

  3. Zaman Çizelgesi'nde diğer katmanların yukarısına yeni bir katman ekleyin ve bunu düğmeler olarak yeniden adlandırın. Bu, düğmeleri ekleyeceğiniz katman olacaktır.

  4. Düğmeler katmanının yukarısına yeni bir katman ekleyin ve bu katmana eylemler adını verin. Burası, uygulamanıza ActionScript kodunu ekleyeceğiniz yer olacaktır.

Düğme oluşturma ve ekleme

Daha sonra, etkileşimli uygulamamızın merkezini oluşturacak düğmeleri gerçek anlamda oluşturup konumlandırmamız gerekecektir.

Düğmeleri oluşturup FLA dosyasına eklemek için:

  1. Çizim araçlarını kullanarak, düğmeler katmanındaki birinci düğmenizin ("oynat" düğmesi) görsel görünümünü oluşturun. Örneğin, en üst kısmında metnin yer aldığı yatay bir oval çizebilirsiniz.

  2. Seçim aracını kullanarak tek bir düğmenin tüm grafik parçalarını seçin.

  3. Ana menüden Değiştir > Sembole Dönüştür seçeneklerini belirleyin.

  4. İletişim kutusunda sembol türü olarak Düğme seçeneğini belirleyin ve sembole bir ad verip Tamam'ı tıklatın.

  5. Düğme seçili durumdayken, Özellik denetçisinde düğmeye playButton örnek adını verin.

  6. İzleyeni, yazarın ana sayfasına götürecek düğmeyi oluşturmak için 1 ile 5 arasındaki adımları yineleyin. Bu düğmeye homeButton adını verin.

Kod yazma

Tümüne aynı yerden girilse de, bu uygulamanın ActionScript kodu, üç işlev kümesine ayrılabilir. Kodun yapması gereken üç şey şunlardır:

  • SWF dosyası yüklendiği anda (oynatma kafası Kare 1'e girdiğinde) oynatma kafasını durdurma.

  • Kullanıcı oynatma düğmesini tıklattığında SWF dosyasının oynatılmaya başlaması için bir olayı dinleme.

  • Kullanıcı yazarın ana sayfası düğmesini tıklattığında tarayıcıyı uygun URL'ye göndermek için bir olayı dinleme.

Kare 1'e girdiğinde oynatma kafasını durdurmak için kod oluşturma:

  1. Eylemler katmanının Kare 1'inde anahtar kareyi seçme.

  2. Eylemler panelini açmak için, ana menüden Pencere > Eylemler seçeneklerini belirleyin.

  3. Komut Dosyası bölmesinde şu kod girin:

    stop();

Oynatma düğmesi tıklatıldığında animasyonu başlatmak üzere kod yazmak için:

  1. Önceki adımlarda girilen kodun sonuna iki boş satır ekleyin.

  2. Komut dosyasının alt kısmına şu kodu girin:

    function startMovie(event:MouseEvent):void 
    { 
        this.play(); 
    }

    Bu kod, startMovie() adında bir işlevi tanımlar. startMovie() çağrıldığında, ana zaman çizelgesinin oynatmayı başlatmasını sağlar.

  3. Önceki adımda eklenen kodun ardından gelen satıra bu kod satırını girin:

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Bu kod satırı, playButton öğesinin click olayının dinleyicisi olarak startMovie() işlevini kaydeder. Başka bir deyişle, playButton adındaki düğme her tıklatıldığında startMovie() işlevinin çağrılmasını sağlar.

Ana sayfa düğmesi tıklatıldığında tarayıcıyı bir URL'ye göndermek üzere kod yazmak için:

  1. Önceki adımlarda girilen kodun sonuna iki boş satır ekleyin.

  2. Komut dosyasının alt kısmına bu kodu girin:

    function gotoAuthorPage(event:MouseEvent):void 
    { 
        var targetURL:URLRequest = new URLRequest("http://example.com/"); 
        navigateToURL(targetURL); 
    }

    Bu kod, gotoAuthorPage() adında bir işlevi tanımlar. Bu işlev öncelikle URL http://example.com/ adresini temsil eden bir URLRequest örneği oluşturur ve daha sonra bu URL'yi navigateToURL() işlevine ileterek kullanıcının tarayıcısının bu URL'yi açmasını sağlar.

  3. Önceki adımda eklenen kodun ardından gelen satıra bu kod satırını girin:

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Bu kod satırı, homeButton öğesinin click olayının dinleyicisi olarak gotoAuthorPage() işlevini kaydeder. Başka bir deyişle, homeButton adındaki düğme her tıklatıldığında gotoAuthorPage() işlevinin çağrılmasını sağlar.

Uygulamayı test etme

Bu noktada, uygulamanın tamamen işlevsel olması gerekir. Emin olmak için durumun böyle olup olmadığını test edelim.

Uygulamayı test etmek için:

  1. Ana menüden, Kontrol Et > Filmi Test Et seçeneklerini belirleyin. Flash SWF dosyasını oluşturur ve bir Flash Player penceresinde açar.

  2. Beklediğiniz işlemi yaptıklarından emin olmak için her iki düğmeyi de deneyin.

  3. Düğmeler çalışmazsa, kontrol etmeniz gereken şeyler şunlardır:

    • Düğmelerin belirgin örnek adları var mı?

    • addEventListener() yöntemi çağrıları, düğmelerin örnek adlarıyla aynı adları mı kullanıyor?

    • addEventListener() yöntemi çağrılarında doğru olay adları kullanılıyor mu?

    • İşlevlerin her biri için doğru parametre belirtilmiş mi? (Her ikisi de MouseEvent veri türünde tek bir parametre içermelidir.)

    Bunların tümü ve diğer olası hataların çoğu, Filmi Test Et komutunu seçtiğinizde veya düğmeyi tıklattığınızda bir hata mesajı vermelidir. Derleyici hataları (Filmi Test Et seçeneğini ilk belirlediğinizde gerçekleşen hatalar) için Derleyici Hataları paneline bakın ve çalışma zamanı hataları (SWF oynatılırken gerçekleşen hatalar, örn. bir düğmeyi tıklattığınızda) için Çıktı panelini kontrol edin.