태그 보관물: JavaScript

CSS/JavaScript로 만든 프로그래스 바

2012/11/17 Hangun's World 댓글 남기기

얼마전 AS3으로 짠 프로그래스 바를 CSS와 자바스크립트를 사용해서 비슷한 방법으로 만들 수 있네요. 물론 브라우저와 버전에 따라서 차이가 나긴 합니다. 일단 파이어폭스와 IE9, 맥용 사파리 에선 정상적으로 보이네요.
크롬이나 구버전의 IE 등에서는 border-radius와 overflow가 무시되거나 다르게 보여지는 경향이 있으므로, 이들 브라우저에서는 직사각형 형태로 만들어야 할겁니다.

우선 태그는 다음과 같이 2개의 DIV 태그를 사용해서 간단합니다.

<div class="progressbar shadow"><div class="progress embossed" id="progress"></div></div>

CSS로 각각의 DIV에 스타일을 입히고,

.progressbar{
	border-radius:10px;
	position:relative;
	width:250px;
	height:20px;
	background-color: #EFEFEF;
	overflow:hidden;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
}
.progress{
	border-radius:10px;
	position:absolute;
	left:-250px;
	width:250px;
	height:20px;
	background:url(/blog/wp-content/uploads/2012/11/test.gif) repeat-x 0px 0px;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
}

마지막엔 자바스크립트를 사용해서 backgroundPosiiton을 제어하는 것으로 마무리.

var p = 0;
var pct = 0;
function loading(){
	var prg = document.getElementById("progress");
	if(prg){
		p++;
		if(p >= 20){p = 0;}
		prg.style.backgroundPosition = p + "px 0px";
		pct++;
		if(pct >= 0){pct = -250;}
		prg.style.left = pct + "px";
	}
}
setInterval(loading, 50);

AS3

JSAgent, JavaScript 연동을 편하게???

2011/04/04 Hangun's World 댓글 2개

플래시와 자바스크립트 사이에 연동을 좀 편하게 하려고 만든 어플. 이전 프로젝트에서 자바스크립트 연동이 많아서, 이를 좀 쉽게 처리하기 위한 유틸이었는데, 이걸 다시 만들어 봤습니다.

자바스크립트에서 플래시로 데이터를 보낼 때는 다음 코드와 같이 플래시 객체에서 sendToFlash() 함수를 호출합니다.

var data = new Object();
data.message = "message from JavaScript";
flashObj.sendToFlash(data);

자바스크립트에서 보낸 데이터를 받기 위해서는 아래와 같이 이벤트를 등록해 줍니다.

JSAgent.addEvent(receiveFromJS);
function receiveFromJS(e:JSAgentEvent):void
{
    trace(e.data.message);
}

반대로, 플래시에서 자바스크립트로 데이터를 보내려면 JSAgent.sendToJS() 함수를 사용합니다.

var data = new Object();
data.message = "message from Flash";
JSAgent.sendToJS(data);

이렇게 보내진 데이터를 받기 위해서 자바스크립트에서는 receiveFromFlash() 함수가 정의되어 있어야 합니다.

function receiveFromFlash(data)
{
    alert(data.message);
}

ExternalInterface를 사용할 때는 호출되는 함수명을 사용자가 지정할 수 있고, 파라메터의 갯수를 유동적으로 처리할 수 있다는 부분이 장점일 수 있지만, 경우에 따라서는 단점이 될 수도 있습니다. 유동적인 파라메터를 …args와 같이 배열로 받아서, 다시 apply() 등의 함수와 엮어줘야 하죠.
그래서 플래시 쪽에서 받는 함수명은 sendToFlash, 플래시에서 호출하는 자바스크립트 함수명은 receiveFromFlash로 고정시켰으며, 또한 파라메터는 하나만 사용하는 대신 Object 객체의 속성에 전달할 데이터를 넣는 구조로 만들었습니다.
사실 사용성 면에서 EI를 개선한 부분은 별로 없습니다. 그냥 EI를 사용하는 편이 나을지도……

샘플 및 소스 다운로드: JSAgent_Samples

AS3

Retrieving the URL.

2008/09/25 Hangun's World 댓글 4개

플래시 무비에서 해당 SWF 파일을 포함하는 HTML 문서의 URL을 구하려면, HTML 문서에서 설정을 해주어야 합니다. FlashVars 파라메터 또는 자바스크립트를 통해서 플래시 무비로 URL을 전달해 줘야 하죠. 그런데 플래시의 ExternalInterface API와 자바스크립트의 eval() 함수를 이용하면, 그럴 필요가 없습니다.

To retrieve the HTML document’s URL in which the SWF file is inserted, you have to modify the HTML document. Pass the URL to the SWF movie via an FlashVars parameter or a JavaScript function. But, the ExternalInterface API in Flash and eval() function in JavaScript provide you with a more simple solution.

SWFファイルが含まれているHTMLドキュメントのURLを得るためには、そのHTMLファイルに何か設定をしなければならない。FlashVarsパラメタとかJavaScriptを使ってフラッシュムービーにURLを伝達します。でも、フラッシュのExternalInterface APIと共にJavaScriptのeval()函数を使用すると、その必要はないんです。

var btn:Button;
for(var i:uint=1; i<=3; i++){
	btn = this["b" + i];
	btn.addEventListener(MouseEvent.CLICK, clickListener);
}
 
function clickListener(e:MouseEvent):void{
	btn = e.currentTarget as Button;
	var str:String = ExternalInterface.call("eval", btn.label);
	tf.text = str;
}

Related link: http://wooyaggo.tistory.com/163

JavaScript

InsertFlashObject JavaScript code.

2008/08/04 Hangun's World 댓글 7개

HTML 페이지에 플래시 오브젝트를 삽입하기 위해 사용하는 자바스크립트 코드를 공개합니다. 이미 MS가 이올라스로 부터 라이센스를 획득해서 플래시 오브젝트의 활성화를 위해 외부 자바스크립트 파일을 만들 필요는 없지만, 보다 쉽게 플래시 무비를 HTML 문서에 입력하기 위해 만들었습니다.

플래시에 익숙하지 않은 많은 개발자들이 플래시의 태그를 제대로 입력하지 못해서 플래시 무비가 의도와 다르게 표시되는 문제들이 많았습니다. 그래서 플래시에 대해서 잘 알지 못하더라도, 자바스크립트 함수를 통해서 쉽게 플래시 무비를 삽입할 수 있도록 구성하였습니다.

Insert Flash Object
Insert Flash Object example

JavaScript

JavsScript Motion Tween

2008/07/11 Hangun's World 댓글 2개

파이어폭스에서 투명 플래시를 사용할 경우, 레이어 뒤의 객체들을 사용할 수 없는 문제가 있어서, 자바스크립트로 된 트윈 효과를 구글해서 찾은 사이트 입니다. 어지간한 트윈 효과는 대부분 제공하는 듯 합니다.

모션 종료값을 나타내는 finish 프로퍼티 대신 setFinish() 메소드를 사용하는 것 외에는, 플래시에서 사용하는 트윈 클래스와 사용법은 거의 비슷하네요.

I encounted a problem in FireFox. Though I set the wmode property of an SWF movie to transparent in FireFox, I can not click on objects beneath the DIV layer that contains the SWF file. So I googled, and found this JavaScript Tween.

It is much the same with the Tween class in ActionScript except taht it uses setFinish() method rather than finish property to set the ending value of the target object property to be tweened.

ごめんなさい。このポストには日本語の翻訳を提供しません。

JavaScript Motion Tween

Hangun's World – Blog