Green

關於這個blog~

2012-11-10T14:29:00.000+08:00

這個Blog已經不再維護了, 新的Blog greenchiu.github.com

大家有需要可以到那邊去看

感謝大家～ <(_ _)>

[memo]iOS with Block

2012-06-28T11:18:00.001+08:00

雖然現在已經要出iOS6了，不過還是要memo一個在iOS4就推出的功能Block,Block是C Language撰寫的extension for Objective-C, 不過在其他語言類似的功能可能稱作Closure(因為我也不懂所以就不贅述啦飄~)
白話一點Block就是一個區間(封閉的), 在程式中可以把他當作是一個function(method)既然是function的話為什麼還要特別介紹, 因為~~要報告~~它可以不用宣告就使用, 而且有好多API都直接支援了~

接下來就直接看看程式碼

//sample1
[UIView animateWithDuration:2.0
   animations:
    ^ {
        self.view.alpha = 1.0;
        self.view.frame = CGRectMake(176.0, 258.0, 72.0, 96.0);
        self.view.transform = CGAffineTransformMakeRotation(M_PI);
    }
];
//sample2
NSArray *cards = [NSArray arrayWithObjects:@"Jack", @"Queen", @"King", @"Ace", nil];
 
[cards enumerateObjectsUsingBlock:
    ^(id object, NSUInteger index, BOOL *stop) {
       NSLog(@"%@ card at index %d", object, index);
    }
];
//end

上面兩個範例highlight的部分, 就是Block, 如果有注意到的話, 應該會知道這兩個Block不同的地方在於一個有待參數, 一個沒有參數(下方highlight部分)

//block1
^ {
    //statement ...
}
//block2
^(id object, NSUInteger index, BOOL *stop) {
    //statement ...
}

從上面, 可以知道block是可以有待參數跟沒有參數, 接著我們更進一步的介紹Block的成分構成

void   (^BlockName)   (void)
傳回型別 Block的名稱    參數

BlockName();
使用

上面的code, 我們可以把block分成三個部分,分別是傳回型別(return type)、BlockName跟帶入的參數(parameters), 其中參數如果是void, 在宣告block的時候可以直接把引入的參數省略, 下面就來宣告幾個Block並使用

//sample1
void (^myName)(void) = ^ {
    NSLog(@"Green");
};
myName();

//sample2
int (^getAge)(void) = ^ {
    return 26;
};
int myAge = getAge();

//sample3
NSString* (^getBirthday)(int) = ^(int mode) {
    NSString* birthday;
    switch(mode) {
        case 0:
            birthday = @"75.1.15";
        break;
        default:
            birthday = @"1986.1.15";
    }
    return birthday;
};
NSString* myBirthday = getBirthday(1);

看完前面有一些了解過後，我們再拿UIView有使用Block的Method來相互對照一下

+ (void)animateWithDuration:(NSTimeInterval)duration
              animations:(void (^)(void))animations

在第二行的地方, 並沒有像前面說的有一個Block's Name, 照邊我個人理解是因為他的Block是直接使用, 所以就直接用^(cross)符號來代表匿名的block; ~~接著我們繼續看下去~~

//sample1
void (^animation)(void) = ^{
    self.view.alpha = 1.0;
    self.view.frame = CGRectMake(176.0, 258.0, 72.0, 96.0);
    self.view.transform = CGAffineTransformMakeRotation(M_PI);
}
[UIView animateWithDuration:2.0
                 animations:animation
];
//sample2
[UIView animateWithDuration:2.0
   animations:
    ^ {
        self.view.alpha = 1.0;
        self.view.frame = CGRectMake(176.0, 258.0, 72.0, 96.0);
        self.view.transform = CGAffineTransformMakeRotation(M_PI);
    }
];

sample1是用先宣告一個跟UIView ClassMethod 需要的Block Method 一樣的Block animation, 然後在呼叫UIView ClassMethod 並將 block animation 指定過去; 更快直接的話可以像sample2一樣直接打一段匿名的block, 也是可以順利執行的.

接著再來介紹 __block 這個關鍵字, 這個關鍵字是讓在block method外宣告的變數在block method可以當成變數來使用, 前面有提到說Block本身是一個封閉區間, 所以在宣告Block method本身的時候, 他會將block外部的變數當作常數來使用, 所以需要在Block變更Block外部的變數, 只要在宣告的變數前面加上__block就可以了

__block int count = 0;
void(^increase)(void)=^ {
    count++;
    NSLog(@"count:%d", count);
};

increase();// 1
increase();// 2 ...

當我們在coding的時候, 如果有一個mehtod像上面的UIView的ClassMethod用到了Block, 但是如果要帶入的參數很多, 那在閱讀的時候會因為太長就會比較不方便, 我們可用typedef來解決這個問題

下面我建立了一個sampleMethod並要帶入一個block, 接著我們使用typedef來定義type SampleBlock, 接著把method改寫成第6行的樣子; 最下面就是一些簡單的use sample code

//before
-(void)sampleMehtod:(void(^)(void))aBlock;

//after
typedef void(^SampleBlock)(void);
-(void)sampleMethod:(SampleBlock)aBlock;

//use
SampleBlock testBlock = ^ {
    //statement ...
};

[self sampleMethod:testBlock];

到這邊就告一段落啦, 因為打著Memo的口號, 我是用我自己理解的方式來寫可能只有我自己看得比較懂啦
如果有錯誤也請提出, 感謝

新開始，新挑戰

2011-07-23T11:00:00.002+08:00

放了一段暑假之後，開始進入了新的工作；雖然因為放假的關係，在頭一、二天非常的不習慣，整個就是躺在床上想賴床這樣，不過還是很努力的投入新工作；新的工作主要是在做Mobile Device Application的開發，而我是之後會開發 iOS 這塊的東西。

在這個領域我算是一隻菜鳥吧，渾身菜味那種，所以....不用多說，當然是從看code這件事情開始做起；不得不說，差異性頗大的，當然也偷偷學到好幾招了，不過還是有待嘗試嘗試。
不過有好多東西都是頭一遭，只能扒著人到處問，不過還是有很多不了解的地方，而且工作的co-work方式也不大一樣，還得要在慢慢熟悉，摸索摸索~

至於，第一個禮拜過去了，老實說我還是有些緊張，不知道當初勇往直前的衝勁是哪邊來的；不過還是想要挑戰自己，做自己想要做的東西，可能過程會辛苦一些，不過總是要努力過才不會覺得後悔。當然，自己還是有一些計畫，想要做一個可以存放自己作品的網站，目前有初步計畫了，不過在開始之前可能要先複習一下PHP，可以在不久的將來把這個計畫放上我的時程表上。

至於Flash的部分嘛，其實還是會繼續玩吧，只要有時間，我想在AS的聚會上我還是會不定時出現的，就像老林跟SEGA的獨立遊戲開發者分享會一樣，只不過主力不會是這方面而已。

最後希望我可以在這邊順利的闖出一片自己的天空啦，也祝大家工作、生活都順利囉。

iOS SDK with MapKit (Google Map) 練習 (2)

2011-05-09T11:15:00.001+08:00

接續上篇，接著繼續分享MKAnnotationView以及MKMapViewDelegate兩個內容；上一篇有提到說顯示在地圖上的資訊註解(Annotations)是由一個資訊模組(MKAnnotation)跟一個可視物件/模組(MKAnnotationView)所組成的，這個可視模組除了將資訊模組裡的資料呈現出來之外，我們還可以將其運用加入圖片跟按鈕，讓我們顯示出來的資訊更加全面。

我會將閱讀文章的人視作對 c / obj-c 以及 iOS有一定的認識，因此在obj-c/c的一些使用內容將不會有太多的解釋。

在這邊我們會先使用MKPinAnnotationView 來介紹 MKAnnotationView 以及 MKMapViewDelegate在顯示MKAnnotationView用的method

//MapKit_PracticeController.h
#import <MapKit/MapKit.h>
#import "Annotation.h"

@interface MapKit_PracticeViewController : UIViewController <MKMapViewDelegate> {
    MKMapView *mapView;
}
//MapKit_PracticeViewController.m
-(void)loadView
{
    [super loadView];
    mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    mapView.delegate = self;
    MKCoordinateRegion region;
    region.center.latitude = 25.044;
    region.center.longitude = 121.526;
    MKCoordinateSpan span;
    span.latitudeDelta  = .002;
    span.longitudeDelta = .002;
    region.span = span;
    [mapView setRegion:region animated:YES];

    /**
     * 以下照舊 ... 
     */
    [self.view addSubview:mapView];
}

第5,8行的地方我們先將controller採用了MKMapViewDelegate協定，再將mapView的委派指向controller，這樣一來當我們在mapView上的動作就可以反應到我們實作的method上；這邊我們先實作 method

#pragma mark methods for MKMapViewDelegate
- (MKAnnotationView *)mapView:(MKMapView *)map 
            viewForAnnotation:(id <MKAnnotation>)annotation 
{
    static NSString *AnnotationViewID = @"annotationViewID";
    MKPinAnnotationView* pinView = 
    (MKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:AnnotationViewID];
    if (!pinView)
    {
 // if an existing pin view was not available, create one
        MKPinAnnotationView* customPinView = 
        [[[MKPinAnnotationView alloc] initWithAnnotation:annotation 
                                         reuseIdentifier:AnnotationViewID] 
         autorelease];                              
        customPinView.pinColor = MKPinAnnotationColorPurple;
        customPinView.animatesDrop = YES;
        customPinView.canShowCallout =YES;
        return customPinView;
    }
    else
    {
        pinView.annotation = annotation;
    }
    return pinView;
}

這個method是當你要呈現的我們在地圖上的資訊註解時所呈現的可視模組(MKAnnotationView)，一開始會先判斷這個資訊是否建立過了沒有的話就建立一個新的，有的話就直接使用只是修改資訊內容。
執行結果:

接著我希望我資訊註解可以有相關的照片以及可以點擊顯示更詳細的內容，所以我們要新增修改下列兩個 method

- (MKAnnotationView *)mapView:(MKMapView *)map 
            viewForAnnotation:(id <MKAnnotation>)annotation 
{
    static NSString *AnnotationViewID = @"annotationViewID";
    MKPinAnnotationView* pinView = 
    (MKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:AnnotationViewID];
    if (!pinView)
    {
        MKPinAnnotationView* customPinView = 
        [[[MKPinAnnotationView alloc] initWithAnnotation:annotation 
                                         reuseIdentifier:AnnotationViewID] 
         autorelease];                              
        customPinView.pinColor = MKPinAnnotationColorPurple;
        customPinView.animatesDrop = YES;
        customPinView.canShowCallout =YES;
        customPinView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
        customPinView.leftCalloutAccessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Pic_image.png"]];
        return customPinView;
    }
    else
    {
        pinView.annotation = annotation;
    }
    return pinView;
}
//AnnotationView's UIControl 被點擊後的動作反應
-(void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control
{
    [[[[UIAlertView alloc] initWithTitle:view.annotation.title 
                                 message:view.annotation.subtitle 
                                delegate:nil 
                       cancelButtonTitle:@"OK" 
                       otherButtonTitles:nil, nil] 
      autorelease] 
     show];
}

執行畫面

除了用大頭針外，也是可以自定資訊註解的圖形，只要使用MKAnnotationView來取代MKPinAnnotationView就可以了，並且將MKAnnotationView的image指定成要使用的圖形就可以了，不過要注意的是載入圖形後要使用centerOffset去調整圖形的位置，不然定點會出現一些誤差。
最後在介紹

- (void)mapView:(MKMapView *)map regionDidChangeAnimated:(BOOL)animated

這個method是當你移動你地圖完畢的時候反應的動作，可以在這邊判斷現在在地圖裡面的資訊哪些已經離開畫面需要被移除的或者是需要被新增加到地圖上。在請大家自己試看看該怎麼做囉。

這次的分享內容是補足上一篇沒打完的部份，所以內容比較少了些，有一些地方也是用敘述來帶過，可能要麻煩大家自己嘗試一下會比較清楚；最後就是內容有錯誤或者是有什麼指教的地方，也請大家跟我反應，希望這篇分享也可以幫助倒有需要的人，謝謝。

參考連結:
Introduction to MapKit on iOS Tutorial Link
Map Kit Framework Reference Link
MKMapViewDelegate Protocol Reference Link
MKAnnotationView Class Reference Link

iOS SDK with MapKit (Google Map) 練習 (1)

2011-05-05T15:10:00.002+08:00

Hi all，最近練習了在iOS終始用Google Map，有一些成果後筆記一下順便分享給大家，這次要來分享如何使用 iOS SDK 的 MapKit framework來建立地圖，並且在地圖上建立幾個點，還有一些相關的運用；至於查詢地指方面的功能，就等我試出來後再跟大家介紹吧。

我會將閱讀文章的人視作對 c / obj-c 以及 iOS有一定的認識，因此在obj-c/c的一些使用內容將不會有太多的解釋。

首先，先在專案(我專案命為MapKit_Practice)內加入MapKit framework，你可以參考下圖來增加需要的framework

增加完成後，接著我們開始建立Google Map到我們的畫面上
MapKit_PracticeViewController.h

#import <MapKit/MapKit.h>
@interface MapKit_PracticeViewController : UIViewController {
    MKMapView *mapView;
}
@end

接的修改MapKit_PracticeViewController.m

#import "MapKit_PracticeViewController.h"
@implementation MapKit_PracticeViewController
- (void)dealloc
{
    [mapView release];
    [super dealloc];
}
-(void)loadView
{
    [super loadView];
    mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    [self.view addSubview:mapView];
}

執行結果

到這邊就完成基本的建立了，但是我們並不想要把地圖一開始顯示的地點設在美國，我想把他設定在台北火車站的附近，所以我們接著修改map.region參數：
MapKit_PracticeViewController.m

-(void)loadView
{
    [super loadView];
    mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    MKCoordinateRegion region;
    region.center.latitude = 25.044;
    region.center.longitude = 121.526;
    MKCoordinateSpan span;
    span.latitudeDelta  = .002;
    span.longitudeDelta = .002;
    region.span = span;
    [mapView setRegion:region animated:YES];
    [self.view addSubview:mapView];
}

上面的程式碼中我們先宣告了一個 MKCoordinateRegion 結構的變數 region，並將中心點設定在(北緯,東經):
(25.044,121.526)的地方，接著在設定地圖縮放的等級(zoom-level) MKCoordinateSpan span，數值越小呈現的地圖範圍越小。
執行的結果如下圖

到這邊，我們已經建立了基本的地圖內容，被並且將起始位置跟縮放等級設定在我們所想要的位置，接下來我們將要在地圖增加一個地點網路基因，這要用到MKAnnotation Protocal，這個協定被宣告如下：

@protocol MKAnnotation <NSObject>

// Center latitude and longitude of the annotion view.
// The implementation of this property must be KVO compliant.
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;

@optional

// Title and subtitle for use by selection UI.
- (NSString *)title;
- (NSString *)subtitle;

// Called as a result of dragging an annotation view.
- (void)setCoordinate:(CLLocationCoordinate2D)newCoordinate __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_4_0);

@end

上面的程式碼，你應該有注意到並沒有我們在宣告Class時候都會出現一個@interface ClassName {}的內容，因此我們需要去宣告一個 Class 來採用並實現這個資料模型(data medol)。
註解在地圖上的資訊(Annotations)是由MKAnnontation 跟 MKAnnontationView組成

宣告一個新的Class Annotation

//Annotation.h:
#import <MapKit/MapKit.h>
@interface Annotation : NSObject <MKAnnotation> {
}
@end
//Annotation.m:
-(NSString*)title
{
    return @"網路基因";
}
-(NSString*)subtitle
{
    return @"電話：02-2395-5378";
}
-(CLLocationCoordinate2D) coordinate
{
    CLLocationCoordinate2D _coordinate = {25.044423,121.52673};
    return _coordinate;
}

接著我們直接使用Annotation這個類別並增加到我們的地圖上

//MapKit_PracticeViewController.h
#import Annotation.h
//MapKit_PracticeViewController.m
-(void)loadView
{
    [super loadView];
    mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    MKCoordinateRegion region;
    region.center.latitude = 25.044;
    region.center.longitude = 121.526;
    MKCoordinateSpan span;
    span.latitudeDelta  = .0015;
    span.longitudeDelta = .0015;
    region.span = span;
    [mapView setRegion:region animated:YES];

    Annotation *myAnnotation = [[Annotation alloc] init];
    [mapView addAnnotation:myAnnotation];

    [self.view addSubview:mapView];
}

執行後的畫面(我有先點擊大頭針)如下

這樣我們就成功的在地圖上增加了一個地點"網路基因"，但是現在的Annotation class在使用上非常的不方便，所以我在針對Annotation做一些修改以便在使用尚可以更符合我們的需求

//Annotation.h:
#import <MapKit/MapKit.h>

@interface Annotation : NSObject <MKAnnotation> {
    NSString *_title;
    NSString *_subTitle;
    CLLocationCoordinate2D _coordiante2D;
}

@property (nonatomic , readonly) NSString *title;
@property (nonatomic , readonly) NSString *subtitle;
@property (nonatomic , readonly) CLLocationCoordinate2D coordinate;

-(id) initWhithTitle:(NSString *) theTitle subTitle:(NSString *)theSubTitle andCoordiante:(CLLocationCoordinate2D) theCoordinate;
@end

//Annotation.m:
@implementation Annotation
//設定getter
@synthesize title=_title,subtitle=_subTitle,coordinate=_coordiante2D;

-(void)dealloc
{
    [_title release];
    [_subTitle release];
    [super dealloc];
}

-(id) initWhithTitle:(NSString *) theTitle subTitle:(NSString *)theSubTitle andCoordiante:(CLLocationCoordinate2D) theCoordinate
{
    self = [super init];
    if (self) {
        _title = [theTitle copy];
        _subTitle = [theSubTitle copy];
        _coordiante2D = theCoordinate;
    }
    return self;
}

然後，除了原來的網路基因外，我希望在另外增加兩個資訊在地圖上，接著修改

//MapKit_PracticeViewController.m
-(void)loadView
{
    [super loadView];
    mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    MKCoordinateRegion region;
    region.center.latitude = 25.044;
    region.center.longitude = 121.526;
    MKCoordinateSpan span;
    span.latitudeDelta  = .0015;
    span.longitudeDelta = .0015;
    region.span = span;
    [mapView setRegion:region animated:YES];

    CLLocationCoordinate2D location0 = {25.044423,121.52673};
    Annotation *myAnnotation0 = [[Annotation alloc] initWhithTitle:@"網路基因資訊股份有限公司"
                                                          subTitle:@"電話：02-23955378" 
                                                     andCoordiante:location0];
    CLLocationCoordinate2D location1 = {25.04411,121.52534};
    Annotation *myAnnotation1 = [[Annotation alloc] initWhithTitle:@"遠東國際商業銀行" 
                                                          subTitle:@"電話：02-2327-8898" 
                                                     andCoordiante:location1];
    CLLocationCoordinate2D location2 = {25.04443,121.52579};
    Annotation *myAnnotation2 = [[Annotation alloc] initWhithTitle:@"文化大學推廣教育部" 
                                                          subTitle:@"電話：02-2356-7356" 
                                                     andCoordiante:location2];
    
    [mapView addAnnotations:[NSArray arrayWithObjects:myAnnotation0, myAnnotation1, myAnnotation2, nil]];
    [myAnnotation0 release];
    [myAnnotation1 release];
    [myAnnotation2 release];

    [self.view addSubview:mapView];
}

執行後的結果如下

將Annotation Class修改後，使用起來會更方便，在增加新的資訊的時候也不用一個Class宣告一個資訊造成之後的管理不方便；關於MKAnnotionView以及MKMapDelegate的部份因為內容好像有點太長了，所以就不在這篇繼續下去了，會在下一篇的練習中在分享給大家。

最後希望這篇內容可以對大家有幫助，對於文章內容有錯誤或者建議的地方，也請大家多多指教，謝謝。

參考內容：
Introduction to MapKit on iOS Tutorial Link
Map Kit Framework Reference Link
MKMapView Class Reference Link
MKAnnotation Protocol Reference Link

iOS SDK 認識 Quartz 2D (2)

2011-04-26T12:33:00.001+08:00

Hi everyone，在上一篇 iOS SDK 認識 Quartz 2D (1)，我們成功的將冗長的程式碼包裝成一個class，並賦予這個class讓其可以有旋轉以及縮放的功能；接著這次要介紹的功能是如果播放動態，介紹其相關的原理。

我會將閱讀文章的人視作對 c / obj-c 以及 iOS有一定的認識，因此在obj-c/c的一些使用內容將不會有太多的解釋。另外會以AS3為對照的語言，作一些相關的引用跟對照。

此篇將延續上兩篇使用的專案

動態製作的原理，是依照連環圖動畫來製作(filpnook animation)，使用一張一張圖讓他去播放(可以參考前面連結的影片)，在瞭解動態如何製作之後，我們假設現在要製作一個數字跳動的動態，我希望能已30fps重複播放六張圖片，但如果這樣製作六張分開的圖片讓程式載入，不只在檔案上會增加很多圖檔，程式也必需要一直載入圖片來播放，這樣管理起又變得麻煩。所以我們將會把一個物件(人物、角色...)的動態坐在一張檔案裡，圖片製作的方式如下：

一個Row, 可以做一方向(狀態)的動態, 將物件所有的動態做成一張圖(atlas 地圖集)，用來載入程式來動作。

接著我們建立一個新的Class，繼承 Sprite 命名為 AtlasSprite
AltasSprite.h:

#import "Sprite.h"
@interface AtlasSprite : Sprite {
    UIImage *atlas;//地圖集
    CGImageRef image;//Quartz 圖片格式
    CGFloat atlasWidth;//寬
    CGFloat atlasHeight;//高度
    CGRect clipRect;//紀錄圖片位置
    int rows;//地圖集有幾行
    int columns;//幾欄
    int frame;//用來紀錄播放動態的影格
}
@property (retain, nonatomic) UIImage *atlas;
@property (assign) CGFloat atlasWidth,atlasHeight;
@property (assign) CGRect clipRect;
@property (assign) CGImageRef image;
@property (assign) int rows,columns,frame;
- (id) initWithFile:(NSString*) fileName withRows:(int)atlasRows withColumns:(int) atlasColumns;

在AltasSprite中，我們宣告了八個新參數以及一個Method，接著我們進行Class的實作，這邊我會將method分開解釋，程式碼方面會比較零散，請大家自己注意一下
AltasSprite.m

- (id) initWithFile:(NSString*) fileName withRows:(int)atlasRows withColumns:(int) atlasColumns;
{
    self = [super init];
    if(self)
    {
        atlas = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle]
                                                           pathForResource:fileName ofType:nil]
                   ];
        CGImageRef img = [atlas CGImage];
        image = img;
        int width0 = CGImageGetWidth(image);
        int height0 = CGImageGetHeight(image);
        if(atlasRows < 1) atlasRows = 1;
        if(atlasColumns < 1) atlasColumns = 1;
        atlasWidth = width0;
        atlasHeight = height0;
        rows = atlasRows;
        columns = atlasColumns;
        width = round(width0/columns);
        height = round(height0/rows);
        CGFloat w2 = width*0.5;
        CGFloat h2 = height*0.5;
        clipRect = CGRectMake(-width*0.5, -height*0.5, width, height);
        frame = 0;
    }
    return self;
}

21行highlight的部份，將我們原點轉移到中心點, 這就是之後我們呈現圖案的範圍大小

接著我們覆寫drawBody Method

-(void) drawBody:(CGContextRef)context
{
    int r0 = floor(frame/columns);
    int c0 = frame-columns*r0;
    CGFloat w2 = width*0.5;
    CGFloat h2 = height*0.5;
    CGFloat u = c0*width+w2;
    CGFloat v = atlasHeight - (r0*height+h2);
    
    CGContextBeginPath(context);
    CGContextAddRect(context, clipRect);
    CGContextClip(context);
    CGContextDrawImage(context, CGRectMake(-u, -v, atlasWidth, atlasHeight), image);
}

在3-4行程式碼的地方我們先求出我們要對應的row & column 接著運算出對應的在地圖集上的坐標，接著我們增加即將製作圖形的大小方塊，接著使用 CGContextDrawImage 的方式，在地圖集上將我們想呈現的出區塊畫出來(參考下圖)。

最後別忘了要釋放我們使用的圖片資源 AtlasSprite.m

-(void)dealloc
{
    [atlas release];
    CGImageRelease(image);
    [super dealloc];
}

接著回到Quartz2DView進行修改：

//Quartz2Dview.h
#import "Sprite.h"
#import "AtlasSprite.h"
@interface Quartz2DView : UIView {
    
    //Sprite *mySprite;
    AtlasSprite *atlasSprite;
    NSTimer *timer;
    int aframe;
}
-(void) dt:(NSTimer *) theTimer;
@end

//Quartz2DView.m
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
        aframe = 0;
        atlasSprite = [[AtlasSprite alloc] initWithFile:@"sample.png" 
                                               withRows:7 
                                               withColumns:7
                      ];
        atlasSprite.x = 100;
        atlasSprite.y = 100;
        atlasSprite.frame = 1;//使呈現的圖案＝01
    }
    return self;
}
-(void) drawRect:(CGRect)rect
{
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSaveGState(context);
    
    CGAffineTransform t0 = CGContextGetCTM(context);
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);
    
    [atlasSprite updateBox];
    [atlasSprite draw:context];
    
    CGContextRestoreGState(context); 
}

執行後的結果如下圖：

到這邊整個Class已經完成了，接下來要做的就是讓動態可以跑起來，我們建立一個 NSTimer 來處理動態的動作

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
        aframe = 0;
        atlasSprite = [[AtlasSprite alloc] initWithFile:@"sample.png" 
                                               withRows:7 
                                               withColumns:7
                      ];
        atlasSprite.x = 100;
        atlasSprite.y = 100;
        //atlasSprite.frame = 1;//使呈現的圖案＝01
        timer = [NSTimer scheduledTimerWithTimeInterval:1/30.0
                                               target:self
                                             selector:@selector(dt:)
                                             userInfo:nil
                ];
    }
    return self;
}
-(void) dt:(NSTimer *) theTimer
{
    aframe+1 < atlasSprite.columns ? ++aframe : (aframe=0);
    atlasSprite.frame = aframe;
    [self setNeedsDisplay];
}

執行出現的話面就不在提供了，畫面的紅色區塊將會00 ~ 06之間重複播放。

那麼，這篇文章到這邊也就結束了，可能大家對於AltasSprite.m 的 drawBody會有較多的疑問，這邊牽扯到了一些數學計算，讀起來可能會比較不容易瞭解，所以附上了兩個圖片來讓大家理解。
總算是打完這篇了，這篇的文字敘述越來越少了，大多數的內容也都是使用程式碼和圖片來帶過囧rz ..(變懶了)；自己最近做練習，其實也是跌跌撞撞，debug花了2hrs才發現是使用到了method不是當前需要的，其實程式碼根本沒有錯誤，只能希望自己盡量小心不要再犯一樣的錯誤；最後在這邊希望這篇也能幫助到大家，如果內容有任何錯誤或者是指教，也請不要吝嗇，謝謝。

參考資料:
iOS Developer Library CGContext Reference
iOS Developer Library CGImage Reference
使用單張影像來製作flipbook動畫效果
iOS SDK Tutorial: Flip Book Style Animation, part 1 of 2
iOS SDK Tutorial: Flip Book Style Animation, part 2 of 2

範例下載: Sample3.zip

相關文章：
iOS SDK 認識 Quartz 2D(0)
iOS SDK 認識 Quartz 2D(1)

使用Facebook JavaScript SDK 來處理點 "讚" 的動作

2011-04-21T18:20:00.006+08:00

Hi all，今天臨時被問了Facebook's Social Plugins一個需求，就是當User點擊網頁上面的Like Button的時候，可不可以順便發文到自己的塗鴉牆上，圖文的內容我們可以自己依照我們想造呈現方式去設定(使用SDK來發佈)；這篇文章將會結合到一些 Open Graph protocal的內容，如果對於如何使用 Facebook JavaScript SDK的人，可以先參考我之前寫的使用 Javascript Facebook SDK with Graphic API。

對不起，昨天發布這篇文章，最後發現內容有一些地方必須要被更正，其中以點讚後再去登入的動作會被瀏覽器擋住的問題最大，原因是因為，登入的動作不是使用者自己去動作的，因此我會在文章的內容上做一些修改。目前已修正內容

一開始我們先介紹不會使用到API部分的地方，也就是不需要建立取得一個APP_ID(這邊這樣的說法可能會讓人有點混淆，之後我們會配合程式碼來加以解釋)，那麼首先我們先建立一個Like Button，設定好相關的內容

點下Get Code複製XFBML部分的程式碼貼到頁面上

接著到同一個頁面下方的 Step 2 Get Open Graph Tags 地方同樣填入相關的資訊並複製下來貼到html上。

上面兩個動作完成後，您的程式碼應該會類似下面

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <meta property="og:title" content="Facebook Event Test"/>
    <meta property="og:type" content="author" />
    <meta property="og:url" content="http://1001.webgene.tw/green/facebook/event/"/>
    <meta property="og:image" content="http://1001.webgene.tw/green/facebook/event/fb_event.png"/>
    <meta property="og:site_name" content="http://greenchiou.blogspot.com/" />
    <meta property="fb:admins" content="[YOU_FACEBOOK_ID]" />
    <meta property="og:description" content="Test Share Video to Facebook"/>
    <title>Facebook Event Html Title</title>
    <script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>
</head>
<body>
    <div id="fb-root"></div>
    <fb:like href="http://1001.webgene.tw/green/facebook/event/" show_faces="true" width="450" font=""></fb:like>
</body>
</html>

上面highlight的部分你會注意到載入的js後面帶了#xfbml=1的參數，如果沒有帶入這個參數，你的Link Button將無法正確成現在你的html上，要特別的注意；接著，我們加入Like Button被點擊like跟unlike的事件Listener，html修改如下：

<body>
    

    <fb:like href="http://1001.webgene.tw/green/facebook/event/" show_faces="true" width="450" font=""></fb:like>
</body>

然後測試點擊Like Button，讓Like Button處在Like跟unLike的情況會分別跳出alert "like"/"unlike"。

接下來我們使用API的方式來修改讓他符合我們所想要達到的需求：
~~先修html改載入js的部分，將後面的#xfbml=1拿掉~~ 這邊多次測試後，會有一個怪異的問題，所以請大家在這邊注意一下還是維持原樣js後面帶有#xfbml=1

接著修改js的部分

window.fbAsyncInit = function() {
    FB.init({appId: "162485500442847", status: true, cookie: true, xfbml: true});
    FB.Event.subscribe('edge.create', function(response) {
        document.getElementById('result').innerHTML = response;
        alert("like");
    });
    FB.Event.subscribe('edge.remove', function(response) {
         document.getElementById('result').innerHTML = response;
        alert("unlike");
    });
};

因為我們使用了FB.init來初始化我們的Facebook App，裡面有一個xfbml: true的參數，將這參數設為true，我們就可以將js載入的部分修改成上面的樣子，也不會影響到我們使用xfbml的social plugins的Like Button。接著我們加入一個發佈訊息的function，並且在點擊Like Button的並呈現Like時候，~~判斷是否以登入跟是否取得premission，如果以登入並且已取得權限，則~~彈出對話框來發佈訊息。

因為登入的動作未經使用者自行點擊，最造成被瀏覽器阻擋的問題，為了避免病解決這樣的問題，我們將修改、增加我們的原始碼。
首先，在html的部分除了原本的Like Button 外，我們也加上一個Login Button，並且個字包在一個div底下，並預設成看不見的狀況。

並且加上登入成功後的事件偵聽

FB.Event.subscribe('auth.login',function(response){
 document.getElementById('like').style.display="block";
 document.getElementById('login').style.display="none";
});

接著在進到頁面的時候，先抓取是否有登入的狀況；並判斷有登入的話是不是有相關的permisson，如果沒有的話，就顯示登入。

FB.getLoginStatus(function(response) {
 if (response.session) {
  //特別注意傳回來的 perms 是 string 不是array 
  if(response.perms.indexOf("publish_stream") >= 0 )
  {
   document.getElementById('like').style.display="block";
  }
  else document.getElementById('login').style.display="block";
 } else {
  document.getElementById('login').style.display="block";
 }
});

接著修改 FB.Event.subscribe 的部分

FB.Event.subscribe('edge.create', function(response) {
    document.getElementById('result').innerHTML = response;
    post_feed();
});

4/22 14:58 修改

加入function post_feed()

function post_feed()
{
    FB.ui({
        method: 'feed',
        name: 'Facebook Event Html Title',
        link: 'http://1001.webgene.tw/green/facebook/event/',
        picture: 'http://1001.webgene.tw/green/facebook/event/fb_event.png',
        caption: 'Green Test Facebook Event ',
        description: 'Greens Facebook Event Test',
        message: 'Facebook Event is easy!'
    },
    function(response) {
        if (response && response.post_id) {
            alert('Post was published.');
        } else {
            alert('Post was not published.');
        }}
    );
}

最後再進行測試，測試的結果可以參考下圖

除了上面介紹的2個事件之外，FB還提供了9個事件可以被偵聽，這11個事件中有4個是專門給xfbml使用的，詳細的資訊可以參考 FB.Event.subscribe 的內容，就不一一列舉說明了。

這篇文章就介紹到這邊了，希望對大家有幫助，如果有錯誤或者建議，也請大家不要吝嗇，謝謝大家。

參考網址：
Facebook Developers FB.Event.subscribe
Facebook Developers Social Plugins Like Button
範例網址：
Demo

相關文章：
Facebook 使用 Open Graph protocal 輕鬆分享影片
使用 Javascript Facebook SDK with Graphic API

iOS SDK 認識 Quartz 2D (1)

2011-04-21T12:00:00.001+08:00

Hi all, 接續上一篇iOS SDK 認識 Quartz 2D(0)的內容，我們希望將我們所畫出來的矩形包裝成一個Class，已達到可以在畫面上呈現多個矩形，並且不會造成程式碼過長的情況；這一篇的內容將可以持續使用上篇的已經編輯好的專案繼續使用，內容上，除了將矩形包裝成一個Class外，還會介紹將上一篇提到的轉至矩陣帶入Class中。

我會將閱讀文章的人視作對 c / obj-c 以及 iOS有一定的認識，因此在obj-c/c的一些使用內容將不會有太多的解釋。另外會以AS3為對照的語言，作一些相關的引用跟對照。

首先先新增一個Class，命名為Sprite 繼承自 NSObject。
Sprite.h：

@interface Sprite: NSObject {
    CGFloat x;
    CGFloat y;
    CGFloat width;
    CGFloat height;
    CGFloat red;
    CGFloat blue;
    CGFloat green;
    CGFloat alpha;
}

@property (assign) CGFloat x, y;
@property (assign) CGFloat width, height;
@property (assign) CGFloat red, green, blue, alpha;

-(void) draw:(CGContextRef) context;

@end

在Sprite.h內，我們知道這個Class會有(x,y)座標、長、寬以及RGBA等參數，並宣告了一個實體method draw；接下來我們開始實做這Class。
Sprite.m：

@implementation Sprite
@synthesize x, y;
@synthesize width, height;
@synthesize red, green, blue, alpha;

-(id)init
{
    self = [super init];
    if(self)
    {
        x = y = 0.0;
        width = height = 0.0;
        red = green = blue = 0.0;
        alpha = 0.0;
    }
}
-(void) draw:(CGContextRef) context
{
    CGContextSaveGState(context);

    CGContextBeginPath(context);
    CGContextSetRGBFillColor(context, red, green, blue, alpha);
    CGContextAddRect(context, CGRectMake(x, y, width, height) );
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);

    CGContextRestoreGState(context);
}

在上面，你會注意到兩行(19跟27)分別被我highlight起來；在這邊會需要將他的狀況保存起來是因為我們之後將會對這個Class去進行擴充，所以要將這個Class(或者說被建立出來的實體)本身的CTM去獨立的保存與釋放；如果不這麼作，可能會遇到圖形變形或者是座標...等等出現問題；大家可以在後面進行縮放跟旋轉擴充後，在去測試將這個動作移除後的差異。

然後回到Quartz2DView的部分，分別對 .h 以及 .m 作下面的修改：

//-----Quartz2DView.h
#import "Sprite.h"
@interface Quartz2DView : UIView {
    Sprite  *mySprite0;
    NSTimer *timer;
}
-(void) dt:(NSTimer*) theTimer
@end
//Quartz2DView.m 
-(id) initWithFrame:(CGRect) frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        mySprite0 = [[Sprite alloc] init];
        mySprite0.width = 100;
        mySprite0.height = 100;
        timer = [NSTimer scheduledTimerWithTimeInterval:1/30.0
                                                 target:self
                                               selector:@selector(dt:)
                                               userInfo:nil
                                                repeats:YES];
    }
}
-(void) dt:(NSTimer*) theTimer
{
    mySprite0.y+=1;
    [self setNeedsDisplay];
}
-(void) drawRect:(CGRect) rect{
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSaveGState(context); 
     
    CGAffineTransform t0 = CGContextGetCTM( context );
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);
     
    [mySprite0 draw:context];
     
    CGContextRestoreGState(context);
}

到這邊就修改完畢了，執行的結果，應該是上一篇最後執行的結果，沿著Y軸移動。

接下來我們將要進行Sprite的擴充，希望讓Sprite有旋轉和縮放的能力，這就要使用到上一篇提到的轉置矩陣，轉置矩陣可以參考一下AS3的Matrix；那麼現在，我們就開始修改Sprite的內容。
Sprite.m

@interface Sprite: NSObject {
    CGFloat x;
    CGFloat y;
    CGFloat width;
    CGFloat height;
    CGFloat red;
    CGFloat blue;
    CGFloat green;
    CGFloat alpha;
    CGFloat rotation;
    CGFloat scaleX;
    CGFloat scaleY;
    CGRect  box;
}

@property (assign) CGFloat x, y;
@property (assign) CGFloat width, height;
@property (assign) CGFloat red, green, blue, alpha;
@property (assign) CGFloat rotation;
@property (assign) CGFloat scaleX,scaleY;
@property (assign) CGRect  box;

-(void) drawOutlinePath:(CGContextRef) context;
-(void) drawBody:(CGContextRef) context;
-(void) draw:(CGContextRef) context;
-(void) updateBox;
@end

上面我們對Sprite Class增加了旋轉(rotation)及縮放(scaleX,scaleY)的參數，以及drawBody、drawOutlinePath兩個instance method，box則是用來記錄Sprite在畫面上的起點跟大小，updateBox則是用來更新box的內容後面會有更詳細的解釋；這邊我們會注意當我們在旋轉的時候，會以Sprite的原點作旋轉，而現在的原點，在左下角如下圖所示。

如果依照上圖，以左下角原點做旋轉的話，在大多的時候不適用在我們的物件上，所以我們希望將員點移到物件的中心點，如下圖一所示。這樣才能達到理想中的旋轉情況，如圖二所示。

圖一

圖二

因此我們在Sprite.m 的 drawOutlinePath 中將Sprite的原點做改變
Sprite.m

-(void) drawOutlinePath:(CGContextRef) context
{
    CGFloat w2 = box.size.width  * 0.5;// 半寬
    CGFloat h2 = box.size.height * 0.5;// 半高

    CGContextBeginPath( context );
    CGContextMoveToPoint( context, -w2, h2);
    CGContextAddLineToPoint( context, w2, h2);
    CGContextAddLineToPoint( context, w2, -h2);
    CGContextAddLineToPoint( context, -w2, -h2);
    CGContextAddLineToPoint( context, -w2, h2);
    CGContextClosePath( context );
}

上面的程式碼中，如果你熟悉AS3應該會覺得CGContextMoveToPoint、CGContextAddLineToPoint很像是AS3中的graphic.MoveTo() 跟 graphic.LineTo()，其實非常的類似；也就是先將起始點移到(-w2,h2)，然後再依照寬高將外框的線畫出來並畫回起始點；這樣，物件的原點與中心點就重合到在一起了(上圖一)。
(其實這邊也可以用簡單的CGContextAddRect去繪製矩形，不過在這邊介紹另一個用法給大家參考)

接下來我們繼續將 drawBody 、 draw 兩個method完成：

//Sprite.m
-(void) drawBody:(CGContextRef) context
{
    CGContextSetRGBFillColor( context , red, green, alpha);
    [self drawOutlinePath:context];
    CGContextDrawPath( context );
}
-(void) draw:(CGContextRef) context
{
    CGContextSaveGState(context);

    CGAffineTransform t0 = CGAffineTransformIsIdentity;
    t0 = CGAffineTransformTranslate( context, x, y);
    t0 = CGAffineTransformRotate( context, rotation);
    t0 = CGAffineTransformScale ( context, scaleX, scaleY);
    CGContextConcatCTM( context, t0);

    [self drawBody:context];

    CGContextRestoreGState(context);
}

上面被Highlight的部分，就是對Sprite Class本身去進行旋轉、縮放以及位移的動作，CGAffineTransformTranslate、CGAffineTransformRotate跟CGAffineTransformScale 使用順序可能要特別注意，不然出來的結果可能會跟你想的很不一樣。

接著再來講解box以及updateBox內容，你也許在上面drawOutlinePath已經有注意到box有被使用到，但是我們並沒有去設定box相關的內容，那他的寬、高是如何得到的？我們配合下面的程式碼以及圖三來進行解釋：

//Sprite.m
-(void)updateBox
{
    // 取得現在的寬高
    CGFloat w0 = width * scaleX;
    CGFloat h0 = height * scaleY;
    // 求出半高及半寬
    CGFloat w2 = w0 * 0.5;
    CGFloat h2 = h0 * 0.5;

    CGSize size = box.size;
    CGPoint origin = box.origin;
    //更新圖形的寬高以及起始點
    size.width = w0;
    size.height = h0;
    origin.x = x - w2;
    origin.y = y - h2;

    box.size = size;
    box.origin = origin;
}

圖三

上面的程式碼，主要事要隨著改變Sprite的寬、高以及對x、y方向的縮放，去調整實際上Sprite物件的大小，並將線在範圍重新定位。

最後因為Quartz 2D的旋轉是以弧度來計算所以在 rotation 的 setter & getter 要再作一些修改：

-(void)setRotation:(CGFloat) degree
{
    rotation = degree * 3.141592 / 180;
}
-(CGFloat) rotation
{
    return rotation * 180 / 3.141592;
}

最後，我們將Quartz2DView的mySprite作一些修改

-(id) initWithFrame:(CGRect) frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        mySprite0 = [[Sprite alloc] init];
        mySprite0.width = 100;
        mySprite0.height = 100;
        mySprite0.red = 1;
        mySprite0.rotation = 30;
        mySprite0.height = 100;        
        mySprite0.scaleX = 1.5;
        //timer = [NSTimer scheduledTimerWithTimeInterval:1/30.0
        //                                         target:self
        //                                       selector:@selector(dt:)
        //                                       userInfo:nil
        //                                        repeats:YES];
    }
}

執行後的結果

到這篇，這一篇就告一段落了，內容比我想像中的多了很多 -.-"，看來應該是我沒有掌控好，不過內容也大多是被程式碼給佔據就是；最後希望這篇對大家有幫助，也跟大家一起共勉求進步。對於內容有任何錯誤或者建議，也請大家不要吝嗇，謝謝。

參考資料：
iOS Developer Library CGContext Reference
iOS Developer Library CGAffineTransform Reference
ActionScript3.0 Matrix
ActionScript3.0 Graphics

範例下載：Sample2.zip

上一篇相關文章：iOS SDK 認識 Quartz 2D(0)

iOS SDK 認識 Quartz 2D (0)

2011-04-19T18:34:00.001+08:00

Hi everyone，今天要來介紹iOS SDK的Quartz 2D，Quartz 2D可以用來繪製向量圖像、播放圖片、合成圖片以及操作字型甚至試產生pdf文件，功能可以說是非常的強大，在遊戲製作上也是熱門的建構方式；關於更詳細的介紹可以參考 Apple 提供的 Quartz 2D 的 Guide，這篇文章會講述到如何繪製一個矩形，並且讓矩形移動。
我會將閱讀文章的人視作對 c / obj-c 以及 iOS有一定的認識，因此在obj-c/c的一些使用內容將不會有太多的解釋。另外會以AS3為對照的語言，作一些相關的引用跟對照。

Quartz 2D是關連 UIView 這個類別的內部資料結構，主要是在一個 graphics context (圖形內文)上做繪製；graphics context 我們可以將他視作為 Canvas ，只要有使用到 Quartz 2D API 都會需要使用到他；有關Quartz 2D的API呼叫都會帶有一個CG開頭的字首，使用的時候可以注意一下。

使用 Quartz 2D 需要遵循下面的演算程序：

Step 1：取得得目前的圖像內文，並將其保存起來
Step 2：取得目前轉換矩陣，將矩陣倒置後存到圖像內文中
Step 3：開始繪製矩形
Step 4：恢復保存的內文

接下來我們先建立一個專案Sample1，類型為 View-base Application 。接著建立一個新的Class，命名為Quartz2DView；接著將 Quartz2DView.m 的 drawRect:(CGRect) rect 改成下面的內容：

-(void) drawRect:(CGRect) rect{
    //(step 1)
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSaveGState(context); 
    //(step 2)
    CGAffineTransform t0 = CGContextGetCTM( context );
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);
    //(step 3)
    CGContextBeginPath(context);
    CGContextSetRGBFillColor(context, 1, 0, 0, 1);// CGContextSetRGBFillColor(CGContextRef ,r,g,h,alpha)
    CGContextAddRect( context , CGRectMake( 0, 0,100, 100));//CGRectMake(CGFloat x,CGFloat y,CGFloat width,CGFloat height)
    CGContextClosePath(context);
    CGContextDrawPath(context,kCGPathFill);
    //(step 4)
    CGContextRestoreGState(context);
}

Step1，我先取得當前UI的圖像內文，這時候我們就取得的可以用來畫圖的 Canvas (畫布)，並且將context保存下來；CGContextSaveGState 保存的狀態在這有詳細的參考，大家請自行觀看就不細說。
Step2，取得目前的轉至矩陣，並將矩陣反轉之後，在存儲回context內(CTM=current transformation matrix)，這個動作，會讓你的Quartz 2D的物件座標系轉換，後面會搭配圖解說。
Step3，進行繪製的動作，其中CGContextBeginPath是每次開始繪製前必須被呼叫的method，而結束可能會有CGContextClosePath或是CGContextClip來結束，並搭配CGContextDrawPath or CGContextDrawImage來繪製圖形。
Step4，最後透過CGContextRestoreGState來恢復內文。

接著將我們寫好的Quartz2DView加到畫面上，在專案的Sample1Controller.h加上程式碼：

#import "Quartz2DView.h"
@interface Sample1ViewController : UIViewController {
    Quartz2DView *quartzView;
}

Controller.m的loadView加上程式碼：

-(void) loadView
{
    [super loadView];
    quartzView = [[Quartz2DView alloc] initWithFrame:[self.view frame]];
    [self.view addSubview:quartzView];
}

執行後的畫面呈現如下：

依照上圖，你會注意到，我們繪製的方塊在畫面的左下角，以左下角為原點；這跟原本的以左上為原點的座標系不同，因為我們在Step2的地方，將原本的轉至矩陣改變了，除了改變座標外，還可以變形、選轉跟縮放；這個轉至矩陣，其實很像我們在寫AS3 DisplayObject.trasform的martix。
這邊需要注意的是，整體的座標系並沒有改變，只有在Quartz2DView中 drawRect method中被畫出來的矩形座標系被改變

到這邊我們已經認識到該如何繪製一個圖形，並且呈現在我們的畫面上；接下來，我希望我畫出來的矩形可以沿著y軸往上移動，所以我需要一個建立一個類似AS3 ENTER_FRAME的計時器並且希望他以30FPS的速度來更新畫面，在這邊我先使用NSTimer這個類別(有一個更適合開發遊戲的記時器類別 CADisplayLink 以60FPS的速度更新畫面)，開始修改Quartz2DView相關的程式碼：
Quartz2DView.h：

@interface Quartz2DView : UIView{
    CGFloat x0;
    CGFloat y0;
    NSTimer *time;
}
-(void) dt:(NSTimer*) theTimer;

Quartz2DView.m 分別修改 initWithFrame、drawRect並且增加dt這個method：

-(id) initWithFrame:(CGRect) frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        x0 = y0 = 0;
        timer = [NSTimer scheduledTimerWithTimeInterval:1/30.0
                                                 target:self
                                               selector:@selector(dt:)
                                               userInfo:nil
                                                repeats:YES];
    }
}
-(void) dt:(NSTimer*) theTimer
{
    y+=1;
    [self setNeedsDisplay];
}
-(void) drawRect:(CGRect) rect{
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSaveGState(context); 
    
    CGAffineTransform t0 = CGContextGetCTM( context );
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);
    
    CGContextBeginPath(context);
    CGContextSetRGBFillColor(context, 1, 0, 0, 1);// CGContextSetRGBFillColor(CGContextRef ,r,g,h,alpha)
    CGContextAddRect( context , CGRectMake( x, y,100, 100) );
    CGContextClosePath(context);
    CGContextDrawPath(context,kCGPathFill);
    
    CGContextRestoreGState(context);
}

在上面的程式碼中，當我們建立了Quartz2DView的實體的時候會將x,y指定為0，並且建立的一個NSTimer 讓他以30FPS來速度來呼叫dt這個method，在dt這個method中 [self setNeedsDisplay] 是告訴Quartz2DView再去執行(更新)drawRect這個method的動作；最後我們在修改drawRect中的 CGContextAddRect (highlight部分)，將代表x,y的地方帶入我們宣告的參數x0,y0，這樣一來，當y0改變的時候，就可以達到讓矩形延著Y由移動的效果。

到此，這篇算是告一段落了；Quartz 2D算是被廣泛運用在照片處理跟遊戲製作上面(有空來研究cocos2d-iphone是不是也是用這個架成的framework)，至於大家來找碴Lite，因為那時我還沒有接觸到Quartz 2D，所以是使用一堆UIImageView+UIView來製作；除了這兩種方式可以用來製作遊戲外，還有一個大家耳熟能詳的OpenGL ES，處理的效能又好了許多，希望未來可以介紹給大家。

下一篇希望介紹將可視物件(這次範例中的矩形)包成一個class，讓畫面上可以有多個圖像去動作。

最後希望這篇文章有幫到大家，有任何錯誤或者建議，也請大家不要吝嗇，謝謝。

參考網址：
iOS Developer Library
Quart2D Guide
AS3 Martix Class。
範例：Sample1.zip

下一篇相關文章：iOS SDK 認識 Quartz 2D (1)

Facebook 使用 Open Graph protocal 輕鬆分享影片

2011-04-11T15:08:00.007+08:00

Hi all, 今天來介紹一下 facebook 使用 Open Graph protocal 來輕鬆分享影片的方式，之前在facebook 上分享影片，我使用的方式大致上可能是使用到 FB API將影片直接發到塗鴉牆上或者是將影片上傳至Youtube後，再將網址分享到Facebook來分享影片；當然之前也有直接使用meta來分享，不過我看得亂七八糟搞不懂，所以大多沒有直接使用。

Open Graph protocal 其實也是使用 meta 來定義分享的內容，不過因為facebook有自行定義過他使用的meta，在測試過後，我覺得比較方便，而且除了這些之外，他也可以搭配facebook 的Like Button 來使用，後面一起介紹。

使用Open Graph protocal，會有四個基本的meta會需要設定

<meta property="og:title" content="FB Meta Video"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://1001.webgene.tw/green/facebook/meta/"/>
<meta property="og:image" content="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
/*end*/

og:title 分享到 Facebook 的標題
og:type 分享內容的種類 EX：product、movie
og:url 分享內容的網址
og:image 分享內容的圖片

這邊可能會注意一般我們在分享的時候Title、內文及照片是使用下面的方式：

<meta name="description" content="[DESCRIPTION]" />
<link rel="image_src" type="image/jpeg" href="[PHOTO_URL]"/>
<title>[YOUR_TITLE]<title/>

差別是在一個是使用 Link button 去分享另一個則是直接貼網址在fb上分享的差異，值得注意的使用貼網址來分享的方式，仍然需要加上

<link rel="image_src" type="image/jpeg" href="[PHOTO_URL]"/>

不然圖片會抓不到，title的部分則會直接被 og:title 取代，如果有使用og:description 也會直接取代 description的部分

介紹基本的四個meta後，接下來介紹video所需要的四個meta：

<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf"/>
<meta property="og:video:width" content="390"/>
<meta property="og:video:height" content="260"/>
<meta property="og:video:type" content="application/x-shockwave-flash"/>
/*end*/

og:video 影片所在的位置URL
og:video:width 載入影片的寬度最大398
og:video:height 載入影片的高度最大460
og:video:type 影片的載入播放方式 <--- 不知道這樣說是否合適，請大家多包涵一下

這邊要注意一下的事，如果是影片的話，通堂會需要一張圖片，不然的話他沒有辦法去點擊播放，那張圖片要放在og:image Or <link rel="image_src" type="image/jpeg" href="..."/> 中，需要特別注意一下；我目前只有看到 flash player 的播放方是不確定是不是有直接播放h.264影片格式的方式，如果有的話之後再補充；將這四個meta加上html後，html的head部分大至上如下：

<head>
<link rel="image_src" type="image/jpeg" href="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
<meta property="og:title" content="FB Meta Video og title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://1001.webgene.tw/green/facebook/meta/"/>
<meta property="og:image" content="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
<meta property="og:site_name" content="Green's Meta Test"/>
<meta property="og:description" content="Test Share Video to Facebook"/>
<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf" />
<meta property="og:video:height" content="260" />
<meta property="og:video:width" content="390" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<title>FB Meta Video Html Title</title>
</head>

到這邊，就算是大功告成了，不過我們在加上一個Like button，來看看使用link button分享跟直接貼網址的分享差異是什麼；使用 URL Linter 輸入網址後，如果正確的話應該會出現下面的內容：

可以在這個頁面檢查輸入的內容有無錯誤，如果再使用Open Graph protocal有錯誤的話他也會另外標示出來，在下面有個Like button的部分，有提供iframe的soure code可以複製，將他貼到html後；分別測是分享的效果：

Like button 分享

貼網址分享

眼尖的話會注意到左下方的icon有明顯的不同喔

這就是這次分享的內容，當然Open Graph protocal可以使用的部分還不只這些，他還可以搭配其他的social plugins來使用，可以去統計分享的次數，誰分享的這些東西，多少人對這個東西點了讚之類的，不過怎麼用可能還要研究一下；希望這次的分享對大家有幫助囉，如果有什麼錯誤也請大家給我更至以及指教，謝謝。

demo：範例網址
reference：Facebook Open Graph protocal

補充：
Eric艾額外問了一個那是不是可以在這邊直接將參數帶入swf中；答案是可以的，帶入的方式如下：
將og:video的路徑改成 http://1001.webgene.tw/green/facebook/meta/flvplayer.swf?param1=one&param2=two

<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf?param1=one¶m2=two" />

在flash中的as3寫法

trace(stage.loaderInfo.paramters['param1']); // one
//也可以使用這樣的方式去看會帶入哪些值近來
for(var $s:String in stage.loaderInfo.parameters)
{
    trace(stage.loaderInfo.parameters[$s]);
}
// 除了剛剛的param1、param2外 還會有 width 跟 height 兩個參數

關於Mobile web develope的兩、三事

2011-03-29T16:49:00.000+08:00

在台灣mobile device越來越普及，其中Smart Phone為是主要的device，反映出來的是

Mobile Web的詢問度也變高了；不過相對的問題也衍生出來，像是該如何做?要做什麼?

在這我也遇到的相同的一些問題，所以整理了一些內容。

這邊的mobile device我以iphone當作我參考的依據。

如何設計
- 避免像website一樣，作成一整張的layout再來切，設計也不適合太過於複雜，盡量偏向簡單。
- 使用css來編排你的html，以避免手機方向轉化造成的破圖、變形的情況。
- 檢視畫面，請盡量使用手機來檢視，或使用瀏覽器外掛模擬器來檢視
  
  (Firefox、Opera 跟Chrome都有外掛可以使用)；
  
  避免使用desktop的browser將大小拉成一樣，就當作是手機的瀏覽情形。
  
  手機browser支援圖片格式、css 跟 js 與 desktop browser 有差異，不同平台手機支援的程度也有差異。
  
  (我使用 htc desire hd 內建google瀏覽器跟 iphone safari 看png，差異很明顯)
```
//瀏覽前在meta上增加一個 viewport  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
/**
 * viewport 的 property
 * width：控制 viewport 的大小，可以指定一个值，如果 600，或者特殊的值，如 device-width 為預設的寬度
 * height： 指定高度。
 * initial-scale：初始缩放比例。
 * maximum-scale：可缩放的最大比例。
 * minimum-scale：可缩放的最小比例。
 * user-scalable：是否可以手動缩放
 *
**/
```
使用者體驗

這點我個人覺得非常的重要，手機不是desktop一樣有滑鼠、鍵盤讓使用者操作；

在開始之前先將動作的流程畫成圖示流程圖後再討論，可以有個簡單的demo來試著

操作會更棒，可以避掉很多的盲點跟操作上的誤區。
互動設計

如果不考慮時程跟人力上的問題，能試著自己開發，可以學到很多的東西；不然的話，

建議盡量使用framework來開發您的mobile web，可以幫你解決/避免不同平台瀏覽器上的

問題與差異；而且已經幫你設計基礎的模組，減少你所需要花費的時間。

推薦 jQuery 跟 Basecamp 兩個 framework。

這些是我目前有遇到的一些問題，跟同事一起討論，並在同事製作出相關的成果後的一些心得，

感謝阿駿、亞珍跟我的討論，也再次謝謝阿駿提供相關的reference。

希望這些東西慢慢的整理出來可以幫助自己跟大家在規劃/製作上有所幫助。

如果有錯誤或者是有建議的話，也請指證並且多多包涵 <(_ _)>

ps. 感謝小P對於內容上呈現，及表達方式的建議。

[心得]大家來找碴簡易板(Looking for Faults Lite.) 開發筆記

2011-03-14T13:58:00.011+08:00

呼,距離上次說要發這篇文章,過去了好一段時間,再不趕快寫的話大該就會忘光光了

稍微說一下這個遊戲, 其實是由公司開發Windows Phone 開始的,不過當初也沒有version Lite.

因為種種的原因, 移植到iPhone 上時, 決定先出一個簡易版跟正事版, 而這個簡易版就被我拿

來練功了.

遊戲本身的機制很簡單, 在限定時間內找出圖片中不一樣的地方, 進入下一關.

我碰到了幾個問題, 比較有問題的是下面幾點：

1. 操控的差異

在設計是互動的時候, 我一開始是以手指去觸碰, 所以是用手指點擊畫面, 取得"坐標"後

在進行"距離"的運算; 這樣的結果是,效果很差一次要進行五個點的運算, 誤差很大,

實機測試時, 你觸碰的是一個面, 傳回來的點, 並沒有辦法像我所設想的那樣

所以我改用放置區塊(Button)的方式, 用這樣的方法來解決問題.

2. 記憶體管理

在Objective - C 裡面, 記憶體的釋放是一個重要的課題, 我因為沒有管理好,

所以在開發後期一直在處理 leak 的問題

3. Cocoa Method 的使用

在Cocoa的UIImage使用載入圖片有幾種不一樣的方式, 其中

[UIImage imageName:(NSString *)]

這個method, 在書上查到暫存的時間

長短跟我們實際上使用會不一致, 很容易造成crash 的發生, 最後使用

[UIImage imageWithContentsOfFile:] 來解決; 這種問題, 不知道該如何避免,

只能遇到再去解決.

以上就是我自己遇到覺得比較大的問題啦, 其實也可以把這些問題說成是平台不同造成的結果.

================分隔線來了================

我想, iOS 門檻是比較高了些, 也不是遙不可及, 不過許多的東西(內容), 都是需要經驗來累積

所以在這邊我也沒辦法提出些什麼較好的見解, 大概能做的就是把自己練功的一些內容,

以及開發上遇到的問題紀錄下來, 看看有沒有可以解決的方案跟大家一起分享.

那麼這篇就先到這啦因為我自己也不知道自己在打些什麼希望大家看完不要檢舉我 = =a

如果有什麼建議也請大家跟我說謝謝

[新案上線][iPhone APP] 大家來找碴 Lite.

2011-03-04T11:25:00.001+08:00

iTunes:http://itunes.apple.com/tw/app/id421360555?mt=8

新案上線囉，這是我第一個iPhone APP, 因為連結裡有相關的介紹，就不多說了

終於的也在 iOS 上踏出了小小的一步，有種成就感，也讓自己動力滿滿啦 ~ 哈

好啦，廢話也不多說，希望有iPhone的朋友可以支持一下，遇到任何bug也請跟我

反映一下，接下來會準備小小一篇來介紹跟分享這個app開發時遇到的狀況以及相關的內容。

另外也徵求一起學習的夥伴囉 >///////<

gQuery's Commands 介紹

2011-01-06T10:45:00.001+08:00

Flash開發一陣子後，想必大家都有屬於自己的libs了，這次要來介紹的是自己寫的libs，姑且就先命名為gQuery吧!!這次要介紹的內容是 Command ，跟Design Pattern的Command Pattern又不大一樣，因為主要是參考CJcat的文章後自己嘗試寫出來的。雖然有算是練習的作品，不過來來去去也修改了不少次；也算是小弟我的一點點心血，所以就拿出來介紹一下，順便也幫自己複習一下。

因為CJcat的文章已經對原理有完整的介紹了，所以我就不在這方面有其他的琢磨了，就直接介紹如何使。

Commands
Commands，我主要是把它當作一個容器，可以存放多個命令，讓命令依序/同時進行，使用方式有addCommand、setCommand，建議只使用addCommand就可以了。

/**
 * @param ... $Commands 加入的命令必須是 commands 或是 array 所包覆之 function 或 commands 
**/
addCommand( ... $Commands);
//example
addCommand( 
    function():void{trace("step1");},
    [function():void{trace("step2-1");},
     function():void{trace("step2-2");  ],
    function():void{trace("step3")}
);

其中用"[...]"(array)包起來的動作，是同時執行的(並聯)；其他的則是串聯(一個結束後，接續下一個)的執行方式，下面就是完整的範例程式碼。

import gquery.command.Commands;
import gquery.command.DoNomalCommand;
import gquery.command.DoTweenNanoTo;
import gquery.events.CommandEvent;

var cast1 = new Sprite();
var cast2 = new Sprite();
cast1.graphic.beginFill( 0x000000 );
cast1.graphics.drawRect(0, 0, 100, 100);
cast1.graphics.endFill();
cast2.graphic.beginFill( 0x000000 );
cast2.graphics.drawRect(0, 0, 100, 100);
cast2.graphics.endFill();
cast2.y = 110;
addChild( cast1 );
addChild( cast2 );

var com:Commands = new Commands();
//為com加上監聽器，在com執行完畢的時候觸發
com.addEventListener(CommandEvent.COMPLETE , onCommandCompleteHandle);
com.addCommand(
    new DoTweenNanoTo( cast1 , 1 , {x:100} ),
    new DoTweenNanoTo( cast2 , 1 , {alpha:0} ),
    [new DoTweenNanoTo( cast1 , 1 , {x:0} ),
     new DoTweenNanoTo( cast2 , 1 , {alpha:1} )]
);
//開始執行 com
com.execute();

function onCommandCompleteHandle(e:CommandEvent):void
{
    //這邊可以做command完成後的動作
    trace("com 執行完畢");
}

下面來介紹幾個command的用法：

DoTweenNanoTo
DoTweenMaxTo
相信大家看到這個都覺得很眼熟，這是使用greensock的Tween libs所建立的，所以他的使用方式也跟原本的差不多。
ps.如果要同時對同一個物件使用這Class的話，可能會有tween overwrite的問題需要注意一下

DoTweenNanoTo( $target:DisplayObject , $duration:Number , $vars:Object );
DoTweenMaxTo( $target:DisplayObject , $duration:Number , $vars:Object );

DoFrameCommand

/**
 * @param $target 目標
 * @param $startFrame 開始影格(int or FrameLabel) 
 * @param $EndFrame 結束影格(int or FrameLabel)
 */
DoFrameCommand($target:MovieClip , $startFrame:* , $EndFrame:* )

DoNormalCommand

/**
 * 建立命令容器實體
 * @param $function 要執行的Function
 * @param $delay 要延遲秒數 
 */
DoNomalCommand($function:Function , $delay:Number = 0)

到這邊，就是目前整理出來比較完整的部分了，希望能對大家有些許的幫助。

參考網址：CJ's Blog Thinking in Commands
範例檔案：點我下載 (libs也包進去了)
在這邊囉嗦一下，其實再發這篇文章的時候內新是挺掙扎的，畢竟這個libs說起來也不難，只是一個簡單的小概念；比起cjcat的詳細介紹，覺得自己寫這篇沒甚麼意義；最後決定還是要寫，一方面是記錄，另外也是學習著寫自己的libs，不過在文章內容上就偏向使用方面去介紹，就不再解說相關的概念。
最後希望大家再使用方面如果有遇到什麼bug可以跟我說一下，也期許自己能夠繼續進步，最後2011年啦，在這邊跟大家補個新年快樂~~~

計算 Facebook 互動次數的方式

2010-12-28T22:10:00.000+08:00

最近看到幾個跟Facebook結合的活動，發現似乎抓到的朋友，都是在塗鴉牆上跟自己互動較多的朋友，就找了一下是不是有相關的API可以使用；不過最後發現並沒有這樣的API，其實這個數字是計算出來的，相關的規範可以參考一下；由前面提供的相關規範，我們會了解到我們所計算出來的數據，並不會完全正確，因為是抓取一段範圍內的資料來進行統計，所以會有些許失真的情況，並不會達到百分之百的正確。那麼接下來就介紹一下如何計算。

這邊我的做法是去計算在我的塗鴉牆上，有回應的人，以及有哪些人按讚；其中一則stream訊息只能點一次贊，所以計算一次；而回應stream可能會有一次以上的情況，所以我是記算有幾次回應就計幾次。

前置的作業，也就是初始化FB的部分，就不額外講解了，如有需要請參考使用 Javascript Facebook SDK with Graphic API。

這邊要記得要求相關的 Permission：read_stream 這樣才有辦法獲得 User 塗鴉牆上的資料，再登入完成之後，我們就要開始讀取塗鴉牆上的文章：

在這邊我使用fql的方式來取得相關的資料

//宣告相關的變數
var fuids_data = {}; // 記錄uid出現的次數
var tmp_ary = []; // 用來排序 uid 的array
var params; 
var comments_point;
var tmp_id;
var tmp_name;
var fuids = ""; // 將朋友的uid串成字串 在最後取得相關資料
// 取得塗鴉牆上來源/目標為user的訊息comments(回覆)/likes(讚)建議限定筆數不然會抓不到資料 目前還沒抓到上限
var query = FB.Data.query('SELECT comments,likes FROM stream WHERE target_id="{0}" or source_id="{0}" limit 0,50', [uid );
query.wait(function(rows) {  
 for(params in rows )
 {
  //取得有回復的 朋友ID
  for(comments_point = 0 ; comments_point < rows[params].comments.comment_list.length ; comments_point++ )
  {
   tmp_id = rows[params].comments.comment_list[comments_point].fromid;
   if(uid == tmp_id) continue;
   if(fuids_data[tmp_id] == undefined)
   {
    fuids_data[tmp_id] = {
     uid:tmp_id,
     name:null,
     pic:null,
     counts:1
    };
    tmp_ary.push( fuids_data[tmp_id] );
   }else fuids_data[tmp_id].counts++;
  }
  for(comments_point = 0 ; comments_point < rows[params].likes.friends.length ; comments_point++ )
  {
   //取得朋友中按讚的ID
   tmp_id = rows[params].likes.friends[comments_point];
   if(uid == tmp_id) continue;
   if(fuids_data[tmp_id] == undefined)
   {
    fuids_data[tmp_id] = {
     uid:tmp_id,
     name:null,
     pic:null,
     counts:1
    };
    tmp_ary.push( fuids_data[tmp_id] );
   }else fuids_data[tmp_id].counts++;
  }
  }
  for(params in fuids_data ) html_code += "["+params+"] counts: "+fuids_data[params].counts+"
";
  var tmp_obj;
  // 因為我找不到直接排序的方式 所以用程式排序
  for(var i = 0 ; i < tmp_ary.length-1 ; i++ )
  {
   for(var j=i+1 ; j < tmp_ary.length ; j++)
   {
    if(tmp_ary[i].counts > tmp_ary[j].counts)
    {
     tmp_obj = tmp_ary[i];
     tmp_ary[i] = tmp_ary[j];
     tmp_ary[j] = tmp_obj;
    }
   }
  }
  tmp_ary = tmp_ary.reverse();

到這邊，已將將最新的一百則stream資訊取出，並且完成了解析的動作，接下來只要再將朋友的資料抓取出來就好。

//將所有的UID串成字串 再取得朋友們的資料
for(i=0 ; i < tmp_ary.length ; i++)
{
 fuids = i != tmp_ary.length-1 ? fuids+tmp_ary[i].uid+",":fuids+tmp_ary[i].uid;
}
getUserInfo(fuids);
function getUserInfo(uids)
{
 //取得user的相關資料
 var query = FB.Data.query('select uid,name,pic  from user where uid in ({0})', uids);
    query.wait(function(rows) {
  for(var i=0 ; i < rows.length ; i++)
  {
   fuids_data[rows[i].uid].name = rows[i].name;
   fuids_data[rows[i].uid].pic  = rows[i].pic;
  }
 });
}

這樣就大功告成了。希望這篇也可以帶給大家一些幫助囉~
相關連結：Demo , Source
參考網址：FQL-stream , FQL-comments , FB.Data.query , 相關的規範

使用 Javascript Facebook SDK with Graphic API

2010-12-22T07:46:00.000+08:00

最近因為專案的需求，小小的研究了一下基礎的 Javascript Facebook SDK。這次的範例是以活動網站的部分進行解說，不多說接下來就直接進入主題。

2010/12/22 17:17 (調整內容)

1.Facebook connect Authentication
建立一個新的Facebook app，這邊建立參考網址，取得api key。接下來再html輸入下列的code

window.fbAsyncInit = function() {
    FB.init({appId: api_key, status: true, cookie: true, xfbml: true});
    // FB.getLoginStatus 可以判斷是否已經有FB的login session 如果以登入 可以跳過登入的步驟進行下一步
    FB.getLoginStatus(function(response) {
        if (response.session) {
            alert(response.session);
        }
    })
};
(function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/zh_TW/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

並且在 html 的 tag 中加入 xmlns:fb="http://www.facebook.com/2008/fbml" 加完大該會長下面這樣

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

有了這些之後，我們就可以開始進行facebook 的connect 動作，也就是登入。登入有兩種方式，第一種是直接使用 fb提供的Social plugins，在perms可以填入要求的permission。

另一種方式是使用 API 提供的 FB.login(callback, perms);

FB.login(function(response){
    // do some after
      
    }, 
    {perms:'read_stream,publish_stream,offline_access'}
);

到這邊，就已經成功的與facebook連結並取得相關登入後相關的資訊。在登入成功後，並不會取得user的資料，如果有需要取得user的相關資料，必須要再另外做處理。

2.基礎的運用

接著來介紹如何運用一些相關的API，在fb graphic api 中，要去呼叫函試的方式要使用 FB.ui() 或是 FB.api()，自己小測了幾個method發現其實都可以互通的，差別的是回傳的東西有些微的不同以及FB.ui會有對話框(Dialogs)。

FB.api 使用的使用方法有分兩種

FB.api(path, methed, params, callback);
FB.api(params, callback);

上述第二種方式主要是用來呼叫 Old REST API

exam1:
取得自己/其他user的資訊

FB.api("/me",function(response)
{
    alert(response.name)//取得 user's name
});

如果是想查其他人，也可以將me改成user的 uid or user's name 來查詢
reference 可以前往查詢傳回來的相關數值

這邊則是用fql.query來查詢user的名字
exam2:

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM user WHERE uid=5526183'
  },
  function(response) {
    alert('Name is ' + response[0].name);
  }
);

另外特別介紹較常用到 stream.publish 使用的方式：
a.FB.ui 使用的方式與 FB.Connect.streamPublish 差不多：

FB.ui({
 method: 'stream.publish',
 message: '我說{$message}',
 attachment: {
  name: "內文標題{$title}",
  caption: '',
  description: ("測試內文"),
  href: "http://1001.webgene.tw/green/facebook/jssdk/"
 },
 action_links: [ { text: "Green's Practice", href: "http://1001.webgene.tw/green/facebook/jssdk/" } ],
 target_id:userData.uid,
 user_prompt_message: "說",
},
 function(response) {
  if(response && response.post_id)
  {
    //publish is successed.
   alert(response.post_id);
  }
  else
  {
   //public is failured.
   
  }
 }
);

在一般的情況下使用這樣的方式就應用在大多數的地方了，但是如果想要讓他自動發佈，就需要用第二種方式
b. FB.api ：

FB.api('/[target_id]/feed','post', 
 {
  method: 'stream.publish',
  message: 'User 說{$message}',
  picture : 'http://www.takwing.idv.hk/facebook/demoapp_jssdk/img/logo.gif',
  link : 'http://1001.webgene.tw/green/facebook/jssdk/',
  name: 'JS SDK($title)!',
  caption: 'Caption of the Post($subTitle)',
  description: 'It is not fun to write Facebook App!($descript)',
  actions : { name : '變很大的Graphic API', link : 'http://1001.webgene.tw/green/facebook/jssdk/'}
 } , function(response) {
 if (!response || response.error) {
  alert('Error occured');
 } else {
  alert('Post ID: ' + response.id);
 }
});

以上就是小弟我這一天來練習的一些整理，雖然寫的內容不是很滿意(不得不承認，不大會寫這種文章)希望之後可以寫得越來越好。也希望我的下一篇文章能趕快生出來 .... (逃)

如果內容有錯誤的地方寫請大家幫忙指證，感激不盡。

最後感謝p哥幫忙，幫我解決了不少問題<(_ _)>

參考網址：
Graph api & javascript base Facebook Connect tutorial
facebook Developers

AS3 + JSON 的應用

2010-07-23T12:20:00.000+08:00

這算是這個blog的開山文章，其實之前就有想要開個blog來分享一些東西了不過腦袋裡一堆想法不知道寫才好，最後都選擇了放棄；想想這樣下去也不是辦法，所以就找了個一個比較簡單點的主題來分享。

JSON (JavaScript Object Notation)，是一個輕量型的資料交換格式，在這邊就不做詳細的介紹，有興趣的人可以到wiki去看看。

再開始之前，會需要AS3的JSON code，可以到 Adobe提供的 class libs去下載，Link。

以下的範例是以 PHP 為後台程式處理。
PHP 傳值給 AS：
php result.php

$arr[] = array("name"=>"測試員","age"=>"21");
$arr[] = array("name"=>"測試員1","age"=>"22");
$arr[] = array("name"=>"測試員2","age"=>"23");
$arr[] = array("name"=>"測試員3","age"=>"24");
echo json_encode( $arr );

import com.adobe.serialization.json.JSON;

var request:URLRequest = new URLRequest();
request.url = "result.php";
request.method = URLRequestMethod.POST;
request.contentType = URLLoaderDataFormat.TEXT;

var myLoader:URLLoader = new URLLoader();
myLoader.addEventListenter(Event.COMPLETE , onLoadCompleted );
myLoader.load( request );

function onLoadCompleted ( e:Event ):void{
    var mydata:Array = JSON.decode( e.target.data );
    trace( mydata.length ); //output:4 
    trace( mydata[0].name , mydata[0].age);//output:測試員,21 
}

AS 傳送資料給 PHP：
as

import com.adobe.serialization.json.JSON;
var myVar:URLVariables = new URLVariables();
var mydata:Array = [{name:"測試者",age:"21"}];
myVar.postData = JSON.encode( mydata );

var request:URLRequest = new URLRequest();
request.url = "echo.php";
request.method = URLRequestMethod.POST;
request.data = myVar;

navigateToURL( request , "_blank" );

php echo.php

$data = $_POST['postData'];
$arr = json_decode( $data );
echo "undecode data:".$data;//output:   undecode data: [{"age":"21","name":"測試者"}]
echo "decode data:" . $arr;//output: decode data:Array
echo "data's name:". $$arr[0]->name;//output:  data's name:測試者
echo "data's age:". $$arr[0]->age;//output:  data's age:21

這樣的寫法比起xml是不是變的簡潔了許多，在後台就不用在像使用xml需要宣告一個xml的格式去將資料傳回as中，有興趣的人可以嘗試運用在自己的程式當中。