SWF LOVE (ASを使わないFlash勉強会 #1)
Upcoming SlideShare
Loading in...5
×
 

SWF LOVE (ASを使わないFlash勉強会 #1)

on

  • 2,691 views

2011/04/23 ActionScriptを使わないFlash勉強会 #1

2011/04/23 ActionScriptを使わないFlash勉強会 #1
前半はネタ終盤がSWFをSVGに変換する話
http://partake.in/events/2f2588c4-6a00-465c-b50f-752138a58b70

Statistics

Views

Total Views
2,691
Views on SlideShare
1,191
Embed Views
1,500

Actions

Likes
1
Downloads
3
Comments
0

6 Embeds 1,500

http://d.hatena.ne.jp 1473
http://webcache.googleusercontent.com 21
url_unknown 2
http://nakamura001.hatenablog.com 2
https://www.docsnode.com 1
http://www.google.co.jp 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SWF LOVE (ASを使わないFlash勉強会 #1) SWF LOVE (ASを使わないFlash勉強会 #1) Presentation Transcript

  • ♥ SWF LOVE ♥
    @ken39arg
  • 自己紹介
  • ガラケーサービスを5年超
  • 現在、鎌倉のPHPer
  • 今年も、古都鎌倉でガラケーサービス
  • 最近の悩み
  • プログラマ35(30)歳定年説
  • 齢29.5才
  • 定年?
  • あせってます
  • プログラマ定年説を目前にして、そのプログラマ人生の9割をガラケーとPHPと共に過ごしてきたと、いうことに危機感
  • ところで
  • PHP以外ですきな技術
  • Flash@ActionScript
  • Red5@Java
  • Red5Flash MediaServerのクローン
  • 要するにPHP以外はSWF!
  • ガラケー+SWF
  • 気がつけば
  • FlashLite動的生成担当
  • swfmill↓flasm/ming/swftools↓Binary!!
  • I Love SWF Binary Format!!
  • 自称鎌倉のNo.1FlashLiteBinarian
  • FlashLiteバイナリの小ネタ
  • /:$X3
  • Do you know “/:$X3”?
  • _root.AS:
    if (++i%2==1) { $X3=“すき”;}else{ $X3=“きらい”;}
    DefineEditText
    @VariableName=“$X3”
  • これだけなら問題無い「すき」->「きらい」->「すき」->「きらい」->
  • flower.AS:
    switch (random(5)) {
    case 1:
    gotoAndPlay(‘window’);
    break;
    case 2:
    gotoAndPlay(‘double’);
    break;
    default:gotoAndPlay(‘nomal’);
    break;
    }
  • 「すき」->「1」->「きらい」->「3」->「すき」->「3」->「きらい」->「0」->
  • SWF4(FlashLite1.x)では
  • switchで使われる一時変数名が“/:$X3”になってる確率が高い(というかそれしか見たこと無い)
  • 絶対そんな変数名使わないと思いますが
  • ちなみに
  • SWF5以降ActionStoreRegister(0x87)の登場により解決してます
  • 話は戻りますが、、
  • 30歳を目前にガラケーとSWFな俺の将来を考えてみた
  • ガラケーの将来
  • 想像してごらん
  • 時代はスマホ
  • スマホ
  • ガラケー?
  • 「あったねーw」
  • ガラケー終了のお知らせ
  • ( ̄Д ̄;)
  • じゃあ
  • Flashの将来
  • 想像してごらん
  • 時代はスマホ
  • スマホ
  • スマートフォン
  • iPhone
  • HTML5
  • 。。。
  • Flash?
  • 「あったっけ?ww」
  • Flash終了のお知らせ
  • Orz
  • ということは?
  • 俺の将来
  • 想像してごらん
  • 時代はスマホ
  • スマホ
  • スマートフォン
  • iPhone
  • HTML5
  • 鎌倉No.1のFlashLite…?
  • 「興味ない」

  • 俺、終了のお知らせ
  • なんとかしたい
  • スマホ時代に、Flashの技術やガラケーの知識今まで作ってきたSWF素材等等を活かして、延命したい!
  • というわけで
  • SWF延命計画
    ここからが本題
  • 全てのモバイル端末で楽にサービスを対応する方法を考えてます
  • 前提条件
    mova,FOMA,cdmaOne,win,c型,p型,W型,3gc
    ガラケー制作で1actionに大量にHTMLを作るなんて普通
    クロスプラットフォームにあこがれ1action,1htmlになったよね
    web屋である
    ブラウザでよくね?
  • 提案
    • HTML = 2パターンなんて楽な方
    • Flashをなんとかする
  • swfをiPhoneで動かす
  • swfをiPhoneで動かすツール
    wallaby
    gordon
    smokescreen
  • wallaby
    Adobe純正のCS5プラグイン
    SVG,JPEG,PNG,HTML,js,cssのセットを書き出す
    いろいろと不完全
    cssアニメーションを多用しているため、アニメーションが同期していない
    サイズがでかい
    CS5 Flashが必要というのが痛い = (動的生成はできない)
  • gordon
    jsでswfのバイナリを解析してsvgを作り出す
    githubで公開
    Movieクリップに対応していない
    不完全
    開発止まってる
  • smokescreen
    基本gordonと同じもうちょっと進んでいる
    2010/10にosscomming soon!となってから音沙汰無し
    2011/02にひっそりとgithub上に登場したリポジトリは別物(svg -> canvasへ)
    githubで公開されているものはネストもアニメーションも出来ない
  • まだ良いのが無いので、
    自作することにしましたが、
    まだ出来ていません。
    とりあえずSVGがイケてる気がしたので
    SWFをSVGに変換した話をこれからします
  • SWFとSVGのマッピング
  • DefineBits*
    Flashに埋め込まれたラスターデータ
    JPEGはそのまま
    PNGとGIFは少し違うフォーマットにロスレス圧縮されている
  • DefineBits*
    LosslessはピクセルをPNGに戻す
    Bits,BitsJPEG*はdataをそのまま取り出す
    <image xlink:href=“…”>
    画像データを保存してURLを”xlink:href”にセットしても良い
    base64した文字列を”xlink:href”にセットしても良い
  • DefineShape
    SWFの持つベクターデータ
    SWFのデータ種類は非常にシンプル
    直線(LineTo)
    曲線(CurveTo)
    塗り(fill)
    線 (stroke)
    3次ベジェやらcircleとかrectangleとかない。何でも直線と曲線だけで表す男らしさがウリ
  • DefineShape
    全体を<g>でまとめる
    ClipedBitmapは<use>
    Gradientは<linearGradient|radialGradient>
    style毎に<path d=“…” fill=“…” stroke=“…”>に変換->LineTo|CurveToが最大で fillStyle0,fillStyle1,lineStyleの  3つのpathに作用
  • DefineShape
    DeltaX,DeltaY
    絶対値に計算し直す
    LineTo(ShapeRecord@Type=2)
    L toXtoY
    CurveTo(ShapeRecord@Type=3)
    Q controlXcontrolYtoXtoY
    toの絶対値は”start+control+to”
  • DefineShape
    StyleChange (ShapeRecord@type=1)
    StateNewStyles
    pathの書き出し
    Styleレジストリの更新
    StateFillStyle0,StateFillStyle1,StateLineStyle
    次にのLineTo | CurveToの対象のスタイルを変更
    全てが(>0)なら次のエッジは<path>3ノード分に作用
    StateMoveTo
    moveToは絶対値
  • DefineShape
    fillStyle0
    lineStyle
    fillStyle1
    moveTo(x, y)
    lineTo(x, y)
  • DefineSprite
    ベクターやラスター等のイメージデータやテキスト、またSpriteなど表示オブジェクトを配置したり、アニメーションさせたりする
    FlashLiteではタイムラインを持つMovieClipのみ
    ActionScriptも内包
    Stage全体も仲間
  • DefineSprite
    PlaceObject毎に,<use>に変換
    全体を<g>でグループ化
    アニメーションはまずは考えないので、その他のタグは無視します
    SVGに変えるだけならPlaceObject2,3の情報は要らない
  • DefineSprite
    CharacterId
    xlink:href=“#<ここ>”;
    Depth
    表示順
    Matrix
    transform=“matrix(<ここ>)”
    ColorTransform
    opacity=“<ここにAlphaMultTerm>”
    feColorMatrixフィルタが理想だが実際はブラウザが対応してない
  • Stage
    Define定義は<defs>で登録する
    StageのPlaceObject(<use>)を<g>の中に記述
    SWF Formatでは1px=20で表現しているのでroot直下のgにはtransform=“scale(0.05)”
  • Stage
    <svg>
    <defs>
    <image id=“c1” xlink:href=“foo.jpg”
    width=“100” height=“10” />
    <g id=“c2”>
    <path d=“…”>
    </g>
    </defs>
    <g transform=“scale(0.05)”>
    <use>
    <use>
    </g>
    </svg>
  • SWFをSVGにすると
    iPhone/Androidで見るサムネイルはクリア
    ガラケーのサムネイルもSVG > ImageすればSWF > Imageよりも楽に動的に生成できる(変換用にFlashを起動するサーバーとか要らない)
    アニメーションさせると嬉しい
  • ご清聴ありがとうございました