세이박스

안드로이드 폰의 기본 카메라 앱을 이용한 사진 촬영 (Intent)

모바일앱개발
단말에 있는 카메라 앱을 띄워주는 방법
앱에서 상당히 많이 사용하는 기능
인텐트를 사용하는 방법으로 안드로이드 폰의 기본 카메라 앱을 이용해서
촬영한 결과를 가져오는 방법과 직접 촬영하는 기능을 만드는 방법이 있다.

* 직접 촬영 기능을 구현할땐, 카메라 미리보기를 위해서는 영상을 실시간으로 보여주기 위해서는 성능이 중요해서 하드웨어 가속 기능을 사용할 수 있는 서피스뷰(SurfaceView)를 사용한다.

아래 소스는 안드로이드의 기본 앱을 이용(Intent)해서 촬영하는 예제 이다.

1. 레이아웃 파일
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:onClick="onButtonCamera" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>


2. 자바소스
    ImageView imageView;
    File outputFile;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
        File storageDir = Environment.getExternalStorageDirectory();
        outputFile = new File(storageDir, "output.jpg");
    }
    public void onButtonCamera(View v) {
        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(outputFile));
        startActivityForResult(intent, 1001);
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if(requestCode == 1001) {
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inSampleSize = 8;
            Bitmap bitmap = BitmapFactory.decodeFile(outputFile.getAbsolutePath(), options);
            imageView.setImageBitmap(bitmap);
        }
    }

3. 퍼미션
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.camera" android:required="true"></uses-permission>









javascript에서 미리 이미지 로드하기

웹프로그램
롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다.
 

<script language="javascript">
function init()
{
 img1 = new Image;
 img1.src = "images/img1.jpg";
 img2 = new Image;
 img2.src = "images/img2.jpg";

 document.getElementById("num1").src = img1.src;
 document.getElementById("num2").src = img2.src;
}
</script>

<body onload="javascript:init();">
<img id="num1"><br>
<img id="num2"><br>
<body>
 

 

jpg 뿐만 아니라 gif 까지 썸네일 처리 할려면 netpbm 설치하기

서버,보안
리눅스 서버 설치후 보통 GD 설치로 이미지 썸네일 처리를 하지만 gif 포멧 리사이징 또는 비율 자동으로 잘라주는 유용한 썸네일 기능을 하고자 한다면 netpbm 설치하면 편리합니다.
뿐만 아니라 간단한 포토샵 필터 기능도 적용할 수 있습니다.
투명처리 등 다양한 옵션을 이용할 수 있습니다.

netpbm-10.35-1.fc5.i386.rpm
netpbm-devel-10.35-1.fc5.i386.rpm
netpbm-progs-10.35-1.fc5.i386.rpm
위 3개의 파일을 rpm 방식으로 설치 하면 됩니다.

먼저 기존에 설치된 rpm이 있는지 찾아 봅니다.

# rpm -qa | grep netpbm

만약 이미 설치된 rpm이 출력된다면 설치되어 있으니 그냥 이용하시거나 지우고 다시 설치 하시면 됩니다.
기존 설치된 rpm을 지울려면

# rpm -e --nodeps netpbm-10.35-6.SUL2

처럼 뒤에 파일명만 동일하게 적어주고 삭제 하시면 됩니다.

# rpm -Uvh netpbm-10.35-1.fc5.i386.rpm
경고: netpbm-10.35-1.fc5.i386.rpm: Header V3 DSA signature: NOKEY, key ID 4f2a6fd2
준비 중...                  ########################################### [100%]
   1:netpbm                 ########################################### [100%]

# rpm -Uvh netpbm-devel-10.35-1.fc5.i386.rpm
경고: netpbm-devel-10.35-1.fc5.i386.rpm: Header V3 DSA signature: NOKEY, key ID 4f2a6fd2
준비 중...                  ########################################### [100%]
   1:netpbm-devel           ########################################### [100%]

# rpm -Uvh netpbm-progs-10.35-1.fc5.i386.rpm
경고: netpbm-progs-10.35-1.fc5.i386.rpm: Header V3 DSA signature: NOKEY, key ID 4f2a6fd2
준비 중...                  ########################################### [100%]
   1:netpbm-progs           ########################################### [100%]

위처럼 3개를 설치 해주시면 됩니다.

그럼, 기본 설치 경로는 /usr/bin/ 아래 설치되며
/usr/bin/djpeg
/usr/bin/giftopnm
/usr/bin/pnmscale
등의 명령을 사용하실 수 있습니다.

옵션 사용법은 다음에 올리도록 하겠습니다.

 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

자바스크립트를 이용해서 여러장의 이미지 롤링하기

웹프로그램
쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다.

먼저 예제 이미지는 총 4장 입니다.
현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다.

1. 이미지 넘버
이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다.

<!-- 이미지 넘버링 -->
<div style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: relative; TOP: 0px; HEIGHT: 0px; display:block;">
 <div style="Z-INDEX: 1; LEFT: 800px; WIDTH: 135px; POSITION: absolute; TOP: 15px; HEIGHT: 0px">
  <table border=0 cellpadding=0 cellspacing=0 align=right>
   <tr>
    <!-- 이미지 넘버 1 -->
    <td width=20><a href="#none"><img id='num_1' src="http://dalincoupon.com/images/group/ico1_on_.gif" border=0 onclick="clickImg(1,'/mall/updir/products/99fed6c0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 2 -->
    <td width=20><a href="#none"><img id='num_2' src="http://dalincoupon.com/images/group/ico2_off_.gif" border=0 onclick="clickImg(2,'http://dalincoupon.com/mall/updir/products/1239dae0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 3 -->
    <td width=20><a href="#none"><img id='num_3' src="http://dalincoupon.com/images/group/ico3_off_.gif" border=0 onclick="clickImg(3,'http://dalincoupon.com/mall/updir/products/76acc690.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 4 -->
    <td width=20><a href="#none"><img id='num_4' src="http://dalincoupon.com/images/group/ico4_off_.gif" border=0 onclick="clickImg(4,'http://dalincoupon.com/mall/updir/products/94a63cd0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이후 이미지를 추가 하셔도 됩니다 -->
   </tr>
  </table>
 </div>
</div>
<!-- //이미지 넘버링 -->

이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다.
"num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다.


2. 대표 이미지 출력
기본적으로 출력된 첫번째 이미지를 적용 합니다.
img 태그에 id값을 "mainImage"로 적용합니다.

<!--상품 메인이미지-->
<img id="mainImage" src="http://dalincoupon.com/mall/updir/products/99fed6c0.jpg" width="950">




3. 자바스크립트 소스

<script type="text/javascript">
<!--
var numIdx = 1; //첫 이미지 배열 번호
var nextimg = 2; //다음 바뀔 이미지 배열 번호
var timerchecker = null; //롤링 시간을 초기화 하기 위한 선언

var imgs = new Array(); //이미지 URL을 배열로 담아두기
imgs[1] = "http://dalincoupon.com/mall/updir/products/99fed6c0.jpg";
imgs[2] = "http://dalincoupon.com/mall/updir/products/1239dae0.jpg";
imgs[3] = "http://dalincoupon.com/mall/updir/products/76acc690.jpg";
imgs[4] = "http://dalincoupon.com/mall/updir/products/94a63cd0.jpg";

/* 이미지 넘버를 클릭시 호출하는 함수 */
function clickImg(idx,img) {
 clearTimeout(timerchecker); //시간 초기화
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1; //마지막 이미지가 아니면 다음 +1 이미지로 이동
 } else {
  nextimg = 1; //이미지가 마지막 장이면 다음 이미지는 첫장으로 이동
 }
 /* 이미지 롤링 호출, 이용자가 클릭해서 보는 이미지 이므로 20초 지연 */
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",20000);
}

/* 이미지 롤링 함수 */
function changeImg(idx,img) {
 clearTimeout(timerchecker);
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1;
 } else {
  nextimg = 1;
 }
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
}
timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
//-->
</script>

자바스크립트 내부에 주석을 달아 놨지만 다시 설명을 덧붙이겠습니다.
먼저 페이지 로딩시 지정한 이미지를 배열로 담습니다.
var imgs = new Array();

그리고, timerchecker 라는 변수에 window.setTimeout(); 함수를 담습니다.
이때 적용되는 함수로는 5000 -> 5초 지연후 changeImg() 함수를 호출 됩니다.
이때 nextimg값을 전달 하므로 처음엔 changeImg(2,http://dalincoupon.com/mall/updir/products/1239dae0.jpg);
두번째 이미지 정보를 changeImg() 함수에 전달합니다.

이미지 롤링 함수에서는 전달 받은 idx와 img 값을 이용해서 다음 이미지로 변경 그리고 이미지 넘버역시 함께 변경 합니다.

만약 사용자가 이미지 넘버를 클릭시엔 이용자가 원하는 이미지를 바로 볼수 있도록 clickImg() 함수를 호출합니다.
해당 함수 역시 changeImg() 함수와 동일하지만 단, 지연시간을 20000 -> 20초로 지정하여 사진을 볼수 있는 시간을 지연해 줍니다.
20초가 지나면 다시 원래되로 changeImg() 함수가 5초 간격으로 반복 처리 됩니다.


여기서 한가지 더 응용한다면 이미지 전환할때 슬라이드 효과를 적용할수도 있지만 그럴경우 소스가 매우 복잡해져서 이정도록 적용해 봤습니다.
위 소스를 그대로 적용시 달인쿠폰 상품 이미지가 롤링 되는것을 보실 수 있을겁니다.
달인쿠폰 반값 할인 사이트 참조하세요!
김병만의 달인쿠폰 : http://dalincoupon.com


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

IE6 브라우저 PNG 투명 이미지 처리 방법

웹프로그램

사용자 삽입 이미지


오늘 달인쿠폰(http://dalincoupon.com/) 커밍순 페이지를 추가하는 작업을 했습니다.
달인 김병만씨 사진을 PNG로 투명하게 가운데 보이도록 설정하고 배경이미지를 추가 했더니 IE6 브라우저에서 투명 처리 부분이 하늘색으로 보이는 것입니다.

아직은 IE6 이용자가 많다보니 그냥 놔두기엔 아닌것 같더군요.
그렇다고 Gif 파일로 투명하게 하자니 색상이 256이라 김병만씨 사진이 이상하게 되더군요.
자료를 찾아보니 역시나 답은 있더군요.

자바스크립트와 스타일 소스 조금 추가해서 해결하면 되더군요.

먼저 <head>와 </head> 사이에 다음과 같은 소스를 추가 합니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function setPng24(obj) {
 obj.width=obj.height=1;
 obj.className=obj.className.replace(/\bpng24\b/i,'');
 obj.style.filter =
 "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
 obj.src='';
 return '';
}
//-->
</script>

자바스크립트 소스는 스크립트 파일로 따로 분리 하셔도 상관 없습니다.


2. Style 소스

<style type="text/css">
.png24 {
   tmp:expression(setPng24(this));
}
</style>

Style소스 역시 Style 파일에 추가하셔도 상관 없구요.


이제 적용할 이미지에 클래스명을 지정해 줍니다.

<img src="main.png" border="0" class="png24">


그럼, 이제 정상적으로 배경이미지가 나올겁니다.

참고로, 달인쿠폰은 소셜커머스 사이트 입니다.
대박 사이트가 곧 오픈 예정입니다.




 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

프리웨어 PDF 변환 프로그램 PDF-Pro 3.0 개인사용자용

기타

사용자 삽입 이미지

MS워드(doc), 텍스트(txt), 이미지(gif, jpg), 파워포인트(ppt), 한글워드(hwp) 다양한 문서 및 이미지들을 공유할 때 해당 프로그램들을 보기 위해 모든 프로그램을 설치 할려면 엉청난 비용이 들겁니다.

물론 각 프로그램별로 뷰어 전용 프로그램도 제공하고 있지만, 모두 설치 하기엔 번거롭겠죠.
그래서 나온게 모든 문서를 공유할때는 하나의 포멧으로 주고 받자고 해서 나온것이 PDF 파일 포멧 입니다.
어도비(adobe)사에서 만들 포멧으로써 해당 포멧 역시 아크로리더라는 프로그램을 설치 해야만 볼수 있습니다.
당연히 아크로리더 PDF 뷰 프로그램 역시 무료 입니다.
하지만, MS워드 또는 한글 워드, 파워포인트 등 다양한 문서들을 PDF로 변환 해주는 기능을 갖춘 Adobe Acrobat의 프로그램의 경우엔 다소 비싸게 비용을 줘야 합니다.
가격은 버전에 따라 40~70만원 정도 하는군요.

하지만, PDF-Pro의 경우 개인사용자에게는 무료로 제공 하고 있습니다.
사용법 또한 매우 간단하며 워터마크와 암호화 기능까지 제공하고 있어 매우 유용한 PDF 변환 프로그램 입니다.

1. 일단 원본파일을 선택해서 아래쪽 창에 원하는 변환하고자 하는 문서를 끌어서 옮깁니다.
2. 좌측에 생성 PDF 폴더를 지정 해 줍니다.
3. PDF-Pro 페이지 설정에서 컬러, 흑백 유무를 선택합니다.
4. 워트 마크 필요시 워트마크 설정을 선택후 텍스트를 입력하면 흐릿하게 배경으로 입력한 문자가 표시 됩니다.
5. 암호화 필요시 암호화 우측 펼침 버튼을 클릭후 열기, 수정 구분해서 비번을 넣습니다. 열기에만 비번을 넣을경우 열기 후 수정까지 됩니다. 둘다 입력시 열기를 하더라도 수정 하기 위해선 비번을 한번 더 입력해야합니다. (기타 프린터 허가 등 옵션을 선택할수 있습니다)
6. 마지막으로 "작업시작" 클릭해서 PDF파일을 생성하면 끝입니다.

기타 PDF병합, PDF추출 기능도 있습니다.

유용하게 이용하시기 바랍니다.

favicon.ico 파비콘을 손쉽게 만들어 주는 사이트

웹프로그램
사용자 삽입 이미지
favicon.ico 파일을 처음 접하시는 분이라면 어떻게 만들어야 할지 고민되시죠.

http://www.favicon.cc 라는 사이트에서 손쉽게 만들수 있도록 해줍니다.

그림판 처럼 dot 펜으로 콕콕 찍어서 그림을 그리시면 아래쪽에 미리보기가 나옵니다.

완성 되었으면 아래 다운로드를 클릭하시면 favicon.ico 파일로 저장이 됩니다.

다운 받은 favicon.ico 파일을 웹서버에 업로드 하신뒤 웹소스에 아래 한줄을 추가 해주시면됩니다.

<link rel="Shortcut Icon" href="http://www.saybox.co.kr/favicon.ico">

당근, href="자신의 파비콘 파일" 이부분은 자신의 파비콘 경로로 바꿔주셔야겠죠!

제대로 적용 되었다면 웹주소란 또는 즐겨찾기 추가시 해당 아이콘이 붙습니다.

근데, 왜 저의 브라우저에선 보이지 않을까요? 그런데, 글을 왜 올렸을까나 ㅋㅋ

매우 간단하죠! ^^

작성 : 세이박스 www.saybox.co.kr

CSS 이미지 테두리를 액자처럼 라인 넣어 주기

웹프로그램
사용자 삽입 이미지


이미지만 출력시 다소 허전한 느낌을 줄때 테두리에 연한 회색으로 그려 주면 다소 깔끔하게 보입니다.
스타일 적용은 다음과 같습니다.

<div style="width:이미지폭px;height:이미지높이px;border:2 solid #CDCDCD;padding:2px;">
<img src="이미지">
</div>

위처럼 Div 로 이미지 소스를 감싸 주시면 되며
width : 이미지의 폭 픽셀 값을 넣어 주시구요
height : 이미지의 높이 픽셀 값을 넣어 주세요
border : 라인 두께 인데 적절히 조절해서 이용하세요
solid #color : color 값은 이미지에 어울리는 색으로 넣어 주시면 됩니다.
padding : 이미지와 라인 사이 공백으로써 적절히 띄워주시면 깔끔하게 보입니다. 큰 이미지 일수록 많이 띄워야 겠죠..^^ 

자바스크립트 마우스 따라 다니는 이미지 2탄

웹프로그램
마우스 커서가 움지는 위치를 따라 다니는 이미지 기능을 앞전에 올렸는데 문제점이 스크롤을 내려 버리면 좌표값이 이상해지는 문제를 발견해서 스크롤시엔 스크롤에의한 이동된 좌표값을 추가하도록 했습니다.

사용자 삽입 이미지


<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;">
<img src="http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg">
</div>
<script>
function Move1(e) {
 document.cs.left=e.pageX + 10;
 document.cs.top=e.pageY + 10;
}
function Move2(){
 cs.style.left=event.clientX + document.body.scrollLeft;
 cs.style.top=event.clientY + document.body.scrollTop;
}
if (document.layers) {
 document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove=Move1;
}
if (document.all) {document.onmousemove=Move2;}
function Show_icon(divid) {
  cs.style.visibility = "visible";
}
function Hide_icon(divid) {
  cs.style.visibility = "hidden";
}
</script>
<img src="http://photo-media.daum-img.net/200904/15/mediadaum/20090415114211.511.jpg"  onmouseover="Show_icon()" onmouseout="Hide_icon()">

자바스크립트 마우스 따라 다니는 이미지

웹프로그램
이미지 위에 마우스를 올려 놓으면 이뿐 아이콘이 나타 나며 마우스가 돌아 다닐때 같이 따라 다니도록 하며 이미지 영역을 마우스가 벗어나면 따라다니던 마우스가 사라지게 하는 효과

사용자 삽입 이미지
<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;background-Image:url('http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg');"></div>
<script>
document.onmousemove=function () {
 cs.style.pixelLeft=event.x+10;
 cs.style.pixelTop=event.y+5;
}
function Show_icon(divid) {
  cs.style.visibility = "visible";
}
function Hide_icon(divid) {
  cs.style.visibility = "hidden";
}
</script>
<img src="http://photo-media.daum-img.net/200904/15/mediadaum/20090415114211.511.jpg"  onmouseover="Show_icon()" onmouseout="Hide_icon()">


위소스에서 width, height 는 따라 다니는 이미지의 크기를 지정 합니다.
event.x+10, event.y+10  에서 + 값을 증가 할수록  만큼 따라 다니는 이미지가 마우스 커서에서 멀어집니다.

위 글은 세이박스에서 작성한 글입니다.

이미지 로드하기(MovieClipLoader 이용)

디자인



< 출처 : http://namooya.com/zboard/zboard.php?id=f4f&no=24 >
[시작하기 전에]

이번에는 image로딩에 관해서입니다.

MovieClipLoader 클래스는 FlashMX2004버전때부터 지원하고 있습니다.
이미지나(jpeg) 또다른 플래시(swf)를 로딩하기 위해서 로딩 과정을 표시하는 것과, 로딩 완료후 그것을 어떻게 조정하느냐가 중요하죠.
예를 들어 img.jpg를 특정 무비클립내에 로딩한다고 하면, img.jpg가 얼마나 로드되고 있는지 알려줘야 하고, 다 로드 된 것을 알아차려, 그 크기와 위치를 조정해줘야 합니다.
2004버전이전에는  MovieClip.getBytesLoaded() 메소드를 통해서 로드과정을 표시하고, onClipEvent(data)MovieClip.onData를 통해서 로드가 다 되었다는 것을 알아냈습니다. 하지만, 쓰는 데 있어서 불편함이 많았고,
자주 쓰는 것임에도 불구하고, 새로운 플래시를 만들 때마다 로딩 과정 표시함수, 로딩 후 처리함수를 일일이 만들고, 그것들을 연결시켜줘야 했죠.
메크로미디어사 측에서도 이런 고충을 알았는지, MovieClipLoader 클래스를 제시해서 손쉽게 이미지와 swf 로딩을 할 수 있도록 하게 되었습니다.
사용한 소스는 액션스크립트에서 발췌해서 수정을 가한 것입니다.
따라서 변수 기명법이 지금까지 제가 해왔던 방식과는 약간의 차이가 있습니다.
하지만 이 방식이 메크로미디어사 측에서 추천하는 방식이니 제 방식으로는 고치지 않았습니다.
별로 다르지 않으니 보는데 무리는 없을 것입니다.
[활용방법]

이번 강좌 역시 어떠한 저작물을 만들기 위한 준비과정입니다.
[접두어]

무비클립 인스턴스명 : i+이름(사운드용 무비클립은 s+이름)
매개변수명 : v+이름
배열객체 : a+이름
클래스명 : c+이름
함수명 : f+이름
버튼인스턴스명 : b+이름
임시변수명 : temp+이름
링크에지명 : l+이름
어태치된 무비클립명 : place+이름
동적으로 생성된 무비클립명 : d+이름
외부파일에는 쓰는 변수명 : p+이름
LoadVars 객체의 인스턴스 명 : for+이름
텍스트 필드 계열 인스턴스명 : t+이름
[전체적인 구성]

모두 4개의 레이어로 구성되어 있습니다.
○ 제일 위의 레이어는 항상 그렇듯이 액션스크립트 전용 레이어입니다.
○ 그 다음에 보이는 '위배경' 레이어는 말그대로 위배경입니다. 그래픽요소만 있기 때문에 신경 쓸 것 없습니다.
○ 그다음이 'MnBnT' 레이어인데 여섯 개의 버튼과 한 개의 텍스트 필드, 한 개의 무비클립이 위치하고 있습니다.
○ 그 아래 '배경' 레이어입니다.

정리 해보면

순서

레이어이름

배치된 무비클립 & 콤포넌트 & 버튼

1

액션

없음

2

윗배경

없음

3

MnBnT

b0(Button),b1(Button),b2(Button),b3(Button),
b4(Button),b5(Button),tBoard(텍스트필드)
iLoadPlace(로드장소)

4

배경

 없음

 
[액션스크립트 설명]

모든스크립트는 메인프레임의 2프레임에 위치하고 있습니다.
[선수학습]
MovieClipLoader 클래스다음은 액션스크립트 사전의 내용입니다.

클래스를 사용하면 SWF 또는 JPEG 파일이 무비 클립으로 로드(다운로드)되는 동안 상태 정보를 제공하는 리스너 콜백을 구현할 수 있습니다.
MovieClipLoader 기능을 사용하려면 loadMovie()나 MovieClip.loadMovie() 대신 MovieClipLoader.loadClip()을 사용해 SWF 파일을 로드합니다.

MovieClipLoader.loadClip() 명령을 실행하면 다음과 같은 이벤트가 나열된 순서대로 발생합니다.

1. 다운로드되는 파일의 첫 번째 바이트가 디스크에 기록되었을 때
MovieClipLoader.onLoadStart() 리스너가 호출됩니다.

2. MovieClipLoader.onLoadProgress() 리스너를 구현한 경우, 이 함수는 로드 과정 동안 호출됩니다.
중요: 로드 과정 중에 아무 때나 MovieClipLoader.getProgress()를 호출할 수 있습니다.
3. 다운로드되는 파일이 모두 디스크에 기록되었을 때 MovieClipLoader.onLoadComplete() 리스너가 호출됩니다.

4. 다운로드된 파일의 첫 번째 프레임 액션이 실행된 후, MovieClipLoader.onLoadInit() 리스너가 호출됩니다.
MovieClipLoader.onLoadInit()가 호출된 후에는 속성을 설정하거나 메서드를 사용할 수 있으며 로드된 무비와 상호 작용할 수 있습니다.

파일을 완전하게 로드하지 못하면 MovieClipLoader.onLoadError() 리스너가 호출됩니다.

뭐.... 읽어보면 알 수 있는내용입니다.
사용법은 실제 소스를 보면서 설명합니다.

[메인스테이지 : 2frame]//MovieClipLoader 클래스를 사용하기 위한 인스턴스를 생성합니다.var my_mcl = new MovieClipLoader();

//리스너를 만들기 위해 새로운 객체를 만들어줍니다.
//이 객체에 중요함수 들이 들어갑니다.
//결론부터 말하면, 새로운 객체를 만들고, MovieClipLoader의 여러 가지 리스너 함수를 새로 정의한다음,
//MovieClipLoader의 인스턴스에 연결해주는 구조입니다.
//다소 복잡한 구성으로 보일 수 있으나 리스너의 구현은 보통 이런식으로 하니 이 방식을 잘 알아둘 필요가 있습니다.
//마우스 리스너, 키보드 리스너도 모두 이런 방식으로 구현합니다.

myListener = new Object();

//파일을 로드할 때], 가장 먼저 실행되는 리스너입니다. 이때 로딩이 시작된다는 메시지를 표시해주면 됩니다.
myListener.onLoadStart = function(
vTarget_mc) {
        _root.tInfo.text =
vTarget_mc+"에 이미지 로딩을 시작합니다.\n";

       //위에서 굵은 글씨로 중요라고 해서 getProgress()함수를 언제든지 실행할 수 있다고 되어있습니다.
       //이함수는 현재 로딩된 bytes를 구하는 데 씁니다.
       //사용법은 아래와 같이 변수를 하나 만들어 리턴값을 받고,
       //그 변수의
bytesTotal 속성을 참고하면 전체 크기를 알 수 있고,
       //
bytesLoaded 속성을 참고하면 현재 로드된 크기를 알 수 있습니다.
        var loadProgress = my_mcl.
getProgress(vTarget_mc);
        _root.tInfo.text += "전체크기 : "+loadProgress.
bytesTotal+"\n";
};

//로드가 진행되는 동안 계속적으로 호출되는 함수입니다.
//주의 할 것은 하드에 쓰기가 일어날 때 호출된다는 것입니다.
//따라서 플래시 자체의 다운로드 시물레이션에서는 호출되지 않습니다.
//
에 올려봐야 작동하는 것을 확인할 수 있습니다.
myListener.onLoadProgress = function(
vTarget_mc, loadedBytes, totalBytes) {
        _root.tInfo.text =
vTarget_mc+"에 이미지 로딩을 시작합니다.\n";
        _root.tInfo.text += "전체크기 : "+
totalBytes+"\n";
        _root.tInfo.text += "현재 : "+
loadedBytes+"\n";
};

//로드가 끝나면 호출되는 함수입니다.
myListener.onLoadComplete = function(vTarget_mc) {
        _root.tInfo.text += "로딩 완료!!\n";
};

//
다운로드된 파일의 첫 번째 프레임 액션이 실행된 후 호출되는 함수입니다.
//따라서 이곳에서 초기화를 해주면 됩니다.
//첫 번째 프레임 액션이 실행된 후 라는 것을 주의깊게 봐야 합니다.
myListener.onLoadInit = function(
vTarget_mc) {
        _root.tInfo.text += "크기와 위치를 조정합니다.\n";
       
 vTarget_mc._width = 300;
       
vTarget_mc._height = 160;
       
vTarget_mc._x = 25;
       
vTarget_mc._y = 25;
};

//로딩에 실패하면 호출되는 함수입니다. 실패원인은 errorCode를 통해 얻을 수 있습니다.
myListener.onLoadError = function(vTarget_mc,
errorCode) {
        _root.tInfo.text = "로딩 실패\n";
        _root.tInfo.text += "실패원인 : "+
errorCode+"\n";
};

//MovieClipLoader 의 인스턴에 연결시켜줍니다.
my_mcl.addListener(myListener);

//버튼 액션들입니다.
//누르면, 해당 버튼의 번호와 동일한 이미지를
iLoadPlace 무비클립에 로드합니다.
b0.onRelease = function() {
        my_mcl.
loadClip("img0.jpg", "_root.iLoadPlace");
};
b1.onRelease = function() {
        my_mcl.
loadClip("img1.jpg", "_root.iLoadPlace");
};
b2.onRelease = function() {
        my_mcl.
loadClip("img2.jpg", "_root.iLoadPlace");
};
b3.onRelease = function() {
        my_mcl.
loadClip("img3.jpg", "_root.iLoadPlace");
};
b4.onRelease = function() {
        my_mcl.
loadClip("img4.jpg", "_root.iLoadPlace");
};
b5.onRelease = function() {
        my_mcl.
loadClip("img5.jpg", "_root.iLoadPlace");
};
 

PHP 제로보드 이미지 한글 파일명 업로드 깨짐 엑박 되는 현상

웹프로그램
 
제로보드에서 이미지 업로드시 파일명이 한글로 되어 있는경우 엑박 (깨짐) 처리 되는경우를 방지 하기 위해 아예 파일명을 숫자로 변경해버리는 방법입니다.
 
수정파일 : write_ok.php
 
수정위치 :
이미지 파일이 업로드 2개까지 가능하니 두군데 적용.
 
 
// 디렉토리를 검사함 <=== 검색 해보시면 두군데가 있을겁니다.
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
 
위 코드 다음 줄에 아래와 같이 등록해주시면 됩니다.
 
1. 첫번째 위치
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
 
   // 파일명이 한글인 경우 날짜로 변환
   $temp=explode(".",$s_file_name1);
   $file_name_1=$temp[0];
   for($i=0;$i<strlen($file_name_1);$i++) {
    if(ord($file_name_1[$i])>0x80) {
     $temp1=explode(".",$s_file_name1);
     $s_file_name1 = $reg_date."1.".$temp1[1];
     break;
    }      
   }
 
2. 두번째 위치
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
   
   $temp=explode(".",$s_file_name2);
   $file_name_2 = $temp[0];
   for($i=0;$i<strlen($file_name_2);$i++) {
    if(ord($file_name_2[$i])>0x80) {
     $temp=explode(".",$s_file_name2);
     $s_file_name2 = $reg_date."2.".$temp[1];
     break;
    }      
   }

img를 php 페이지로 부르기

웹프로그램
$file="../../upLoad/expose/".$row[filename];
$img=@getimagesize($file);
$img_type=$img[mime];

Header("Content-Type: $img_type");

$fp=fopen($file,"r"); //스트리밍 JPG,GIF일 경우

$count = fread($fp, filesize($file));
echo $count;

PHP 썸네일

웹프로그램
function thumnail($file, $save_filename, $save_path, $max_width, $max_height) {

// 전송받은 이미지 정보를 받는다
$img_info = getImageSize($file);

// 전송받은 이미지의 포맷값 얻기 (gif, jpg png)
if($img_info[2] == 1) {
$src_img = ImageCreateFromGif($file);
} else if($img_info[2] == 2) {
$src_img = ImageCreateFromJPEG($file);
} else if($img_info[2] == 3) {
$src_img = ImageCreateFromPNG($file);
} else {
return 0;
}

// 전송받은 이미지의 실제 사이즈 값얻기
$img_width = $img_info[0];
$img_height = $img_info[1];

if($img_width <= $max_width) {
$max_width = $img_width;
$max_height = $img_height;
}

if($img_width > $max_width){
$max_height = ceil(($max_width / $img_width) * $img_height);
}

// 새로운 트루타입 이미지를 생성
$dst_img = imagecreatetruecolor($max_width, $max_height);

// R255, G255, B255 값의 색상 인덱스를 만든다
ImageColorAllocate($dst_img, 255, 255, 255);

// 이미지를 비율별로 만든후 새로운 이미지 생성
ImageCopyResampled($dst_img, $src_img, 0, 0, 0, 0, $max_width, $max_height, ImageSX($src_img),ImageSY($src_img));

// 알맞는 포맷으로 저장
if($img_info[2] == 1) {
ImageInterlace($dst_img);
ImageGif($dst_img, $save_path.$save_filename);
} else if($img_info[2] == 2) {
ImageInterlace($dst_img);
ImageJPEG($dst_img, $save_path.$save_filename);
} else if($img_info[2] == 3) {
ImagePNG($dst_img, $save_path.$save_filename);
}

// 임시 이미지 삭제
ImageDestroy($dst_img);
ImageDestroy($src_img);
}

php 파일로 이미지 부르기

웹프로그램

$qry="select * from test where p_id=$p_id";
$rs=mysql_query($qry) or die(mysql_error());
$row=mysql_fetch_array($rs);
$pic=$row[p_url];
$up_hit=$row[p_hit]+1;

$pic_header=getimagesize($pic);


$qry_up="update test set p_hit=$up_hit where p_id=$p_id";
mysql_query($qry_up)  or die('line14'.mysql_error());



Header('Content-Type: image/$pic_header[mime]');

/*$fp=fopen($pic,"r"); //스트리밍

$count = fread($fp, filesize($pic));
echo $count;
*/

$im = imagecreatefromjpeg($pic);
Imagejpeg($im,'',20);
ImageDestroy($im);

이미지 액박 오류 표시 안되게 하기

웹프로그램
간혹 이미지 파일이 불러지지 않아서 이미지가 액박이 나는 경우가 있다.
x 표시가 참 보기 싫을 때 있다. 이를 때 아예 표시 안되도록 하는 옵션
 
onerror="this.style.display='none';"
 
을 추가 하면 된다.
 
 
적용예)
 
<img src="이미지경로/이미지.jpg" onerror="this.style.display='none';">

CSS style 로 이미지 위에 텍스트 표시 하기

웹프로그램
<style>
.korea_medalx {width:548px;height:162px;background:url(ranking.gif) no-repeat;font-size:11px;font-family:돋움,Dotum,AppleGothic,serif; color:#666;position:relative;}
.korea_medalx .gold  {position:absolute;top:108px;left:184px;font:bold 16px Verdana; color:#f60;}
.korea_medalx .silver  {position:absolute;top:108px;left:247px;font:bold 16px Verdana; color:#353b3f;}
.korea_medalx .bronze  {position:absolute;top:108px;left:308px;font:bold 16px Verdana; color:#ba5af14;}
.korea_medalx .total  {position:absolute;top:110px;left:385px;font:bold 16px Verdana; color:#ff7062;}
.korea_medalx .rank  {position:absolute;top:110px;left:490px;font:bold 16px Verdana; color:#FF7062;}
.korea_medalx .link1  {position:absolute;top:138px;left:332px;width:93px;}
.korea_medalx .link2  {position:absolute;top:138px;left:446px;width:93px;}
</style>

<div class="korea_medalx">
<div class="gold">0</div>
<div class="silver">0</div>
<div class="bronze">0</div>
<div class="total">0</div>
<div class="rank">-</div>
<div class="link1"><a href="#"><img src="link1.gif"></a></div>
<div class="link2"><a href="#"><img src="link2.gif"></a></div>
</div>
 
ranking.gif 이미지를 배경 이미지로 표시하고 그 위에 position으로 텍스트 및 이미지를 표시 할 수 있습니다.

제로보드 이미지 한글 파일명 업로드 깨짐 엑박 되는 현상

웹프로그램
제로보드에서 이미지 업로드시 파일명이 한글로 되어 있는경우 엑박 (깨짐) 처리 되는경우를 방지 하기 위해 아예 파일명을 숫자로 변경해버리는 방법입니다.
 
수정파일 : write_ok.php
 
수정위치 :
이미지 파일이 업로드 2개까지 가능하니 두군데 적용.
 
 
// 디렉토리를 검사함 <=== 검색 해보시면 두군데가 있을겁니다.
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
 
위 코드 다음 줄에 아래와 같이 등록해주시면 됩니다.
 
1. 첫번째 위치
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
 
   // 파일명이 한글인 경우 날짜로 변환
   $temp=explode(".",$s_file_name1);
   $file_name_1=$temp[0];
   for($i=0;$i<strlen($file_name_1);$i++) {
    if(ord($file_name_1[$i])>0x80) {
     $temp1=explode(".",$s_file_name1);
     $s_file_name1 = $reg_date."1.".$temp1[1];
     break;
    }      
   }
 
2. 두번째 위치
 
   // 디렉토리를 검사함
   if(!is_dir("data/".$id)) {
    mkdir("data/".$id,0777);
    @chmod("data/".$id,0706);
   }
   
   $temp=explode(".",$s_file_name2);
   $file_name_2 = $temp[0];
   for($i=0;$i<strlen($file_name_2);$i++) {
    if(ord($file_name_2[$i])>0x80) {
     $temp=explode(".",$s_file_name2);
     $s_file_name2 = $reg_date."2.".$temp[1];
     break;
    }      
   }