某人的栖息地 » flash http://www.ooso.net Linux + Apache + Mysql + Php + Flash Mon, 15 Mar 2010 15:59:24 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 用firebug来调试actionscript http://www.ooso.net/archives/442 http://www.ooso.net/archives/442#comments Thu, 03 Jul 2008 13:23:17 +0000 Volcano http://www.ooso.net/index.php/archives/442 阅读全文（320字）]]> 往常调试actionscript，是用的trace，在flash debug player里头输出变量内容。今天看到的方法比较有趣，是利用javascript在firebug中输出as的调试信息。

用firebug调试as的基本原理

PLAIN TEXT
CODE:
  1. ExternalInterface.call('console.log', "string is [%s]",  "abcde");

利用as的ExternalInterface和js交互，然后调用firebug的console.log，将as的变量输出到控制台，这样也能达到调试的目的。

当然，要使用firebug，前提当然是你使用的firefox浏览器。如果是ie，那么只好使用alert弹出信息。

]]> http://www.ooso.net/archives/442/feed 5 用来调试flash的air应用 http://www.ooso.net/archives/416 http://www.ooso.net/archives/416#comments Sun, 08 Jun 2008 22:44:31 +0000 Volcano http://www.ooso.net/index.php/archives/416 阅读全文（257字）]]> 看到一个名为Arthropod的air应用，可以用来记录flash的log信息，并以颜色区分。如果你采用Flash CS3创建了一个air应用，那么它的trace命令不会生效，这样对调试是很不方便的。

这个时候Arthropod就显得很有用。

用法

  • 在actionscript中导入Debug类:
    PLAIN TEXT
    CODE:
    1. import com.carlcalderon.arthropod.Debug;

  • 输出debug信息
    PLAIN TEXT
    CODE:
    1. Debug.log("My log message");

  • 然后启动arthropod

arthropod

]]> http://www.ooso.net/archives/416/feed 2 我也试用YUI Uploader http://www.ooso.net/archives/405 http://www.ooso.net/archives/405#comments Fri, 30 May 2008 01:58:11 +0000 Volcano http://www.ooso.net/index.php/archives/405 阅读全文（1139字）]]> 早就知道YUI里面有Uploader这么一个上传组件，可以按住ctrl多选文件上传(就像flickr那样的上传)，并且可以支持进度条，这样对用户来说是相当方便的。

由于YUI Uploader是利用javascript + flash实现的，所以用户的浏览器上只要有flash player就可以使用，也不需要额外安装别的插件了，这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

  • 首先下载Uploader批量上传页的html源文件
  • 解压后放置在你的web服务器上，比如我就是在自己的台式机上安装了一个xampp
  • 现在需要一个处理上传操作的后端程序，在这里我是用php简单的写了一个，如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php，源文件如下：
    PLAIN TEXT
    PHP:
    1. foreach ($_FILES as $fieldName => $file) {
    2.     $name = md5(microtime());
    3.     move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg');
    4.     echo $fieldName . ' uploaded!';
    5. }

  • 下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf，然后把uploader.swf放在和upload.php的同一目录下，这是为了避免javascript和flash交互过程中出现跨域问题。
  • 修改uploader-advanced-source.html
    • 把"YOUR UPLOAD URL GOES HERE"替换成你的upload.php所在的url，比如我的就是http://localhost/yui/upload.php
    • 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
  • 现在访问uploader-advanced-source.html，试试批量上传功能吧

试用的一点补充

  • 这个例子里面的php源文件只是考虑上传n张jpg文件的情况，可根据实际情况调整。
  • 上传后的文件名是md5随机加密的，在upload.php同一目录可见
  • 由于flash的bug，运行在windows下的firefox无法正确获得flash传递过来的cookie，如果上传应用对cookie有依赖，可能会需要做额外的处理。
  • 为了能够确切的显示上传进度条，可能需要php 5.2的apc扩展支持
  • 上传进度由flash完成
  • YUI 2.5.2已经附上uploader.swf的actionscript，有一定的学习价值

贴一张Uploader使用效果图

]]> http://www.ooso.net/archives/405/feed 3 用AIR生成土豆豆单批量下载清单 http://www.ooso.net/archives/402 http://www.ooso.net/archives/402#comments Sun, 25 May 2008 23:30:33 +0000 Volcano http://www.ooso.net/?p=402 阅读全文（434字）]]> 把之前的greasemonkey脚本又加工了一下，这次改用air做了一个桌面小工具，功能完全一样，可以生成土豆的豆单批量下载清单，有所改进的是，能够生成中文的下载文件，这样下载回来就可以连续观看而不用费事去查了。

使用方法

  • 首先下载安装air runtime
  • 下载flvMaster.air，文件很小，只有29k
  • 双击flvMaster.air即可呼出air的安装界面，进一步安装
  • 界面非常简单，在url输入框里输入豆单的播放url，然后点击search按钮，这样就会在下面的输入框中生成豆单的下载清单
  • 接下来点击save按钮就可以保存下载清单到桌面了，保存的文件名最好以lst做后缀
  • 可以用flashget来导入下载清单并批量下载flv视频

用air来写这种小工具真的是非常方便，一点点html+javascript代码就可以完成很实用的功能，尤其是ajax操作，完全没有跨域限制，很强大。

贴一张运行时的界面图

补充

Air现在发布了1.1中文版，国内用户也可以享受到中文界面的Air了。

]]> http://www.ooso.net/archives/402/feed 4 CachegrindVisualizer http://www.ooso.net/archives/338 http://www.ooso.net/archives/338#comments Mon, 28 Jan 2008 04:35:50 +0000 Volcano http://www.ooso.net/index.php/archives/338 阅读全文（375字）]]> CachegrindVisualizer是一个xdebug的profile文件查看客户端,采用Adobe的AIR制作,很让人惊讶,因为目前我看到的采用AIR制作的软件少的可怜.

与CachegrindVisualizer具有类似功能的软件还有wincachegrind,相比之下,wincachegrind的功能更为强大,使用上也更方便.但是即便如此,我还是乐见CachegrindVisualizer发展的更好.

CachegrindVisualizer支持的操作系统

Windows 2000 SP4, Windows XP SP2, Windows Vista Home and Ultimate Edition, Mac OS 10.4.7 and above (Intel and PowerPC), Mac OS X Leopard.

运行时的抓图

CachegrindVisualizer

相关连接

]]> http://www.ooso.net/archives/338/feed 4 Ajax Vs Flash http://www.ooso.net/archives/353 http://www.ooso.net/archives/353#comments Fri, 20 Jul 2007 00:11:01 +0000 Volcano http://www.ooso.net/index.php/archives/353 阅读全文（282字）]]> 在RIA应用中,到底应该使用Ajax,还是使用Flash呢?它们各有长处,让人难以取舍.下面就它们的特点做一个小小的总结.

    Javascript

  • + 不需要额外的插件.
  • - 不同的浏览器下可能会产生不同的行为
  • - 不能访问音视频设备
  • - 可能会有少数用户会关闭javascript
  • - 如果你写的代码很烂,大家都能看到

    Flash

  • - 需要额外安装插件
  • + 在各种浏览器上,如果flash player的版本一致,那么flash的行为也会基本一致
  • - 用户可能不会安装有相同版本的flash player
  • + 可以直接访问音视频设备
  • - 可能会有很多用户屏蔽flash
  • + 如果你写的代码很烂,不用担心,大家都看不到
]]> http://www.ooso.net/archives/353/feed 16 关于Flash LoadVars的常识 http://www.ooso.net/archives/343 http://www.ooso.net/archives/343#comments Fri, 29 Jun 2007 00:48:30 +0000 Volcano http://www.ooso.net/index.php/archives/343 Flash player通过loadVars的各种方法发出去的请求，能够继承浏览器的cookie，它并不独立。因此，某些需要cookie认证才能访问的接口url，也是能够直接用Flash发出请求直接调用的——这阵子费了好大功夫才明白这个常识性问题。

]]> http://www.ooso.net/archives/343/feed 1 flash和javascript之间的交互 —— ExternalInterface http://www.ooso.net/archives/222 http://www.ooso.net/archives/222#comments Sun, 20 Aug 2006 23:52:00 +0000 Volcano http://www.ooso.net/index.php/archives/222 阅读全文（1421字）]]> 版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明

最近做一个应用，flash和javascript之间互有调用。最后一次写点Actionscript也是在flash 7的时候了，因此按照我的想法，只要用fscommand和getUrl("javasciprt:.......")这种形式，flash和javascript之间互相调用应该不是什么大问题。

没多久就开始觉着自己落后了，Flash 8早已经新增了ExternalInterface API专门处理flash与外部应用的交互，只要浏览器装有flash player，支持的范围应是更广。

ExternalInterface class能够运行的环境

  • Internet Explorer for Windows (5.0 and later)
  • Firefox 1.0 and later
  • Mozilla 1.7.5 and later
  • Netscape 8.0 and later
  • Safari 1.3 and later.

使用心得

ExternalInterface class仅仅只有两个方法：

  • addCallback(methodName:String, instance:Object, method:Function) : Boolean
    Registers an ActionScript method as callable from the container.
  • call(methodName:String, [parameter1:Object]) : Object
    Calls a function exposed by the Flash Player container, passing 0 or more arguments.

这两个方法的使用在手册有详细说明，使用范例可以从flash的安装路径例如C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\ActionScript\ExternalAPI下面找到，没太大悬念。

碰到的问题

在IE浏览器下，将flash对象放在form标签之间，ExternalInterface class就会给你报javascript错，而firefox下完全正常，这简直是让人很郁闷的事情，折腾了一天才找到问题原因，可能是IE的Bug吧，这个在livedoc上有人反映过类似的问题。见下面的url:
http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002200.html

有人提出这样的解决办法，将下面这段javascript放在html里的flash之前：

PLAIN TEXT
CODE:
  1. <script type="text/javascript">
  2. function ExternalInterfaceManager()
  3. {
  4.     this.registerMovie = function(movieName) {
  5.         if(!window.fakeMovies) window.fakeMovies = new Array();
  6.         window.fakeMovies[window.fakeMovies.length] = movieName;
  7.     }
  8.     this.initialize = function() {
  9.         if(document.all)
  10.         {
  11.             if(window.fakeMovies)
  12.             {
  13.                 for(i=0;i<window.fakeMovies.length;i++)
  14.                 {
  15.                     window[window.fakeMovies[i]] = new Object();
  16.                 }
  17.                 window.onload = initializeExternalInterface;
  18.             }
  19.         }
  20.  
  21.     }
  22. }
  23. function initializeExternalInterface() {
  24.     for(i=0;i<window.fakeMovies.length;i++) {
  25.         var movieName = window.fakeMovies[i];
  26.         var fakeMovie = window[movieName];
  27.         var realMovie = document.getElementById(movieName);
  28.  
  29.         for(var method in fakeMovie) {
  30.             alert(arguments);
  31.             realMovie[method] = function() {flashFunction = "<invoke name=\"" + method.toString() + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 0) + "</invoke>";this.CallFunction(flashFunction);}
  32.         }
  33.  
  34.         window[movieName] = realMovie;
  35.     }
  36. }
  37. var eim = new ExternalInterfaceManager();
  38. eim.registerMovie("ShockwaveFlash1");
  39. eim.registerMovie("ShockwaveFlash2");
  40. eim.initialize();
  41. </script>

这样就可以一定程度上解决ExternalInterface在form标签之间会报错的问题，是asp.net开发者的福音。

原理

下面是浏览器载入一个包含ExternalInterface调用的flash之后，flash player可能会用到的方法

PLAIN TEXT
CODE:
  1. function __flash__arrayToXML(obj) {
  2.     var s = "<array>";
  3.     for (var i=0; i<obj.length; i++) {
  4.         s += "<property id=\"" + i + "\">" + __flash__toXML(obj[i]) + "</property>";
  5.     }
  6.     return s+"</array>";
  7. }
  8. function __flash__argumentsToXML(obj,index) {
  9.     var s = "<arguments>";
  10.     for (var i=index; i<obj.length; i++) {
  11.         s += __flash__toXML(obj[i]);
  12.     }
  13.     return s+"</arguments>";
  14. }
  15. function __flash__objectToXML(obj) {
  16.     var s = "<object>";
  17.     for (var prop in obj) {
  18.         s += "<property id=\"" + prop + "\">" + __flash__toXML(obj[prop]) + "</property>";
  19.     }
  20.     return s+"</object>";
  21. }
  22. function __flash__escapeXML(s) {
  23.     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
  24. }
  25. function __flash__toXML(value) {
  26.    var type = typeof(value);
  27.     if (type == "string") {
  28.         return "<string>" + __flash__escapeXML(value) + "</string>";
  29.     } else if (type == "undefined") {
  30.         return "<undefined/>";
  31.     } else if (type == "number") {
  32.         return "<number>" + value + "</number>";
  33. }

可以认为现在的ExternalInterface Class仅仅只是可用而已，不够成熟

]]> http://www.ooso.net/archives/222/feed 2 用javascript实现的socket客户端 http://www.ooso.net/archives/190 http://www.ooso.net/archives/190#comments Sat, 22 Jul 2006 02:32:27 +0000 Volcano http://www.ooso.net/index.php/archives/190 阅读全文（580字）]]> 用javascript实现的socket客户端?没错,而且不依赖java applet之类的作弊手段.这里有个例子：socketjs.它的巧妙之处是在页面中内嵌入了一个大概300字节的flash,利用javascript来操纵flash的xmlSocket client,这样就实现了一个伪socket客户端。在flash和javascript结合的越来越紧密的今天，我们已经看到许多这样类似的应用。我们可以利用这个socketJs来实现一些多人的基于web的即时通讯程序如聊天室，互动游戏之类的。

socketJs目前有如下可调用的api

function SocketConnect(host,port){}
function SocketSend(data){}
function SocketClose(){}
function SocketOnInit(){}
function SocketOnConnect(success){}
function SocketOnData(data){}
function SocketOnClose(){}

注意要点

]]> http://www.ooso.net/archives/190/feed 14 如何编译red5 0.4 – 视频教程 http://www.ooso.net/archives/176 http://www.ooso.net/archives/176#comments Thu, 30 Mar 2006 08:36:49 +0000 Volcano http://www.ooso.net/index.php/archives/176 阅读全文（178字）]]> 这三个flash的视频教程演示了如何编译red5 server 0.4,用到的工具有eclipse,subversion,ant等等.

什么是red5?
red5是一个开源的flashcom server端

相关文章:Red5 0.3 Released

]]> http://www.ooso.net/archives/176/feed 7 Red5 0.3 Released http://www.ooso.net/archives/152 http://www.ooso.net/archives/152#comments Tue, 21 Feb 2006 04:56:14 +0000 Volcano http://www.ooso.net/index.php/archives/152 开源的flashcom server端Red5发布了0.3版,这好像是第一个公开发布的版本.

]]> http://www.ooso.net/archives/152/feed 2 好久没玩flash http://www.ooso.net/archives/97 http://www.ooso.net/archives/97#comments Sat, 03 Aug 2002 08:33:48 +0000 Volcano /?p=97 阅读全文（875字）]]> 抓紧时间操练了一把,用下面代码作了一个粉简单的坦克控制:)

PLAIN TEXT
ACTIONSCRIPT:
  1. class Move extends MovieClip {
  2.  
  3.  private var speed = 3;
  4.  private var xMin = 0;
  5.  private var yMin = 0;
  6.  private var xMax = 400;
  7.  private var yMax = 400;
  8.  
  9.  public function onLoad(){
  10.   Key.addListener(this);
  11.   this.xMin += this._width/2;
  12.   this.xMax -= this._width/2;
  13.   this.yMin += this._height/2;
  14.   this.yMax -= this._height/2;
  15.  }
  16.  
  17.  public function onEnterFrame(){
  18.   if( this._x <this.xMin ){
  19.    this._x = this.xMin;
  20.   }
  21.   if( this._x> this.xMax ){
  22.    this._x = this.xMax;
  23.   }
  24.   if( this._y <this.yMin ){
  25.    this._y = this.yMin;
  26.   }
  27.   if( this._y> this.yMax ){
  28.    this._y = this.yMax;
  29.   } 
  30.  }
  31.  
  32.  public function setSpeed(speed:Number){
  33.   this.speed = speed;
  34.  }
  35.  
  36.  public function onKeyDown(){
  37.   switch(Key.getCode()){
  38.    case 83: // s
  39.     this._rotation = 180;
  40.     this._y += this.speed;
  41.     break;
  42.    
  43.    case 65: // a
  44.     this._rotation = -90;
  45.     this._x -= this.speed;
  46.     break;
  47.    
  48.    case 68: // d
  49.     this._rotation = 90;
  50.     this._x += this.speed;
  51.     break;
  52.    
  53.    case 87: // w
  54.     this._rotation = 0;
  55.     this._y -= this.speed;
  56.   }
  57.  }
  58.  
  59.  private function onRelease(){
  60.   trace(’test’);
  61.  }
  62. }

]]> http://www.ooso.net/archives/97/feed 0