-99 design studio

Taşındık. YTÜ TeknoPark C1

admin — Tue, 31 Jan 2012 10:26:12 +0000

Yeni adresimiz, YTÜ TeknoPark C1 : )

Flash AS3 bitmap görseli parçalara bölme

alacaesar — Sun, 22 Jan 2012 00:09:17 +0000

Bu örnekte, bir görseli flash’ın içine yükleyip copyPixels yöntemini kullanarak parçalara bölmeyi ve bu bitmap parçaları ile biraz trigonometri kullanarak bir hareket yaratmayı gösteriyorum.
örneği incelemek için online demo.

as3-bitmap-slice-and-dance.zip klasöründe gerekli, baştan sona yorumlarla açıklanmış, .as ve .fla dosyalarını bulabilirsiniz.

Kullanım şekli

SliceNDance.as class’ını ilk önce çağırıyoruz.

import com.minus99.effects.SliceNDance;

Sonra nesneyi bu şekilde oluşturup ve görüntü listesine ekliyoruz.

// parametreler
// SliceNDance(görselLinki, yataydaParçaSayısı, dikeydeParçaSayısı, yarıçap);
var benimMC:MovieClip = new SliceNDance(“02.png”, 5, 25, 160);
addChild(benimMC);

AS3 Polaroid Galeri

burakkarakaya — Mon, 16 Jan 2012 10:02:12 +0000

AS3 Polaroid Galeri. örneğini görmek için online demo linkine tıklayın. rar dosyasının içinde bulunan .as dosyası içinde kapsamlı yorum bulabilirsiniz. kodun nasıl çalıştığını kısaca aşağıda gösteriyorum.

Genel mantığı öncelikle xmlden yüklenecek resimleri for döngüsüne sokarız. Loader nesnesinde Event.COMPLETE(resim yüklenmiş) olayı olunca counter 1 arttırılır. tüm resimler yüklenince counter xmldeki item sayısına eşit olur bundan sonrada openAnimate ile açılış efektini oluştururuz.

for (var i:uint=0; i {
var ldr:Loader=new Loader();
ldr.load(new URLRequest(xml.images.item[i].@large));
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void
{
counter++;
if (counter == xml.images.item.length())
{
counter = 0;
openInt = setInterval(openAnimate, 500);
}

var bmp:Bitmap = e.currentTarget.content;
bmp.smoothing = true;
bmp.x = 15;
bmp.y = 15;
});

}

State ile farklı rotation değerleri gelmesini sağlarız. örneğin rotationValue = Math.random() * 7; bu satırda “+” bir değer gelirken, rotationValue = Math.random() * -7; bu satırda “-” bir değer gelebilir. aynı yapı xkoor ve ykoor değerleri içinde geçerlidir.

if (State)
{
State = false;
rotationValue = Math.random() * 7;

xkoor = sw / 4 * Math.random() – sw;
ykoor = sh / 4 * Math.random() – sh;
}
else
{
State = true;
rotationValue = Math.random() * -7;

xkoor = sw / 4 * Math.random() + sw;
ykoor = sh / 4 * Math.random() + sh;
}

mc’ye con movieclibinin ilk elemanını atarız. daha önce xkoor ve ykoor ile x ve y değerleri sahnenin dışında olan movieclibleri Tween ile x ve y değerlerini 0 yaparız. counter her seferince arttığı içinde sırasıyla 1. movieclip, 2.movieclip… diye giderek tüm mcleri dolaşır ve açılış efektini oluşturmuş oluruz.

private function openAnimate():void
{
var mc = con.getChildAt(counter);
Tweener.addTween(mc, {x:0, y:0, time:.5, transition:”easeOutExpo”});
counter++;

if (counter == con.numChildren)
{
counter = 0;
clearInterval(openInt);
}
}

Paloroid animasyonu için en önemli kısım. Aslında mantığı basit. yapmamız gereken en üst katmadandaki objeye kişi tıklayınca x:500 ve y:-100 yaparak dışarı kaymasını sağlarız. animasyonun onComplete olayındada con.setChildIndex(mc, 0); setChildIndex ile mcyi en alt katmana atarız.

private function OnClick(e:MouseEvent):void
{
con.mouseChildren = con.mouseEnabled = false;

AS3 3D Resim Galerisi

burakkarakaya — Wed, 28 Dec 2011 13:06:39 +0000

AS3 3D Resim Galerisi. örneğini görmek için online demo linkine tıklayın. rar dosyasının içinde bulunan .as dosyası içinde kapsamlı yorum bulabilirsiniz. kodun nasıl çalıştığını kısaca aşağıda gösteriyorum.

Öncelikle mouse’ un stage göre X ve Y oranlarını alırız. var xKoor:Number = mouseX / sw; var yKoor:Number = mouseY / sh;
örneğin stage genişliği 800px, mouse stage üstünde 100px’de ise 100/800 = 0,125
elimizde 0,125 gibi bir oran var. Bunu kendi belirlediğimiz bir değerle çarparız. ben burada 50 dedim. 50*0.125 = 6,25
Çıkan değeride yine kendi belirlediğimiz 25 ile çıkartırız. mouse’un her seferinde konumu değişeceği için bu değerde her seferinde değişecek
ve rotationX değeride değişecek. rotationY aynı işlemleri yaparız.
Böylece büyük resmin mouse’un hareketine göre rotationX ve rotationY değerleri değişeceğinden 3 boyutlu bir görünüm elde edeceğiz.
buradaki en öenmli kısım bigImage movieclibinin ortası referans noktası olması gerekiyor.

private function movement(e:MouseEvent):void
{
var xKoor:Number = mouseX / sw;
var yKoor:Number = mouseY / sh;
Tweener.addTween(bigImage,{rotationY:(25 – (50 * xKoor)), rotationX:(25 – (50 * yKoor)),time:.3,transition:”linear”});
}

Perspective düzgün olabilmesi için PerspectiveProjection her sayfa resize olduğunda sahnenin orta noktası olarak ayarlamamız gerekiyor. bunun için update diye bir fonksiyon yazarız.
sayfa resize olduğunda çalışan adjust fonksiyonu içinde update fonksiyonunu tetikleriz. fieldOfView ile derinliği ayarlar, projectionCenter ilede orta noktayı belirleriz.
en son işlem olarakta bigImage movieclibinin transform.perspectiveProjection özelliğine pp değerini atarız.

private function update():void
{
var pp:PerspectiveProjection = new PerspectiveProjection();
pp.fieldOfView = 50;
pp.projectionCenter=new Point(Math.round(sw * .5), Math.round(sh * .5));

bigImage.transform.perspectiveProjection = pp;
}

Just bowlin’

admin — Sat, 24 Dec 2011 14:43:53 +0000

AS3 Sayfalama Sistemi

burakkarakaya — Wed, 21 Dec 2011 10:00:31 +0000

As3 sayfalama sistemi. örneğini görmek için online demo linkine tıklayın. zip dosyasının içinde bulunan .as dosyası içinde kapsamlı yorum bulabilirsiniz. kodun nasıl çalıştığını kısaca aşağıda gösteriyorum.

dinamik bir yapı kurmak için row, col, thumbWidth, thumbHeight, xPadding, yPadding değerlerini xml dosyamız içindeki settings kısmından alırız. row satır sayısı, col sütun sayısı, thumbWidth genişlik, thumbHeight yükseklik, xPadding ve yPadding ilede thumbnailler arası ne kadar boşluk verebileceğimizi ayarlarız. TotalImage değeri içerisindede toplam resim sayısını tutarızki buda bize sayfalama yaparken gerekecek.

public function MinusGallery(st:Stage, xm:XMLList):void
{
stageRef = st;
xml = xm;

row = xml.settings.@row;
col = xml.settings.@col;
thumbWidth = xml.settings.@thumbWidth;
thumbHeight = xml.settings.@thumbHeight;
xPadding = xml.settings.@xPadding;
yPadding = xml.settings.@yPadding;
totalImage = xml.images.item.length();

init();
}

bu kısımdaki en önemli noktada ilk lastN değerini bulmamız. Bunun için sütun ve satır değerlerini çarpmamız lazım. Ayrıca sütun ve satır değerleri totalImage yani toplam resim sayısından azsa lastN toplam resim sayısına eşitlememiz gerekiyor. viewCount değeride sayfalamada kaç adet thumbnail gösterileceğini belirtiriz.

private function init():void
{
arrBtn = new Array();

con = new MovieClip();
addChild(con);

btnCon = new MovieClip();
btnCon.y = (thumbHeight * row) + (yPadding * row);
con.addChild(btnCon);

thumbCon = new MovieClip();
con.addChild(thumbCon);

viewCount = row * col;
lastN = row * col;
if (totalImage < lastN) lastN = totalImage;

thumbList();
pagegingBtn();
adjust();
}

bu kısımda Math.ceil fonksiyonu ile kaç adet sayfalama butonu oluşturacağımızı belirleriz. Math.ceil içindeki değeri yuvarlar. yani 1.1 gibi bir değeri 2′ye, 0.8 gibi bir değeri 1′e yuvarlar. Böylece sayfalamada kaç adet buton kullanacağımızıbelirleriz. örnek xml dosyamızda toplam 22 item var. sayfadada 9 adet thumb gösterilecek. 22 / 9 = 2,444 gibi bir değer çıkar Math.ceil fonksiyonuda bunu 3′e yuvarlar. böylece 3 tane sayfalama butonu yapmış oluruz.

private function pagegingBtn():void
{
for (var i:uint = 0; i < Math.ceil(totalImage / viewCount); i++)
{
var btn:MovieClip = new MovieClip();
btn.graphics.beginFill(0×525252);
btn.graphics.drawRect(0,0,20,10);
btn.x = i * 25;
btn.k = i;
btnCon.addChild(btn);
btn.addEventListener(MouseEvent.CLICK,onPageClick);
btn.buttonMode = true;
arrBtn.push(btn);
}

pasifBtn(0);
}

closeAnimate fonksiyonunu sayfalama yaptığımız butonları tıkladığımızda tekiklediğimiz
onPageClick fonksiyonu ile tetikleriz. closeAnimate fonksiyonunun amacı thumbnailleri tuttuğumuz
thumbCon içindeki movieclipleri getChildAt ile ulaşıp alpha değerlerini sıfıra çekerek bir kapanış efekti oluşturmak.
tabi sizler daha farklı efektlerde uygulayabilirsiniz.

ayrıca koymuş olduğum closeCounter ilede thumbCon içindeki thumbnail sayısına ulaşınca closeInt intervalini sıfırlayıp
cleanUp fonksiyonu ilede thumbCon içindeki tüm movieclipleri sileriz.

ve burada sayfalama yapmak için en önemli kısım

firstN = current * viewCount;//firstN değerini belirleriz. current değerini onPageClick belirlemiştik. bu değerde aktif sayfayı 1, 2, 3 sayfa gibi onu tutarız.
lastN = firstN + viewCount;//lastN değeride firstN ile viewCount toplarız.
if (totalImage < lastN) lastN = totalImage;//totalImage < lastN küçükse lastN = totalImage

private function closeAnimate():void
{
var mc = thumbCon.getChildAt(closeCounter);
Tweener.addTween(mc,{alpha:0, time:0.12, transition:”linear”});
closeCounter++;

if (closeCounter == thumbCon.numChildren)
{
clearInterval(closeInt);
cleanUp(thumbCon);

firstN = current * viewCount;
lastN = firstN + viewCount;
if (totalImage < lastN) lastN = totalImage;

thumbList();
}
}

bu kısımda satır, sütun dizme işlemleri yapılır. oluşturulan xCounter her seferinde 1 arttırılır. bu değer col değerine eşitlenince
xCounter sıfıra eşitlenir ve yCounter bir arttırılır. bunlarda oluşturulan thumbnaillerin x ve y değerlerine eşitlenince sıralama yapılmış olur.

private function thumbList():void
{
for (var i:uint = firstN; i < lastN; i++)
{
if (xCounter == col)
{
xCounter = 0;
yCounter++;
}

var ldr:Loader = new Loader();
ldr.load(new URLRequest(xml.images.item[i].@thumb));
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onThumbComplete);

var btn:MovieClip = new MovieClip();
btn.graphics.beginFill(0×525252);
btn.graphics.drawRect(0,0,thumbWidth,thumbHeight);
btn.x = xCounter * (thumbWidth + xPadding);
btn.y = yCounter * (thumbHeight + yPadding);
btn.k = xml.images.item[i].@url;
btn.addEventListener(MouseEvent.CLICK,onThumbClick);
btn.buttonMode = true;
btn.alpha = 0;

btn.addChild(ldr);
thumbCon.addChild(btn);

xCounter++;
}

xCounter = 0;
yCounter = 0;

openCounter = 0;
openInt = setInterval(openAnimate, 120);

}

closeAnimate fonksiyonundaki aynı mantık kullanılarak thumbnaillere açılış efekti verilmiştir.

private function openAnimate():void
{
var mc = thumbCon.getChildAt(openCounter);
Tweener.addTween(mc,{alpha:1, time:0.12, transition:”linear”});
openCounter++;

if (openCounter == thumbCon.numChildren)
{
clearInterval(openInt);
thumbCon.mouseChildren = thumbCon.mouseEnabled = true;
btnCon.mouseChildren = btnCon.mouseEnabled = true;
}
}

Ramsey

admin — Tue, 20 Dec 2011 10:42:11 +0000

Cem Hakko

admin — Fri, 02 Dec 2011 23:47:05 +0000

As3 görsel oranını bozmadan fullscreen background image

burakkarakaya — Fri, 02 Dec 2011 15:16:57 +0000

Görsel oranını bozmadan, genişlik ve yükseklik oranlarına göre resize eden full ekran background görseli. örneğini görmek için online demo linkine tıklayın. zip dosyasının içinde bulunan .as dosyası içinde kapsamlı yorum bulabilirsiniz. kodun nasıl çalıştığını kısaca aşağıda gösteriyorum.

ilk önce stage ayarlanıyor

stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE,onStageResize);

dışarıdan resim yükleteceğimiz için loader nesnesi oluşturuluyor. Dışarıdan metin tabanlı(xml,json,txt) yüklenirse URLLoader nesnesi oluşturulur. URLRequest nesnesi ile resmimizin yolu gösterilir. loader nesnemize Complete Event eklenir ki resmin yüklendiğini anlayabilelim.

private function init():void
{
back = new MovieClip();
addChild(back);
var ldr:Loader=new Loader();
ldr.load(new URLRequest(“assets/resminizinyolu.jpg”));
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
}

dışarıdan yüklenen resme e.currentTarget.content ile ulaşırız. smoothing=true yapmamızın nedeni resmi büyüterek resize ettiğimizde pikselleşmenin önüne geçeriz. gelen resmi back movieclibine addChild ederiz. resim yüklendikten sonra onStageResize fonksiyonu ile resmi resize ederiz. normalde onStageResize fonksiyonu browserı resize etiğimizde çalışacaktır. ama biz yüklendikten hemen sonra bu fonksiyonun çalışmasını istiyoruz. bu yüzdende onStageResize(null) ile boş bir değer gönderip çalıştırıyoruz. Eğer değer göndermeden onStageResize() şeklinde yazsaydık flash hata verecekti.

private function onComplete(e:Event):void
{
e.currentTarget.content.smoothing = true;
back.addChild(e.currentTarget.content);
onStageResize(null);
}

ilk önce background görselinin genişliğini ve yüksekliğini stage’ın genişlik ve yüksekliğine eşitliyoruz, bu işlem görselin scaleX ve scaleY değerini değiştirdiği için bu iki değeri birbiri ile karşılaştırarak stage’ın yükseklik/genişlik oranının görselin yükseklik/genişlik oranından büyük olup olmadığını test edebiliyoruz. ona göre de görseli ya genişliğe göre yada yüksekliğe göre ayarlıyoruz.

private function onStageResize(e:Event):void
{
if (back)
{
back.width = stage.stageWidth;
back.height = stage.stageHeight;

if (back.scaleX > back.scaleY )
{
back.scaleY = back.scaleX
}
else
{
back.scaleX = back.scaleY;
}
if (centered)
{
back.x = Math.round(stage.stageWidth / 2 – back.width / 2);
back.y = Math.round(stage.stageHeight / 2 – back.height / 2);
} }
}
}
}

AS3 photo slice transition

alacaesar — Fri, 18 Nov 2011 20:33:36 +0000

Geçiş efektinin incelemek için online demo

Kullanma şekli

İlk adım olarak Slice.as class’ını çağırmanız gerekiyor, bu şekilde.

import com.minus99.transitions.Slice;

bundan sonra geçiş efektini kodun içinde istediğiniz yerde oluşturabilirsiniz.

// parametreler Slice(XMLList, genislik, yukseklik, dilim_sayisi, gecis_hizi);
var slice:MovieClip = new Slice(list, 800, 400, 4, 1.5);
addChild(slice);

parametrelerin açıklaması aşağıdaki gibi.

XMLList: [XMLList] görsellerin url lerini taşıyan xml listesi
Genişlik: [Number] slider’in genişliği, görsellerin genişliği ile aynı olmayabilir
Yükseklik: [Number] slider’in yüksekliği, görsellerin yüksekliği ile aynı olmayabilir
Dilim Sayısı: [int] dilim sayısı, ön değer = 3
Geçiş Hızı: [Number] geçiş hızı, ön değer = 1.5 (sn)

dilimlemelerin açısı yükseklik, genişlik ve dilim sayısına bağlıdır.
Download as3-slice-transition.zip