SlideShare a Scribd company logo
用JSFL玩Flash IDE 2012/05/22 EIA
EIA 洪毓翔
https://www.facebook.com/angelliya00
Agenda

 - 簡介
 - Demo、安裝、快速鍵
 - 撰寫
 - Tips
 - 發佈
 - 開發經驗
JSFL:
Flash JavaScript 應用程式程式設計介面
(JavaScript API)
Demo 幾個我喜歡用的JSFL
SwapAll
NamingInstances
SnapToPixel
執行命令、快速鍵
安裝-1
安裝-2

- 英文版Flash 安裝在非英文語系的系統中,安裝後沒有出現
- 不同版本Flash 安裝同一個XMP




                                          Enable




   (Flash IDE) Help > Manage Extensions
撰寫
JSFL
JSFL 架構   DOM 結構摘要
Ex: 選擇影格

 fl.getDocumentDOM().getTimeline().layers
 [0].frames[0];
 結構大約是這樣
flash 物件 (fl)

  fl.closeAll()
  fl.addEventListener()
  fl.saveAll()
  ...
Document 物件

 document.close()
 document.publish()
 document.save()
 //
 document.selectAll()
 document.selectNone()
 ...
Layer 物件

 layer.frameCount
 layer.frames
 layer.layerType 導引線、遮罩
 ...
Frame 物件
 frame.actionScript
 frame.duration
 ...




 for(var f in layer.frames){
          if (f==layer.frames[f].startFrame){
             keyframes.push({
                frame:layer.frames[f],
                index:f
             });
          }
       }
Tips
1. 步驟記錄 / History
2. Git kaede / jsfllib




             https://github.com/kaede/jsfllib
             JSFLではじめるFlash制作自動化入門 [単行本]
3. 安裝的MXP




    安裝路徑可由fl.configURI 取得
第一個 Hello World

  fl.trace("Hello World!!!");
  fl.outputPanel.trace("Hello World!!!");
  alert("Hello World!!!");
Flash IDE裡看得到的各種視窗
Alert()、confirm()、prompt()


           alert("Hello World!!!");




               confirm("Hello World ?");




                        prompt("Hello _____ ?","World");
document.xmlPanel()
fl.swfPanels
Pakage MXP Extension
Pakage MXP Extension
 .xmi
  <macromedia-extension
       name=""
       version="0.2.3"
       requires-restart="true"
       type="suite">

        <author name="EIA" />
        <products>
               <product name="Flash" version="7" />
        </products>
        <description>
               <![CDATA[]]>
        </description>
        <ui-access>
               <![CDATA[]]>
        </ui-access>

        <files>
                <file source="FrameRate_Transform.jsfl" destination="$flash/Commands" />
        </files>
  </macromedia-extension>
file
 <files>
      <file source="callSample.jsfl" destination="$flash/Javascript" />
      <file source="05_01.swf" destination="$flash/WindowSWF" />
 </files>




$flash (fl.configURI)
  /Users/apple/Library/Application Support/Adobe/Flash
  CS5.5/en_US/Configuration/
JSFL <-> SWFPanel

        if(fl.swfPanels[x].name == panelName){
              fl.swfPanels[x].call("callMySWF",arg);
              break;
        }

        *: swfPanel




       MMExecute("
           fl.runScript(fl.configURI+'Javascript/code.jsfl');
       ");

       *: fl.runScript();
開發心得
1. FrameRate_Transform
 不小心做錯影格數,或是Resize需求時
ex: FPS 30<->18




Frame




Timeline
fl.getDocumentDOM().exitEditMode();
modifyTimelineFrameDuration();

var itemNum = fl.getDocumentDOM().library.items.length;
for(var i = 0;i<itemNum;i++){
     var libraryItem = fl.getDocumentDOM().library.items[i];
     if(libraryItem.itemType=="movie clip"){
            fl.getDocumentDOM().library.selectItem(libraryItem.name);
            fl.getDocumentDOM().library.editItem();
     }
     modifyTimelineFrameDuration();
}
2. BitmapQuailtyManager
      調整點陣圖K數用的
有沒有一個面板可以方便調整圖片的品質?
做出來了,但是...
3. E_ColorPicker
      檢色器
JSFL share
function jsflSetFillColor($color){
    var rect = fl.getDocumentDOM().getSelectionRect();
    if(rect != 0){
          document.setSelectionRect(rect);
          fl.getDocumentDOM().setFillColor($color);
    }
}
function jsflStrokeColor($color){
    fl.getDocumentDOM().setStrokeColor($color);
}
心得
Links

擴充 Adobe Flash CS4 Professional
http://help.adobe.com/zh_TW/Flash/10.0_ExtendingFlash/

DOM 結構摘要
http://help.adobe.com/zh_TW/Flash/10.0_ExtendingFlash/WS359E0FA7-1DA9-4c9b-
8AE3-CFED6B6B11CE.html



Git- kaede / jsfllib
https://github.com/kaede/jsfllib
Thanks



   photoshop 又是另一個故事了

More Related Content

PDF
点击劫持代码
PPT
Inspire DGT 網站技術分享
PDF
How to avoid check style errors
PPTX
2018 8 18_play_framework
PPTX
猫粮快报
PDF
第九章解答
PDF
Jacek Yerka
PPT
AIR 開發應用程式實務
点击劫持代码
Inspire DGT 網站技術分享
How to avoid check style errors
2018 8 18_play_framework
猫粮快报
第九章解答
Jacek Yerka
AIR 開發應用程式實務

Similar to JSFL share (20)

PDF
Flex 使用經驗談
PDF
2011 JavaTwo JSF 2.0
PDF
Javascript autoload
PDF
JavaScript Engine
PDF
Spring 2.x 中文
PPTX
张所勇:前端开发工具推荐
PPT
JavaScript 脚本控件(二)
PDF
Node.js 入門 - 前端工程開發實務訓練
PPT
Structs2簡介
PDF
Flex 3 Cookbook 中文版V1
PDF
一拍一产品背后的故事(React实战)
PDF
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
PPT
HTML5概览
PPTX
移动Web开发框架jqm探讨
PDF
【 I Love Joomla 】- Joomla!佈景製作教學
PPT
Flex国际化I18N解决方案
PPTX
I Love Joomla! 佈景製作教學 0212
PPT
Struts学习笔记
PDF
由一个简单的程序谈起――之二
PDF
啟動 Laravel 與環境設定
Flex 使用經驗談
2011 JavaTwo JSF 2.0
Javascript autoload
JavaScript Engine
Spring 2.x 中文
张所勇:前端开发工具推荐
JavaScript 脚本控件(二)
Node.js 入門 - 前端工程開發實務訓練
Structs2簡介
Flex 3 Cookbook 中文版V1
一拍一产品背后的故事(React实战)
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
HTML5概览
移动Web开发框架jqm探讨
【 I Love Joomla 】- Joomla!佈景製作教學
Flex国际化I18N解决方案
I Love Joomla! 佈景製作教學 0212
Struts学习笔记
由一个简单的程序谈起――之二
啟動 Laravel 與環境設定
Ad

JSFL share