ダイナミックテキスト(textfield)は、そのままではalphaやrotationなどが変えることが出来ません。
というよりも、変えると、パッと消えてくれます。

そこで、TextをBitmapにdrawしてしまい、textfield自体は消しておけば、あたかもそれらのalphaやrotationが変えられたような表現が出来ます。


//BitmapDataを新規生成して、bitmapにdrawする
//今回はtest_txtをBitmapにします
var myBitmap:BitmapData = new BitmapData(600, 150,true,0x333333);
myBitmap.draw(test_txt);
var bmp:Bitmap = new Bitmap(myBitmap);
bmp.x = 100;
tmp_mc.addChild(bmp);
tmp_mc.alpha = 0;
test_txt.visible = false;

traceで出力させて、見やすいように出力ウィンドウで改行させる(空白1行を入れる)場合、AS2までなら、
trace(newline);
と打っていましたが、AS3.0だとnewlineが怒られることに今日知りました。
代わりに、
trace('');
と入力して改行させます。
いろいろなムービークリップの中から、ランダムで配置する場合、ひとまずリンゲージで指定したクラス名を配列に入れ、それらの中から、乱数により抽出したものを new Class();のように配置させます。

今回は、その配列からnewで実行するまでです。
今回の肝は、getDefinitionByNameを使うことです。

var myShape:Array = ["class1","class2","class3"];
var ShapeNo:Number = 1;//本来は乱数などですが、今回は割愛
var class_str:String=myShape[ShapeNo];
var myClass:Class=Class(getDefinitionByName(class_str));
mc = new myClass();


iPhone用サイト内で、iframeを使った場合、window.orientationで画面縦横変更のトリガーがiframe内ではうまく動作しませんでした。
そこで、代わりに親htmlから縦横が変わった際にiframe内のJSを実行させることで、iframe内でも縦横によって違う動作をさせる(CSSでパーツの幅を変えるなど)ことができました。


//親html内
//iframe_idは、iframeのid名
document.getElementById("iframe_id").contentWindow.setOrientation_i(引数);

//iframe内
function setOrientation_i(dl) {
    //処理をココへ
}

iPhoneサイトを作る際に、Flashが使えないので、Javascriptに頼ることになります。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。

iui
http://code.google.com/p/iui/


jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/


どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
jqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。

iuiの詳細に関しては後々アップ予定です。
iPhone用サイトを作る場合は、画面サイズが縦横で異なります。
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。

表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
window.addEventListener('load', setOrientation, false); 
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation() { 
     var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; 
     var cl = document.body.className; 
     cl = cl.replace(/portrait|landscape/, orient); 
     document.body.className = cl; 
}
</script>   

<style>
body.portrait #main_image img{
    width:320px;
    height:160px;
}
body.landscape #main_image img{
    width:480px;
    height:240px;
}
</style>
</head>

<body class="portrait">
<div id="main_image">
  <img src="img1.jpg" width="320" height="160" />
  </div>
</body>


参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips


今更ですが、AS2でブラー処理させる機会があり、忘れかけていたので、久しぶりのAS2.0のエントリーです。
座標やalphaなどの一般的なFuseと使い方は変わりません。

下のサンプルは、mcにX,Y軸両軸方向に0.5秒でじわーっとブラーをかけるサンプルです。

var f:Fuse = new Fuse();
    f.push({Blur_blur:20, seconds:.5, ease:"easeOutQuad", trigger:true});
    f.target = mc;
    f.start();

※ActionScript2.0ですよ!
AIRのアプリを書き出す際に、「AIR-アプリケーションとインストーラーの設定」で「ウィンドウスタイル」をカスタムクローム(透明)を選ぶと制作したもののみで、余計なウィンドウにくるまれなくなります。
と同時に、そのままの場合はドラッグして移動させることもままならなくなるので、下のように記述します。
基本ですが、コピペのために記録しておきます。

btn.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
btn.buttonMode = true;

function windowMove(Evt:MouseEvent):void {
    stage.nativeWindow.startMove();
}


AIRに関する他の記事はコチラ
LiveHTMLHeader

Flash制作の際に、ローカルで動くものであれば、traceを使い、いろいろな値を出力させて確認しながら制作しますが、phpやjsなどと連携させる場合、なかなか見ることが出来ません。
そこで、アップされたサイト内のflashの動きの動向を見る際には、このFirefoxのアドオンのLive HTTP Headersを使い、HTMLヘッダを監視すると便利です。
外に読みに行く画像パスやエラーなどについても返してくれます。


ダウンロードはコチラから
Live HTTP Headers - Firefox addon
Flash内からHTML内の背景色を変更したい場合に、ActionScript3.0とJavaScript、CSSの連係プレーで実装します。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。

下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。

//Flash内AS3.0
import flash.external.ExternalInterface;

colorID = no;   
var result:uint = ExternalInterface.call("callJS", no);


//JavaScript
function callJS(str) {      
   switch(str){
        case 1: document.getElementById("idname").className = "color1";break;
        case 2:    document.getElementById("idname").className = "color2";break;
        case 3:    document.getElementById("idname").className = "color3";break;
   }  
    return str;
}


//CSS
.color1{
    width:100px;
    height:200px;
    background:#ff6600;
}

.color2{
    width:100px;
    height:200px;
    background:#ffffff;
}

.color3{
    width:100px;
    height:200px;
    background:#333333;
}

最近忙しさのせいにして、ブログのアップを怠っています。反省して、来月からまた頑張ります。
Flash内で何らかのボタンアクションによって、ユーザーのクリップボードにテキストをコピーする場合です。
Flashでは単純に1行で実装できます。
下のサンプルはsample_txtに書かれている文字列をコピーする場合です。

System.setClipboard(sample_txt.text);
日本のインターネット環境は、2000年に森喜朗首相が示したe-Japan戦略(http://ja.wikipedia.org/wiki/E-Japan)以来、ADSLや光ファイバーなど、高速インターネットが普及してきました。
US版cnetでは、各国別インターネット速度比較の2009年版が掲載されていますが、日本は韓国に次いだ2位で、ついでスウェーデン、オランダ、ドイツ、アメリカとなっています。
1位の韓国では、以前より多くのウェブサイトがFlashですが、これも高速インターネット環境普及のおかげだと思います。が、とすると、日本もいずれは韓国のようにFlashや動画をガンガン使ったウェブサイトばかりへと流れていくのかなと考えさせられるグラフでした。

U.S. lags other nations in Internet speed(cnet news)
http://news.cnet.com/8301-13578_3-10317118-38.html

お知らせ



スポンサーサイト

  • ※このエリアの広告収益は、各種ボランティア団体へ寄付します。