flashplayer

페이지안의 특정컨텐츠가 브라우저화면에 노출될 경우, 재생되는 영상플레이어

HTML상에 정의되어야할 Javascript함수입니다.

이는 “jquery-1.3.2.min.js”파일을 import하여 사용하는 것을 전제로 합니다.

HTML상에서 Object Embed태그

플래시 내부의 클래스정의

ExternalInterface가 가능한 시점, 그리고 HTML내부의 js파일이 로드과 완료되어서 준비가 되었는지, 플래시파일이 초기화가 되어서
Javascript에서 플래시내부함수를 호출할때 그 이벤트를 받아들일 준비가 되었는지,
여러가지 상황을 체크해서 통신을 하도록 해주는 것이 좋습니다.
그렇지 않으면 항상 객체의 함수가 정의되어있지않다는둥, null객체라는둥 수많은 js에러메세지를 경험하실수 있을겁니다.

사용자 삽입 이미지사용자 삽입 이미지
이러한 에러들이 발생하는 모든 이유는 서로의 객체가 준비되지 않았는데, CallBack명령들이 실행되서입니다.
HTML페이지 내에서는 현재 페이지가 로드가 완료된 시점에서 브라우저scroll이벤트를 발생하고, 플래시객체에
접근하는 것이 좋습니다. (좋은것이 아니라 반드시 그렇게 해야합니다 ^^)
그 시점을 찾아주는 것이 jQuery에서  $(“document”).ready 부분입니다.
브라우저의 스크롤로 인한 페이지의 scrollTop값의 변화값은 HTML상에서 처리해야할 부분입니다.
그러나 영상재생을 켜고,끄는 부분은 플래시가 내부적으로 처리해야할 부분이지요.
Javascript와 플래시간의 함수호출방법에 대해 간단하게 알아보겠습니다.
<플래시에서 Javascript함수호출>
이는 간단하게 플래시에서 ExternalInterface를 사용하면 됩니다.
<Javascript에서 플래시의 함수호출>
Javascript에서 플래시내부의 함수에 접근을 하기 위해서는, 플래시에서 미리 정의가 필요합니다.
ExternalInterface.addCallBack 메서드를 사용하며, 쌍방간의 사용할 ID를 정의합니다.
큰 그림은 이렇게 됩니다. 혹시 질문이 있는분은 댓글부탁드립니다.
crossdomain-media

[AS3] Loader를 통해 불러들인 swf파일의 사운드를 정지하려면?

container.swf 라는 파일에서 content.swf 파일을 로드를 하는 경우, 발생하는 문제점들에 대해서
알아보도록 하겠습니다.
사운드정지에 앞서서 Security설정이 선행되어야 합니다.
만약 container.swf가 있는 서버(도메인)와 content.swf가 있는 서버(도메인)이 다를 경우, 로드를 당하는
객체에 allowDomain설정이 되어야합니다.
이렇게 세팅을 하면 모체는 container.swf에서 content.swf에 대한 스크립팅권한을 가지게 됩니다.
여기의 mute메서드와 holder의 soundTransform에 직업 _sTransform객체를 대입해주는 부분을 중점적으로
보면 됩니다.
간단하게 요약해서 썼습니다만, 혹시 이해가 안가시는 분은 댓글로 질문해주세요~ ^^

AS3 NetStream클래스의 onPlayStatus / NetStream.Play.Complete

FLV파일을 재생하는데에는, 여러가지 클래스들을 이용해서 출력을 할수 있습니다. (Video, FLVPlayBack, NetStream, VideoPlayer… )
이중 NetStream을 이용하여, Video객체에 attachNetStream하는 방식에 있어, 문제점을 발견하여 해결방법을 찾고자 이 글을 포스팅합니다.

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/NetStream.html#play
위의 주소에서 NetStream객체의 Reference를 참고할수 있습니다.

영상재생이 끝난 시점을 체크하려면 VideoEvent.COMPLETE 와 같은 이벤트를 리스너에 연결해야되는데,
이는  onPlayStatus에 “NetStream.Play.Complete”형태로 존재합니다.
하지만 특이한건, 레퍼런스를 보면 알겠지만, 이 이벤트는 addEventListener()메서드를 사용할수없으며,
어떤종류의 EventDispatcher도 사용불가라는 점입니다. 이벤트를 청취하려는 어떠한 방식도 불가능 하다는 것이지요.

재생이 완료된 시점에서 “NetStream.Play.Complete”라는 이벤트를 체크해서 처리하려했으나, 이상하게도 Callback이 작동하지않아, “NetStream.Play.Stop”로 처리했습니다.
이 문제와 관련해서 구글링을 해봤더니, 저와 비슷한 문제로 올라온 글들이 꽤 되네요.

이 이벤트는 FMS(Flash Media Server)에서 사용하기위해 의도된 이벤트라서, FlashPlayer나 AIR API에는 포함되어있지않고, 편의를 위해 Reference에는 제공된다군요.
현재 CDN서비스를 사용하고있기는 하나, 이는 FMS제품군과는 다르기에 이 이벤트를 정상적으로 받아오지 못하나봅니다. ㅠㅠ




SOLVED: Right Click in AS3

Eureka,


A day or two ago polyGeek has revived an old and challenging idea that one could make use of custom right-click functionality in Flash (AS3 + Javascript).


Why would anyone want to do this? Well, there are several very important reasons:


1) Games – the power of AS3 has brought Flash to the world of digital entertainment. At last it is possible to focus on the idea of your game rather than on how to improve the laggy experience. One thing that is still missing – right click functionality. We had this forever in desktop games, now it is time to let your casual RTS, RPG and FPS creations conquer the web.


2) User Experience – 2 buttons are better than 1. Every experimentalist’s dream is to be able to have more input options, not just one button. I can bet someone would soon create a stunning interface using this new functionality and we would see that on no less than FWA.


3) RIA – Rich Internet Applications. My clients are often asking if it is possible to remove embeded Flash Player menus from their applications and replace them with their company’s branding stuff.


***


AND THE ANSWER IS – YES! It is now possible to use custom right-click functionality in Flash and even Flex.


After long hours of searching through Microsoft’s documentation I came up with a universal solution that works nicely at least on 3 major browsers – Firefox 2, IE 7 and Safari. (IE6 has not been tested but I can bet it works OK).


***


Here you can see the * DEMO of right click * functionality (click the grey area to draw transparent dots)

Javascript source code looks like this:



JAVASCRIPT:




  1. /**


  2. *


  3. * Copyright 2007


  4. *


  5. * Paulius Uza


  6. * http://www.uza.lt


  7. *


  8. * Dan Florio


  9. * http://www.polygeek.com


  10. *


  11. * Project website:


  12. * http://code.google.com/p/custom-context-menu/


  13. *


  14. * —


  15. * RightClick for Flash Player.


  16. * Version 0.6.2


  17. *


  18. */


  19.  


  20. var RightClick = {


  21.     /**


  22.      *  Constructor


  23.      */


  24.     init: function () {


  25.         this.FlashObjectID = “customRightClick”;


  26.         this.FlashContainerID = “flashcontent”;


  27.         this.Cache = this.FlashObjectID;


  28.         if(window.addEventListener){


  29.              window.addEventListener(“mousedown”, this.onGeckoMouse(), true);


  30.         } else {


  31.             document.getElementById(this.FlashContainerID).onmouseup = function() { document.getElementById(RightClick.FlashContainerID).releaseCapture(); }


  32.             document.oncontextmenu = function(){ if(window.event.srcElement.id == RightClick.FlashObjectID) { return false; } else { RightClick.Cache = “nan”; }}


  33.             document.getElementById(this.FlashContainerID).onmousedown = RightClick.onIEMouse;


  34.         }


  35.     },


  36.     /**


  37.      * GECKO / WEBKIT event overkill


  38.      * @param {Object} eventObject


  39.      */


  40.     killEvents: function(eventObject) {


  41.         if(eventObject) {


  42.             if (eventObject.stopPropagation) eventObject.stopPropagation();


  43.             if (eventObject.preventDefault) eventObject.preventDefault();


  44.             if (eventObject.preventCapture) eventObject.preventCapture();


  45.          if (eventObject.preventBubble) eventObject.preventBubble();


  46.         }


  47.     },


  48.     /**


  49.      * GECKO / WEBKIT call right click


  50.      * @param {Object} ev


  51.      */


  52.     onGeckoMouse: function(ev) {


  53.         return function(ev) {


  54.         if (ev.button != 0) {


  55.             RightClick.killEvents(ev);


  56.             if(ev.target.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) {


  57.                 RightClick.call();


  58.             }


  59.             RightClick.Cache = ev.target.id;


  60.         }


  61.       }


  62.     },


  63.     /**


  64.      * IE call right click


  65.      * @param {Object} ev


  66.      */


  67.     onIEMouse: function() {


  68.         if (event.button> 1) {


  69.             if(window.event.srcElement.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) {


  70.                 RightClick.call();


  71.             }


  72.             document.getElementById(RightClick.FlashContainerID).setCapture();


  73.             if(window.event.srcElement.id)


  74.             RightClick.Cache = window.event.srcElement.id;


  75.         }


  76.     },


  77.     /**


  78.      * Main call to Flash External Interface


  79.      */


  80.     call: function() {


  81.         document.getElementById(this.FlashObjectID).rightClick();


  82.     }


  83. }

On the Flash side is as simple as this code (AS3):



Actionscript:




  1. package {


  2.    


  3.     import flash.display.*;


  4.     import flash.external.ExternalInterface;


  5.  


  6.     public class RightClick extends Sprite


  7.     {


  8.        


  9.         public function RightClick()


  10.         {


  11.             stage.scaleMode = StageScaleMode.NO_SCALE;


  12.             stage.align = StageAlign.TOP_LEFT;


  13.            


  14.             var methodName:String = “rightClick”;


  15.             var method:Function = onRightClick;


  16.             ExternalInterface.addCallback(methodName, method);


  17.         }


  18.        


  19.         private function onRightClick():void {


  20.  


  21.             var mx:int = stage.mouseX;


  22.             var my:int = stage.mouseY;


  23.  


  24.             if(my> 0 && my <stage.stageHeight && mx> 0 && mx <stage.stageWidth) {


  25.                 // YOUR CODE HERE


  26.             }


  27.         }


  28.     }


  29. }

This demo has been tested and confirmed working on:


WINDOWS VISTA



  • Internet Explorer 7.0.6001 (16549)

  • Firefox 2.0.0.6 (with mouse gestures disabled)

  • Maxthon 2 (with mouse gestures disabled)

  • Safari 3.0.3 (522.15.5)

Windows XP SP2



  • Internet Explorer 6

  • Internet Explorer 7

  • Maxthon 2 (with mouse gestures disabled)

  • FireFox 2 (with mouse gestures disabled)

  • Safari 3

  • Netscape 8

Mac OSX 10.4.10 (Intel)



  • Firefox 2

  • Safari 3.0.3

Thank you all for testing!


Opera will not work, the browser forces the context menu to appear and blocks mouse events by default.


If you manage to get the demo working, please post the OS and Browser build number in the comments. Please also leave a comment if you experience any problems with the demo.



Google Code Project


DEMO


DIGG THIS

중첩(Convolution)과 상관함수(Correlation Function)






 

1. 중첩(Convolution)
가. 정의
– 두개의 함수가 스펙트럼 영역을 엇갈리게 적분하여 하나의 함수로 융합되는 것
– 중첩은 선형시스템에서 입력에 대한 응답 출력을 구하는 데 사용됨
– 입력을 x(t), 출력을 y(t), 임펄스 응답을 h(t)라고 하면 다음 식으로 표현됨

나. 특징
– 교환법칙 성립(계산 상으로는 시스템과 입력신호 비구분)
– 두 개의 시간 함수의 중첩은 τ가 의사 변수이므로 적분 결과는 t의 함수가 됨
– 시간 영역에서의 중첩은 주파수 영역에서의 곱으로,
– 주파수 영역에서의 중첩은 시간 영역에서의 곱으로 나타냄
– convolution은 계산적 방법과 도식적 방법으로 구할 수 있음
– 구형파 시간 함수끼리의 convolution은 ramp 함수가 됨

다. 응용
– 시스템 해석
– Digital & Analog Filter 해석
– Impulse 응답
– 시스템 출력 해석
– DSP(Digital Signal Processing)

2. 상관함수(Correlation Function)
가. 정의
– 시간영역에서 두 신호 사이의 상호 연관성을 나타내는 함수
– 상관계수는 백터공간에서 두 신호점간의 유사성을 정의
– 상관함수는 시간영역에서 두 신호의 유사성을 결정하는데 사용

나. 특징
– 상관함수의 종류에는 자기상관함수와 상호상관함수로 표현됨
– 상관함수의 Fourier 변환과 중첩적분의 Fourier 변환은 같음
– 상관함수의 Fourier 변환은 전력에 관한 주파수 스펙트럼임
– 우함수 이며, τ =0에서 최대값을 가짐

다. 응용
– System의 평균전력
– 전력스펙트럼 밀도(Power Spectrum density), system의 analysis
– 통신에서 Quadrature, 특정 신호성분의 존재판별, PN부호 판별에 사용

3. 중첩(Convolution)과 상관함수(Correlation Function)의 상호 관계
– 시간 영역에서 중첩과 상관을 구하는 것은 많은 연산을 필요로 함
– FFT를 이용하여 이들 연산을 고속으로 수행 가능
– 중첩 정리 : x(t)의 주파수 변환치를 X(f), h(t)의 주파수 변환치를 H(f)라면
Y(f) = X(f) H(f)를 얻은 후 Y(f)의 역변환을 취하면 y(t)f를 얻음



Convolution Filter Matrix 값 모음

//
적청반전
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
 0,0,1,0,0,
 0,1,0,0,0,
 1,0,0,0,0,
 0,0,0,1,0);
mc.filters = [filterObj];


 


 


//
흑백
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
 1/3,1/3,1/3,0,0,
 1/3,1/3,1/3,0,0,
 1/3,1/3,1/3,0,0,
   0,  0,  0,1,0);

mc.filters = [filterObj];


 


 


//
세피아
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
 1/2,1/2,1/2,0,0,
 1/3,1/3,1/3,0,0,
 1/4,1/4,1/4,0,0,
   0,  0,  0,1,0);
mc.filters = [filterObj];


 


 


//
샤프
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
  0,-1, 0,
 -1, 5,-1,
  0,-1, 0
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];


 


 


//
윤곽 추출
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
 1, 1, 1,
 1,-7, 1,
 1, 1, 1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];


 


 


//
엠보스
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
 1, 1, 0,
 1, 0,-1,
 0,-1,-1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 128;
filterObj.divisor = 1;
mc.filters = [filterObj];


 

////////////////////////////////////////////////////////////////////////////////////////////////////


Flash 8 introduces some very powerful tools for manipulating bitmaps at the pixel level. Included in this list of tools is flash.filters.ConvolutionFilter. ConvolutionFilter combines pixel data in a bitmap with data from neighboring pixels to produce a given result. Having control at the pixel level allows you to produce a wide array of effects on a bitmap. These include things like blurring, beveling, embossing, sharpening, and more. All are possible using ConvolutionFilter.


Unlike Matrix and ColorMatrixFilter, ConvolutionFilter’s matrix does not have a set number of rows and columns. The number of rows and columns depend on the type and strength of the effect you are trying to achieve.


In a nutshell, ConvolutionFilter looks at each and every pixel in a source bitmap. As it does this, it uses the center value in the matrix as the value of the current pixel being manipulated. For example, in a 5 x 5 matrix, the center value is at (2, 2). It then multiplies the values from the matrix to the surrounding pixels and adds the resulting values for all pixels to get the value for the resulting center pixel. Here is the formula used on a 3 x 3 matrix convolution:



As you can see, for the pixel located at (x, y), ConvolutionFilter with a 3 x 3 matrix takes the pixel (x–1, y–1) and multiplies it by the value in the matrix located at (0,0), and then adds the pixel (x, y–1) multiplied by the value in the matrix at (0,1), and so on until all of the matrix values have been multiplied by the corresponding pixel value. (This is done for each color channel.) Finally, it takes that total, divides by the value of divisor, and adds the value of bias. Obviously the larger your matrix, the longer this process takes.


To apply a convolution matrix, you can pass a matrix along with the number of rows and columns into the ConvolutionMatrix constructor, as follows:



The following examples illustrate some convolution matrices. A useful exercise is to look at the matrix values and guess the effect they might produce on the image. Figure 10 shows the original photo.



Figure 10. Original image


In Figure 11, the pixel being affected gets its original value multiplied by 5, while the pixels immediately above, below, to the left, and to the right are multiplied by –1, with the resulting values added together and multiplied by the affected pixel to produce a new value for that pixel. The resultant effect is that there is an increase in contrast between neighboring pixels. If neighboring pixels have values that are quite similar, those pixels remain fairly similar. However, the greater the original color value difference between pixels, the greater the resulting difference will be.



Figure 11. A sharpening effect


Figure 12 shows the value of the affected pixel having its value added to that of each of its surrounding eight pixels. You can probably guess that this “mashing” of values results in a blur effect.



Figure 12. A blurring effect


By looking at the matrix in Figure 13, you can see that the result is trickier to guess than in the previous examples. The affected pixel tends to become closer in value to the pixels near the bottom right and further away in value than the pixels at the top left. The result is an embossed effect with the light source appearing to emanate from the top left.



Figure 13. An embossing effect


As you can see, having a basic understanding of matrices allows you to produce some powerful effects using the new ConvolutionFilter. In the convolution demo file that accompanies this article, you can play directly with values in a matrix and see the resulting convolution effect on the image. Play with the following demo to see the changes for yourself:


Where to Go from Here


Flash 8 was truly one of the biggest releases in Macromedia’s product history. It provides developers with a very granular level of control in several different areas. Matrices provide a powerful means of doing this type of manipulation. This article serves as a primer for people interested in gaining a better understanding of matrices. I recommend playing with these matrix values to see the ensuing results. That’s often where the real learning happens.


Here are some links you may find useful in your exploration:




Convolution Filter 자료

출처:http://www.roborealm.com/help/Convolution.php


Convolution Filter

Convolution filters are a great way to process images for certain features. Features are defined by an n by m matrix that is applied to the image in the following way: (grayscale only for purposes of example)


Interface




Instructions


1. Edit the 5×5 textbox grid to add in your convolution values OR
2. select a pre-created filter using the dropdown menu to help you get started
3. Specify the divisor and/or bias


Example









Source Sharpen More

An example small grayscale image (10×10):

















































































































34 22 77 48 237 205 29 212 107 41
50 150 77 158 233 251 112 165 47 229
93 0 77 219 43 56 42 113 140 94
32 19 44 30 36 94 151 101 28 84
10 90 48 73 63 148 159 183 99 22
192 70 27 88 20 230 53 34 38 106
239 202 196 205 50 123 192 88 41 37
230 174 14 22 127 100 189 186 214 187
227 86 195 6 53 168 46 166 36 249
215 165 237 110 125 191 191 94 123 8


An example convolution filter for line detection:















-1 -1 -1
-1 8 -1
-1 -1 -1


The row=2, column=2 pixel and its neighborhood from the image above: The row=2, column=2 pixel and its neighborhood from the image above:















34 22 77
50 150 77
93 0 77


To apply the convolution filter multiply the filter values with the image data block. Work with each pixel and its 3×3 neighborhood:















-1*34 -1*22 -1*77
-1*50 8*150 -1*77
-1*93 -1*0 -1*77


Then sum all the values:
(-34)+(-22)+(-77)+
(-50)+(1200)+(-77)+
(-93)+(0)+(-77) = 770

Divide by the divisor and add the bias.
(770/divisor)+bias=770 (in this example divisor=1, bias=0)

If the new pixel value is > 255 set it to 255
If the new pixel value is < 0 set it to 0

The new pixel value is 255. Store that in a new image:















34 22 77
50 255 77
93 0 77


Continue with all other 3×3 blocks in the image using original values. For example the next image block could be















22 77 48
150 77 158
0 77 219

Note the 3×3 “window” is shifted to the right by one and that the new pixel value is NOT used but stored as a second new image.

Most of the image is processed in this manner. Image borders create problems and are ignored.

Many other filters can easily be defined for other purposes

Blur:



























1 1 1     1 2 1
1 1 1     2 4 2
1 1 1     1 2 1

Sharpen:



























-1 -1 -1     0 -1 0
-1 9 -1     -1 5 -1
-1 -1 -1     0 -1 0

Edge Enhancement:







































0 0 0     0 -1 0     -1 0 0
-1 1 0     0 1 0     0 1 0
0 0 0     0 0 0     0 0 0

Find Edges:







































0 1 0     -1 -1 -1     1 -2 1
1 -4 1     -1 8 -1     -2 4 -2
0 1 0     -1 -1 -1     1 -2 1

Emboss:















-2 -1 0
-1 1 1
0 1 2
The convolution matrix is displayed in the convolution interface. Changing any number will alter the matrix and change the image as a result of applying that matrix.

Select a matrix from the pull down menu which will populate the matrix with those values.