在flex裡內嵌文字

 - by Claire Chang

在flex裡內嵌文字有幾種方式
1. FLEX 動態更換中文字型 ( 非嵌入方式 )
這個請參考下面這篇的教學
http://blog.corausir.org/programing/ausir-777
不過上面的方式 必須以PHP配合
並且空間要支援PHP的EXEC呼叫外部EXE檔的功能
許多空間伺服器並沒有支援這個功能
另外我在測試時也發現一個問題
就是當我要產生的文字過長(ex: 400~500字)
會發生讀取錯誤的問題

2. 直接內嵌字體
(1) 使用css

@font-face {
    src: url("location") | local("name");
    fontFamily: alias;
    [fontStyle: normal | italic | oblique;]
    [fontWeight: normal | bold | heavy;]
    [advancedAntiAliasing: true | false;]
}

(2)使用as3嵌入

package
{
    import flash.text.Font;
 
 
 
    public class ArialFont
    {
 
 
 
        [Embed(source='assets/fonts/arial.ttf', fontName='ArialV', mimeType='application/x-font', embedAsCFF="true")]
        private static var ArialF:Class;
 
        [Embed(source='assets/fonts/arialbd.ttf', fontName='ArialV', fontWeight="bold", mimeType='application/x-font', embedAsCFF="true")]
        private static var ArialBoldF:Class;
 
        [Embed(source='assets/fonts/ariali.ttf', fontName='ArialV', fontStyle="italic", mimeType='application/x-font', embedAsCFF="true")]
        private static var ArialItalicF:Class;
 
        [Embed(source='assets/fonts/arialbi.ttf', fontName='ArialV', fontWeight="bold", fontStyle="italic", mimeType='application/x-font', embedAsCFF="true")]
        private static var ArialBoldItalicF:Class;
 
 
 
 
        public function ArialFont()
        {
            Font.registerFont( ArialF );
            Font.registerFont( ArialBoldF );
            Font.registerFont( ArialItalicF );
            Font.registerFont( ArialBoldItalicF );
 
 
 
        }
    }
}

直接嵌入文字會遇到一個很大的問題，就是文字太肥了，
這時，若我們只需要嵌入該字型檔的部份字型，而不需要全部嵌入
就可以設定unicodeRange
例如下面的範例

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontCharacterRange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontFamily;
        advancedAntiAliasing: true;
        unicodeRange:
           U+0041-U+005A, /* Upper-Case [A..Z] */
           U+0061-U+007A, /* Lower-Case a-z */
           U+0030-U+0039, /* Numbers [0..9] */
           U+002E-U+002E; /* Period [.] */
     }
 
     TextArea {
        fontFamily: myFontFamily;
        fontSize: 32;
     }     
  </mx:Style>
 
  <mx:Panel title="Embedded Font Character Range">
        <mx:TextArea width="400" height="150">
            <mx:text>
                The Text Uses Only Some of Available Characters 
                0 1 2 3 4 5 6 7 8 9.            
            </mx:text>
        </mx:TextArea>
  </mx:Panel>
</mx:Application>

可以只嵌入部份的文字，
若我們希望只嵌入中文字的話，則可以參考flash-unicode-table.xml裡面
有一般文字檔案的unicode編碼字集範圍
這樣可以大大改善embed文字造成檔案過大及編譯過久的問題了!

參考資料: http://hi.baidu.com/sitoto/blog/item/12528ab1124a345c0923028b.html

Tags: , ,
In: Flex | No comments »

在flex4裡用spark建置可拖動panel

 - by Claire Chang

在flex4裡面的spark組件的panel是沒有內建拖動的功能的
因此若我們希望這物件要可以被拖動
我們必須要去自己實做當使用者拖動topGroup的區塊時的拖動動作

範例程式碼如下:

package components
{
        import flash.events.MouseEvent;
 
        import mx.managers.DragManager;
 
        import spark.components.Group;
        import spark.components.Panel;
 
        /**
         * A simple extension of the Spark Panel component
         * that enables dragging.
         */
        public class DraggablePanel extends Panel
        {
                //--------------------------------------
                // Constructor
                //--------------------------------------
 
                public function DraggablePanel()
                {
                        super();
                }
 
                //--------------------------------------
                // Skin Parts
                //--------------------------------------
 
                /**
                 * The skin part that represents the title bar of the underlying Panel.
                 *      NOTE: The default PanelSkin already has this, it's just not defined as a skinPart in the Panel class.
                 * We want it so that we can capture dragging.
                 */
                [SkinPart(required="true")]
                public var topGroup:Group;
 
                //--------------------------------------
                // Overridden Methods
                //--------------------------------------
 
                protected override function partAdded( partName:String, instance:Object ) : void
                {
                        super.partAdded( partName, instance );
 
                        if (instance == topGroup)
                        {
                                Group( instance ).addEventListener( MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler );
                                Group( instance ).addEventListener( MouseEvent.MOUSE_UP, topGroup_mouseUpHandler );
                        }
                }
 
                protected override function partRemoved( partName:String, instance:Object ) : void
                {
                        super.partRemoved( partName, instance );
 
                        if (instance == topGroup)
                        {
                                Group( instance ).removeEventListener( MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler );
                                Group( instance ).removeEventListener( MouseEvent.MOUSE_UP, topGroup_mouseUpHandler );
                        }
                }
 
                //--------------------------------------
                // Event Handlers
                //--------------------------------------
 
                protected function topGroup_mouseDownHandler( event:MouseEvent ):void
                {
                        if ( !DragManager.isDragging )
                                startDrag();
                }
 
                protected function topGroup_mouseUpHandler( event:MouseEvent ):void
                {
                        stopDrag();
                }
        }

Tags: , , , ,
In: Flex4 | No comments »

flash內使用點陣圖

 - by Claire Chang

flash.display.BitmapData;
在flash內使用點陣圖，需要import這個類別，
載入點陣圖的語法為

_mc = this.createEmptyMovieClip("bm_mc", 100);
_bitmap = BitmapData.loadBitmap("photo");
_mc.attachBitmap(_bitmap,10,"always",false);

photo為你的點陣圖在元件庫內的連結識別子名稱
attachBitmap的語法為attachBitmap(Bitmap物件, 深度, 點像素頡取, 柔化)
下面的函數是由我所撰寫的背景著色函數，
可將一個元件的背景填滿該點陣圖，類似網頁的background
若您希望點陣圖著色的範圍與該元件長寬相同，
可在傳值時直接傳入"元件名._height"、"元件名._width"
附註一題，此函數適用於as2.0。

//背景著色函數(元件、寬、高、圖片識別子名)
function fillColor(tmpObj:MovieClip, bmpW:Number,
bmpH:Number, loadBitName:String)
{
	with (tmpObj)
	{
		var bg_bitmap = BitmapData.loadBitmap(loadBitName);
		beginBitmapFill(bg_bitmap,null,true,false);
		moveTo(0,0);
		lineTo(0,bmpH);
		lineTo(bmpW,bmpH);
		lineTo(bmpW,0);
		lineTo(0,0);
		endFill();
	}
}

這個函數的輸入值為"元件名"、"要著色的寬度"、"要著色的寬度"、"要當背景的識別子名稱"
若此函數有任何問題或BUG歡迎反應給我

Tags: ,
In: Action Script2 | 1 comment »

在瀏覽器內插入flash的幾種設定

 - by Claire Chang

在瀏覽器內插入flash的幾種設定

1. 讓Flash顯示透明(這項設定也可以讓Flash被壓在某些div之下)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="770" height="148"> 
<param name="movie" value="swf/top.swf" /> 
<param name="quality" value="high" /> 
<param name="wmode" value="transparent" /> 
<embed src="swf/top.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashp 
layer" type="application/x-shockwave-flash" width="770" height="148"></embed> 
</object>

2. 讓Flash允許全螢幕

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="780" height="560" align="middle"> 
<param name="allowFullScreen" value="true" /> 
<param name="movie" value="swf/top.swf" /> 
<param name="quality" value="high" /> 
<embed src="swf/top.swf" quality="high" bgcolor="#ffffff" width="780" height="560" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
</object>

3. 允許Flash存取網頁內的Javascript

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="780" height="560" align="middle"> 
<param name="allowScriptAccess" value="sameDomain" /> 
<param name="movie" value="swf/top.swf" /> 
<param name="quality" value="high" /> 
<embed src="swf/top.swf" quality="high" bgcolor="#ffffff" width="780" height="560" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
</object>

Tags: ,
In: Action Script2, Flash | 3 comments »

打字效果

 - by Claire Chang

下面範例程式中myWord是要打字出來的字
this.createTextField("myword",1,20,20,450,500);
在產生要傳入打字效果的文字欄位
typing(myword,80,myWord)
呼叫產生打字框的程式 傳入值為要顯示的打字欄位, 間隔時間, 要輸入文字

myWord = "前行政院長蘇貞昌回鍋參選台北縣長幾成定局！蘇嫡系吳秉叡掌握的民進黨台北縣黨部正積極組訓四千名口語部隊，由前行政院政務委員林萬億、林錫耀、吳澤成等三名蘇親信擔綱主講，主軸訂為「衝衝衝VS.吊車瑋」，針對性非常強，蘇縣長執政班底陸續各就各位。";
this.createTextField("myword",1,20,20,450,500);
typing(myword,80,myWord);
//打字函數(要顯示的打字欄位, 間隔時間, 要輸入文字)
function typing(data_txt:TextField, interval_time:Number, myword:String)
{
	data_txt.wordWrap = true;
	var myString = myword;
	var i = 0;
	data_txt.text = "";
	var my_word_num:Number = myString.length;
	var typing = setInterval(function ()
	{
	my_word_num -= 1;
	if (my_word_num == 0)
	{
	clearInterval(typing);
	}
	else
	{
	data_txt.text += myString.substr(i, 1);
	i++;
	}
	}, interval_time);
}

Tags:
In: Action Script2 | No comments »

在flash內捲動影片片段

 - by Claire Chang

flash.geom.Rectangle

若要對某個影片片段產生捲動軸，需要import此一類別，
關於此一類別的詳細介紹可見
http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002618.html

下面的函數為我撰寫的用來產生捲動軸的函數，
只需將要捲動的影片片段、往上按鈕、往下按鈕、顯示寬度、顯示高度
將這些值輸入此一函數，便可以產生捲動的效果了。

import flash.geom.Rectangle;
var rollHeight:Number = 80;
//產生捲動軸函數(要捲動的影片片段、往下按鈕、往上按鈕、顯示寬度、顯示高度) 
function createUpDownDrag(tmpObj:MovieClip, up_btn:MovieClip, down_btn:MovieClip, P_width:Number, P_height:Number)
{
	var window:Rectangle = new Rectangle(0, 0, P_width, P_height);
	tmpObj.scrollRect = window;
	var max_height:Number = tmpObj._height;
	var control = tmpObj.scrollRect;
	control.y = 0;
	up_btn.onPress = function()
	{
		control.y += rollHeight;
		if (control.y &gt; max_height - P_height)
		{
			control.y = max_height - P_height;
		}
		tmpObj.scrollRect = control;
	};
	down_btn.onPress = function()
	{
		control.y -= rollHeight;
		if (control.y &lt; 0)
		{
			control.y = 0;
		}
		tmpObj.scrollRect = control;
	};
}

此函數要傳入的參入包括: "要捲動的影片片段"、"往上按鈕"、"往下按鈕"、"顯示寬度"、"顯示高度"
若將影片片段傳進此參數，將可用上下按鈕來上下捲動此一影片片段
而rollHeight則是按鈕按下一次捲動的高度
若還有疑問或是有任何Bug可回覆給我!我會再做修改

Tags: ,
In: Action Script2 | No comments »

在flash中控制flv檔案-淺談FLVPlayBack組件

 - by Claire Chang

1. 將FLVPlayBack拉入元件庫中(可用ctrl+F7呼叫組件視窗)

2. 在as內貼入下列代碼

//導入video類別
import mx.video.*;
<span style="color: #737373;">//設定Player所使用的面板。這邊要注意，面板的swf檔需要一齊被上傳!! //例如你使用SteelExternalAll.swf這個面板，那就需要將SteelExternalAll.swf與你所做出的swf檔案放在同個資料夾</span>
Player.skin = "SteelOverAll.swf";
<span style="color: #737373;">//是否根據影片大小縮放組件</span>
Player.autoSize=false;
<span style="color: #737373;">//設定其他按鈕(這些也是從組件裡拉)</span>
Player.playButton = playbtn;
Player.pauseButton = pausebtn;
Player.playPauseButton = playpausebtn;
Player.stopButton = stopbtn;
Player.muteButton = mutebtn;
Player.backButton = backbtn;
Player.forwardButton = forbtn;
Player.volumeBar = volbar;
Player.seekBar = seekbar;
Player.bufferingBar = bufbar;
<span style="color: #737373;">//是否當bufferingBar失效時要無效化其他按鈕</span>
Player.bufferingBarHidesAndDisablesOthers = true;
<span style="color: #737373;">//指定要撥放的影片路徑</span>
Player.contentPath =  "http://www.helpexamples.com/flash/video/water.flv";

3. 修改SeekBar款式，assets第二格為指標的款式

this.handleLeftMargin = 2; //左邊留的空隙
this.handleRightMargin = 2; //右邊留的空隙
this.handleY = 11; //指標的位移，預設值是11，代表會在SeekBar的下面

ps: 此組件的面板也可自行製作，
面板檔案都放在zh_tw\Configuration\FLVPlayback Skins的資料夾底下
有Flv檔，可供我們編修，再直接匯入

補充: 若要讓影片可以全螢幕，則需使用as3.0來做，也就是該改成

import fl.video.FLVPlayback;
 
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.backButton = my_bkbttn;
my_FLVPlybk.seekBar = mySeekBar;
my_FLVPlybk.bufferingBar = myBufferingBar;
my_FLVPlybk.forwardButton = my_fwdbttn;
my_FLVPlybk.volumeBar = myVolumeBar;
my_FLVPlybk.muteButton = myMuteButton;
my_FLVPlybk.fullScreenButton=my_FullScreenButton;
my_FLVPlybk.source = "water.flv";

 

此組件的詳細說明文件如下：http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/video/FLVPlayback.html

Tags: ,
In: Action Script2 | No comments »