SyntaxHighlighter 2.0 – 텍스트큐브에 적용하기

프로그래밍 소스코드를 보기좋게 변환해주는 js플러그인을 소개합니다.

많은 분들의 블로그에서 볼수있는 플러그인인데요.

이번에 2.0으로 버젼을 업데이트 하면서 ActionScript 3.0을 공식적으로 지원하기에,

블로그(텍스트큐브)에 적용하는 방법을 소개합니다.

일단 아래의 주소에서 파일을 다운로드 받으면 됩니다.

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

현재(09년 7월 19일) 기준으로 2.0.320 버젼이 최신버젼입니다.

파일을 다운받아 압축을 풀면, 다음과 같은 파일들이 나옵니다.

1355208924.zip

이들 중 scripts, src, styles 3개의 폴더를 자신의 skin폴더에 업로드합니다.

루트폴더에 있는 test.html파일을 열어서, 소스를 열어 선택된 부분을 카피합니다.

이 부분을 skin.html파일 상단에 추가합니다.

수정한후 어드민 페이지에서 스킨설정 다시 한번 해주셔야 되는건 아시죠? ^^

이렇게 세팅하고나면 기본적인건 다 된겁니다.

이제 에디터에서 사용법을 살펴보지요.

에디터에서 html에디트 모드로

function test() : String

{

return 10;

}

</pre>

이런식으로 쓰면 내부적으로 변환해서

위처럼 나오게 되는거죠.

소스코드를 공유할때는 Syntax Color등이 자동으로 설정되어 표시되기때문에 상당히 효과적이라고 생각합니다.

“<pre class=”brush: c-sharp;”>” 이부분에서 brush의 value값이 어떤것들이 있는지 살펴보겠습니다.

가장 상단부분에 있는 ActionScript3가 저는 가장 반갑네요.

<pre class=’brush:as3;’></pre> 이라고 쓰면 되겠죠?

액션스크립트(ActionScript 3.0)에 경우는 js파일을 include되는 부분이 빠져있네요.
<script type=”text/javascript” src=”scripts/shBrushAS3.js”></script>
한줄을 추가해주셔야 에러없이 정상 작동합니다.

AS3 Apple Style Preloader

2009/05/22
/
ActionScript dev
/
댓글 없음

If you want an easy way to get an Apple style preloader for AS3, as seen below, it’s as simple as this class, which uses the Flash Drawing API, so it’s extremely light.

Download CircleSlicePreloader.as

package net.stevensacks.preloaders
{
        import flash.events.TimerEvent;
        import flash.events.Event;
        import flash.display.Sprite;
        import flash.display.Shape;
        import flash.utils.Timer;

        public class CircleSlicePreloader extends Sprite
        {
                private var timer:Timer;
                private var slices:int;
                private var radius:int;

                public function CircleSlicePreloader(slices:int = 12, radius:int = 6)
                {
                        super();
                        this.slices = slices;
                        this.radius = radius;
                        draw();
                        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
                }
                private function onAddedToStage(event:Event):void
                {
                        removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
                        addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
                        timer = new Timer(65);
                        timer.addEventListener(TimerEvent.TIMER, onTimer, false, 0, true);
                        timer.start();
                }
                private function onRemovedFromStage(event:Event):void
                {
                        removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
                        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
                        timer.reset();
                        timer.removeEventListener(TimerEvent.TIMER, onTimer);
                        timer = null;
                }
                private function onTimer(event:TimerEvent):void
                {
                        rotation = (rotation + (360 / slices)) % 360;
                }
                private function draw():void
                {
                        var i:int = slices;
                        var degrees:int = 360 / slices;
                        while (i--)
                        {
                                var slice:Shape = getSlice();
                                slice.alpha = Math.max(0.2, 1 - (0.1 * i));
                                var radianAngle:Number = (degrees * i) * Math.PI / 180;
                                slice.rotation = -degrees * i;
                                slice.x = Math.sin(radianAngle) * radius;
                                slice.y = Math.cos(radianAngle) * radius;
                                addChild(slice);
                        }
                }
                private function getSlice():Shape
                {
                        var slice:Shape = new Shape();
                        slice.graphics.beginFill(0x666666);
                        slice.graphics.drawRoundRect(-1, 0, 2, 6, 12, 12);
                        slice.graphics.endFill();
                        return slice;
                }
        }
}

package net.stevensacks.preloaders

{

import flash.events.TimerEvent;

import flash.events.Event;

import flash.display.Sprite;

import flash.display.Shape;

import flash.utils.Timer;

public class CircleSlicePreloader extends Sprite

{

private var timer:Timer;

private var slices:int;

private var radius:int;

public function CircleSlicePreloader(slices:int = 12, radius:int = 6)

{

super();

this.slices = slices;

this.radius = radius;

draw();

addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

}

private function onAddedToStage(event:Event):void

{

removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);

timer = new Timer(65);

timer.addEventListener(TimerEvent.TIMER, onTimer, false, 0, true);

timer.start();

}

private function onRemovedFromStage(event:Event):void

{

removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);

addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

timer.reset();

timer.removeEventListener(TimerEvent.TIMER, onTimer);

timer = null;

}

private function onTimer(event:TimerEvent):void

{

rotation = (rotation + (360 / slices)) % 360;

}

private function draw():void

{

var i:int = slices;

var degrees:int = 360 / slices;

while (i--)

{

var slice:Shape = getSlice();

slice.alpha = Math.max(0.2, 1 - (0.1 * i));

var radianAngle:Number = (degrees * i) * Math.PI / 180;

slice.rotation = -degrees * i;

slice.x = Math.sin(radianAngle) * radius;

slice.y = Math.cos(radianAngle) * radius;

addChild(slice);

}

private function getSlice():Shape

{

var slice:Shape = new Shape();

slice.graphics.beginFill(0x666666);

slice.graphics.drawRoundRect(-1, 0, 2, 6, 12, 12);

slice.graphics.endFill();

return slice;

}

Posted in Actionscript, Flash, Tips/Tricks

AS3 – 30 Classes bem úteis!

2009/05/22
/
ActionScript dev
/
댓글 없음

출처 : http://superativos.wordpress.com/2009/05/11/as3-30-classes-bem-uteis/

Estava procurando uma classe para manipular som, então encontrei essa lista… muito boa por sinal. Boa pedida p quem Trabalha com AS3.

SoundManager
http://evolve.reintroducing.com/2008/07/15/news/as3-soundmanager/

Esta classe, padrão singleton, serve para fazer exactamente o que o titulo diz, um manager de som, o que torna o adicionar de som aos nosso projectos bem simples. Esta class depende do TweenLite para o fade de som.

Active Window Blur – http://blog.onebyonedesign.com/?p=81

Coloca um painel de blur sobre um video, imagem ou movieclip.

TweenMax – http://blog.greensock.com/tweenmaxas3/

Construído sobre a base do tweenLite e tweenFilterLite, esta classe aperfeiçoa os métodos de ambas as origens mostrando no final um motor de animação com mais algumas funções como pause/resume, sequências mais fáceis, animação e cor HEX e muito mais…

YouTube Class – http://labs.flexcubed.com/?p=13

Uma class que usa a API do google para devolver playlists e “featured” vídeos.

Pulse Particle System – http://rogue-development.com/pulseParticles.html

Um sistema que pode não parecer ter muita utilidade. Trabalha exclusivamente com partículas e AS3, para criar os mais variados efeitos como podem ver na pagina de exemplos.

Animated BitMap – http://blog.hexagonstar.com/animatedbitmapclass/

Uma das classes mais úteis, visto que o flex / flash não têm suporte a gif’s animados, esta class utiliza varias imagens fixas com apenas uma desviação de padrão para animar uma imagem, podem-se conseguir resultados fantásticos.

Queue Loader – http://code.google.com/p/queueloader-as3/wiki/QueueLoader

Um projecto que permite monitorizar o carregar de objectos e assets bem como monitorizar o seu processo de carregamento. Este projecto é Open Source e aceitam contribuidores, mais informações na sua pagina em cima.

Prioritization – http://www.danielhai.com/blog/?p=60

Uma class que funciona com Loader, URLLoader e Sound Objects, que permite indicar a prioridade de determinados métodos e objectos para que estes sejam executados na ordem que desejamos.

DistortImage – http://www.rubenswieringa.com/blog/distortimage

Um classe que permite fixar pontos e distorcer uma imagem consoante a nossa necessidade tudo isto em AS3.

Layout Class – http://www.senocular.com/?id=2.8

Uma colecção de 3 Classes, Layout, LayoutConstraint, LayoutManager, principalmente feita para o Flash CS, não deixa de ser interessante ver-la em funcionamento. Permite fixar um objecto sempre no centro do stage, definir width e height consoante o tamanho do stage, e mais alguns elementos importantes no layout. A nível de flex estas classes são implementadas nativamente.

Color Sampler – http://www.somerandomdude.net/blog/flash/actionscript-3-color-sampler-class-download/

Sistema que permite recolher de objectos o seu padrão RGB, hue, saturation e brightness. Muito util quando necessário trabalhar com imagens.

2D Character Rigging Classes – http://www.algorithmist.net/rigging.html

Uma classe que permite personalizar aspectos de caracteres 2d, ou seja, no exemplo de um boneco, permite personalizar a cara, braços, posição, afastamento, etc…

XML Loader Class – http://www.mediareason.com/blog/?p=20

Uma class que faze exactamente o que o proprio nome indica, carrega XML de uma maneira bem simples.

Style Collection – http://www.gskinner.com/blog/archives/2007/06/stylecollection.html

Uma class que permite criar grupos de estilos (styles) que são aplicados e automaticamente actualizados em diversos componentes. Principalmente orientado para Flash CS.

AS3 Easing – http://www.uza.lt/codex/as3-easing/

Mais uma class de animação/transição, com a diferença de permitir definir pontos de animação.

CSS Loader – http://www.rubenswieringa.com/blog/cssloader

Uma class que permite carregar ficheiros CSS de estilo para qualquer aplicação flex no seu arranque.

AutoComplete Text Field – http://asserttrue.com/articles/2006/04/09/actionscript-projects-in-flex-builder-2-0

Permite a criação de campos de texto com auto complete.

fZIP – http://wahlers.com.br/claus/blog/zip-it-up/

Uma classe que permite carregar arquivos .zip e abrir os ficheiros nele contidos mesmo antes de carregar o arquivo completo. Desenhado especialmente para projectos AIR, em alguns casos pode ser conseguido utiliza-a com projectos Flash/Flex se o arquivo zip for “injectado” com um Adler32 checksum (patch) este pode ser aberto no browser e funcionará correctamente, como podem ver no exemplo da pagina oficial.

Reflection Class – http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html

Uma class que permite criar reflexos de imagens.

Reflection Manager – http://www.wietseveenstra.nl/blog/2007/05/reflection-manager-10/

Uma classe derivada da anterior, mas muito mais completa.

Flex Loading Image – http://www.munkiihouse.com/?p=135

Implementa a class image do flex, e introduz uma barra de progresso que nos permite visializar o carregamento da imagem.

Audio Visualization – http://blog.benstucki.net/?id=18

Permite criar varios estilos de analyser’s para audio, num componente bastante interessante como podem ver no seu explorer. Programado para o Flex.

FishEye – http://www.quietlyscheming.com/blog/components/fisheye-component/

Um conjunto de classes que permite criar uma apresentação/menu ao estilo do mac, embora de uma forma bem elaborada, permite o controlo absoluto da sua apresentação. Especialmente programado para o flex.

FlvWriter – http://www.zeropointnine.com/blog/simpleflvwriteras-as3-class-to-create-flvs

Uma class para aplicativos AIR que permite escrever/gravar um ficheiro flv (video).

Flex XLS Read/Write – http://adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1375018

Uma class que permite escrever e ler arquivos .xls no flex.

MP3 Player – http://msdevstudio.com/blog/2008/06/25/flex-action-script-mp3-player-equalizer/

Uma class AS3 programada para o flex, que permite a criação e controlo de um simples player de mp3 com um equalizador gráfico.

URLUtils – http://msdevstudio.com/blog/2008/05/13/flex-deep-linking-detalhes-browser/

Uma class que permite obter parametros do browser, como pagina actual, servidor, porta, caminhos relativos e absolutos…

DataGrid Colorize – http://msdevstudio.com/blog/2008/05/25/flex-datagrid-mudando-a-cor-de-uma-linhacoluna/

Permite colorir determinada linha/campo/coluna da tabela com as cores definidas pelo utilizador, permite também colorir apenas campos com determinado valor.

Feed Reader – http://msdevstudio.com/blog/2008/06/02/tutorial-package-flex-leitor-rss/

Uma class que le conteudo de um feed RSS e tranforma o seu conteudo num arrayColelction pronto a ser usado numa datagrid.

Password Generator – http://msdevstudio.com/blog/2008/06/13/flex-password-generator-criador-de-passwords/

Permite gerar Passwords/Strings aleatórias, podendo ou não usar caracteres especiais.

MP3Lite – http://www.ederlima.com.br/blog/mp3lite.

Uma class que permite a leitura de musica mp3, como ficheiro unico ou com recuso a playlist em XML, controlo de volume, info ID3, streaming, etc..

[via msdevstudio]

Deface for flash10

I’ve updated the Deface face recognition library that I created last year to take advantage of the new Vector class and some other improvements.

google code page

It should be fast enough for some limited real-time use now. For instance, the demo below typically finds my face in < 80ms once it’s aquired it. That’s only about 12fps, but for certain applications that would be sufficient. And I’m sure that the tracking can be improved a lot. There’s no real prediction now as is, nor position averaging, etc.

Allow this to use your webcam if you have one. If you don’t, you’re out of luck.

source

———————————————————————————————

http://code.google.com/p/deface/

Based on ideas from OpenCV and the well-known Viola and Jones face detection paper, but NOT associated with either. Deface uses XML encoded classifiers to visually detect and track objects (especially faces) in BitmapData. Compatible with classifiers from OpenCV.

———————————————————————————————

Live Examples

You can see the code in action here:

Source code for the first demo is available on the download page. See DemoCode.

MariLena : OpenCV port to ActionScript 3 (AS3 / Flash)

I dreamed about it, they finally did it ^^.

A crazy guy named Ohtsuka Masakazu have ported the face detection part of OpenCV to AS3 and added the source code named Marilena to the Spark Project a few weeks ago (can’t believe I haven’t notice before today)

Mario Klingemann from Quasimondo.com already made some optimization (see his blog)

I made some test today with a stupid texture, starting from Mario’s webcam example and that’s just fun !!! Well yes, it’s still slow (15 fps on a good computer), but this is just the beginning as I believe that a lot of optimization can still be done, and so what anyway ? It’s flash, it’s everywhere, nothing to install, the fun is there without downloading anything. I really believe in it ! Now with this and FLARToolKit (ARToolKit port to AS3), augmented reality and computer vision is really getting into Flash for sure, and it’s going to give to the community some great opportunity !! I’m looking forward about it

Please, have a test at Mario’s example here

and take also a look at what they did at Squidder.com

Realtime Face Detection in Flash from squidder on Vimeo.

For more info, check out http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/

AS3 Version of OpenCV for Facial Detection, Web Cam Object Detection, Head Tracking, 3D Library Integration and more with Open Computer Vision Library for Flash

Libspark from Japan is a treasure trove of great flash advancements, they seem to realize the great things that can come from porting in existing solid libraries from C/C++ etc into flash and have been scoring lately including augmented reality in flash porting the ARToolkit to FLARToolkit. Recently a port of openCV for as3 called Marilena was found and it is for object detection and decent facial recognition (it is a computer vision library from intel) considering the processing power needed to do this.

Face Detection: Here is the sample included with Marilena showing facial detection on an image.

Lots of recent action has blown up on this front from Mr doob, quasimondo (optimizing the Marilena classes for better performance) and Boffwswana. Also there is a kit called deface by sshipman that is the first foray into this a year ago doing similar things but it was just a bit before it’s time and a bit slow in previous versions of flash, it performs decent now in this sample. Flash 10 performance of the AVM2 and future directions with Alchemy will lead to more interesting stuff just like this.

Mr. doob head tracking sample, be sure to check lots of other examples there

Boffswana example of head tracking Johnny Lee Wii style with only a webcam and flash, no wiimote needed since it uses facial detection to check where you are and how close you are in the screen and then moves accordingly.

This is stemming from the recent explosion of the FLARToolkit and augmented reality in flash as well as the gimmicks used by Nintendo with the wii and Johnny Lee’s great head tracking advancements. Porting great libraries to flash seems to be the phase we are entering now judging by the recent excitement around Adobe Alchemy and the LLVM along with the lead from the libspark.org contributors. We have also seen this heavily last year in ports of Box2D for 2d physics and other toolkits using established working code and porting that to flash now that is is mostly capable of handling the performance.

OpenCV (Open Computer Vision Library by Intel) is quite a powerful platform that allows you to do all this and now it is available in flash. There are other great libraries for nearly all platforms now. I have done some previous work with Aforge which is also a port of OpenCV mainly for motion detection. This was always around but not until the recent performance updates and the innovation that has come with Alchemy and the thinking that goes along with that (porting in libraries to flash from C/C++ etc), has allowed this to flourish in flash and thus the web.

The amazing new things we can do with flash by porting in existing libraries is only going to get more intense as alchemy and flash 10 are even more mainstream. It is almost as if Flash will eventually just become a web renderer and simplified front end to many great toolkits that exist in more native environments like C/C++ but with the speed and distribution access of the web with Flash. Exciting times ahead.

PureMVC #3 (Hello Flash 2)

2009/05/11
/
ActionScript dev
/
댓글 없음

지난시간에 이어 이번 글은 아래 pureMVC 측에서 AS3.0 예제로 제공하는 소스를 가지고 설명하겠습니다.
http://puremvc.org/pages/downloads/AS3/Demo_AS3_Flash_HelloFlash.zip

이번엔 Mediator 와 Proxy 에 관해 알아보겠습니다.
용어 해석으로는
Mediator 는 중재인, 조정자, 매개자 라고 하네요.
Proxy 는 대리권, 대리, 위임장 등으로 나오는 군요^^

Mediator 는 View 에 있는 UI 등의 Interaction 반응을 처리해주는 역활을 주로 하고 화면에 보여주는 모든 부분에 대한 처리를 한다고보시면 됩니다.

Proxy 는 Model 의 서브 클래스로 프로그램에서 중점적으로 처리해줘야 할 알고리즘이나 로직에 관한 풀이를
하고 있습니다. 또한 Proxy 는 로직 내부에서 생성되는 이벤트를 통지할 수는 있지만 따로 생성된 이벤트를 받을 수는 없습니다. 따라서 자연스럽게 이벤트를 받아 처리해주는 부분은 Command 와 Mediator 이렇게 두 부분을 나뉘게 됩니다.

이번 시간 처음 볼 소스는
StageMediator.as 가 되겠습니다.

package org.puremvc.as3.demos.flash.helloflash.view
{
import flash.events.Event;
import flash.display.Stage;
import flash.geom.Rectangle;
import flash.events.MouseEvent;

import org.puremvc.as3.interfaces.*;
import org.puremvc.as3.patterns.mediator.Mediator;

import org.puremvc.as3.demos.flash.helloflash.ApplicationFacade;
import org.puremvc.as3.demos.flash.helloflash.view.HelloSpriteMediator;
import org.puremvc.as3.demos.flash.helloflash.view.components.HelloSprite;
import org.puremvc.as3.demos.flash.helloflash.model.SpriteDataProxy;

/**
* A Mediator for interacting with the Stage.
*/
public class StageMediator extends Mediator implements IMediator
{
// Cannonical name of the Mediator
public static const NAME:String = ‘StageMediator‘;

다른 모든 MVC 의 서브 클래스들 과 마찬가지로 각각의 패턴과 인터페이스를 상속받아 생성되며
각각 자신만의 NAME 과 같은 문자열 구분자로 서로를 구분하고 있습니다.

/**
* Constructor.
*/
public function StageMediator( viewComponent:Object )
{
// pass the viewComponent to the superclass where
// it will be stored in the inherited viewComponent property
super( NAME, viewComponent );

역시 마찬가지로 상속받은 상위클래스를 초기화 시켜주기 위해 super 메소드를 호출해 줍니다.
이때 Mediator 의 경우 View(화면 객체) 에 해당하는 객체를 같이 넘겨주어 이 클래스 전체에서 사용하게 됩니다.

// Retrieve reference to frequently consulted Proxies
spriteDataProxy = facade.retrieveProxy( SpriteDataProxy.NAME ) as SpriteDataProxy;

// Listen for events from the view component
stage.addEventListener( MouseEvent.MOUSE_UP, handleMouseUp );
stage.addEventListener( MouseEvent.MOUSE_WHEEL, handleMouseWheel );

}

/**
* List all notifications this Mediator is interested in.
* <P>
* Automatically called by the framework when the mediator
* is registered with the view.</P>
*
* @return Array the list of Nofitication names
*/
override public function listNotificationInterests():Array
{
return [ ApplicationFacade.STAGE_ADD_SPRITE
];
}

Mediator 에서는 현재 View 에서 반응해야할 이벤트(공지)들만 선별하여 이벤트를 받겠다고 등록해야 합니다. Flash Event 의 경우 addEventLitener 를 통해 함수와 바로 매칭시켜 주지만, Mediator의 경우 listNotificationInterests 라는 함수를 재정의(override) 하여 등록하게 됩니다.
등록 방법은 위와같이 공지받고 싶은 문자열을 배열로 return 해주면 완료됩니다.
이 함수는 현재 클래스의 Mediator 가 등록될 때 자동으로 호출되며 해당 공지들을 받겠다고 등록되어 집니다.
이곳에서는 STAGE_ADD_SPRITE 라는 공지를 받겠다고 등록해 놓았네요.
이렇게 등록되면 나중에 어느 위치에서도 해당 공지가 발생 할 때 현재 클래스로 공지가 들어오게 됩니다.
공지를 받는 부분은 아래 handleNotification 메소드 를 통해 받게 됩니다.

/**
* Handle all notifications this Mediator is interested in.
* <P>
* Called by the framework when a notification is sent that
* this mediator expressed an interest in when registered
* (see <code>listNotificationInterests</code>.</P>
*
* @param INotification a notification
*/
override public function handleNotification( note:INotification ):void
{
switch ( note.getName() ) {

// Create a new HelloSprite,
// Create and register its HelloSpriteMediator
// and finally add the HelloSprite to the stage
case ApplicationFacade.STAGE_ADD_SPRITE:
var params:Array = note.getBody() as Array;
var helloSprite:HelloSprite = new HelloSprite( spriteDataProxy.nextSpriteID, params );
facade.registerMediator(new HelloSpriteMediator( helloSprite ));
stage.addChild( helloSprite );
break;
}
}

바로 위에서 등록된 이벤트(공지) 들이 발생하여 전달될 때 받아오는 부분 입니다.
함수 파라메터 로는 note:INotification 를 받아오게 됩니다.
사용자는 이 공지(note)의 이름을 검사하여 해당 공지가 어떤 공지인지를 알아내고 그에 맞추어 명령들을 실행해 줍니다.
이 예제에서는 ApplicationFacade.STAGE_ADD_SPRITE 하나만 등록되어있기 때문에 공지가 오면
무조건 ApplicationFacade.STAGE_ADD_SPRITE 밖에 없겠군요 ㅎㅎ..
지난시간 설명드린것 과 같이 공지를 사용하는 몇몇 함수들 [ note.getName(), note.getBody() ] 을 통해
작업을 진행하게 됩니다.
여기서는 HelloSprite 객체를 만들며 만들어진 객체에 Mediator를 등록 시키고 화면에 추가해 주는 역활을 하고 있군요.

// The user has released the mouse over the stage
private function handleMouseUp(event:MouseEvent):void
{
sendNotification( ApplicationFacade.SPRITE_DROP );
}

// The user has released the mouse over the stage
private function handleMouseWheel(event:MouseEvent):void
{
sendNotification( ApplicationFacade.SPRITE_SCALE, event.delta );
}

/**
* Cast the viewComponent to its actual type.
*
* <P>
* This is a useful idiom for mediators. The
* PureMVC Mediator class defines a viewComponent
* property of type Object. </P>
*
* <P>
* Here, we cast the generic viewComponent to
* its actual type in a protected mode. This
* retains encapsulation, while allowing the instance
* (and subclassed instance) access to a
* strongly typed reference with a meaningful
* name.</P>
*
* @return stage the viewComponent cast to flash.display.Stage
*/
protected function get stage():Stage{
return viewComponent as Stage;
}

마지막으로 viewComponent 를 사용자가 정의한 view 의 형에 맞추어주는 케스팅 작업이 남았습니다.
꼭 필요한 부분은 아니지만 Mediator 의 경우 이렇게 정의하여 사용하면 보다 직관적이고 편리하게 사용할 수 있어 적극 추천하는 부분 입니다.
주석만 보셔도 자세한 내용을 알 수 있겠지만 간단히 다시 설명 드리자면
현재 사용중인 Mediator 는 view 즉 화면에 보이는 어느 DisplayObject 에 대해 UI 및 Interaction 을 관리해주는 부분 입니다. 따라서 DisplayObject 에 속해있는 각 버튼들 부터 사용자 반응을 받아낼 모든 부분들에 접근하여 등록하거나 처리할때 아주 빈번히 view 객체를 참조하여야 합니다.
예를들어 화면의 버튼에 간단한 MouseEvent.CLICK 이벤트를 하나 걸고 해당 이벤트 작동 시 pureMVC 전체에 공지를 보내고 싶을 때 화면의 버튼에 쉽게 접근하여 이벤트를 등록시켜 줄 수 있어야 합니다.
따라서 Mediator 등록시 생성자로 들어온 viewComponent 를 실제 DiplayObject 형식에 맞추어 get 으로 등록해 주면 매번 viewComponent 를 캐스팅 해주지 않고도 원래의 속성처럼 쉽게 사용할 수 있게 해 줍니다.
여기에서는 Stage 로 캐스팅 해주고 있군요.

private var spriteDataProxy:SpriteDataProxy;
}
}

다음으로 마지막 남은 Model 의 서브 클래스 Proxy 가 되겠습니다.
간단한 설명은 위에서도 했고 바로 소스를 보시겠습니다.
이번에 보실 Proxy 소스는 위의 Mediator 에서 나온 SpriteDataProxy 입니다.
SpriteDataProxy.as

/*
PureMVC AS3 / Flash Demo – HelloFlash
By Cliff Hall <clifford.hall@puremvc.org>
Copyright(c) 2007-08, Some rights reserved.
*/
package org.puremvc.as3.demos.flash.helloflash.model
{
import org.puremvc.as3.interfaces.IProxy;
import org.puremvc.as3.patterns.proxy.Proxy;

public class SpriteDataProxy extends Proxy implements IProxy
{
public static const NAME:String = ‘SpriteDataProxy‘;

public function SpriteDataProxy( )
{
super( NAME, Number(0) );
palette = [ blue, red, yellow, green, cyan ];
}

Mediator 의 경우 super 의 두번째 인자가 viewComponent 였다면 Proxy 의 두번째 인자는 data 입니다.
이 예제의 Proxy 의 경우 data 를 Sprite의 생성 카운터로 사용하고 있기 때문에 그냥 Number(0) 과 같이 초기값을 등록해 주고 있습니다.

private var palette:Array;
private var red:uint = 0xFF0000;
private var green:uint = 0x00FF00;
private var blue:uint = 0x0000FF;
private var yellow:uint = 0xFFFF00;
private var cyan:uint = 0x00FFFF;

//
public function nextSpriteColor( startColor:uint ):uint
{
// identify color index
var index:int;
var found:Boolean = false;
for ( var j:int=0; j<palette.length; j++)
{
index = j;
if (startColor == palette[index]) break;
}

// select the next color in the palette
index = (index == palette.length-1)?0:index+1;
//return startColor;
return palette[index];

}

/**
* Get the next Sprite ID
*/
public function get nextSpriteID():String{
return “sprite“+spriteCount++;
}

/**
* Get the next Sprite ID
*/
public function get spriteCount():Number{
return data as Number;
}

public function set spriteCount(count:Number):void
{
data = count;
}

Model 의 로직 부분이라 그런지 pureMVC 만의 특별한 기능이나 메소드 들은 없습니다.
단순히 data 를 spriteCount 로 get/set 등록해주어 사용하는것과 몇몇 로직 역활을 하는 사용자 정의 함수들로 구성되어 있습니다.

}
}

Proxy 는 설명드린것과 같이 어떤 작은 데이터 모델을 나누어 캡슐화 해 놓은 것 입니다.
따라서 Proxy 는 각 데이터 모델에 따라 다양한 형태로 만들어지고 쓰일 수 있습니다.

가장 간단한 형태는 위의 예제에서와 같이 어떤 객체들의 색상및 순번등의 간단한 데이터를 관리하는 목적으로
쓰일 수 있으며 다른 용도로는 Remote Proxy 와 같이 통신 등 에서 서버와 주고받는 데이터를 관리하는 형태,
또는 접근을 돌려 제한적으로 사용하게 해주는 Protection Proxy, 어떤 객체를 로딩하거나 시간이 지연되는 형태의 처리 혹은 생성된 객체들의 관리 등을 해주는 Smart Proxy 등.. 여러 형태로 사용이 가능합니다.

아래는 이 예제의 실행 파일 입니다.

※ 시간이 지나면 사각형이 점점 작아지는 예제입니다.. 너무 작아져서 화면에 잘 안 보일 수도 있습니다.
휠을 돌리면 스케일 조절이 되고 사각형 드레그시 객체 생성 됩니다.

여기까지 간단한 예제 한개를 보면 각 부분에 대해 짧게나마 설명을 마쳤습니다.
pureMVC 프레임웍의 사용은 협업시나 대형 프로젝트의 진행 혹은 코드의 재활용 및 잦은 수정등에 적합한 듯 보입니다.
다만 꼭 장점만 있는것 같아 보이지는 않습니다.
이벤트(공지)의 경우 단순 문자열로 처리하기 때문에 혹여나 multiCore 버젼 사용의 경우 다른 비슷한 이벤트와의 충돌이 있을 수도 있으며 각종 Proxy 나 VO( value object ) 등의 경우 캡슐화에 생성 및 사용에 상당부분 코딩노가다(?) 작업이 필요합니다.
물론 잘 정의된 프로젝트가 나중에 진가를 발휘하듯 이런 노력이 절대 쓸모 없는 것은 아닙니다.
이런 프레임 웍을 다뤄보지 않으신 분들이라면 한번쯤은 꼭 써보신다면 분명히 도움이 되지 않을까 생각됩니다.

Fabrication

추가적으로 위에 언급한 사용상의 불편한 점 및 유용한 기능들을
http://www.codedrunks.com/
이곳에서 Fabrication 이라는 이름으로 pureMVC 유틸 비슷하게 개발중인것 같습니다.
현재 0.6 버젼이 Release 되어있으니 관심 있으신 분들은 들러보시기 바랍니다.
http://code.google.com/p/fabrication/wiki/Features
이곳은 Fabrication 을 다운받는 곳과 간략한 설명 그리고 예제가 있는 곳 입니다.

PureMVC #2 (Hello Flash 1)

2009/05/11
/
ActionScript dev
/
댓글 없음

이번 글은 아래 pureMVC 측에서 AS3.0 예제로 제공하는 소스를 가지고 설명하겠습니다.
http://puremvc.org/pages/downloads/AS3/Demo_AS3_Flash_HelloFlash.zip

먼저 압축을 풀어 HelloFlash.fla 파일을 열면
아무것도 없는 화면에 (심지어 도큐먼트 클래스도 없는.. ) 1frame 에 몇줄의 AS 코드만 있는겄이 보이실 겁니다.

import flash.display.Stage;
import org.puremvc.as3.demos.flash.helloflash.ApplicationFacade;

// Startup the app
ApplicationFacade.getInstance().startup( this.stage );

stop();

위와 같은 코드 인데요.
물론 보실 부분은
ApplicationFacade.getInstance().startup( this.stage );
이거 한줄 입니다. ㅋ

그럼 위에서 사용하고 있는 ApplicationFacade 를 보도록 하겠습니다.

ApplicationFacade.as

package org.puremvc.as3.demos.flash.helloflash
{
import org.puremvc.as3.interfaces.IFacade;
import org.puremvc.as3.patterns.facade.Facade;
import org.puremvc.as3.demos.flash.helloflash.controller.StartupCommand;

public class ApplicationFacade extends Facade implements IFacade
{
// Notification name constants
public static const STARTUP:String = “startup“;
public static const STAGE_ADD_SPRITE:String = “stageAddSprite“;

public static const SPRITE_SCALE:String = “spriteScale“;

public static const SPRITE_DROP:String = “spriteDrop“

// Notification name constants
pureMVC 에서는 모든 이벤트들의 구분과 각각 MVC 객체를 위처럼 String 형으로 정의, 관리 합니다.
이곳에서는 이벤트 공지용 문자열을 4개 만들어 사용하네요.

/**
* Singleton ApplicationFacade Factory Method
*/
public static function getInstance() : ApplicationFacade {
if ( instance == null ) instance = new ApplicationFacade( );
return instance as ApplicationFacade;
}

public static function getInstance() : ApplicationFacade
디자인 패턴을 사용하셨던 분이라면 가장 많이 사용했을것 같은 Singleton 의 한 부분 입니다.
Facade 의 instance 속성을 사용하여 ApplicationFacade 를 Singleton 으로한 후 이후 어느곳에서나
현재의 facade 객체를 받아와 사용할 수 있게 하기 위함 입니다.

/**
* Register Commands with the Controller
*/
override protected function initializeController( ) : void
{
super.initializeController();
registerCommand( STARTUP, StartupCommand );
}

함수의 Overriding 이 적용 된 부분 입니다.
따라서 facade 가 초기화 될 때 Controller 를 초기화 하는 과정에서 자동으로 호출 되어
registerCommand( STARTUP, StartupCommand );
가 호출되게 됩니다.

처음으로 Command 를 등록하는 부분이 나왔습니다.
이는 facade 에서 각각 MVC 들을 등록해주는 함수들 중 하나로 Command 등록 함수의 사용방법은
아래와 같습니다.

registerCommand( 커맨드 정의 이름, 실행될 커맨드 클래스 );
이렇게 정의해 주면 facade 내부적으로 해당 이름으로 연관배열을 만들어 등록시키는 커맨드 클래스와
짝을 이루어 저장합니다.

이렇게 등록되어진 커맨드는 추후 커맨드 정의 이름으로 된 이벤트가 발생시 바로 실행되어지게 됩니다.

public function startup( stage:Object ):void
{
sendNotification( STARTUP, stage );
}

위에서 커맨드를 등록한 것을 이곳에서 바로 불러주는 군요^^
sendNotification( STARTUP, stage );

아마도 pureMVC 에서 가장 많이 사용하게 될 함수 일것 같습니다.
플래쉬에서 dispatchEvent() 함수와 비슷하다고 보시면 됩니다.
인자값으로는 마찬가지로 해당 이벤트를 구별할 문자열 값과 Option 으로 이벤트와 함께 넘겨줄
Body 인 Object 형의 값을 같이 넣어줄 수 있습니다.

}
}

이제 위에서 등록하고 호출한 StartupCommand 를 살펴보겠습니다.

StartupCommand .as

package org.puremvc.as3.demos.flash.helloflash.controller
{
import flash.display.Stage;
import org.puremvc.as3.interfaces.ICommand;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;

import org.puremvc.as3.demos.flash.helloflash.ApplicationFacade;
import org.puremvc.as3.demos.flash.helloflash.view.StageMediator;
import org.puremvc.as3.demos.flash.helloflash.model.SpriteDataProxy;

public class StartupCommand extends SimpleCommand implements ICommand
{

커맨드는 기본적으로 SimpleCommand 확장을 받아 만듭니다.

/**
* Register the Proxies and Mediators.
*
* Get the View Components for the Mediators from the app,
* which passed a reference to itself on the notification.
*/
override public function execute( note:INotification ) : void
{
facade.registerProxy(new SpriteDataProxy());
var stage:Stage = note.getBody() as Stage;
facade.registerMediator( new StageMediator( stage ) );
sendNotification( ApplicationFacade.STAGE_ADD_SPRITE );
}

마찬가지로 SimpleCommand 의 기본 함수을 Overriding 하여 재정의한 함수부분 입니다.
execute 함수는 해당 커맨드 이벤트가 발생하면 자동적으로 호출되어 실행되는 부분 입니다.
자동으로 함수 호출시에 같이 들어오는 인자로는 note:INotification 이며 이는 이벤트와 같습니다.
따라서 note.getBody(); 와 같이 하면 이벤트로 넘어온 인자의 Body 를 받아와 사용할 수 있습니다.

넘어온 인자의 Body 란 위의 ApplicationFacade.as 에서
sendNotification( STARTUP, stage ); 처럼 이벤트를 발생시켜 줄 때 넣어준 2번째 인자를 말합니다.

다음으로 facade.registerMediator( new StageMediator( stage ) ); 를 사용해 stageView 를
등록 합니다.

마지막으로 sendNotification( ApplicationFacade.STAGE_ADD_SPRITE ); 처럼 이벤트를 발생시켜
주는것으로 StartupCommand 는 작업을 종료하게 됩니다.

}
}

간단하게 Facade 와 Command 를 살펴보았습니다.
다음 글에서는 나머지 부분인 Mediator 와 Proxy 에 대해 살펴보겠습니다.

[출처] [02] pureMVC 알아보기 [ HelloFlash.1 ] (uiaa) |작성자 모모

PureMVC #1

2009/05/11
/
ActionScript dev
/
댓글 없음

pureMVC 알아보기

이번에는 잠시 3D 부분을 떠나 패턴 관련 내용을 알아보도록 하겠습니다.

먼저 알아볼 대상인 pureMVC 에 대해 설명드리자면

pureMVC는 하나의 프레임 워크라 볼 수 있습니다.
프레임워크를 사전 그대로 풀이하자면 (뼈대. 골격. 틀.) 이라는 뜻이 있는데요.
프로그램 개발시에 필요한 기반을 제공한다고 생각해 주시면 됩니다.
이런 프레임 워크는 공개된 것들만 해도 상당수가 있는데요.
플래쉬 AS 쪽에선 캔곰, pureMVC 등이 많이 사용되고 있습니다.
이 중에서 pureMVC 는 특히 여러가지 언어로 ( c, c#, php, java, objective C… ) 공개되어있는데요..
가장 기본적인 MVC 패턴만을 제공해 주는 정말 심플한 프레임웍이라 생각됩니다. (켄곰 등에 비해)
따라서 플래쉬만의 특화된 기능이나 이런것 보다는 기본에 충실한 프레임웍인것 같습니다.

pureMVC 에 대한 서론은 이쯤에서 마치겠습니다.

정말 자세한 사항이나 궁굼한 점은.
저의 사견이 들어가지 않은 제작자의 홈페이지로 가셔서 확인해 주세요^^; ㅎㅎ

pureMVC : http://www.puremvc.org/

그럼 가장 먼저 설명 드릴 디자인 패턴 인 MVC 패턴에 대해 알아보겠습니다.

MVC

MVC 는 Model, View, Contoller 의 약자 입니다.

Model : 프로그램의 Data, 로직 등 프로그램 동작의 뼈대가 되는 부분 입니다.
View : 사용자 화면에 보여지는 UI, 및 화면 구성요소들을 나타냅니다.
Contrioller : 위의 Model 과 View 사이에서 둘 사이를 이어주는 매개 역활을 합니다.

프로그램 제작에 있어 위와같이 각각의 역활을 정확히 분배하여 나누어주는 것이 이 패턴의 가장 중요한 점이자.

pureMVC 의 핵심(?) 이라 볼 수 있습니다.

이렇게 각각의 역활을 나누어주는가장 큰 이유로는 코드의 재사용성을 둘 수 있습니다.
극단의 예를 들어 로컬에서 돌아가는 게임을 웹에서 돌아가게 만들라고 해도.
화면에 보여주는 부분인 View 부분만을 웹에서 통용적으로 사용되는 것으로 바꾸어 준 후 네트웍 기능을
추가하면 model 입장에서는 크게 게임 로직이 바뀌는 일 없이 사용 할 수 있다는 것 입니다.

다른 이유로는 이렇게 MVC 패턴에 맞게 제작된 프로그램은 개발자도 모르는 사이에 느슨한 결합을 통한 코딩이
됩니다.
따라서 개발 중간 초기 기획과는 많이 틀어진 방향의 내용이 새로 추가되거나 변경되었을 경우에도.
어느정도 더 수월하게 작업을 진행할 수 있다는 점 입니다.

다음으로 facade 패턴에 대해 알아보겠습니다.

Facade

facade(퍼사드) 는 복잡한 서브시스템에서 공통의 인터페이스들을 뽑아 사용자가 쉽게 사용할 수 있도록
해주는 패턴 입니다.

pureMVC 에서는 Model, View, Controller 들을 각각 통합해 관리해 주는 역활을 하고 있습니다.

마지막으로 Observers 패턴 입니다.

Observers

Observers. 이 패턴은 플래쉬로 비교하면 이미 모두 능숙하게 사용하시는 EventDispatch 와 흡사합니다.
마찬가지로 어떤 이벤트가 발생 했을때 그 이벤트를 필요로하는 곳에서 이벤트를 받겠다고 등록한 곳으로만
이벤트 발생 여부를 전달합니다.

플래쉬의 Event 와 조금 다른 점은 플래쉬와 같이 이벤트가 Bubble 형식으로 전달되지 않는다는 것 과.
pureMVC 에서는 해당 이벤트를 Notification 할 때 이벤트 속성과 함께 사용자 임의의 값을 함께 보내어
이벤트를 받는 곳에서 이를 사용할 수 있다는 것 입니다.

아래 그림을 보면 위에 설명한 각각의 패턴들의 연관성을 짐작(?) 하실 수 있습니다.

사실.. 그냥 보기에도 복잡합니다 ㅡㅡ;;
크게 볼 때 M,V,C 의 각 부분이 있고 이들을 Facade 패턴이 감싸고 있어서 어디서든 원하는 데이터와 작업에
대한 접근을 가능하게 해준다.. 정도로 이해하면 될 것 같습니다.

아. 미리 설명드리지 못한 내용이 하나 남았습니다.

pureMVC 에서는 MVC 패턴을 사용하면서 해당 역활을 수행하는 서브 클래스들을 다른 명칭으로 부릅니다.

명칭은 아래와 같습니다.

MVC = 서브 클래스

Model	Proxy
View	Mediator
Controller	Command

다음 글 부터는 pureMVC 측에서 제공하는 AS3.0 용 pureMVC 예제를 사용하여 설명 하도록 하겠습니다.

[출처] [01] pureMVC 알아보기 (uiaa) |작성자 모모