スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JS、HTML、CSS、SWFフォントサイズのテスト

ちょっとCSSやHTMLやフラッシュのフォントサイズの違いを調べる必要があったので、思い切って色々作ってみました。

初めてのjavascriptやAS3.0に挑戦してみたよ。
AS3.0はflashDevelopで作ってみたよ。昔はもうAS3.0のイメージが全然つかなくて手が出せなかったけど、最近AS2.0でもデザインよりもスクリプティングを重点的に頑張ったおかげか、やっとちょっと手が出せるようになってきたよ。

作ったのはこちら。
「JS、HTML、CSS、SWFフォントサイズテスト」

JSはx-smallとかx-largeの値を入れた時の大きさ 1~7まで
HTMLは<font size>の値を入れた時の大きさ 1~7まで
CSSは style="font-size:"の値を入れた時の大きさ 単位(pxとかptとか)の入力も必要 1~∞
SWFはTextFormat.sizeの値を入れた時の大きさ 1~127まで

ソースコードはこちら

actionscript側
package
{
 import flash.desktop.Clipboard;
 import flash.events.Event;
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.text.TextFieldType;
 import flash.text.TextFormat;
 import flash.external.ExternalInterface;
 import flash.events.FocusEvent;
 
 public class Main extends Sprite {
  private var _txt:TextField = new TextField();
  private var _tfmt:TextFormat;
  public function stageCenter(e:Event):void {
   var t_txt:TextField = _txt;
   _tfmt = t_txt.getTextFormat();
   _tfmt.size = t_txt.text;
   t_txt.setTextFormat(_tfmt);
   t_txt.y = (stage.stageHeight >> 1) - (t_txt.height >> 1);
   //ExternalInterface.call("flashSize", t_txt.width, t_txt.height); ←ExternalInterface使えなかった(´;ω;`)
  }
  public function setFocus(e:FocusEvent):void {
   _txt.borderColor = 0x000000;
  }
  public function killFocus(e:FocusEvent):void {
   _txt.borderColor = 0xCCCCCC;
  }
  public function Main():void {
   _txt.autoSize = "left";
   _txt.border = true;
   _txt.borderColor = 0xCCCCCC;
   _txt.text = "12";
   _tfmt = _txt.getTextFormat();
   _tfmt.size = 12;
   _tfmt.align = "center";
   _tfmt.font = "MS Pゴシック";
   _txt.type = TextFieldType.INPUT;
   
   addChild(_txt);
   _txt.setTextFormat(_tfmt);
   stageCenter(null);
   stage.scaleMode = "noScale";
   stage.align = "TL";
   _txt.addEventListener(Event.CHANGE, stageCenter);
   _txt.addEventListener(FocusEvent.FOCUS_IN, setFocus);
   _txt.addEventListener(FocusEvent.FOCUS_OUT, killFocus);
   stage.addEventListener(Event.RESIZE, stageCenter);
  }
 }
}


javascript側
var sizing = ['xx-small','x-small','small','medium','large','x-large','xx-large'];
window.onload = function() {
 var sizeArea = document.createElement('p');
 sizeArea.innerHTML = 'TestHTML';
 document.getElementById('sizeTestHTML').appendChild(sizeArea);
 sizeArea = document.createElement('p');
 sizeArea.innerHTML = 'TestCSS';
 document.getElementById('sizeTestCSS').appendChild(sizeArea);
 sizeArea = document.createElement('p');
 sizeArea.innerHTML = 'TestJS';
 document.getElementById('sizeTestJS').appendChild(sizeArea);
 sizeTestHTML();
 sizeTestCSS();
 sizeTestJS();
}

function sizeTestJS() {
 var inputArea = document.getElementById('JSsize');
 var size = inputArea.value;
 var i = 0;
 var len = size.length;
 var j;
 while(i < len) {
  j = size.charCodeAt(i);
  if(j > 57 || j < 48){
   len--;
   size = size.substr(0,i)+size.substr(i+1,len);
  }else {
   i++;
  }
 }
 size = parseInt(size);
 size = size > 7 ? 7 : size;
 size = size < 0 ? 0 : size;
 inputArea.value = size;
 var sizeArea = document.getElementById('sizeTestJS');
 sizeArea.innerHTML = sizing[size-1];
 sizeArea.style.fontSize = sizing[size-1];
}
function sizeTestHTML() {
 var inputArea = document.getElementById('HTMLsize');
 var size = inputArea.value;
 var i = 0;
 var len = size.length;
 var j;
 while(i < len) {
  j = size.charCodeAt(i);
  if(j > 57 || j < 48){
   len--;
   size = size.substr(0,i)+size.substr(i+1,len);
  }else {
   i++;
  }
 }
 size = parseInt(size);
 size = size > 7 ? 7 : size;
 size = size < 0 ? 0 : size;
 inputArea.value = size;
 var sizeArea = document.getElementById('sizeTestHTML');
 sizeArea.innerHTML = '' + size + '';
}
function sizeTestCSS() {
 var inputArea = document.getElementById('CSSsize');
 var size = inputArea.value;
 inputArea.size = size.length;
 var sizeArea = document.getElementById('sizeTestCSS');
 sizeArea.innerHTML = '' + size + '';
}
/* ExternalInterface使えなかった(´;ω;`)
function flashSize(a, b) {
 alert(a);
 var swfArea = document.getElementById('flashcontent');
 swfArea.width = a;
 swfArea.height = b;
}
*/

他人に見せても恥ずかしくないスクリプトが書けるようになりたいです。

trackback


この記事にトラックバックする(FC2ブログユーザー)

フォントサイズをcssで指定する

 cssでフォントサイズの指定をする場合の設定項目をまとめてみました。絶対サイズ指定xx-small:とても小さいx-small:小さいsmall:やや小さいmedium:通常サイズlarge:やや大きいx-large:大きいxx-large:と...

コメントの投稿

非公開コメント

No title

なるほど、全く分からん

Re: No title

>> のへもん
大丈夫。そのうち手取り足取りボディーブロウ入れながら教えてあげる。 のへもんからC言語かObjective-Cを教えてもらえたらな!
Amazon
最新記事
最新コメント
カテゴリ
スポンサードリンク
Flashゲームサイトリンク
クリエイターズサイトリンク
お友達リンク
その他リンク
RSSリンクの表示
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。