Behaviors Drag Ap Elements Basic Ve Advanced Menülerinin Anlatımı
Behaviors drag ap elements basic ve advanced menülerinin anlatımı
Drag Layer:
Not: Bir katman aktif durumdaysa Drag Layer eylemi kullanılmaz.Eğer kullanılmaz durumda ise (gri olarak gösterilir), <body> etiketinin seçili olduğundan emin olun.
Drag Layer iki bölümden oluşmaktadır bular Basic ve Advanced Bu ilk aşamada size Basic ‘I anlatacağız.
Basic Ekranındaki Layer ekli olan Draw layerini gösterir.
Movement:Hareket biçiminin hangi şekilde olacağını belirtir.(koordinatları kendinizde verebilrisiniz diğer seçeneği seçerseniz.
Drop Target : Draw layerini otamatik olarak bulunduğu koordinatı alır.
Snap if Within: Belirlenen genişliğie geldiğinde draw layeri istenen noktaya otomatik olarak oturucaktır(ileride detaylı şekilde görülücektir)
Yukarıkı resimde saydamızda ekli olan Draw Layerlerini görebilirsiniz.
Uygulama Adı: puzzle Yapımı
Adım3:Eklemiş olduğumuz Draw Layer’e arkaplan resmi ekleme (Bunun için Dıv tagı seçili olmalıdır ), arka plan resmi dediğim photoshop’da kesmiş olduğumuz resmin ilk parçası (Sol En üstden başlayınız) resim ekleme şekli aşağıdaki gibidir.
Mavi alanla seçili olan Bg İmage yazan bölgeye puzzelin ilk parçasının yolunu veriniz.
Adım4: Bu adımda eklemeiş olduğumuz Draw layere puzzelimizin birinci parçasını ekliyorum(mavi seçili alandada görüldüğü gibi resmin yolu (Browser) gözükmektedir.
Adım5:Şimdi Bir adet draw layer daha ekleyin ve bu layerede puzzelin ikinci paçasını ekleyin draw layere (üst şekildeki gibi)
Yukarıdaki görüldüğü gib ikinci layer’I ekledim ve layerin içine arkaplan olarak puzzelimin ikinci parçasını ekledim.
Üst şekildede görüldüğü gib draw layer lar alt alta dizilerek puzzelin bir bölümü oluşturuldu.
Şimdi puzzelin diğer parçalarınıda aynı şekilde ekleyelim.
Adım7:Puzzelin dördüncü parçasınıda yukarıda anlatılan şekilde ekleyiniz.
Adım8:Puzzelin beşinci parçası aşağıdaki gibidir.
Adım9:
Adım10:Resimleri Draw Tadlara ekledikden soran son görüntü şu şekildir.
Adım11:Oluşturmuş olduğumuz bu Draw Taglar Hareket edebilmesi için Tag Inspector paletinden (F9 kısayol Tuşu) faydalanacağız. Tag palatine gelin Behaviors’u seçin
Adım12: Draw layerlerden oluşturduğumuz birinci layere hareket ettirme işlemine başlayalım bunun için ilk once body Tag’ını seçiniz.ve Behaviors’a geliniz orada (+) işaretine basın ve açılan menüden Drag Layeri seçiniz ve aşağıdaki gib bir pencere açılacaktır.
-Layer yazan kısıma puzzelimizn birinci parçası olan resmin üzerinde buldunuğu divi seçiniz.
Ve Get Current position Butonuna basınız ve o sizing için otomatik olarak koordinatları versin.
Butona bastıkdan sonra dikkat edinizki aşağıda Snap if within yazan kısım otomatik olarak değer alacaktır bu değer hareket sırasında layeri belirtiğiniz koordinatların yakınından geçirirken otomatik olarak o o noktaya oturur bu mesafeyle puzzle resimlerinin yerleri belirlenecek.
Adım13:
Yukarıdaki şekilde de gözüktüğü gibi bu kooridanatlar 2 draw taga yani resmin ikinci parçasına ait.(Eğer Behaviors’da Drag Laye ‘I aktif olarak göremiyor iseniz Body Tag I aktif değildir Body tagını seçip ondan sonra Drag Layer deyiniz.).
Adım14: Bu işlemi son draw layera kadar uygulayın ve bütün layerlara uygulatın son layer aşağdıaki gibidir.
Adım15:Bütün layera Drag Layer uygulandıkdan sonra resmilerin yerlerini değişin ve save deyip kaydedin bu şekil. Ve Tarayıcıda çalıştırın.
Adım 16: Tarayıcdaki son görüntü aşağıdaki gibidir(Activex Denetimine izin vermyei unutmayınız)
Adım17: Ve son hali olarak dizilmiş hali aşağıdadır.
Kaynak: Samet ERDEM
