UIComponent를 상속한 HTML의 DIV

요즘 HTML에 빠져서일까? Flex프로젝트중 구글맵을 띄우는 컴포넌트가 필요해서 제작해보았다.

UIComponent를 상속받았고 displayUpdate를 재구현해 UIComponent의 위치와 동기화시켰다.

원리는 간단한데 flex위에 div를 띄우고 flex내에서 ExternalInterface로 div위치를 실시간으로 변경시킨것이다. flex위에 div를 띄우기 위해선 embed속성 중 wmode를 transparent로 설정해야 한다. 아직은 전체화면일때만 가능하다.

html내부에 작은영역으로 되게 되면 문제를 일으키게 된다.아래는 간단한 예제의 링크이다.
예제페이지

태그를 입력하면 바로 볼 수 있다.



맨처음 보이는 흰색부분은 flex의 TextArea이고 그TextArea값이 바로아래있는 DIV에 태그역할을 한다.
직접 태그를 입력하면 실시간으로 변경되는 모습을 볼수 있다.
 
HTMLDiv.as

주의할점은 addChild를 안해도 생성자에서 div를생성한다.


일반 UIComponent를 생각하시고 HBox나 VBox같은 Container에 넣고사용할수 있다.
차후 OpenZet에 등록 심사중이다.

Posted by reiKop

2009/05/26 13:40 2009/05/26 13:40
,
Response
No Trackback , a comment
RSS :
http://reikop.raony.net/blog/rss/response/83

XML, AMF등 데이터 서비스를 쉽게 하는 클래스

전에 한번 소개한적이 있는 데이터서비스를 쉽게 해주는 클래스를 성능향상을 업데이트 해서 제작 했다.

OpenZet 프로젝트를 참여 하면서 전에 만들 클래스들을 리팩토링도 하고 Interface를 추가해서 넣었다.


XML등을 로드 하기 위해서 이렇게 해주면 된다.

XML이 EUC-KR인코딩일 경우 간혹 데이터를 제대로 못 읽어오는 문제를 해결했다.


[code]var hl:HTTPLoader = new HTTPLoader();
hl.addEventListener("complete",resultHandler);
hl.load(new URLRequest("http://testXMLAnithing.xml","EUC-KR"));
 
function resultHandler(e:RPCEvent):void
{
        var xml:XMLList = new XML(e.data).children();
        Alert.show(xml.toXMLString());
}

[/code]


그리고 BlazeDS의 등장으로 플래시 시절 많이 사용하던 openAmf, AMFPHP 등을 편하게 연결해주는 클래스도 제작되었다.

[code]var ac:AMFCaller = AMFCaller.getInstance();
ac.URL = "http://YourAMFGatewayAdress";
ac.addEventListener(RPCEvent.COMPLETE,completeEvent);
ac.call("test.TestClass.getTest");
function completeEvent(e:RPCEvent):void
{
Alert.show(e.data);
}
[/code]
 
마지막으로 BlazeDS, FDS등 RemoteObejct를 사용하는 데이터 통신을 마찬가지로 쉽게 가지고 오게 했다.
[code]var param:Object = {};
param.id = "reikop";
 
var ro:RemoteObjectCaller = RemoteObjectCaller.getInstance();
ro.addEventListener("complete",resultHandler);
ro.call("test.getTest",param);
 
function resultHandler(e:ResultEvent):void
{
Alert.show(e.data as String);
}[/code]
 
 
 

자세한 도움말을 보고 싶다면 다음 위키를 참조하면 된다.

그리고 오픈젯 프로젝트에 대해서 알고 싶다면 여기를 클릭하면 된다.

Posted by reiKop

2009/03/05 16:24 2009/03/05 16:24
Response
3 Trackbacks , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/66

[openZet] 오픈소스 사이트 오픈

http://openzet.org

 그동안 공들여서 노력한 결과물이 2009년 3월 2일 발표된다. +ㅁ+
LGPL 라이센스를 따르는 openZet은 Flex컴포넌트를 중심으로 SiverLight까지 그 영역을 확대할것이다.

 오픈된 플렉스 컴포넌트 들중에는 책 Flex 3 Knowhow Bible에서 소개된적있는 컴포넌트 들도 다시 리팩토링해서 오픈소스 목록에 올려놓게 된다.  그외에도 실무에서 자주쓰일만한 Datagird, 챠트, MDI (이건정말 수작이다.) , 각종 편의를 위한 UTIL들을 제공하고 있다. WIKI문서와 포럼을 제공하고 있어서 사용자들의 문의사항이나 질문등에 빠르게 대응 할수 있도록 했다. 그리고 영문, 한글등 세계국어를 지원하고 있고 문서와 WIKI는 영어 한글만을 제공하고 있다.

몇가지 샘플들을 보면 이걸 정말 오픈해도 되는지의 의문점이 들지도 모를정도로 쓸만한 컴포넌트 들이 많다.



Select

[Flash] http://www.openzet.org/userfiles/flash/samples/SelectionDG.swf


[Flash] http://www.openzet.org/userfiles/flash/samples/TextAreaSample.swf


[Flash] http://www.openzet.org/userfiles/flash/samples/MDIExample.swf


[Flash] http://www.openzet.org/userfiles/flash/samples/TreeComboBoxExample.swf




직접 많은 샘플들을 실행해보고 다운로드해서 사용하고 싶다면 http://openzet.org 로 접속해보길 바란다.

Posted by reiKop

2009/02/27 14:53 2009/02/27 14:53
, , , , , , , ,
Response
2 Trackbacks , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/62

[Flex] JavaScript를 컨트롤하자

Flex, Flash 에서는 ExternalInterface로 HTML문서와의 Javascript통신을 할수 있도록 하는 클래스를 제공하고 있다.

Java스크립트중 eval함수가 가장 중요한 역할이 되겠는데 이 eval이라는 함수가 하는 다양한 역할중에 문자열을 함수로 바꾸는 기능을 사용할것이다.

간단하게 현재 페이지 주소를 불러내는 함수에서부터 시작했었는데

[code]ExternalInterface.call("eval","location.href");[/code]
이것을 적절히 응용했더니 그 사용성이 무궁무진했다.

특정 DIV의 스타일을 전혀 다르게 변형시킨다던지, 문서상에 있는 모든 폼값을 가지고 온다는게 가능해졌다는것이다.

지돌스타님 블로그에서도 포스팅 된적 있는 Cookie컨트롤도 이것을 이용한 것이다.

플래시 내에서 TweenLite를 사용해서 외부에 있는 Div의 크기가 스무스 하게 움직인다는것도 가능해진것이다.

ADOBE에서 가만히 있을지는 모르겠지만.. ^^;

현재 이 JS를 컨트롤하는 유틸은 openZet.org 에서 구할수 있다.


문서보기

Posted by reiKop

2009/02/27 14:53 2009/02/27 14:53
, , , , , , , ,
Response
No Trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/61

SWFObject Flex template


xHtml형태로 웹표준 준수했다.
프로젝트에서 html-templete에 있는것을 지운후 덮어씌어주면 된다.

사용자 삽입 이미지


파폭 플러그인중 홈페이지의 웹표준준수를 검사해주는 Tidy도 통과했다
파일중 index.template.html 을 수정해서 각종 설정을 해주면 돼겠다.

Posted by reiKop

2008/12/10 17:38 2008/12/10 17:38
, , , ,
Response
A trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/57

[pv3d] 지구 위성 테스트





[code]import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.materials.WireframeMaterial;
import caurina.transitions.Tweener;
var cam:Camera3D = new Camera3D();
var scene:Scene3D = new Scene3D();
var view:Viewport3D = new Viewport3D();
var br:BasicRenderEngine = new BasicRenderEngine();
var w:BitmapFileMaterial = new BitmapFileMaterial("earth.jpg");
var pl:BitmapFileMaterial = new BitmapFileMaterial("plu.jpg");
w.smooth = true;
var psp:Sphere = new Sphere(pl,25,10,8);
var num:Number = 0;
scene.addChild(psp);
var sp:Sphere = new Sphere(w,100,10,8);
scene.addChild(sp);
cam.zoom = 100;
addChild(view);
addEventListener('enterFrame',fn);
var n:Number = 0;
function fn(e:Event):void{
    sp.yaw(2);
    psp.yaw(-2);
    var aa:Number = Math.sin(num*0.02)*250;
    psp.x = aa;
    psp.z = Math.cos(num*0.02)*250;
    psp.y = aa/2
    num++;
    br.renderScene(scene,cam,view);
}
[/code]

Posted by reiKop

2008/11/04 17:56 2008/11/04 17:56
, , , , ,
Response
No Trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/50

3D맥스종합자료실

사진 & 맵소스
@ 사진&소스자료

http://www.thais.it/        건축물,곤충 . . . 기타등등

http://www.idolwatch.com/   여자이미지

http://art.net/~jeremy/photo/public_texture/index.html 땅,하늘 기타등등

http://www.davegh.com/ 던젼, 건물, 타일

http://www.fantasticarts.com/6textures/index.htm

http://www.threedgraphics.com/tc/Gallery/ 화강암,야생,나무 등 맵소스

http://textures.forrest.cz/   다양한 맵소스

http://maps.jpl.nasa.gov/  지구,달,토성,목성 행성맵소스

맥스 튜토리얼

http://www.neilblevins.com/cg_education/cg_education.htm

http://www.dab.hi-ho.ne.jp/mochizuki-m/tips.htm

http://www.3dluvr.com/content/artz/feature/feature27_2.php

http://mr2k.3dvf.com/tutorials/max/tutorials_joan.htm

http://www.jonesinc.com/inktutorial1.html

http://www.3dcar.kg/tutorial/less03.htm

http://www.3dluvr.com/willi/main/tutorials/animatedgrass/animatedgrass.html 풀밭만들기

http://lilly.csoft.net/~demo/merlin.zsnes.com/tutorials/index.html

맥스 모델링

http://go6.163.com/3dleader2/ourweb/tutorial/2/dixon.htm 얼굴만들기

http://www.3dchopshop.com/tutorials/frankenstein.htm 프랑켄슈타인만들기

http://members.shaw.ca/jonmcbain/Tutorial_Hand.html 손만들기

http://www.comet-cartoons.com/toons/3ddocs/headpolymodel/

http://www.3dluvr.com/content/artz/3dsmax/std/gridsaab96.php

맥스 쉐이딩

http://perso.libertysurf.fr/vitasse/tutoriaux/final.htm

http://www.nawyecky.com/fr/tuts/tut-me_fr.htm

http://www.arance.net/textures.htm

http://www.geocities.com/jeboothjr/Tutorials/Wood/Wood.htm 포토샵우드맵제작

http://www.3dcar.kg/tutorial/less02.htm 자동차헤드라이트

http://www.darksim.com/html/tsmx2_vertpaint.html

http://3dstation.babozor.net/tut_texture_face.htm

http://www.3dluvr.com/machette/old_tuts/new/procedural1/Procedural%20Shaders.htm

http://www.ordix.com/pfolio/tutorial/hair/Ver3Dcafe/index.htm 머리카락만들기

http://www.3dluvr.com/lotus/tutorials/baum/baum.htm

http://www.pchan.vi2.com/tutorials/tut02/tutorial02.html 브러쉬메탈

http://www.optidigit.com/stevens/tutorial/workshop.html

http://www.cadenceweb.com/2001/0901/3d0901.html 유리창만들기

맥스 lighting

http://www.grayson.vi2.com/tutorials/lighting/index.html

http://3dstation.babozor.net/Tutoriaux/Tut%20Sponza/Eclairage.html

http://www.nawyecky.com/tuts/tut-gi.htm

http://www.trinisica.com/sub_learn_typedissue.asp?lv=3&mode=1&issue=002

http://interneteye3d.com/Tutorials/2001/oct/3DSCAL/default.asp

http://www.3dluvr.com/content/artz/3dsmax/std/fakehlight.php

파이날 랜더러 튜토리얼

http://fr.11kmps.com/home.asp

http://www.home-sweet-hell.dk/tutorials.html 파이날랜더 커스틱

http://illumenal.com/tutorials/tutorial_F_render.htm

http://www.3dtotal.com/team/Tutorials/stephen_reb_hdri2/finalrender.htm

캐릭터 세팅

http://www.maxhelp.com/content/tutorials/iksolvers/iksolvers.htm

http://www.3dluvr.com/content/artz/3dsmax/std/acme-cable.php 와이어애니

맥스 스크립트

http://rambo119.mytripod.co.kr/main_3D.htm

http://www.neiblevins.com/maxscripts/maxscripts.htm

http://gfxcentral.com/bobo

http://www.ruff-stuff.com

http://www.blur.com/blurbeta


다크트리

http://www.darksim.com/

http://www.swcp.com/~janelin/dt/

Posted by reiKop

2008/11/04 16:07 2008/11/04 16:07
Response
No Trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/49

플래시에서 현재 주소 가지고 오기

[code]ExternalInterface.call("eval", "window.location.href")[/code]

Posted by reiKop

2008/11/01 11:04 2008/11/01 11:04
, , , ,
Response
No Trackback , a comment
RSS :
http://reikop.raony.net/blog/rss/response/48

URLStream, UILoader로 이미지 불러오기

[code]var img:UILoader = new UILoader();
function set setImg(path:String):void{
  var u:URLRequest = new URLRequest(path);
  var stream:URLStream = new URLStream();
  stream.addEventListener('complete',complete);
  function complete(e:Event):void{
   var byte:ByteArray = new ByteArray();
   stream.readBytes(byte,byte.length);
   img.loadBytes(b);
   addChild(img);
  }
  stream.load(u);
}

[/code]

Posted by reiKop

2008/10/31 13:15 2008/10/31 13:15
Response
No Trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/47

HTTPS 에서 FLASH가 XML을 못읽어오는 문제

[code]Cache-Control: no-store
Cache-Control: no-store, must-revalidate
Cache-Control: no-store,max-age=0,must-revalidate
Cache-Control: max-age=0,must-revalidate
Cache-Control: must-revalidate
[/code]


HTML
[code]<META http-equiv="Expires" content="-1">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-store,max-age=0,must-revalidate ">
[/code]

ASP  
[code]<%  
Response.Expires = 0  
Response.AddHeader "Pragma","no-cache"  
Response.AddHeader "Cache-Control","no-store,max-age=0,must-revalidate"  
%>  
[/code]

JSP  
[code]<%  
response.setHeader("Cache-Control","no-store,max-age=0,must-revalidate");  
response.setHeader("Pragma","no-cache");  
response.setDateHeader("Expires",0);  
if (request.getProtocol().equals("HTTP/1.1"))
        response.setHeader("Cache-Control", "no-store,max-age=0,must-revalidate");
%>  
[/code]

PHP  
[code]<?  
header("Pragma: no-cache");  
header("Cache-Control: no-store,max-age=0,must-revalidate");  
?>[/code]

Posted by reiKop

2008/10/30 18:14 2008/10/30 18:14
, ,
Response
No Trackback , No Comment
RSS :
http://reikop.raony.net/blog/rss/response/45


블로그 이미지

HTML, Javascript 이야기

- reiKop

Notices

  1. 첫글.

Archives

Authors

  1. reiKop

Calendar

«   2010/03   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Site Stats

Total hits:
26926
Today:
10
Yesterday:
36