Flash`a Yeni Bir Effect Paneli Eklemek


Flash 8` de Tools paneline yeni eleman ekleme yöntemi anlatılmıştı. Bu bölümde de yeni bir efekt ekleme yöntemi anlatılacaktır. Bu yazı, konuyu size öğretmek için değil sadece flash`ın bu tür işlemleri nasıl oluşturabildiğini görmeniz amacını ile yazılmıştır. Bu nedenle konuyu okuyup öğrenerek sizde kendinize göre bir effect yaratma beklentisinde olmayınız.

2 örnek verilecektir. İlkinde flash içinde mevcut olan dropShadow efekti kodlarını kullanarak kopya bir efekt paneli , ikincisinde ise mevcut olmayan yeni bir efekt (fade veya solma efekti) oluşturulacaktır.

Uygulama:

1- Golge efekti: (dropShadow kodları modifiye edilerek hazırlanacaktır) ÖRNEK ÇALIŞMAYI İNDİR

Effect panel kodları kurulumda değiştirmediyseniz alttaki dizinde bulunmaktadırlar:

C:\Program Files\Macromedia\Flash 8\en\First Run\Effects

Effect klasörünü açtığınızda burada 3 tür dosya bulacaksınız. jsfl, xml ve swf dosyası. Burada göreceğiniz shared.jsfl dosyasında diğer efektlerin ortak kullandığı paylaşılan kodlar vardır. Jsfl dosyaları efektin oluşması için gereken kodları taşır. Xml dosyası ise efekt paneli açıldığında göreceğiniz elemanları(buton,metin, girdi kutuları vs) oluşturur. Swf dosyaları ise (bu mutlak gerekli bir eleman değildir) bu çalışmaların doğrudan panelden değil de swf dosyası üzerinden yapılmasını sağlar. Biz heriki çalışmada da swf dosyası kullanmayacağız.

Gerek xml gerekse jsfl dosyasının içeriğini görmemiz için notepad programını kullanmanız yeterli olacaktır. Şimdi üstteki dizindeki effect klasörünü açalım. Buradaki DropShadow.xml dosyası üzerine sağ klik yapıp düzenle komutunu vererek notepad ile açalım.Görüntü şöyle olacaktır:

<group name="Effects">
<effect name="Drop Shadow" id = "Drop Shadow" />
<source file = "DropShadow.jsfl" />
<allow types = "button, shape, movie clip, graphic, text, bitmap" />

<properties>
<!-- 17895690 = 0xffffff and 10066329 = 0x999999 -->
<property name="Color" variable="color" min="0" max="17895690" defaultValue="10066329" type="Number" />
<property name="Alpha" variable="alpha" min="0" max="100" defaultValue="75" type="Number" />
<property name="X Offset" variable="xOffset" min="-1000" max="1000" defaultValue="10" type="Number" />
<property name="Y Offset" variable="yOffset" min="-1000" max="1000" defaultValue="10" type="Number" />
<property name="First" variable="first" defaultValue="1" type="Number" />
</properties>

<!-- > buttons="accept, cancel"> -->
<dialog id="dropshadow-dialog" title="Drop Shadow">
<flash id="dropshadow_ui" src="dropshadow.swf" width="772" height="456">
<property id="first" />
<property id="xOffset" />
<property id="yOffset" />
<property id="alpha" />
<property id="color" />
</flash>
</dialog>


</group>

 

Buradaki kırmızı ile yazılan alanları sileceğiz. Bu haliyle xml dosyası DropShadow isimli swf dosyası üzerinden çalışacaktır. Biz doğrudan panel kullanacağımız için bu kısımları silmemiz gereklidir. Olmuşken TR karekter kullanmamak kaydı ile Türkçe`leştirip şu şeklide hazırlayalım:

<group name="Golge Efekti">
<effect name="Golge Ekleme" >
<source file = "golge.jsfl" />
<allow types = "button, shape, movie clip, graphic, text, bitmap" />

<properties>
<!-- 17895690 = 0xffffff and 10066329 = 0x999999 -->
<property name="Renk" variable="color" min="0" max="17895690" defaultValue="10066329" type="Number" />
<property name="Alfa" variable="alpha" min="0" max="100" defaultValue="75" type="Number" />
<property name="X Degeri" variable="xOffset" min="-1000" max="1000" defaultValue="10" type="Number" />
<property name="Y Degeri" variable="yOffset" min="-1000" max="1000" defaultValue="10" type="Number" />
<property name="Ilk" variable="first" defaultValue="1" type="Number" />
</properties>

</group>

Kodlara dikkat ederseniz golge.jsfl dosyası ile ilişkilendirilmiştir. Şimdi bu dosyayı oluşturalım. Bundan önce üsteki kodları txt dosyasına kopyalayarak golge.xml dosyası ismi ile kaydedelim.

Jsfl dosyası için yine aynı effect klasöründeki DropShadow.jsfl dosyası üzerine sağ klik yapalım. Birlikte aç seçeneğinden notepad yolunu gösterip programı açın. Burada altta göreceğiniz tüm kodları kopyalayın:

/**
* The DropShadow effect drops a shadow off the selected items. It can be run
* with an XMLtoUI parameter panel, or with a SWF parameter panel. It is currently
* in SWF mode. To use the XMLtoUI panel, uncomment the "forward(...)" line below.
*
* @author Andrew Guldman, Fluid Inc
*/

/**
* Configure the effect. Create any necessary shared functions.
*/
function configureEffect()
{
// Load shared functions
// The runScript path is relative to the Commands directory.
// shared.jsfl is in the Effects directory
//fl.trace("shared.jsfl path="+ fl.configURI + "Effects/shared.jsfl");
// fl.runScript(fl.configURI + "Effects/shared.jsfl");
//fl.trace("configureEffect(dropshadow)");
}

/**
* Remove the effect.
*/
function removeEffect()
{
reverse();
}

/**
* Perform the effect. Don't do anything.
*/
function executeEffect()
{
var ef = fl.activeEffect;
forward( false, ef.color, ef.alpha, ef.xOffset, ef.yOffset );
}

/**
* Implementation of the drop shadow effect. This could be called from
* the effect file or from the preview.
*
* @param preview Boolean: True to create a preview swf.
* @param color Numeric RGB value
* @param alpha Numeric alpha (0-100)
* @param xOffset Number of pixels to move in x direction
* @param yOffset Number of pixels to move in y direction
*/
function forward(preview, color, alpha, xOffset, yOffset)
{
try
{
doAlert( "forward" );

// initialize
fl.enableImmediateUpdates( true );
fl.runScript(fl.configURI + "Effects/shared.jsfl");

// Shorthand variables
var dom = fl.getDocumentDOM();

// edit the symbol
dom.enterEditMode("inPlace");

// convert the shape into specified type
var libName = Object.fxutil.generateLibName();
Object.fxutil.myTrace(1, "libName=" + libName);
var mySymbolName = dom.convertToSymbol("graphic", libName, "top left");
Object.fxutil.moveToEffectsFolder(mySymbolName.name);

// Copy the selected symbol instance immediately, before monkeying with
// layers, etc.
dom.clipCopy();

// Now select none to facilitate layer manipulation.
// This is important -- the new layer can't be selected if there is
// an active selection in the old layer.
dom.selectNone();

// Put the copies on a new layer. This will make it easier
// to remove the effect later if necessary.
var tl = dom.getTimeline();
var mainLayerName = tl.getLayerProperty("name")
var layerIx = tl.addNewLayer(mainLayerName + " Copy", "normal", false);
var newLayer = tl.layers[layerIx];
newLayer.effectLayer = true;
tl.setSelectedLayers(layerIx, true);
tl.currentLayer = layerIx;
Object.fxutil.myTrace(1, "active layer: current=" + tl.currentLayer + ", selected=[" + tl.getSelectedLayers() + "]");

// Paste the copy in place onto the new layer
dom.clipPaste(true);

// Move the copy
dom.moveSelectionBy({x:xOffset, y:yOffset});
var shadow = dom.selection[0];

// Change the color of the copy
shadow.colorMode = "advanced";
shadow.colorRedPercent = 0;
shadow.colorGreenPercent = 0;
shadow.colorBluePercent = 0;
shadow.colorRedAmount = ((color & 0xff0000) >> 16);
shadow.colorGreenAmount = ((color & 0x00ff00) >> 8);
shadow.colorBlueAmount = (color & 0x0000ff);

// Set the alpha of the copy
shadow.colorAlphaAmount = 0;
shadow.colorAlphaPercent = alpha;

// Make sure that the symbol is not interactive. This doesn't work.
dom.exitEditMode();

if (preview)
{
// Export the preview swf
Object.fxutil.exportPreviewSWF( dom.selection[0] );
}
}
catch (e)
{
fl.trace("Exception in forward: " + e);
}
}

/**
* Remove the effect.
*/
function reverse()
{
try
{
doAlert( "reverse" );

fl.runScript(fl.configURI + "Effects/shared.jsfl");
Object.fxutil.myTrace(1, "CopyToGrid: reverse: start");

// Shorthand variables
var dom = fl.getDocumentDOM();

// Get the name of the main lib item to delete it from the library
var mainLibItem = dom.selection[0].libraryItem;

// edit the symbol
dom.enterEditMode("inPlace");

// Delete layer 2. It contains the copy.
var tl = dom.getTimeline();
tl.deleteLayer(1);

// Break apart the symbol instance on layer 1
tl.currentLayer = 0;
tl.currentFrame = 1;
dom.selectAll();

// Get the name of the library symbol so we can delete it after
// we break it apart
var libItem = dom.selection[0].libraryItem;
dom.breakApart();
var libName = libItem.name;
dom.library.deleteItem(libName);

// go back to the main timeline
dom.exitEditMode();

// delete the folder if it is empty
if (Object.fxutil.folderIsEmpty())
{
doAlert( "deleting effects folder" );
fl.getDocumentDOM().library.deleteItem( Object.fxutil.getEffectsFolderName() );
}
}
catch (e)
{
fl.trace("Exception in reverse: " + e);
}
}

function doAlert( str )
{
//alert( str );
}

Flash programınızı açın ve anamenüden New seçeneğini kullanarak Flash Document değil Flash Javascript Files seçeneğini tıklayın. Bu javascript dosyasında sadece actionscript paneli açılır. Buraya yukarıda kopyaladığınız kodları yapıştırın. Ve bu dosyayı golge.jsfl ismi ile kaydedin. Şu anda elinizde 2 dosya mevcut.( golge.xml, golge.jsfl)

Bu dosyaları effect paneline yapıştırın. Flash programınızı kapatıp açın. Bu restart işlemini yapmazsanız yeni paneliniz görülmeyecektir. Flash programını açtığınızda sahneye bir dikdörtgen çizin , bu dikdörtgenin tamamını seçin ve anamenüden :

Insert--> Timeline Effects kısmına geldiğinizde Golge Efekti adı ile yeni bir efekt panelinin eklendiğini görürsünüz:

Golge ekleme alanına tıkladığınızda alttaki panel açılacaktır.




2-
Fade (solma) efekti: ÖRNEK ÇALIŞMAYI İNDİR

Notepad programını açalım ve buraya:

//Insert menüsündeki efekt adı
<group name="Solma Efekti">
//Menü alt grup adı
<effect name="Solma Efekti">
//İlişkilendirileceği jsfl dosya adı
<source file="solma.jsfl">
//Efektin uygulanacağı sembollerin adı
<allow types="all">
</group>
<properties>
// Efektin başlatılacağı ilk karenin numarası
<property name="Baslama Karesi" variable="alpha" defaultValue="0" type="Number"/>
//Efektin uygulanacağı kare sayısı
<property name="Kare Sayisi" variable="frameAmount" defaultValue="10" type="Number"/>
</properties>

Bu dosyayı solma.xml adı ile kaydedelim.

Bir Flash javascript dosyası (Flash Javascript Files) açalım. Actionscript paneline alttaki kodları yapıştıralım:

function executeEffect(){
var myEffect = fl.activeEffect;
var myDoc = fl.getDocumentDOM();
var myTimeline = myDoc.getTimeline();
var theFrame = myTimeline.currentFrame;
myTimeline.insertFrames(myEffect.frameAmount-1);
myDoc.enterEditMode();
myTimeline = myDoc.getTimeline();
myTimeline.insertFrames(myEffect.frameAmount-1);
myTimeline.createMotionTween(0, myEffect.frameAmount-1);
myTimeline.convertToKeyframes(myEffect.frameAmount-1);
myTimeline.currentFrame = myEffect.frameAmount-1;
myDoc.selectAll();
myDoc.setInstanceAlpha(myEffect.alpha);
myDoc.exitEditMode();
myTimeline = myDoc.getTimeline();
myTimeline.currentFrame = theFrame;
}
function removeEffect(){
var myDoc = fl.getDocumentDOM();
myDoc.enterEditMode();
var myTimeline = myDoc.getTimeline();
var totalFrames = myTimeline.layers[0].frameCount;
myTimeline.removeFrames(1, totalFrames);
myTimeline.setFrameProperty('tweenType', 'none', 0);
myTimeline.currentFrame = 0;
myDoc.selectAll();
myDoc.exitEditMode();
myTimeline = myDoc.getTimeline();
var selFrames = myTimeline.getSelectedFrames();
myTimeline.removeFrames(selFrames[1]+1, selFrames[2]);
myTimeline.setSelectedFrames(selFrames[1], selFrames[1]);
}

Bu dosyayı solma.jsfl adı ile kaydedelim. solma.xml ve jsfl dosyasını C:\Program Files\Macromedia\Flash 8\en\First Run\Effects klasörü içine yapıştıralım. Flash programını kapatıp açalım ve ilk örnekteki gibi sahneye bir çizim yapalım. Bu çizimi seçip anamenüden Insert-->Timeline Effects yolu ile solma efektine ulaşabilirsiniz:

Panel görüntüsü:

Ve 10 kare için efektin görüntüsü :

şeklinde olur.