Home > Archives > 2009-04

2009-04

PNGで保存出来ないと思ったら…

  • 2009-04-30 (木)
  • Web

Photoshopを使って作業していて、PNG形式で保存しようと思ったら…

あれれ、PNGで保存出来ない…

PhotoShopの保存メニュー

何で? どうして?

PhotoShop壊れちゃった?

なんてあたふたしていたら、何のことはない。単なる僕のミス。

イメージ>モード>RGBモードで作業していると思っていたら、CMYKモードで作業していた…

RGBモードにして保存すると、PNG形式がメニューにきちんと表示されました。

RGBモードでの保存形式

間抜けすぎる…

今日の教訓。『CMYKモードだと、PNG形式で保存出来ないよ!』

AIRアプリにアイコンを適用させる


FlashDevelopのAIR Flex3 Projectorを使ってAIRアプリを作っているんですが、(パッケージングした)AIRアプリをインストールした際に、アイコンを適用させたいなぁ…と思っていました。

AIR Flex3 Projectorでは、プロジェクトを作成すると自動的に以下のものが作成されます。

  1. application.xml
  2. CreateCertificate.bat
  3. PackageApplication.bat

1は証明書の発行やパッケージング化するのに作成するのに必要な設定ファイルみたいなものです。

2、3は事前にエディタでFlex SDKへのパスをきちんと通しておけば、右クリック→Executeを実行すれば、証明書の発行やAIRのパッケージングを自動的に行ってくれる何とも便利なもの。

application.xmlはデフォルトのままだと、AIRをインストールした際に任意のアイコンを適用させることが出来ません。

どうするんだろう…と思っていたら、application.xmlにMore optionsと書かれているリンクがあったので、そこを見てみると…

ありました。Specifying icon filesという箇所にアイコンを適用させるにはどうするか? が書かれています。

<icon>
<image16x16>icons/smallIcon.png</image16x16>
<image32x32>icons/mediumIcon.png</image32x32>
<image48x48>icons/bigIcon.png</image48x48>
<image128x128>icons/biggestIcon.png</image128x128>
</icon>

application.xmlに上記の様に書いてあげれば、良さそうなことが分かりました。

そこで、application.xmlを以下の様に変更。(アイコンは32pxのものを使いたいので…)

<icon>
        <image32x32>icons/icon_032.png</image32x32> 
</icon>

(上記の記述の様に)新たにiconsフォルダを作成し、そこにicon_032.pngファイルを入れてみました。

これで、証明書の発行&パッケージング化をしてみると…

error303(バッチファイルのFlex SDKのパスが違ってるよ)というエラーが出て、パッケージング化に失敗します。

どうしたものかと思い、バッチファイルをエディタで開いてみると…

:: Path to Flex SDK binaries
set PATH=%PATH%;C:\Flex3SDKのフォルダ名\bin

パスは、Flex3SDKのbinフォルダに通っています。

そこで、アイコンの画像もbinフォルダに入れちゃえばいいんじゃないと思い、iconsフォルダからbinフォルダへ画像を移動。

ついでにapplication.xmlの記述も変更

<icon>
        <image32x32>icon_032.png</image32x32> 
</icon>

これで証明書の発行&パッケージング化してみると、上手くいきました!

バッチファイルへSDKのパスを追加してあげれば(iconsフォルダを作成して、画像を入れておく方法でも)上手くいくのかもしれませんが、とりあえずこれで問題を回避。

受賞おめでとう~!


先日、友人から一通のメールが送られてきました。

この度、毎日広告デザイン大賞で奨励賞を頂きました。銀座に作品が展示されているので、是非見に来てください~!

という訳で、行って来ました。

作品タイトルからイメージしていたものと違って、いい意味で期待を裏切られました。

おぉ~、こう来るっ! って。

こういう裏切りは嬉しいモノです。

友人の作品を見ていた30代くらいの男女のカップルが、「この作品いいねぇ…」と話しているのが聞こえてきて、こちらまで嬉しくなってしまいました。

受賞おめでとう!

友人の頑張りに、イロイロ刺激を受けてきました。

5月4日まで松屋銀座の7階デザインギャラリー(無料です!)に展示されていますので、お近くにお勤めor足を運ばれた際には、是非ご覧になってください!

Webではなく紙媒体の作品ですが、面白い作品がイロイロ展示されていますよ!

SVGを使ってPolygon(多角形)を描いてみる


SVGの基本図形のリファレンスの箇所を見ていたんですが、polygonの箇所でちょっと戸惑いました。

fill=”none” stroke=”blue” stroke-width=”2″ />

このコードを書くと、星が描画されるんですが、pointsの値はどうやって得ているの? と思ってしまいました。

まさか頑張って、調べないといけないの?

どうにか簡単にpointsの値を得る方法はないのかなぁ…と思って、あれこれ試していたら、こんな方法がいいのではないかと…

  1. イラレタで図形を描写する
  2. SVG書き出しをする
  3. SVGをブラウザで開く
  4. 右クリックでソースを表示させる

すると、こんな感じになります。

SVGのソースコード

数百行とかコードがありますが、重要なのは最後の数行。

&lt;polygon fill=&quot;#E83618&quot; points=&quot;0,75 43.301,0 86.603,75 &quot;/&gt;

ここにpointsという値が書かれています。

これを使えばいいんじゃない? って思って、pointsの値をコピーして、ソースに貼り付けてみました。塗りの色(fill)は変更してあります。

package{
  import flash.display.Sprite;
  import frocessing.shape.FShapeSVG;
         
  public class SVGTest3 extends Sprite{
			
    private var sp:Sprite = new Sprite();
            
    public function SVGTest3(){
        var svg:XML =
            &lt;svg&gt;
                &lt;polygon fill=&quot;red&quot; points=&quot;0,75 43.301,0 86.603,75&quot; /&gt;
            &lt;/svg&gt;;
                            
        var shapedata:FShapeSVG = new FShapeSVG(svg);
        sp = shapedata.toSprite();
        addChild(sp);
    };
				   
  }
}

これでパブリッシュすると、(0,0)の位置に三角形が描写されました。

お~、これなら簡単でいい! と思って、他の図形でも試してみました。

イラレタのスターツールで、線が黒・塗りが白の星を描いて、SVG書き出し。それをブラウザで開いて、ソースを表示。

&lt;polygon fill=&quot;#FFFFFF&quot; stroke=&quot;#000000&quot; stroke-width=&quot;5&quot; points=&quot;52.925,5.649 67.62,35.423 100.478,40.198 76.702,63.375 82.315,96.1 52.925,80.649 23.536,96.1 29.149,63.375 5.373,40.198 38.23,35.423 &quot;/&gt;

きちんと塗り(fill)、線(stroke)、線幅(stroke-width)もきちんとソースに反映されています。

これをそのままコピペ。

package{
	import flash.display.Sprite;
	import frocessing.shape.FShapeSVG;
	
	public class SVGTest5 extends Sprite{
		
		private var sp:Sprite = new Sprite();
            
		public function SVGTest5(){
				var svg:XML =
								&lt;svg&gt;
										&lt;polygon fill=&quot;#FFFFFF&quot; stroke=&quot;#000000&quot; stroke-width=&quot;5&quot; points=&quot;52.925,5.649 67.62,35.423 100.478,40.198 76.702,63.375 82.315,96.1 52.925,80.649 23.536,96.1 29.149,63.375 5.373,40.198 38.23,35.423 &quot;/&gt;
								&lt;/svg&gt;;
				var shapedata:FShapeSVG = new FShapeSVG(svg);
				sp = shapedata.toSprite();
				addChild(sp);
		};   
	}
}

複雑なオブジェクトを描くには外部SVGを読み込んだ方がいいと思いますが、簡単なオブジェクトをSVGを使って描く際は、この手法が簡単なような気がします。

SVGを試してみる


nutsuさんがAdobeのDeveloper Connectionで『FlashでSVG形式のベクターグラフィックを利用する』の記事をお書きになっています。

北海道を落とすとどう跳ねるのか?』(てっく煮ブログさん)もSVGを使われていますねぇ…

ってな訳で、僕もSVGを試してみることに…

上記のnutsuさんの記事を元に、Tweenerでカラーを変化させるコードを付け加えてみました。

Tweenerなんて使わずに、SVGやFrocessing側でカラーを変更出来るのかもしれませんが…

サンプルを見る(要FlashPlayer9以上)

単純な図形(四角とか丸とか)の場合、外部SVGを読み込むよりは、コード内で定義してしまった方が良さそう…

リファレンスの基本図形のページを参考にすると、良さそう…

外部SVGにすると、四角を定義するコードだけで、物凄い量に…

コード内で定義すると、わずかこれだけ…

var svg:XML =
<svg>
<rect width="50" height="50" fill="#333333" />
</svg>;

wonderflで投稿しようかと思ったんですが、FShapeSVGがコンパイルエラーになってしまいまして…

サポートされてないのかな? まぁ、いいや。

★追記(2009/04/25)

上記のswfのコードはこんな感じです。もっといい書き方がありそうですが…

/*

http://www.adobe.com/jp/devnet/flash/articles/spark_project_svg.html

この記事を参考にさせていただき、早速(SVGを)試してみる
*/

package{
         import flash.display.Sprite;
         import frocessing.shape.FShapeSVG;
		 import caurina.transitions.Tweener;
		 import flash.utils.Timer;
		 import flash.events.TimerEvent;
		 import caurina.transitions.properties.ColorShortcuts;
         
         public class SVGTest2 extends Sprite{
			
			private var sp:Sprite = new Sprite();
			private  var timer:Timer = new Timer(2000);
			ColorShortcuts.init();
            
			public function SVGTest2(){
                            var svg:XML =
                                     <svg>
                                               <rect width="50" height="50" fill="#333333" />
                                     </svg>;
                            
                            var shapedata:FShapeSVG = new FShapeSVG(svg);
							sp = shapedata.toSprite();
                            addChild(sp);
							
							//タイマーをスタートさせる
							timer.start();
							timer.addEventListener(TimerEvent.TIMER,timerHandler);
                   };
				   
				   function timerHandler(e:TimerEvent):void{
					   Tweener.addTween(sp, {x:Math.floor(Math.random()*400),y:Math.floor(Math.random()*325),time:1,_color:Math.floor(Math.random()* 0xFFFFFF)})
				   }
         }
}

Home > Archives > 2009-04

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top