Search Results for '플래시 개발'

ATOM Icon

125 POSTS

  1. 2010/10/10 플래시 물리엔진 Box2DFlash로 역동적인 모션 그래픽 만들기 by 프로그래머 (1)
  2. 2010/05/22 액체 위에 국기 모양의 공이 떠있는 현상 시뮬레이션 플래시 by 프로그래머 (2)
  3. 2010/03/02 누구나 따라해볼 수 있는 플렉스 애플리케이션 만들기 동영상 by 프로그래머
  4. 2009/06/13 소녀시대 맴버들 사진이 3D 방향으로 회전하는 플래시 시계 by 프로그래머 (5)
  5. 2008/12/25 참고할만한 7가지 흥미로운 플래시 이펙트 샘플 소스 by 프로그래머 (27)
  6. 2008/10/09 플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2 by 프로그래머 (1)
  7. 2008/10/06 플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #1 by 프로그래머 (2)
  8. 2008/10/04 막대 그래프 만들기, 플래시 차트 소스 by 프로그래머
  9. 2008/10/01 학습용 배너 이미지 슬라이더 플래시 소스 by 프로그래머 (4)
  10. 2008/09/23 초간단 플래시 디지털 시계 만들기 동영상 by 프로그래머 (16)
  11. 2008/09/22 나만의 아날로그 플래시 시계를 직접 만들어 보자. by 프로그래머 (6)
  12. 2008/06/16 자유로운 메시지 교환을 위한 플래시톡(Flash Talk). by 프로그래머 (7)
  13. 2008/06/15 플래시 액션 스크립트 3.0, 고성능 3D 데모 by 프로그래머 (6)
  14. 2008/06/08 심플한 플래시 투표 위젯, TOP10 by 프로그래머 (8)
  15. 2008/04/13 웹브라우져 시작페이지를 가볍고 깔끔하게... by 프로그래머 (1)
  16. 2008/02/10 소녀시대 프로필 플래시 갤러리. by 프로그래머 (4)
  17. 2008/01/28 세로형 플래시 이미지 슬라이더. by 프로그래머 (1)
  18. 2008/01/15 홈페이지를 넘나드는 플래시 웃긴 대화방 by 프로그래머 (56)
  19. 2008/01/03 플래시를 제어하는 자바스크립트 소스 코드 by 프로그래머 (1)
  20. 2007/12/26 계산식을 입력하는 간변한 플래시 계산기 by 프로그래머 (5)
  21. 2007/12/08 지나간 글을 볼 수 있도록 만든 한줄 채팅 by 프로그래머 (3)
  22. 2007/12/02 플래시 밖으로 뛰쳐나온 테트리스 by 프로그래머 (3)
  23. 2007/11/30 알림이 스타일 위젯과 미니 테트리스 by 프로그래머 (3)
  24. 2007/11/22 플래시 북마크 버튼 꾸러미 디자인 변경 by 프로그래머 (5)
  25. 2007/11/20 블로그 번역 버튼 이미지를 교체했습니다. by 프로그래머 (7)
  26. 2007/11/19 보아, 문근영, 윤하 플래시 시계 by 프로그래머 (13)
  27. 2007/11/12 원더걸스, 소녀시대, 윤하 플래시 시계 by 프로그래머 (61)
  28. 2007/11/08 플래시에서 책장 넘기는 효과 내는 학습 자료. by 프로그래머 (1)
  29. 2007/11/06 비스타 플립3D 스타일 이미지 슬라이더 by 프로그래머 (1)
  30. 2007/11/01 내 사진으로 만드는 재미있는 플래시 시계 by 프로그래머 (8)
« Previous : 1 : 2 : 3 : 4 : 5 : Next »
위키백과에서는 물리엔진을 다음과 같이 설명하고 있습니다.
물리 엔진 또는 물리 연산 엔진은 강체동역학(충돌 감지 포함), 연체동역학, 유동역학과 같은 단순한 특정 물리 시스템을 최대한 시뮬레이션하려고 하는 컴퓨터 소프트웨어이다. 이 엔진은 컴퓨터 그래픽스, 비디오 게임, 영화 분야에 쓰인다. 주로 비디오 게임에 미들웨어로서 이용되며 실시간으로 시뮬레이션 처리한다. 이 용어는 고성능 과학 시뮬레이션과 같은 물리 현상을 시뮬레이션하기 위한 소프트웨어 시스템을 가리키는 데 쓰이기도 한다.
Box2D는 다양한 개발언어에서 활용될 수 있는 2D 물리엔진이며 이를 실습해보기 위해 플래시 물리엔진 Box2DFlash 를 활용해서 간단하지만 역동적인 모션 그래픽을 만들어보았습니다. 중력과 마찰력을 없애고 탄성을 적당히 셋팅하면 다음과 같은 영상이 만들어집니다.




웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/619

Posted by 프로그래머

2010/10/10 00:12 2010/10/10 00:12
, , , , , , , , ,
Response
No Trackback , a comment
RSS :
http://hompy.info/rss/response/619

물리엔진으로 실감나는 생생한 플래시 게임을 만들어 보려고 이런 저런 테스트 중에 부력 시뮬레이션도 테스트 해볼 수 있게 되어 간단한 동작을 하는 플래시를 빌드해봤습니다. 하단에 놓여진 유체 위에서 부력이 작동하여 그 위에서 공이 떠있는 현상을 테스트 한 것입니다. 공에는 여러나라 국기의 모습이 입혀져 있으며 처음에는 20개의 공이 한꺼번에 떨어지며 3초 간격으로 추가로 공이 한개씩 떨어지도록 되어 있습니다. 그리고 떨어진 공들은 마우스로 드레그해서 움직일 수 있습니다. 유체 위에 공이 떨어지면 유체가 출렁이는 현상이 생기면 좋겠다는 아쉬운 부분도 있어 약간의 이펙트를 줘서 개선해 보면 좋을 것 같다는 생각도 들고 약간의 규칙을 적용해서 게임을 만들어 보면 어떨까 하는 생각도 해보게 됩니다.
부력 테스트를 위해 Box2DFlash 물리엔진과 b2BuoyancyController 를 사용했으며 물리엔진에 관심있는 분들은 관련 샘플 소스를 참고해서 개성있는 플래시 제작에 활용해보시기 바랍니다. 물리엔진을 처음 접하시는 분들은 관련 메뉴얼을 먼저 읽어보셔야 할 것이며 함께 포함된 예제 소스를 실행해보시면 도움이 될 것입니다.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/614

[연관 포스트]
아이폰 게임 제작을 위한 2D 그래픽 엔진 Cocos2D 설치 및 실행 동영상
아이폰 아이팟 코코아 터치 애플리케이션 개발 샘플 동영상
직장인을 위한 아이폰 게임 디자인 스터디를 추진해 봅니다.
직장인을 위한 아이폰 앱 개발 Cocos2D 스터디를 추진합니다.

Posted by 프로그래머

2010/05/22 10:52 2010/05/22 10:52

이 전에 포스팅한 "아이폰 아이팟 코코아 터치 애플리케이션 개발 샘플 동영상" 게시물에서 소개하고 있는 아이폰 애플리케이션과 비슷한 기능을 하는 플렉스 애플리케이션을 만드는 과정을 동영상으로 캡쳐해봤습니다. 우리가 알고 있는 플래시를 좀더 손쉽고 체계적으로 개발 할 수 있게 해주는 플렉스 프레임워크를 활용하면 비교적 적은 노력으로 유저 인터페이스를 좀더 세련되게 제작할 수 있게 됩니다. 동영상에는 플렉스 빌더가 등장하며 디자인 모드에서 라벨(Label)과 버튼(Button) 컨트롤을 플렉스 애플리케이션 컨테이너 위에 올리고 이 버튼을 클릭하면 웹브라우져로 어도비(Adobe) 홈페이지를 여는 매우 간단한 프로그램을 만드는 과정을 영상으로 담은 것입니다. 드림위버 같은 툴로 HTML과 자바스크립트를 다루는 느낌과 유사해 보이지만 실제 개발을 하기 위해서는 훨씬 많은 학습이 필요합니다.



웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/596

Posted by 프로그래머

2010/03/02 19:38 2010/03/02 19:38

플래시 CS4 툴을 이용해서 3D 좌표 속성을 주기적으로 변경하여 소녀시대 맴버 사진들을 입체적으로 회전시켜보는 간단한 플래시 시계를 만들어보았습니다. "내 사진으로 만드는 재미있는 플래시 시계"라는 포스트에서 소개한 플래시를 약간 개조한 것입니다. 재미삼아 취미로 사용했던 플래시를 오랜만에 다뤄보려니 새롭게 습득해야할 것들이 많아졌군요. 당분간 플래시에 시간 투자를 해야할까봐요.


addEventListener(Event.ENTER_FRAME, rotate_movieclip);
function rotate_movieclip(event:Event):void {
    mc_box.rotationY+=2;
    //mc_box.rotationX+=3;
    mc_box.rotationZ+=1;
}

<embed src="http://www.hompydesign.com/flash/3dclock.swf" quality="high" width="240" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/578

Posted by 프로그래머

2009/06/13 12:32 2009/06/13 12:32
, , , , , , , , , ,
Response
No Trackback , 5 Comments
RSS :
http://hompy.info/rss/response/578

여러가지 흥미로운 플래시 이펙트입니다. 플래시 인트로나 플래시 네비게이션 등에 응용하면 유용할 것 같습니다. 아래 소개된 플래시 소스를 참고할 수 있도록 플래시 소스 묶음 파일도 첨부합니다.

[플래시 소스, 폭죽 터지는 효과]


[플래시 소스, 텍스트 이펙트]



[플래시 소스, 불꽃 제어]



[플래시 소스, 잡고 던질 수 있는 매직볼]
마우스로 볼을 잡고 던지기.


[플래시 소스, 전기 방전 효과]



[플래시 소스, 웨이브 에뮬레이션]
마우스로 중앙에 있는 네모를 잡고 흔들기.


[플래시 소스, Cyber, Gypnotic 이펙트]



[플래시 소스 모음]


웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/550

Posted by 프로그래머

2008/12/25 11:04 2008/12/25 11:04

플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다. 아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.

[product.txt]
title=system&attribute=name|price|total|date&product=desktop|380000|10|2008-10-01,monitor|270000|5|2008-10-04,printer|160000|2|2008-09-28,notebook|870000|15|2008-10-06,mouse|12000|20|2008-09-20

[product_txt.fla]
System.useCodepage = true;
var product_vars = new LoadVars();
product_vars.onLoad = function(success) {
    if (success) {
        var attribute_str = this.attribute;
        var product_str = this.product;
        var attribute_array = this.attribute.split('|');
        var tmp_array = product_str.split(',');
        var product_array = [tmp_array[0].split('|'), tmp_array[1].split('|'), tmp_array[2].split('|'), tmp_array[3].split('|'), tmp_array[4].split('|')];
        tf_textarea.text += '[text file tester]\n';
        tf_textarea.text += '01: ' + this.title + '\n';
        tf_textarea.text += '02: ' + this.attribute + '\n';
        tf_textarea.text += '03: ' + this.product + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '04: ' + this.attribute.split('|')[0] + '\n';
        tf_textarea.text += '05: ' + this.attribute.split('|')[1] + '\n';
        tf_textarea.text += '06: ' + this.attribute.split('|')[2] + '\n';
        tf_textarea.text += '07: ' + this.attribute.split('|')[3] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '08: ' + this.product.split(',')[0] + '\n';
        tf_textarea.text += '09: ' + this.product.split(',')[1] + '\n';
        tf_textarea.text += '10: ' + this.product.split(',')[2] + '\n';
        tf_textarea.text += '11: ' + this.product.split(',')[3] + '\n';
        tf_textarea.text += '12: ' + this.product.split(',')[4] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '13: ' + this.product.split(',')[0].split('|')[0] + '\n';
        tf_textarea.text += '14: ' + this.product.split(',')[0].split('|')[1] + '\n';
        tf_textarea.text += '15: ' + this.product.split(',')[0].split('|')[2] + '\n';
        tf_textarea.text += '16: ' + this.product.split(',')[0].split('|')[3] + '\n';
        tf_textarea.text += '\n';
        tf_textarea.text += '17: ' + tmp_array[1].split('|')[0] + '\n';
        tf_textarea.text += '18: ' + tmp_array[1].split('|')[1] + '\n';
        tf_textarea.text += '19: ' + product_array[1][2] + '\n';
        tf_textarea.text += '20: ' + product_array[1][3] + '\n';
        tf_textarea.text += '\n';
        textarea += '21: ' + product_array[2][0] + '\n';
        textarea += '22: ' + product_array[2][1] + '\n';
        textarea += '\n';
        //trace(this.title);
    } else {
        //trace('error');
    }
}
product_vars.load("product.txt");

[product_txt.swf]



[product_txt.html]
<embed src="http://www.hompydesign.com/flash/sample/product_txt.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="520" height="420" base="http://www.hompydesign.com/flash/sample/"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/10/09 00:01 2008/10/09 00:01
, , , , , , , , ,
Response
No Trackback , a comment
RSS :
http://hompy.info/rss/response/513

플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다. XML 로 규격화된 자료 파일을 플래시에서 읽을 수 있다는 것은 자료에 근거하여 어플리케이션 처럼 동작하는 동적 플래시를 만들 수 있는 장점이 있습니다. 플래시로 XML 객체를 어떻게 다루는지 잘 익혀두시고 차후에 쓸만한 플래시 만드는 일에 잘 활용해보세요.

[product.xml]
<?xml version="1.0" encoding="euc-kr" ?>
<product>
    <item>
        <name>desktop</name>
        <price>380000</price>
        <total>10</total>
        <date>2008-10-01</date>
    </item>
    <item>
        <name>monitor</name>
        <price>270000</price>
        <total>5</total>
        <date>2008-10-04</date>
    </item>
    <item>
        <name>printer</name>
        <price>160000</price>
        <total>2</total>
        <date>2008-09-28</date>
    </item>
    <item>
        <name>notebook</name>
        <price>870000</price>
        <total>15</total>
        <date>2008-10-06</date>
    </item>
    <item>
        <name>mouse</name>
        <price>12000</price>
        <total>20</total>
        <date>2008-09-20</date>
    </item>
</product>


[product_xml.fla]
System.useCodepage = true;
function product_loader() {
    var product_xml = this.firstChild.childNodes;
    var product_len = product_xml.length;
    var item_xml = product_xml[0].childNodes;
    var item_len = item_xml.length;
    var name_xml = item_xml[0].childNodes;
    var name_len = name_xml.length;
    tf_textarea.text += '[xml file tester]\n';
    tf_textarea.text += '01: ' + product_len + "\n";
    tf_textarea.text += '02: ' + product_xml + "\n";
    tf_textarea.text += '03: ' + item_len + "\n";
    tf_textarea.text += '04: ' + item_xml + "\n";
    tf_textarea.text += '05: ' + name_len + "\n";
    tf_textarea.text += '06: ' + name_xml + "\n";
    tf_textarea.text += '\n';
    tf_textarea.text += '07: ' + item_xml[0].nodeName + "\n";
    tf_textarea.text += '08: ' + item_xml[0].firstChild.nodeValue + "\n";
    tf_textarea.text += '07: ' + item_xml[1].nodeName + "\n";
    tf_textarea.text += '08: ' + item_xml[1].firstChild.nodeValue + "\n";
    tf_textarea.text += '09: ' + item_xml[2].nodeName + "\n";
    tf_textarea.text += '10: ' + item_xml[2].firstChild.nodeValue + "\n";
    tf_textarea.text += '11: ' + item_xml[3].nodeName + "\n";
    tf_textarea.text += '12: ' + item_xml[3].firstChild.nodeValue + "\n";
    tf_textarea.text += '\n';
    textarea += '13: ' + product_xml[3].childNodes[0].nodeName + "\n";
    textarea += '14: ' + product_xml[3].childNodes[0].firstChild.nodeValue + "\n";
    textarea += '15: ' + product_xml[3].childNodes[1].nodeName + "\n";
    textarea += '16: ' + product_xml[3].childNodes[1].firstChild.nodeValue + "\n";
    textarea += '17: ' + product_xml[3].childNodes[2].nodeName + "\n";
    textarea += '18: ' + product_xml[3].childNodes[2].firstChild.nodeValue + "\n";
    textarea += '19: ' + product_xml[3].childNodes[3].nodeName + "\n";
    textarea += '20: ' + product_xml[3].childNodes[3].firstChild.nodeValue + "\n";
    tf_textarea.text += '\n';
    textarea += '21: ' + product_xml[3].firstChild.nextSibling.nodeName + "\n";
    textarea += '22: ' + product_xml[3].firstChild.nextSibling.nextSibling.nodeName + "\n";
    /*
    trace('product len = ' + product_len);
    trace('product xml = ' + product_xml);
    trace('item len = ' + item_len);
    trace('item xml = ' + item_xml);
    trace('name len = ' + name_len);
    trace('name xml = ' + name_xml);
    */
}
my_xml = new XML();
my_xml.onLoad = product_loader;
my_xml.ignoreWhite = true;
my_xml.load("product.xml");

[product_xml.swf]
 

[product_xml.html]
<embed
src="http://www.hompydesign.com/flash/sample/product_xml.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="520" height="420" base="http://www.hompydesign.com/flash/sample/"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/10/06 23:24 2008/10/06 23:24
, , , , , , , , ,
Response
No Trackback , 2 Comments
RSS :
http://hompy.info/rss/response/512

오늘 오후에 있을 플래시 스터디 과제인 막대 그래프 만들기에 대한 이해를 돕기 위해 간소화 시킨 플래시 차트 소스를 준비했습니다. 그래프 막대로 사용하기 위해 다섯 가지 색상의 무비클립을 만들었습니다. 차트에 적용할 데이터는 2차원 배열에 담았고 Tween 클래스를 활용해 막대 그래프에 활력을 불어 넣었습니다. 여러가지 Tween 클래스 효과를 실험하기 위해 onEnterFrame 이벤트를 이용해 5가지 다른 스타일을 일정한 시간 간격으로 보여주고 있습니다. 플래시 입문자들은 아래 소스를 수정하고 개선해 보시면 플래시 액션스크립트 학습이 도움이 될 것입니다. 뭐든 직접 해보는 것이 중요하므로 손수 멋진 디자인을 입혀서 자신만의 개성있는 막대 그래프를 만들어보세요.

 


import mx.transitions.Tween;
import mx.transitions.easing.*;

var chart_array = Array(
    Array('80','94','70','80','60')
    ,Array('60','100','78','50','80')
    ,Array('90','80','100','75','95')
);

var style_array = Array(
    Strong.easeOut, Elastic.easeOut, Bounce.easeOut, Regular.easeOut, Back.easeOut
);

var menu_max = chart_array.length;
var part_max = chart_array[0].length;
var time_step = 0, style_pos = 0;

function show_chart(set_style){
var i, j, y1, y2, style, mc;
    y1 = 0;
    for (i=0;i<part_max;i++) {
        for (j=0;j<menu_max;j++) {
            mc = this['mc_bar_'+j+'_'+i];
            y2 = chart_array[j][i] * 2;
            style = style_array[set_style];
            new Tween(mc,"_yscale",style,y1,y2,20,false);
        }
    }
}

this.onEnterFrame = function(){
    if (time_step>100) time_step = 0;
    if (time_step==0) {
        show_chart(style_pos);
        style_pos = (style_pos+1)%5;
    }
    time_step ++;
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/10/04 10:01 2008/10/04 10:01
, , , , , , , , ,
Response
No Trackback , No Comment
RSS :
http://hompy.info/rss/response/510

이미지 슬라이더는 좁은 공간에 좀더 많은 것을 보기 좋게 보여주기 위해 유용한 유저 인터페이스입니다. 아래 소개하는 내용은 이번 플래시 스터디 과제를 해결하기 위한 힌트이기도 하며 플래시 액션스크립트 초급자를 위한 학습용 플래시 소스이기도 합니다. Tween 클래스를 사용해서 매끄러운 배너 이동에 적용했으며 주기적으로 반복해서 함수를 실행하게 해주는 setInterval 함수를 이용해 일정 시간 간격으로 배너를 교체하도록 하였습니다. 그리고 마우스를 배너 위에 올렸을 경우 clearInterval 함수로 반복하는 것을 중지 하도록 했고 마우스가 배너 위를 벗어났을 때 다시 setInterval 함수를 이용해 다시 반복 하도록 했습니다. 배너의 갯수(menu_max), 배너의 폭(menu_width), 이동 시간 간격(show_time), 어떤 스타일로 이동할 것인지(show_style)를 변경할 수 있는 변수도 적용하였습니다.
백번 설명하는 것 보다 한번 직접 해보는 것이 플래시 액션스크립트 학습의 지름길입니다. 자신의 필요나 구미에 맞게 아래 플래시 소스를 수정 보완 해보시면 학습에 도움이 될 것입니다. 이렇게 만들어진 플래시는 블로그나 홈페이지 배너로 사용하면 보기 좋을 것이며 실제 많이 사용하고 있기도 합니다.







import mx.transitions.Tween;
import mx.transitions.easing.*;

var menu_pos = 0;
var menu_max = 4;
var menu_width = 200;
var show_style = 0;
var show_time = 4000;
var
menu_distance = menu_width * -1;
var time_id = setInterval(_root,"do_next", show_time);
mc_screen.onRollOver = function (){
    clearInterval(time_id);
}
mc_screen.onRollOut = function (){
    time_id = setInterval(_root,"do_next", show_time);
}
mc_screen.onRelease = function (){
    getURL("http://hompy.info/507","_blank");
}
function do_next(){
    var pos1, pos2, x1, x2;
    pos1 = menu_pos;
    menu_pos = menu_pos + 1;
    pos2 = menu_pos;
    x1 = pos1 * menu_distance;
    x2 = pos2 * menu_distance;
    menu_pos = (menu_pos) % menu_max;
    switch (show_style){
        case 1: new Tween(mc_screen,"_x",Elastic.easeOut,x1,x2,20,false); break;
        case 2: new Tween(mc_screen,"_x",Bounce.easeOut,x1,x2,20,false); break;
        case 3: new Tween(mc_screen,"_x",Regular.easeOut,x1,x2,20,false); break;
        case 4: new Tween(mc_screen,"_x",Back.easeOut,x1,x2,20,false); break;
        default: new Tween(mc_screen,"_x",Strong.easeOut,x1,x2,20,false); break;
    }
    trace (menu_pos+":"+x1+"->"+x2);
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/10/01 08:23 2008/10/01 08:23
, , , , , , , ,
Response
No Trackback , 4 Comments
RSS :
http://hompy.info/rss/response/507

플래시 입문자를 위해 초간단 플래시 디지털 시계 만들기 동영상을 만들어보았습니다. 동영상에서 나오는 화면 대로 따라하면 디지털 시계 하나가 만들어집니다. 플래시 제작이 어렵게 느껴졌던 분들이 있다면 동영상을 보고 욕심을 내보시면 어떨까 생각됩니다. 저는 취미로 플래시 제작을 즐기는 편인데 요즘 업무에 바빠서 취미 생활에 소홀해졌습니다. 플래시 제작을 취미로 즐기실 분이 있으시면 언제든 저와 함께 해요.^^
 



아래는 동영상에 사용된 플래시 디지털 시계 소스 코드입니다.

function display_clock(){
    var noon= 'PM';
    var ctime = new Date();
    var chour = ctime.getHours();
    var cmin = ctime.getMinutes();
    var csec = ctime.getSeconds();
    if (chour<12) noon = 'AM';
    if (chour>12) chour = chour - 12;
    if (chour<10) chour = '0' + chour;
    if (cmin<10) cmin = '0' + cmin;
    if (csec<10) csec = '0' + csec;
    tf_clock.text = noon+ ' '+chour+':'+cmin+' '+csec;
    delete ctime;
}

this.onEnterFrame = display_clock;


웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/09/23 09:06 2008/09/23 09:06
, , , , , , , , ,
Response
No Trackback , 16 Comments
RSS :
http://hompy.info/rss/response/502

나만의 아날로그 플래시 시계를 만들어보고 싶다면 아래 액션스크립트 소스 코드를 참고하세요. 보시면 아시겠지만 플래시 시계 소스 코드는 생각보다 간단하며 구현방법 또한 복잡하지 않습니다. 우선 중심점이 스테이지 중앙에 맞춰진 시침, 분침, 초침에 해당하는 무비클립을 만들고 Date 객체의 getHours, getMinutes, getSeconds 메소드를 이용해서 시간을 구하고 준비된 개별 시계 바늘에 부여된 이름의 무비클립 객체 회전각 속성 _rotation 값을 적절하게 계산하여 주기적으로 변경합니다. 소스 코드에서는 각 무비클립 마다 onEnterFrame 이벤트를 발생하게 하였으나 한개의 메소드로 통합하셔도 좋습니다. 여기까지 작업 하시고 실행하면 원하는 플래시 시계가 완성됩니다. 그리고 여러분의 취향에 맞는 멋진 시계 배경과 이쁜 시계 바늘을 디자인해서 적용하시면 개성있는 시계가 될것입니다. 나만의 멋진 시계를 만들어서 자신의 블로그 위젯으로 활용해보세요.

액션스크립트 용어와 객체 활용 샘플 코드 참고 자료 ==▶ http://cafe.naver.com/q69/86171






function
clock_sec_mc_func(){
    var nowDate = new Date();
    this._rotation = nowDate.getSeconds() * 6;
    delete newDate;
}

function clock_min_mc_func(){
    var nowDate = new Date();
    this._rotation = nowDate.getMinutes() * 6;
    delete newDate;
}

function clock_hour_mc_func(){
    var nowDate = new Date();
    this._rotation = nowDate.getHours() * 30 + (this._rotation = nowDate.getMinutes() * 0.5 % 30);
    delete newDate;
}

mc_clock_hour.onEnterFrame = clock_hour_mc_func;
mc_clock_min.onEnterFrame = clock_min_mc_func;
mc_clock_sec.onEnterFrame = clock_sec_mc_func;

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/09/22 08:48 2008/09/22 08:48

어떤 카페, 어떤 블로그, 어떤 홈페이에도 자유롭게 복사되어 붙여넣기 될 수 있는 플래시의 장점을 살려 홈페이지를 넘나들며 자유로운 메시지 교환을 손쉽게 해볼 수 있는 플래시톡(Flash Talk)입니다. 플래시톡은 채팅과 게시판의 중간단계이며 간편하게 메시지를 작성해서 올릴 수 있습니다. 간편한 메시지 입력, 간편한 메시지 보기에 주안점을 둔 유저인터페이스(UI) 입니다. 차차 로그인 기능이나 나만의 플래시톡을 만들 수 있는 기능 등이 추가될 수 있습니다.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info



개인용 플래시톡을 만들려면 아래 태그에 빨간색 부분을 자신의 아이디(myid)로 수정해서 사용해야 되며 아이디 개설은 http://www.hompydesign.com/blog/에서 해야합니다. 아이디를 개설하면 블로그 채팅이나 블로그 카운터 등을 사용할 수 있습니다.

[플래시톡 HTML 태그 소스 코드]
<EMBED FlashVars="myid=hompy" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/flash/flashtalk.swf width=300 height=400 type=application/x-shockwave-flash quality="high"></EMBED>

Posted by 프로그래머

2008/06/16 08:43 2008/06/16 08:43
, , , , , , , ,
Response
No Trackback , 7 Comments
RSS :
http://hompy.info/rss/response/479

플래시 액션 스크립트 3.0, 3D 라이브러리로 만들어진 고성능 모션 그래픽스 데모입니다. 최근 PaperVision3D 라는 플래시용 3D 라이브러리에 관심을 가지고 활용해볼 기회만 보고 있었는데 같이 일하는 디자이너가 알려준 링크에서 아래와 같은 플래시를 보니 욕심이 더 생기더군요. 시간을 쪼개서 3D 플래시에 대해 탐구하고 활용방안에 대해 생각해봐야겠습니다.
http://temp.roxik.com/datas/perform/index.html
http://code.google.com/p/papervision3d/

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2008/06/15 09:03 2008/06/15 09:03

심플한 플래시 투표 위젯, TOP10

투표 제목과 10개의 항목으로 구성된 심플한 플래시 투표 위젯입니다. 클릭하면 해당 항목의 투표 횟수가 올라가며 투표 횟수에 따라 순위(순서)도 바뀝니다. 투표는 제한 없이 할 수 있으므로 원하는 만큼 클릭할 수 있습니다. 투표를 마감할 시점에 사용하기 위해 중복 투표를 제외한 투표 값을 별도로 저장합니다. 10개 항목을 가진 투표하기 좋은 주제를 댓글로 남겨주시면 별도의 위젯으로 적용하겠습니다.



[플래시 투표 위젯 HTML 소스 코드]
<EMBED FlashVars="menu=1" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>
<EMBED FlashVars="menu=2" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>
<EMBED FlashVars="menu=3" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>
<EMBED FlashVars="menu=4" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>
<EMBED FlashVars="menu=5" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>
<EMBED FlashVars="menu=6" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogvote.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

Posted by 프로그래머

2008/06/08 17:36 2008/06/08 17:36
, , , , , , , , ,
Response
No Trackback , 8 Comments
RSS :
http://hompy.info/rss/response/476

웹브라우져 시작페이지를 가볍고 깔끔한 페이지로 바꿔보았습니다. 가볍고 깔끔하다는 것은 개인적인 판단입니다.
전에는 포털 사이트(주로 네이버)를 시작페이지로 설정해서 사용해왔었고 개인적으로 검색이나 다른 섹션으로 가는 링크 몇개 정도를 주로 이용하게 되더군요. 언제 어디서나 손쉽게 시작페이지를 설정할 수 있다는 면과 개인 적으로 검색을 자주 이용하는 성향으로 포털 홈페이지를 시작 페이지로 사용했던 것은 당연했었습니다. 그런데 웹브라우져를 조금 무거워 보이는 IE7 로 바꾸게 되고 나니 검색창도 별도로 있는데다 웹브라우져를 다수 띄우거나 다른 많은 프로그램과 병행해서 띄울 경우 그럭저럭 빠른 포털 홈페이지도 컴퓨터 자원의 효율적인 활용에 장애가 되는 문제로 인해 시작페이지를 비워두게 되었던 적도 있습니다. 그러나 빈페이지는 흰배경화면일 경우 눈에 피로감을 줄 수 있고 아무런 역할을 하지 못하는 공백이라는 단점이 있어 나만의 시작페이지를 만들어 보자는 결론에 이르렀습니다. AJAX 라는 기술과 웹2.0 이라는 트랜드를 도입한 개인 맞춤형 포털 사이트 라는 것이 있어 개인의 취향에 맞게 활용도 높은 시작페이지를 만들 수 있는 서비스들이 있지만 개인적으로 무거운 느낌이 들고 나름 번거로운 작업을 해야 합니다. 빼곡하게 링크들만 모아놓은 시작페이지 서비스를 하는 곳도 있지만 개인적인 취향에 맞지 않더군요.
그래서 나만의 시작페이지를 직접 코딩해서 사용하기로 했습니다. 로딩 속도, 기능성, 인터페이스, 배치 등을 고려해서 나름 심혈을 기울여 페이지를 완성했습니다. 급조한 페이지라 어딘가 부족해 보이는 부분이 있긴 한데 IE 와 Firefox 에서 별 무리 없이 돌아가며 부족한 부분은 심플한 플래시 위젯이나 자바스크립트 위젯을 만들어 보강할 생각입니다. 현재는 주요 사이트를 한글이나 영문으로 검색할 수 있는 "go hompy" 라는 플래시 위젯과 심심풀이를 위한 플래시 채팅 위젯을 붙여 두었습니다. 페이지 좌측에는 주요 포털 검색 사이트 검색창, 달력, 위젯 등을 배치했습니다. 검색을 자주 많이 다양하게 활용하는 터라 검색창을 주요 포털 마다 하나씩 나열했습니다. 페이지 중앙에는 홈페이지 링크들을 모아둔 박스들이 나열되어 있고 박스 타이틀 위에서 마우스를 위 아래로 이동하며 페이징 할 수 있게 했습니다. 개별 링크 앞에 있는 "+" 를 클릭해 새창에서도 해당 링크를 열 수 있게 했습니다. 로딩 속도를 높이기 위해 TEXT 위주로 구성을 했으며 DB접속 없이 페이지를 띄우도록 캐싱 처리 되었습니다. 실시간 검색어, IT 관련 최신 취업 정보, 최근에 관심 받고 있는 블로그 글로 구성된 박스도 배치되었습니다. 결과물을 내컴퓨터에 보관해서 쓸 수도 있지만 언제 어디서나 나만의 시작페이지로 이용할 수 있게 하는 접근성을 높이기 위해 별도의 심플한 주소를 가진 홈페이지에 업로드 되었습니다. 웹프로그래머의 시작페이지 주소는 http://go.hompy.info 가 되었습니다. 더 튜닝해야 할 것이 많지만 저랑 비슷한 성향을 가진 분들을 위해 시작페이지를 공개합니다. 다소간의 시간 여유가 있는 분들은 자신 만의 시작페이지를 직접 만들어 웹브라우져의 첫화면을 보다 가볍고 깔끔하게 사용해 보시기 바랍니다.

[웹사이트 검색 위젯 GO HOMPY 플래시 HTML 태그 ]
<EMBED FlashVars="skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/flash/gohompy.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

[심심풀이 실시간 채팅 위젯 블로그쳇 플래시 HTML 태그]
<EMBED FlashVars="myid=hompy&skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogchat.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>



웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2008/04/13 11:00 2008/04/13 11:00
, , , , , , , , ,
Response
No Trackback , a comment
RSS :
http://hompy.info/rss/response/451

소녀시대 프로필 플래시 갤러리.

얼마전에 공개한 플래시에 사용된 이미지를 수정해서 소녀시대 이미지와 그녀들의 프로필로 구성한 플래시 갤러리입니다. 포토샵 사용법을 동영상 강좌로 조금 배워보고 나서 나름 적절한 배치를 하고 간단한 이펙트도 줘봤습니다. 포토샵에 재미가 붙어 좀더 시간을 투자해서 이미지 다루는 솜씨를 높여야 겠다는 생각을 했습니다. 이왕이면 포토샵 동영상 강좌도 만들면서 배운다면 배우는 재미 뿐만 아니라 가르치는 재미도 느낄 수도 있을 것 같은데 시간이 허락할 것 같지 않네요. 설 연휴를 알차게 보내고 싶었으나 생각 만큼 되지 않았습니다. 나이 한 살 더 먹고 나니 올해는 더욱 시간이 귀하게 느껴지고 좀더 알차게 살아야겠나는 욕망이 불타 오르는 군요. 설사 연말에 또다시 아쉬움을 남길지라도 다시 도전해 봐야 겠지요?
참고로 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.

 

[소녀시대 플래시 갤러리 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/girlsgen.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="200" flashvars="image=http://www.hompydesign.com/club/images/girlsgen/girlsgen0.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen1.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen2.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen3.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen4.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen5.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen6.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen7.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgen8.jpg"></embed>
<br /><br />
<embed src="http://www.hompydesign.com/club/girlsgen2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="200" flashvars="image=http://www.hompydesign.com/club/images/girlsgen/girlsgenx0.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx1.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx2.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx3.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx4.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx5.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx6.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx7.jpg;http://www.hompydesign.com/club/images/girlsgen/girlsgenx8.jpg"></embed>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info


















Posted by 프로그래머

2008/02/10 12:34 2008/02/10 12:34

세로형 플래시 이미지 슬라이더.

보다 많은 이미지들을 비교적 작은 공간에서 표현하고 싶을 때가 있습니다. 이미지 슬라이더가 그러한 목적을 충족시켜주기도 합니다. 다음은 플래시로 만들어진 세로형 이미지 슬라이더입니다. 사용법은 기존에 공개한 이미지 슬라이더들과 같습니다. 플래시 파라메터 flashvars 에 image 와 page 변수에 필요한 값을 설정하시면 됩니다.
참고로 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.



<table border=0 cellpadding=5 cellspacing=0 bgcolor=#333333><tr><td align=middle><table border=0 cellpadding=1 cellspacing=0 bgcolor=#ffffff><tr><td align=middle>
<embed src='http://www.hompydesign.com/club/imagevslider.swf' width='80' height='396' wmode='transparent' flashvars="image=http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26165.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26164.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26163.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26162.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26161.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26154.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26153.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26152.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26122.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26121.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26123.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26125.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26124.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26112.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26111.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26110.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26020.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26021.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26022.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26003.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F26002.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25929.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25928.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25926.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25927.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25835.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25813.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25814.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25618.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25617.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25616.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25552.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25551.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25550.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25520.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25519.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25484.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25483.thumb_gallery_wmg;http://www.mud4u.com/new%2Fdata%2Ffile%2Fwaagle_gallery%2F25249.thumb_gallery_wmg&page=http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info;http://hompy.info"></embed></td></tr></table>
</td></tr></table>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2008/01/28 08:35 2008/01/28 08:35
, , , , , , , , ,
Response
No Trackback , a comment
RSS :
http://hompy.info/rss/response/383

블로그쳇의 매력은 로그인 없이 누구나 간단히 대화에 참여할 수 있다는 점과 대화명을 설정하기 전까지 컴퓨터에 의해 무작위로 선택된 재미있는 대화명을 사용하게 된다는 점입니다. 필요에 따라 별명을 수정할 수 있으며 채널을 구분하는 개인 아이디를 생성해서 별도의 개인 대화방 모드로 이용할 수 있습니다. 재미삼아 블로그나 개인 홈페이지에 노출시켜 사용할 수 있으며 게시판 게시물 내용으로 삽입되어 홈페이와 블로그 및 커뮤니티를 넘나들며 대화 내용을 공유할 수 있습니다. 블로그쳇을 처음 접하는 분들 중 컴퓨터에 의해 자동으로 나오는 메시지라고 생각해서 엉뚱한 말을 하거나 대화 주체가 익명이라는 것 때문에 다소간 매너 없이 대화하는 분들도 있지만 매너와 배려가 담긴 대화로 응수한다면 따듯한 대화방이 될것이라 생각합니다. 지인들과 차분한 대화를 원한다면 채널을 만들어서 개인대화방에서 대화를 나눠도 되겠죠. 개인적으로 추가하고 싶은 다양한 기능들이 있음에도 회사 업무에 바빠서 마음에만 담아두고 있습니다. 요즘 그동안 해왔던 분야와 거리감이 있는 게임 개발이라는 업무에 집중해야되서 여가 시간을 쪼개서 하고 싶은 작업들을 추진할 여력이 없군요. 그래도 부족하지만 블로그쳇을 아껴주시는 분들을 위해 노력해보겠습니다.

그리고 블로그쳇은 블로거나 카페 유저들이 자유롭게 쓸 수 있는 개인용과 기업 홈페이지를 위한 기업용으로 구분해 나가려고 합니다. 채팅 서비스 개발과 채팅 시스템을 유지 및 확장하기 위한 하드웨어 및 IDC센터에 코로케이션 인터넷 서비스 비용등을 확보하기 위해서 기업과의 제휴 또는 후원을 받고자 합니다. 기업용에 대해 궁금한 내용이 있는 분들은 MSN 메신져 hompy @ live . com 을 친구등록 하신 후 대화 신청하시면 상담을 받을 수 있도록 하겠습니다. 개인용 블로그쳇을 사용하시는 분들은 기존 처럼 본 개발 페이지에 댓글 남겨주시면 적극 검토하겠습니다.

블로그쳇을 자신의 블로그나 홈페이지에 노출시켜 사용하시려면 아래의 3가지 HTML 태그 중 자신의 사이트에 맞는 적당한 사이즈의 태그를 삽입하시면 됩니다. 아래 태그에 빨간색 부분을 자신의 아이디(myid)로 수정해서 사용해야 되며 아이디 개설은 http://www.hompydesign.com/blog/에서 해야합니다. 아이디를 만들면 블로그카운터블로그온 등의 위젯도 사용할 수 있습니다. 블로그쳇을 항상 띄워 놓고 싶을 경우 아래 소개한 링크를 이용하시면 됩니다. 블로그쳇 배경에 자신만의 스킨을 깔 수 있는데 아래 HTML 태그 중 파란색 부분의 이미지 주소를 원하는 배경 이미지 주소로 바꾸시면 됩니다.

[블로그쳇 항상 띄우는 링크]
http://hompy.us/go/?i=아이디&u=http://인터넷주소
http://hompy.us/go/?i=flash&u=http://flashcafe.org

[190 x 200 px 크기의 블로그쳇 HTML 태그]
<EMBED FlashVars="myid=hompy&skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogchat.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

[170 x 200 px 크기의 블로그쳇 HTML 태그]
<EMBED FlashVars="myid=hompy&skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogchats.swf width=170 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

[300 x 200 px 크기의 블로그쳇 HTML 태그]
<EMBED FlashVars="myid=hompy&skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogchatx.swf width=300 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

플래시를 복사해서 붙이는 과정을 잘 모르시는 분들은 "플래시 다운로드 및 복사 방법 이모저모에 동영상과 부연설명 추가" 게시물의 설명과 동영상을 참고하세요.

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2008/01/15 23:04 2008/01/15 23:04
, , , , , , , , ,
Response
No Trackback , 56 Comments
RSS :
http://hompy.info/rss/response/371

웹페이지에서 플래시(flash)를 제어하는 자바스크립트(javascript) 소스 코드입니다. 동영상 캡쳐 프로그램 같은 것으로 캡쳐해서 만든 플래시 처럼 별다른 액션 없이 프래임(frames)만 순차적으로 재생되는 플래시일 경우 재생 및 정지 버튼을 붙이고 싶을 때가 있습니다. 자바스크립트로 재생, 정지, 되감기, 줌 버튼등을 구현하였으며 현재 재생중인 프래임 번호도 표시해줍니다. 시간이 허락하는 분은 민밋한 버튼을 이미지나 플래시로 구현해서 재생할 플래시 위해 표시하는 프로그램으로 업그레이드 해보면 좋을 듯 합니다. 지금 재생되고 있는 동영상은 나름 재미있는 추천 디펜스 게임 VR디펜더Y3K 게임 실행 화면 입니다.

[플래시 제어 자바스크립트 소스 HTML]
<html>
<head>
<title>자바스크립트로 플래시 제어</title>
<script language="javascript">
var swf_timer_id, flash_obj, flash_frame_total, flash_frame_pos;
function swf_is_playing(){
 return flash_obj.IsPlaying();
}
function swf_stop(){
 flash_obj.StopPlay();
}
function swf_play(){
 flash_obj.Play();
}
function swf_rewind(){
 flash_obj.Rewind();
}
function swf_zoom(percent){
 flash_obj.Zoom(percent);
}
function swf_is_loaded(){
 return flash_obj.PercentLoaded();
}
function swf_timer(){
 var obj = document.getElementById('flash_play_bt_id');
 if (swf_is_playing()) {
  obj.value='stop';
  obj.onclick = swf_stop;
 } else {
  obj.value='play';
  obj.onclick = swf_play;
 }
 var obj = document.getElementById('flash_status_bt_id');
 obj.value = flash_obj.TCurrentFrame('/');
}

function swf_init(){
 flash_obj = document.getElementById('flash_swf_id');
 //flash_frame_total = flash_obj.TotalFrames();
 setInterval(swf_timer,30);
}
</script>
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="javscript:swf_init();">

<table cellspacing=0 cellpadding=0 border=0 bgcolor=#efefef>
<tr>
 <td>
  <embed id=flash_swf_id src="flash_movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="558" height="446" allowScriptAccess="always" wmode="transparent" autoplay="0" loop="0"></embed>
  </div>
 </td>
</tr>
<tr>
 <td>
  <table>
   <tr>
    <td><input id=flash_play_bt_id type="button" value="stop"></td>
    <td><input type="button" value="rewind" onclick="javascript:swf_rewind();"></td>
    <td><input type="button" value="90%" onclick="javascript:swf_zoom(50);"></td>
    <td><input type="button" value="100%" onclick="javascript:swf_zoom(0);"></td>
    <td><input id=flash_status_bt_id type="button" value="0"></td>
   </tr>
  </table>
 </td>
</tr>
</table>
</body>
</html>



웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2008/01/03 09:23 2008/01/03 09:23
, , , , , , , , ,
Response
No Trackback , a comment
RSS :
http://hompy.info/rss/response/359

계산식을 입력하는 간변한 플래시 계산기 컬큘레이터입니다. 6개의 계산창에 계산식을 입력하고 [ENTER]키나 [=]키를 입력하면 계산된 값이 계산식 끝에 출력됩니다. 예를들면 "1+2=" 라고 입력을 하면 "1+2=3" 으로 출력이 됩니다. 사용할 수 있는 키는 숫자와 함께 "-+*/()" 와 같은 기호들을 쓸 수 있습니다. 계산식과 정답이 함께 보이므로 계산에 대한 실수를 줄일 수 있고 6개의 계산창을 적절히 사용하면 몇개의 계산식을 함께 처리할 수 있으며 다른 계산을 위해 계산식을 지울 필요가 없겠습니다. 현재 계산창에서 다음 계산창으로 옮기려면 [TAB]키를 이용하세요. 개인적으로 이런 계산기가 있었으면 좋겠다고 생각해서 만들었는데 아마도 쓸모가 있을 것 같네요.



[플래시 계산기 컬큘레이터 HTML 태그 소스]
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/calculator.swf width=190 height=200 type=application/x-shockwave-flash quality="high"></EMBED>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/12/26 08:32 2007/12/26 08:32

지나간 글을 볼 수 있도록 만든 한줄 채팅 또는 한줄 게시판입니다. 페이지 단위로 글을 볼 수 있도록 오른쪽 상단에 페이져가 있습니다. 현재 별명(대화명)은 랜덤하게 정해지도록 되어 있으나 별명 수정이 가능하도록 할 생각입니다. 블로그톡을 다른 곳에 가져가서 쓰려면 아래 HTML 태그를 사용하세요. 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.



[블로그토크 플래시 HTLM 태그]
<EMBED FlashVars="skin=http://www.hompydesign.com/club/images/sample.jpg" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogtalk.swf width=300 height=400 type=application/x-shockwave-flash quality="high"></EMBED>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/12/08 18:21 2007/12/08 18:21
, , , , , , ,
Response
No Trackback , 3 Comments
RSS :
http://hompy.info/rss/response/339

플래시 밖으로 뛰쳐나온 테트리스

전에 공개한 플래시 미니 테트리스 게임에 플래시 밖으로 블럭을 뿌려주는 기능을 추가해보았습니다. 실험용으로 만들었기 때문에 보는 사람에 따라 반응이 다를 수 있으며 플래시로 외부 객체를 다루는 테스트의 의미를 지닙니다. 아래와 같은 태그를 사용하므로 동일한 화면을 감상할 수 있습니다. 자! 시작(start)버튼을 눌러볼까요?



<EMBED allowScriptAccess="always" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/blogtetris_html.swf width=190 height=200 type=application/x-shockwave-flash quality="high" flashvars="top=590&left=450&cell=25"></EMBED>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/12/02 16:03 2007/12/02 16:03
, , , , , , ,
Response
No Trackback , 3 Comments
RSS :
http://hompy.info/rss/response/333

알림이 스타일 위젯을 만들어서 블로그에 붙여봤습니다. 브라우져 오른쪽 하단에 알림이 스타일로 알리고 싶은 내용을 표시해주고 필요에 따라 자동으로 열리게 한다던지 알림이 창을 닫는 기능을 합니다. 그리고 전에 만들었던 플래시 미니 테트리스를 소폭 업그레이드 했고 알림이에 붙여봤습니다. 블로그로 요청이 있어서 DOWN 키를 누르면 블럭이 떨어지게 처리했으며 100라인을 크리어 하면 레벨업 되서 난이도가 올라가도록 처리되었습니다. 아직 완성되지는 않았지만 플래시 밖으로 테트리스가 노출되는 기능을 준비중입니다. 알림이 스타일 위젯은 뭔가 놓친것이 있어서 인터넷익스플로어에서 되는군요. 파이어폭스나 사파리에서도 되도록 처리해봐야겠네요.^^
혹시나 필요한 분들이 있을지 모르니 앞으로 디자인과 기능 등을 업그레이드 해봐야겠습니다.



웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/11/30 08:46 2007/11/30 08:46
, , , , , , , , ,
Response
No Trackback , 3 Comments
RSS :
http://hompy.info/rss/response/331

사용자 삽입 이미지

번역 버튼 디자인 변경에 이어 플래시 북마크 버튼 꾸러미의 디자인을 변경하였습니다. 기존에 약간의 움직이는 이미지가 들어간 것을 사용하시려면 아래의 플래시를 사용할 수 있습니다. 디자인은 좀더 수정이 될 예정이며 필요에 따라 동영상으로 변경될 수 있습니다. 몇가지 디자인 중에서 선택해서 사용할 수 있도록 조치할까 합니다.



[북마크 버튼 꾸러미 플래시 HTML 태그]
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/131&title=북마크 등록을 편하게 플래시 북마크 모음"></EMBED>



[북마크 버튼 꾸러미 플래시 HTML 태그]
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/bookmark0.swf width=360 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info/131&title=북마크 등록을 편하게 플래시 북마크 모음"></EMBED>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/11/22 13:01 2007/11/22 13:01
, , , , , , , , ,
Response
No Trackback , 5 Comments
RSS :
http://hompy.info/rss/response/318

사용자 삽입 이미지

블로그나 홈페이지를 번역 페이지로 연결해주는 번역 버튼 이미지를 교체했습니다. 만국기 이미지를 공개해놓은 홈페이지에서 가져와서 버튼 이미지로 사용했었는데 저작권 문제를 지적하는 사람이 있다고 해서 웹디자이너의 도움을 받아 수정했습니다. 저작권 문제를 떠나서 아무리 이쁜 이미지라도 계속 보면 실증 나는 법이니 새로운 것으로 교체할 시기가 되기도 했습니다. 차후에는 움직이는 이미지로도 바꿔볼까 생각중입니다. 자신의 블로그나 홈페이지 글을 외국인에게도 보여주고 싶다면 번역 버튼을 달아보세요. 사용법을 알고 싶으시면 [번역버튼 사용법]을 참고하세요.



[번역버튼 플래시 HTML 태그 소스]
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="60"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="flashvars" value="link=http://hompy.info"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=180 height=60 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info"></EMBED></object>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="108" height="36"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="flashvars" value="link=http://hompy.info"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=108 height=36 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info"></EMBED></object>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="90" height="30"><param name="movie" value="http://www.hompydesign.com/club/translate.swf"/><param name="flashvars" value="link=http://hompy.info"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.hompydesign.com/club/translate.swf width=90 height=30 type=application/x-shockwave-flash quality="high" FlashVars="link=http://hompy.info"></EMBED></object>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/11/20 09:00 2007/11/20 09:00
, , , , , , , , ,
Response
No Trackback , 7 Comments
RSS :
http://hompy.info/rss/response/315

보아, 문근영, 윤하 플래시 시계

전에 올린 원더걸스, 소녀시대 플래시 시계에 이어 보아, 문근영, 윤하 플래시 시계를 준비했습니다. 검색엔진 이미지 검색을 활용해 이쁜 사진들을 골라 적당히 사이즈 조정해서 완성했습니다. 이미지 찾아서 가공하고 만드는 것이 생각보다 시간이 많이 걸리는 군요. 좋아하는 연예인이나 미소녀, 미소년 플래시 시계가 필요하신 분은 이미지 모음을 준비해서 주시면 시간이 허락할 때 만들어보겠습니다. 하지만 직접 편집해서 스킨에 입힐 수 있으니 FLASHVAR 파라메터 skin 에 스킨 이미지 주소를 입력하셔도 됩니다.





[플래시 시계 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/maskclock7.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<embed src="http://www.hompydesign.com/club/maskclock8.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<br>
<embed src="http://www.hompydesign.com/club/maskclock7.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<embed src="http://www.hompydesign.com/club/maskclock8.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<br>
<embed src="http://www.hompydesign.com/club/maskclock7.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>
<embed src="http://www.hompydesign.com/club/maskclock8.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

내 사진을 배경으로 설정할 수 있는 플래시 시계입니다. 사진이나 플래시를 배경으로 설정할 수 있으며 선택한 배경 사진이나 배경 플래시에 따라 다양한 느낌의 플래시 시계가 될 수 있습니다. 아래 플래시 시계 HTML 태그 소스에서 파란색 부분에 배경으로 설정하고 싶은 이미지나 플래시 URL 주소로 바꿔서 배경을 설정합니다. 빨간색 부분의 숫자(1~5)를 변경해서 다른 스타일의 슬라이딩 효과를 낼 수 있습니다. 참고로 스킨을 설정하지 않으면 기본 스킨을 로딩합니다.
참고로 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.

[플래시 시계 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect001.swf&style=3"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/club/images/sample.jpg&style=4"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect002.swf&style=5"></embed>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

[배경이미지 샘플]

Posted by 프로그래머

2007/11/19 08:30 2007/11/19 08:30
, , , , , , , , ,
Response
No Trackback , 13 Comments
RSS :
http://hompy.info/rss/response/314

원더걸스, 소녀시대, 윤하 플래시 시계입니다. 요즘 대중의 사랑을 받고 있는 두 미소녀 그룹이 가요계에 돌풍을 일으키고 있습니다. 태연, 수영, 효연, 유리, 제시카, 티파니, 써니, 윤아, 서현 등 9명으로 구성된 소녀시대와 유빈, 선예, 예은, 선미, 소희 등 5명으로 구성된 원더걸스가 그 두 주인공들입니다. 소녀시대의 다시 만난 세계, 원더걸스의 텔미가 대표곡이죠. 요즘 원더걸스와 소녀시대를 모르면 따돌림을 받을 수 있으니 아직까지 모르시는 분들은 학습(?)을 하셔야겠네요.^^
아래는 원더걸스 시계, 소녀시대 시계, 여자 연예인 시계 순이며 3가지 타입의 모션 이펙트가 적용되었습니다.







[플래시 시계 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/maskclock4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<embed src="http://www.hompydesign.com/club/maskclock5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120"></embed>
<br>
<embed src="http://www.hompydesign.com/club/maskclock4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<embed src="http://www.hompydesign.com/club/maskclock5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=5"></embed>
<br>
<embed src="http://www.hompydesign.com/club/maskclock4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>
<embed src="http://www.hompydesign.com/club/maskclock5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>
<embed src="http://www.hompydesign.com/club/maskclock6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="style=4"></embed>

보아, 문근영, 윤하 플래시 시계 도 있습니다.

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

사용자 삽입 이미지

사용자 삽입 이미지

내 사진을 배경으로 설정할 수 있는 플래시 시계입니다. 사진이나 플래시를 배경으로 설정할 수 있으며 선택한 배경 사진이나 배경 플래시에 따라 다양한 느낌의 플래시 시계가 될 수 있습니다. 아래 플래시 시계 HTML 태그 소스에서 파란색 부분에 배경으로 설정하고 싶은 이미지나 플래시 URL 주소로 바꿔서 배경을 설정합니다. 빨간색 부분의 숫자(1~5)를 변경해서 다른 스타일의 슬라이딩 효과를 낼 수 있습니다. 참고로 스킨을 설정하지 않으면 기본 스킨을 로딩합니다.
참고로 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.

[플래시 시계 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect001.swf&style=3"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/club/images/sample.jpg&style=4"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect002.swf&style=5"></embed>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

[배경이미지 샘플]

Posted by 프로그래머

2007/11/12 08:45 2007/11/12 08:45
, , , , , , , ,
Response
3 Trackbacks , 61 Comments
RSS :
http://hompy.info/rss/response/307

인터넷 서핑하다가 발견한 책장 넘기기 효과, 전자책(e-book) 스타일 효과를 표현하기 위해 사용될 수 있는 플래시 구현 원리와 방법론 그리고 플래시 액션스크립트입니다. 책장 넘기기(page flip) 효과를 구현할 수 있도록 도와주는 유/무료 라이브러리를 사용하면 보다 간단히 만들 수도 있겠지만 때론 원리와 방법론을 알고 싶을 때가 있고 이를 알고 구현해보는 것이 자신의 기술적인 퀄리티를 높여줄 수 있습니다.

The Page Turn Effect in Flash MX

by Sham Bhangal, author of Flash Hacks
09/03/2004

In Hack #25 of Flash Hacks, I talk in general terms about how symmetry can aid the thought and design processes when you are developing scripted effects, because symmetry is a very common feature in both natural and man-made effects. I go on to show how to deconstruct one of the most recent "How is that done?" effects, the page turn, by looking for symmetry in the effect. What I don't cover is how to develop code that can be used to create the page turn effect. This article provides that part of the equation.

The development of the page turn hack is a useful exercise to develop, because it contains three of the most common tricks in Flash motion graphics effects--property-based animation, embedded movie clips, and masking. The last two are features that seem to confuse developers coming to Flash from other web programming languages. Having a good understanding of how these two features are used in the page turning exercise is instructive in learning how complex graphical effects are built up in Flash, because you can rarely create such effects using traditional property-based animation alone.

The source files developed in this article can be found on the download page for the Flash Hacks book. Although the code presented in this article is for Flash MX 2004, you will also find additional source files that are compatible with Flash MX for this hack (and almost all of the other hacks in the book) on the download page.

Symmetry and Page Turning

The symmetry of a turning page is shown below. Assuming that the turning page is folded right over, the shape of the two revealed pages is always symmetrical around the fold.

사용자 삽입 이미지
Four stages in a page turn. The dotted line shows the page fold, and this is also the line of symmetry

In any coded version of the page turn effect, creating this line of symmetry is a crucial first step.

During the page turn, a number of things happen.

The first is that the original page (area a) slowly disappears, and is replaced by the reverse edge of the turning page (area c). As the original page disappears, the page underneath it appears (area b).

사용자 삽입 이미지
The changes that occur as the page turns

The second step in working out how to create the code is in deciding which of the three areas (a, b, or c) that our code has to control. Symmetry tells us that we will have a much easier life if we chose to consider b and c. How do I know that a is irrelevant?

  • Area a is not symmetrical and is also an irregular shape. This would make it difficult to form equations that describe area a.
  • Areas b and c are symmetrical images of each other. We can immediately see from this that areas b and c must be part of the same process, and this makes their motion easier to implement in code.

Not only does symmetry help us deduce the way the page turn works, but considering symmetry also helps us to find the easiest solution!

We can now split the process of finding a programmed solution to animating the page turn effect into three parts:

  • Creating the line of symmetry.
  • Creating the animation of area b.
  • Creating the animation of area c.

We will tackle each in turn below.

Creating the Line of Symmetry

Looking at the previous diagrams, we see that the line of symmetry in the page turn effect starts at 45 degrees and moves towards the book spine. As it reaches the spine, the line of symmetry is at 90 degrees (straight up), giving us a fully open page on either side of the line of symmetry.

The interactive diagram below shows the required motion for the line of symmetry. Click-drag the circle at the bottom of the dotted line to see the line of symmetry move as per the final effect.

사용자 삽입 이미지
The source .fla for this animation, pageTurn01.fla, is on the download page for the Flash Hacks book. Click on the image above to open the animation in a new window.

When interacting with this diagram, you should see that:

  • The line of symmetry is constrained between the left and right edges of the page-- PAGE_SPINE and PAGE_EDGE.
  • The line is at 90 degrees when it is at PAGE_SPINE.
  • The line is at 45 degrees when it is at PAGE_EDGE.

This gives us the following equation for the angle of the line of symmetry, assuming that we have created this line as a movie clip with instance name line:


line._rotation = 45*(line._x-PAGE_SPINE)/page._width;

(Note: the line movie clip points straight up when it is at 90 degrees; hence, the above equation is really subtracting an angle between 0 and 45 degrees as the position of the line is moved between PAGE_SPINE and PAGE_EDGE.)

The rest of the code in the listing is pretty self-explanatory. The function pageTurn runs as the onMouseMove handler for the instance line (given that onMouseMove is more efficient than an onEnterFrame when you are dragging), and pageRelease acts as the onRelease handler.

Within pageTurn, the if statement constrains the line between the limits PAGE_EDGE and PAGE_SPINE. The updateAfterEvent() makes sure that the line is animated whenever the mouse moves. (This is usually much faster than every frame, thus ensuring smoother animation than if we had used an onEnterFrame, as per Hack #71 in the Flash Hacks book, which talks about a performance budget and the best use of each event to build responsive animation.)

The pageRelease function simply deletes the onMouseMove handler, which makes sure that animation stops when you release the line movie clip.


function pageTurn():Void {
  line.onMouseMove = function() {
      line._x = _xmouse;
      if (line._x>PAGE_EDGE) {
        line._x = PAGE_EDGE;
      } else if (line._x<PAGE_SPINE) {
        line._x = PAGE_SPINE;
      }
    line._rotation = 45*(line._x-PAGE_SPINE)/page._width;
    updateAfterEvent()
  };
}
function pageRelease():Void {
  delete line.onMouseMove;
}
var PAGE_SPINE:Number = page._x;
var PAGE_EDGE:Number = page._x+page._width;
var lineAngle:Number = 45;
line.hotspot.onPress = pageTurn;
line.hotspot.onRelease = pageRelease;
line.hotspot.onReleaseOutside = pageRelease;


Creating the First Page (Area b)

The easiest page to create is the page under the one being turned, or area b in the previous diagrams. As stated in the book, this area is a mask that is placed to the right of the line of symmetry. As the line of symmetry is moved from PAGE_EDGE to PAGE_SPINE, the page underneath the one being turned is revealed. In the interactive diagram below, the page being revealed is the one with the "2" on it.

사용자 삽입 이미지
The source .fla for this animation, pageTurn02.fla, is on the download page for the Flash Hacks book. Click on the image above to open the animation in a new window.

When interacting with this diagram, you should see that:

  • The grey rectangle will move with the line of symmetry. This is because it is embedded within the movie clip for the line (thus, no code is required to make the rectangle follow the line).
  • When you click the red text ("click here to activate the mask"), the rectangle will start masking the page with "2" over it.
  • The lower page ("2") is in reality above what appears to be the upper page ("1"). This is due to the way Flash masking works, which is the inverse of what you would expect. When the mask is not over the "2" (when the line of symmetry at the 45 degree position), the "2" is invisible, or "fully masked." When the mask is totally covering the mask (with the line of symmetry at the 90 degree position) the "2" is fully visible, or "unmasked." Because of this inverse action, we have to mask the "2" page rather than the "1" page, and this is why the "2" page is above the "1."

In terms of implementation, the mask clip is within the instance line and has the instance name rightMask. To make this rectangle start acting as the mask for the "2" page (which has an instance name bottomPage), we use the line:


 bottomPage.setMask(line.rightMask);
You can see this (the file pageTurn02.fla) being used in the onRelease event handler for the button corresponding to the "click here to activate the mask" button (button activate);:

activate.onRelease = function() {
  bottomPage.setMask(line.rightMask);
};

It should now be becoming clear what area we have chosen to ignore (area a). For those that have not worked it out, all will be revealed when we look at area c.

Creating the Second Page (Area c)

Creating the second page area, the reverse edge of the turning page, is harder to create than the previously completed one. This is not because of the code involved, but has more to do with visualizing what the mask that reveals this page needs to do.

Not to fear, because you can visualize what needs to happen via the interactive animation below. This adds the second mask area and the reverse of the turning page (area c). Again, click the "click here to activate the mask" text to make the mask start working.

사용자 삽입 이미지
The source .fla for this animation, pageTurn03.fla, is on the download page for the Flash Hacks book. Click on the image above to open the animation in a new window.

The area corresponding to the part we want to reveal as the page turns (A) is shown in green hatching in the diagram below. It is created by masking the reverse of the turning page (C) with a mask to the left of the line of symmetry (B).

사용자 삽입 이미지
Creating the reverse side of the turning page

The equation of the reverse side of the turning page (C) has much the same equation as the line of symmetry, except that it starts at 90 degrees instead of 45, giving us the equation for the rotation of the back of the page (as represented by the dotted red line) of:


backPage._rotation = 90*(line._x-PAGE_SPINE)/page._width

The back of the page is actually an embedded movie clip--an instance of backPage that contains a second movie clip, page. The instance page contains the actual page graphic. As backPage rotates, page moves with it, but page also moves relative to its own x axis (noting that this axis is also rotating). In the diagram, the movement of page relative to the red dotted line shows the result of this embedded movement. The embedding allows us to create the fairly complex rotational motion required of the turning page without having to resort to trigonometry, which would 1) be something that many designers hate and 2) potentially slow down the effect (accurate trig calculations are slow because they use a rather long binomial series to give the result).

사용자 삽입 이미지
The embedded animation that creates the back of the turning page

The interactive animation also shows us why we were able to get away with not considering the area a in the page turn effect; it is simply what is left over when areas b and c are added! As long as we place the top page below the other movie clips, it will naturally get obscured by the turning page. By realizing this (or rather, assuming it is unimportant because of symmetry early on), we have avoided having to animate it at all!

Note: to keep the discussion simple, I have made the pages single-sided (the pages only have content on one side, and in the effect so far, the back if the turning page is seen as a blank page.). You can easily create double-sided pages by making the movie clip back change per page turn.

Completing the Effect

The page turn doesn't look accurate at the moment, because of our approximation of assuming a perfect fold. Although we could fix this mathematically, Flash just doesn't have the performance needed to support the calculations to simulate curved pages. Readers of the Hacks book will know the fix to this--think of a hack to get around the problem.

In this case, the illusion of flexible pages is provided by some static alpha shadows that are applied to the pages as they turn. Although these are approximated shadows, they give the effect a real feeling of volume, and lift the animation towards realism considerably.

This is a major issue with much of Flash design--although you can do a lot with ActionScript, you almost always need some artistic ability to know how to create the graphical approximations needed to get beyond the code and create stuff that looks cool and/or realistic.

사용자 삽입 이미지 사용자 삽입 이미지
사용자 삽입 이미지 사용자 삽입 이미지
The page turn with faux shading created via alpha gradients superimposed over the pages

The interactive diagram below shows the effect with some shading added to the movie clips. Click-drag on the reverse of the page (the curled page area to the lower right) to turn the page.

사용자 삽입 이미지

The source for this example is available as pageTurn04.fla from the Flash Hacks download page. The final effect, pageTurn.fla, shows the same effect, but with multiple pages. You can download it from the same page. Click on the image above to open the animation in a new window.

Conclusion

The page turn effect described in this article shows how a fairly complex effect can be created through ActionScript.

As shown with this example, Flash retains its roots as a visual authoring tool even if you are using code to drive your motion graphics. The effect also relies heavily on other graphical features in addition to the code. These include embedded movie clips, masking, and faux 3D shading.

If you want to create compelling scripted motion graphics in Flash, being able to use the drawing tools is usually not that far away from being able to use ActionScript in relative importance.

You may be interested to know that a fully featured and open source page-turning .fla file is available at www.iparigrafika.hu/pageflip. The URL is well worth a visit if you want to create a commercial site based around the page turn effect quickly (that is, without further extending our version). Although it was created for Flash MX, the downloadable file extends the effect to include tear-off pages, solid pages (for book covers), and page cutouts.

Sham Bhangal is an author of and contributor to numerous books on Flash and ActionScript, including Foundation ActionScript for Flash MX, Flash MX Designer's ActionScript Reference, and Macromedia Flash MX Upgrade Essentials.

http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/11/08 09:08 2007/11/08 09:08

사용자 삽입 이미지

비스타 플립3D(Flip3D) 스타일 이미지 슬라이더입니다. 버튼 또는 화면을 클릭하면 비스타에서 플립 기능을 사용하는 것처럼 이미지가 전환/회전됩니다. 좀 튀는 갤러리(사진첩)를 만들기 위해 아이디어를 찾다가 만들게 되었습니다. 개발에 플래시(flash) 클래스 flash.geom.Matrix, flash.display.BitmapData, mx.transitions.Tween 등이 사용되었습니다. 아직 외부 이미지를 갤러리 이미지로 사용하도록 처리하지 않았지만 조만간 짬을 내서 추가해볼까 합니다. 참고로 또 다른 아이디어, 또 다른 스타일의 갤러리를 조금씩 준비하고 있습니다. 재미있는 플래시 작품을 만들기 위해 오늘도 데이트할 여가 시간도 투자하게 될 것 같습니다.^^ 만들고 싶은 플래시는 많은데 서버 프로그래밍, 액션스크립트, 모션 그래픽, 사운드 디자인 등 모든 것을 소화해야 하는 숙제가 있군요. 혼자서 모든 것을 마스터 하는 것은 불가능 하니 플래시 개발을 즐기는 파트너를 찾아야겠습니다.


웹프로그래머의 홈페이지정보 블로그 http://hompy.info

Posted by 프로그래머

2007/11/06 08:48 2007/11/06 08:48

내 사진을 배경으로 설정할 수 있는 플래시 시계입니다. 사진이나 플래시를 배경으로 설정할 수 있으며 선택한 배경 사진이나 배경 플래시에 따라 다양한 느낌의 플래시 시계가 될 수 있습니다. 아래 플래시 시계 HTML 태그 소스에서 파란색 부분에 배경으로 설정하고 싶은 이미지나 플래시 URL 주소로 바꿔서 배경을 설정합니다. 빨간색 부분의 숫자(1~5)를 변경해서 다른 스타일의 슬라이딩 효과를 낼 수 있습니다. 참고로 스킨을 설정하지 않으면 기본 스킨을 로딩합니다.
참고로 플래시를 복사하고 붙이는 과정을 모르시는 분은 플래시 관련 자료를 참고하세요.





[플래시 시계 HTML 태그 소스]
<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect001.swf&style=3"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/club/images/sample.jpg&style=4"></embed>

<embed src="http://www.hompydesign.com/club/maskclock3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="120" flashvars="skin=http://www.hompydesign.com/flash/effect/effect002.swf&style=5"></embed>

웹프로그래머의 홈페이지정보 블로그 http://hompy.info

[배경이미지 샘플]

Posted by 프로그래머

2007/11/01 08:48 2007/11/01 08:48
, , , , , , , ,
Response
A trackback , 8 Comments
RSS :
http://hompy.info/rss/response/294

« Previous : 1 : 2 : 3 : 4 : 5 : Next »

블로그 이미지

유니티 아이폰 안드로이드 게임 개발 (Unity3D, iPhone, iOS, Android, Game) , 독립 게임 개발자 (Indie Game Developer)

- 프로그래머

Archives

Calendar

«   2015/04   »
      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    

Site Stats

Total hits:
6106492
Today:
33
Yesterday:
401