태터데스크 관리자
Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2010/01/30 14:46
Flex4에서 Spark List Component에 Custom ItemRenderer를 적용하여 리스트에 출력되는 아이템의 모양을 색다르게 만들어 보겠습니다.
Custom ItemRenderer를 구현해 MXML로 원하는 모양만 만들어 주면 끝나는 간단한 예제 입니다.
아이템 렌더러의 소스코드 CustomListItemRenderer.mxml
여러분의 커뮤니케이션을 기다리고 있습니다.
Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2010/01/14 09:55
Papervision 3D Tutorial 3 : Interaction - Mouse
마우스 입력의 반응에 대해 알아보겠습니다.
마우스 이벤트를 이벤트 초기화 함수인 initEvents()에서 초기화 하고, interaction 내용을 해당함수에 구현합니다.
우선 mouse down, up에 대한 도형의 크기 변경 interaction을 구현해 보겠습니다.
tutorial.as파일을 열고, tutorial 클래스를 아래와 같이 수정합니다.
initEvents()함수에서, 화면을 mouse down, up하면 크기가 변경될 수 있도록 이벤트를 등록합니다.
override protected function initEvents():void{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
addEventListener(MouseEvent.MOUSE_UP, mouseUp);
}
이벤트시 호출될 함수를 다음과 같이 코딩합니다. mouse down 이벤트 시에 도형의 크기를 두배로 증가시키고 mouse up 이벤트에는 다시 도형을 원래크기대로 되돌려 줍니다.
private function mouseDown(e:MouseEvent):void{
cone.scale = 2;
}
private function mouseUp(e:MouseEvent):void{
cone.scale = 1;
}
마우스 위치에 대한 반응은 mouseX, mouseY 변수로 마우스 위치를 받아서 구현할 수 있습니다.
stage.height, stage.width로 화면의 크기에 대한 마우스의 위치로 물체를 회전시켜 보겠습니다.
processFrame()함수를 다음과 같이 수정합니다.
override protected function processFrame():void{
cone.rotationY = (stage.width/2 - mouseX)*2;
cone.rotationX = (stage.height/2 - mouseY)*2;
}
전체 tutorial.as 파일 소스입니다.
// ActionScript file
package ehxm{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.containers.Canvas;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.Cone;
public class tutorial extends pv3dBase{
public var cone:Cone;
public var mat1:BitmapFileMaterial;
public var mat2:BitmapFileMaterial;
public var m_x:Number;
public var m_y:Number;
public var cnt:Number;
//출력될 canvas를 매개변수로 받아서 canvas의 width, height로 viewport의 width, height설정
public function tutorial(id:Canvas){
init(id.width, id.height);
cnt = 0;
}
override protected function initEvents():void{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
addEventListener(MouseEvent.MOUSE_UP, mouseUp);
}
private function mouseDown(e:MouseEvent):void{
cone.scale = 2;
}
private function mouseUp(e:MouseEvent):void{
cone.scale = 1;
}
override protected function init3d():void{
mat1 = new BitmapFileMaterial("images/ehxm.jpg");
//다각뿔 생성, scene에 추가
cone = new Cone(mat1);
cone.scale = 1;
camera.zoom=100;
cone.pitch(-10);
scene.addChild(cone);
}
override protected function processFrame():void{
cone.rotationY = (stage.width/2 - mouseX)*2;
cone.rotationX = (stage.height/2 - mouseY)*2;
}
}
}
결과화면
여러분의 커뮤니케이션을 기다리고 있습니다.
Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2010/01/13 14:27
Papervision 3D Tutorial 2 : 텍스쳐
이제 기본도형에 텍스쳐를 입혀 보겠습니다.
기본도형의 매개변수에 Material을 넘겨주면 그것을 도형의 텍스쳐로 입힙니다.
public var cone:Cone = new Cone();
라고 정의 된 부분을 다음과 같이 고치면, cone에 이미지의 텍스쳐를 입힐 수 있습니다.
public var cone:Cone = new Cone(
new BitmapFileMaterial(
"이미지 주소"
)
);
이제, 소스를 작성해보겠습니다.
우선 텍스쳐이미지를 준비합니다.
이 두가지 텍스쳐를 번갈아가면서 표시할 것 입니다. 우선 src폴더에 images폴더를 추가한 후 두가지 jpg 파일을 붙여넣기해서 추가합니다. 전체적인 src폴더 구성은 다음과 같습니다.
ehxm폴더에 tutorial 1에서 정의한 pv3dBase.as, tutorial.as파일이 있고, images폴더에 방금 추가한 두가지 jpg파일이 있습니다.
tutorial.as파일의 tutorial 클래스에 Material을 가지는 멤버변수를 추가합니다.
images.zip
public class tutorial extends pv3dBase{
public var cone:Cone;
public var mat1:BitmapFileMaterial;
public var mat2:BitmapFileMaterial;
public var cnt:Number;
override protected function init3d():void{
mat1 = new BitmapFileMaterial("images/ehxm.jpg");
mat2 = new BitmapFileMaterial("images/ehxm1.jpg");
public class tutorial extends pv3dBase{
public var cone:Cone;
public var mat1:BitmapFileMaterial;
public var mat2:BitmapFileMaterial;
public var cnt:Number;
override protected function processFrame():void{
//회전
cone.yaw(1);
if(cnt++ >10){
if(cone.material == mat1){
cone.material = mat2;
}
else{
cone.material = mat1;
}
cnt = 0;
}
}
// ActionScript file
package ehxm{
import mx.containers.Canvas;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.Cone;
public class tutorial extends pv3dBase{
public var cone:Cone;
public var mat1:BitmapFileMaterial;
public var mat2:BitmapFileMaterial;
public var cnt:Number;
//출력될 canvas를 매개변수로 받아서 canvas의 width, height로 viewport의 width, height설정
public function tutorial(id:Canvas){
init(id.width, id.height);
cnt = 0;
}
override protected function init3d():void{
mat1 = new BitmapFileMaterial("images/ehxm.jpg");
mat2 = new BitmapFileMaterial("images/ehxm1.jpg");
//다각뿔 생성, scene에 추가
cone = new Cone(mat1);
cone.scale = 1;
camera.zoom=100;
cone.pitch(-10);
scene.addChild(cone);
}
override protected function processFrame():void{
//회전
cone.yaw(1);
if(cnt++ >10){
if(cone.material == mat1){
cone.material = mat2;
}
else{
cone.material = mat1;
}
cnt = 0;
}
}
}
}
여러분의 커뮤니케이션을 기다리고 있습니다.
Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2010/01/13 13:08
// ActionScript file - pv3dBase.as
package ehxm{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
public class pv3dBase extends Sprite {
//pv3d를 위한 viewport, renderer, scene, camera를 정의
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;
public var scene:Scene3D;
public var camera:Camera3D;
public function init(vpWidth:Number = 800, vpHeight:Number = 600):void {
initPV3D(vpWidth, vpHeight);
init3d();
init2d();
initEvents();
}
protected function initPV3D(vpWidth:Number, vpHeight:Number):void {
// viewport, renderer, scene, camera를 초기화
if (vpWidth == 0) {
viewport = new Viewport3D(stage.width, stage.height, true, true);
}else{
viewport = new Viewport3D(vpWidth, vpHeight, false, true);
}
addChild(viewport);
renderer = new BasicRenderEngine();
scene = new Scene3D();
camera = new Camera3D();
}
protected function init3d():void {
// models, materials, cameras 등을 초기화
}
protected function init2d():void {
}
//ENTER_FRAME 이벤트로, 프레임마다 처리해주는 함수
protected function initEvents():void {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
protected function processFrame():void {
// Process any movement or animation here.
}
protected function onEnterFrame( ThisEvent:Event ):void {
processFrame();
renderer.renderScene(scene, camera, viewport);
}
}
}
// ActionScript file - tutorial.as
package ehxm{
import mx.containers.Canvas;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Cone;
public class tutorial extends pv3dBase{
public var cone:Cone;
public var mat:ColorMaterial;
//출력될 canvas를 매개변수로 받아서 canvas의 width, height로 viewport의 width, height설정
public function tutorial(id:Canvas){
init(id.width, id.height);
}
override protected function init3d():void{
//다각뿔 생성, scene에 추가
cone = new Cone(null);
cone.scale = 1;
camera.zoom=100;
cone.pitch(-10);
scene.addChild(cone);
}
override protected function processFrame():void{
//회전
cone.yaw(1);
}
}
}
여러분의 커뮤니케이션을 기다리고 있습니다.
Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2009/11/10 15:59
RIA 제작을 위한 FLEX의 개발환경을 구축 해 보도록 하겠습니다.
FLEX의 개발환경으로는
정도로 볼 수 있는데, Flex Builder는 유로로 Flex Builder 3 Professional edition 의 가격은 $699이지만 학생에 한해서 무료로 배포받을 수 있다.
Flex Builder는 Adobe에서 개발한 Eclipse기반 개발 툴로 개발의 생산성을 고려한다면 Flex Builder를 가장 추천한다. 하지만 학생이 아니고, $699의 가격이 부담되는 가격이라면 Flash Develop을 이용해도 무료로 강력한 Flex개발 환경을 구축할 수 있다.
그럼, 두가지 방법에 대해서 개발환경을 구축해 보겠습니다.
개발환경 1. Flex SDK 3 + Flash Develop 3 + Flash Player Debugger
순서
- Java Runtime Environment (JRE) 6 설치
- Flex SDK 3 설치
- Flash Player 9 최신버전 설치
- Flash Player Debugger version 설치
- .NET Framework 2.0 Redistributable 설치
- FlashDevelop 3 설치
1. Java Runtime Environment (JRE) 설치
Flex SDK 3, FlashDevelop 3를 이용하려면 JRE가 설치되어 있어야한다. 이미 설치되어있거나 JDK가 설치되어 있다면 바로 2번부터 설치하면 된다.
JRE나 JDK 둘중 하나를 설치하면 되는데, 여기에선 JRE를 설치해보겠습니다.
다운로드 :
http://www.java.com/ko/download/
Java 다운로드 버튼만 클릭하면 됩니다.
JRE 설치가 완료되었습니다.
2. Flex SDK 3 설치
다운로드:
http://www.adobe.com/products/flex/flexdownloads/
Flex SDK 라이센스에 관한 항목을 체크하고 Flex SDK download 링크로 다운받습니다.
따로 셋업파일이 없고, 적당한 곳에 압축을 풀면 됩니다.
C:\Program Files\flex_sdk_3 에 압축을 풀었습니다.
자동화 빌드 프레임워크인 ANT를 환경변수로 등록한다.
[내 컴퓨터] - 오른쪽 마우스 - [속성] : 시스템 등록정보에서 [고급]탭에서 [환경변수]를 선택한다.
( 혹은, [제어판] - [시스템] - [속성] - [고급]으로도 가능하다. )
[시스템변수] - [새로 만들기]에서 환경변수를 등록한다.
변수이름 : ANT_HOME
변수값 : C:\Program Files\flex_sdk_3\ant
이제, ANT를 위한 path를 수정하여야 한다.
[시스템변수]의 path를 선택하여 편집을 누른다.
위 그림처럼 path의 변수값에 다른내용이 있으면 마지막에 ; 를 추가하고,
변수값에 %ANT_HOME%\bin 를 추가한다.
Flex SDK 3.1설치와 환경설정이 완료되었습니다.3. Flash Player 9 최신버전 설치
다운로드:
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&Lang=Korean
동의 및 설치를 클릭하면 최신버전이 설치가 완료됩니다.
4. Flash Player Debugger version 설치
다운로드:
http://www.adobe.com/support/flashplayer/downloads.html
에서 브라우저에맞는 Flash Player Debugger version 설치
인터넷 익스플로러를 사용하는 경우에는
Download the Windows Flash Player 9 ActiveX control content debugger (for IE) 를 설치
단, Flash Player 9 최신버전이 설치되어 있어야 합니다.
5. .NET Framework 2.0 Redistributable 설치
다운로드:
http://www.microsoft.com/downloads/details.aspx?FamilyID=333325fd-ae52-4e35-b531-508d977d32a6&DisplayLang=en
닷넷 프레임워크 최신버전인 .NET Framework 3.5를 다운받아서 설치한다.6. FlashDevelop 3 설치
에서 최신버전을 다운로드해 설치한다.
http://www.flashdevelop.org/community/viewforum.php?f=11
Flex 개발을 위한 FlashDevelop 3의 모든 설치가 완료되었다.
이제 Flex로 모든것을 만들어 보시길..
Helloworld로 간단한 테스트를 해보겠습니다.
7. HelloWorld
FlashDevelop3 를 실행합니다.
- 새 프로젝트 생성
메뉴-[project]-[new project]에서,
[AS3] - [Flex 3] 선택,
Name : Helloworld
Location : 프로젝트가 저장될 경로를 지정해 줍니다.
Create directory for project에 체크.
- 코딩
완료하면, 프로젝트가 생성되고, main.mxml을 다음과 같이 코딩한 후 저장합니다.
코드내용 보기
- 컴파일 설정
메뉴-[tools]-[program setting] 또는 F10을 눌러서,
[AS3Context]의 flex SDK 경로를 2번의 Flex SDK 설치 경로로 지정해 줍니다.
- 컴파일 및 빌드
메뉴-[Project] - [Build Project] 또는 F8을 눌러서,
프로젝트를 빌드 해 줍니다.
- 완성 및 실행
다음과 같이 Helloworld.swf 파일이 생성되면 완성.
index.html을 오른쪽 마우스 클릭하여 Excute를 하면 실행시켜 볼 수 있다.
개발환경 2. Flex Builder 3 / Eclipse plugin (학생)
순서
- Flex builder 3 professional 학생 라이센스 인증
- Java Runtime Environment (JRE) 6 설치
- Flex Builder 3 professional 설치
1. Flex builder 3 professional 학생 라이센스 인증
대학교 학생증이나 재학증명서와 주민등록증 등 학생을 정식으로 증명할 수 있는 것을 GIF파일로 스캔합니다.
라이센스 인증 센터:
http://www.flexregistration.com/
에 접속합니다.
Do you accept these terms? 에 체크하고, Student를 클릭합니다.
폼을 작성하고, 스캔한 GIF파일을 첨부합니다.
작성을 완료하면 수일내에 작성한 e-mail 주소로 다음과 같이 시리얼 번호와 함께 답변이 오게 됩니다. 이 시리얼 번호를 Flex builder 3 professional 설치 후에 입력하면 됩니다.
2. Java Runtime Environment (JRE) 6 설치
Flex SDK 3, FlashDevelop 3를 이용하려면 JRE가 설치되어 있어야한다. 이미 설치되어있거나 JDK가 설치되어 있다면 바로 2번부터 설치하면 된다.
JRE나 JDK 둘중 하나를 설치하면 되는데, 여기에선 JRE를 설치해보겠습니다.
다운로드 :
http://www.java.com/ko/download/
Java 다운로드 버튼만 클릭하면 됩니다.
JRE 설치가 완료되었습니다.
3. Flex builder 3 professional 설치
다운로드 :
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
다운로드한 다음, FB3_win.exe를 실행하여 설치합니다.
설치가 완료되었습니다.
Flex builder 3 professional 를 실행하면 첫 화면에서 시리얼 인증을 받을 수 있습니다.
e-mail로 온 학생용 라이센스 인증 시리얼을 입력하고 인증을 받습니다.
빠밤. Flex개발을 위한 Flex builder 3 professional 설치가 완료되었습니다.
이제 Flex의 멋진 세계로..
- Helloworld 테스트
메뉴-[file]-[new]-[flex project]를 클릭하여 새 프로젝트를 생성합니다.
project name : helloworld
project location : use default location을 해제하여 프로젝트가 저장될 곳을 지정합니다.
완료를 하면 프로젝트가 생성됩니다.
helloworld.mxml을 다음과 같이 코딩한 후 저장합니다.
코드내용 보기
메뉴-[Run]-[Run helloworld] 이나 Ctrl + F11을 눌러 실행 해 봅니다.
여러분의 커뮤니케이션을 기다리고 있습니다.
아이디어의 전쟁의 현장이었던 2010년 대한민국 매쉬업 경진대회에 다녀왔습니다. 이번 대회는 지난 2월 6일(토요일), 삼성동 코엑스 컨퍼런스룸 401에서 열렸습니다. 이번.....
2010년에 100가지가 넘는 안드로이드 폰 출시가 될 예정입니다. Mobile World Congress keynote에서 Google CEO Eric Schmidt의 연설.....
서울, 안양, 부산, 대구, 광주, 대전에 안드로이드 폰 체험 할 수 있는 곳이 있네요. 저는 코엑스 메가박스 입구에 있는 모토로라 체험 부스에서 우연히 모토로이를 만져보게 되.....
위 3D 갤러리는 http://www.fotoviewr.com/ 사이트의 Fotoviewr 입니다. Flex와 Papervision3D를 이용하여 위와같은 3D 갤러리를 구현해.....
|
Total : 126,016 Today : 10 Yesterday : 111
![[안드로이드] 영어 어학기 어플](http://cfile21.uf.tistory.com/image/206A8B274BEA66644AFA79)
![[안드로이드] 모토로이 체험할 수 있는 곳 (전국)](http://cfile25.uf.tistory.com/image/1252D6274B7028995911EC)
