iPadアプリにスプラッシュムービーを表示する
iPhoneやiPadのアプリとなると機能はもとよりやはり見てくれも大切ですよね？
そんな中で標準的になってきたのがスプラッシュ画像*1ですね。
スプラッシュ画像は結構簡単に作成することができますので、
今回はスプラッシュムービーを表示させようと思います。
なお、今回はiPadを対象としています。
iPhoneでも同じなので適宜読み替えてください。
使用環境
＜動画作成＞
Device：ショップモデル
OS：Windows Vista
メモリ：4GB
CPU：Quad-Core
＜実装＞
Device：MacBook Pro
OS：Mac OSX 10.6.6
メモリ：4GB
CPU：Core2Duo
＜テスト＞
Device：iPad 16GB
OS：iPad iOS4.2
用意する具材
＜動画作成＞
Gimp2.6（素材作成）*2
Suzuka（フラッシュ作成）*3
swfdrop（SWF→AVI）*4
ffdshow tryouts（SWF用コーデック）*5
XMedia Record（AVI→MP4 H.264）*6
＜実装＞
XCode 3.2.5*7
iOS4.2 SDK
流れ
1.ムービー素材を用意しよう
2.ムービーを変換しよう
3.スプラッシュムービーを組み込もう
1.ムービー素材を用意しよう
ムービーの素材を簡単に手に入れるには、もちろん自前で撮影するのが一番。
ですが、今回はそんな時間もお金もないのでフラッシュで作成しましょう。
環境がWindowsであればフラッシュの作成は手軽に行えます。
凝ったことをしたい場合はActionScriptを使えるので、便利と言えば便利です。
今回は単純に作成したいので、Suzukaを利用しました。
流れとしてはGimpで元となる画像を用意して、
Suzukaでフラッシュを作成すると言う感じです。
この辺りは個々人の趣味が左右されるので、おいとくとします。
料理番組で言えば、「ここに15分茹でた野菜を取り出して〜」という感じですね。
なお、SuzukaはVBランタイムをインストールしたりと面倒いので、
ParaFla!を利用するのも良いです。
どちらにせいよこれらのソフトはGUIを使って、簡易にフラッシュ作成ができます。
以下のサイトでは、ソフトの簡単な使い方を解説してくれています。
堕ち武者弐 Flashの作り方
注釈として、iPad用に作成したい場合、画像サイズを1024×768で作成すると、
拡大や縮小が発生しないのでロスが少ない高画質なものが作れます。
2.ムービーを変換しよう
フラッシュが用意できたとしましょう。
しかし、今回利用した作成ソフトではSWFという形式のファイルになります。
このままではiPadで利用することができません。
ので、iPadで利用できるように変換します。
さて、簡単に変換したいところですが、現実はかくも厳しいものです。
SWFからiPad用動画*8に変換してくれるソフトを発見できませんでした。
変換数が多いとロスが多くなり画質が落ちますが、今回は目を瞑ります。
手順としてはSWF→AVI→MPEG4という感じで変換しました。
ここで利用するのがswfdropとffdshowです。
ffdshowは圧縮処理を行ってくれるエンコーダーですね。
swfdropはドラッグアンドドロップによる簡単な処理で変換をしてくれるソフトです。
ポイントとしてはffdshowを利用して画像劣化を防ぐことです。
また、変換する際に色空間をYV12にすることでしょうか？
透過色を利用している場合、RGBだけだと表現できないことを防ぐためです。
AVIに変換しましたらXMedia Recordの登場です。
このエンコーダーはiPad用などとデバイスにあわせたテンプレートを持っています。
起動したらファイルを追加し、左ペインよりデバイスの会社を選択し、
デバイスの種類を選択すればOKです。
あとは変換リストに登録してエンコードすれば出来上がりです。
難しいことを書いているようですが、すべてGUIで行うことができます。
これらの作業は以下のサイトが参考になります。
気になるフリーソフトをクリップしとくブログ
あらゆる動画をiPadで再生できる形式に変換「XMediaRecode」
3.スプラッシュムービーを組み込もう
さて、ここからはMacでの作業になります。
私にとって1、2の項目が大変だったので*9、なんだかやっと感があります。
それでは進めていきましょう。
3-1.XCodeにてファイルを追加
XCodeから利用できるようにするためにXCodeに追加しましょう。
1.XCodeの左ペインのツリーより[Resources]を右クリック
2.[追加] ＞ [既存のファイル]
3.ムービーファイルを選択する。
3-2.フレームワークの追加
ムービーファイルを手軽に扱うためにXCodeには最初からフレームワークが搭載されています。しかし、標準ではこうしたフレームワークを利用できませんので、プロジェクトに追加しましょう。
1.XCodeの左ペインのツリーより[Frameworks]を右クリック
2.[追加] ＞ [既存のフレームワーク]
3.MediaPlayer.frameworkを選択する。
これでフレームワークを利用することができます。
全く簡単ですね。
3-3.実装
いよいよ実装です。
と言っても、それほど大変な作業じゃありませんので、
以下のコードを参考にして組み込んでみましょう。
AppDelegate.h
#import
@interface /*アプリ名*/AppDelegate : NSObject{
UIWindow *window;
RootViewController *rootViewController;
MPMoviePlayerViewController *mpmPlayerViewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet RootViewController *rootViewController;
@property (nonatomic, retain)
MPMoviePlayerViewController *mpmPlayerViewController;
@end
デリゲートのヘッダソースです。
先ほど追加したフレームワークをインポートしています。
MPMoviePlayerViewControllerというのがムービーが再生される下地ですね。
AppDelegate.m
@synthesize mpmPlayerViewController
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions {
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(splashMoviePlayBackDidFinish:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:nil];
NSURL *filePath = [NSURL fileURLWithPath:
[[NSBundle mainBundle] pathForResource:
/*ムービーファイル名*/ ofType:@"mp4"]];
mpmPlayerViewController =
[[MPMoviePlayerViewController alloc]
initWithContentURL:filePath ];
mpmPlayerViewController.moviePlayer.controlStyle
= MPMovieControlStyleNone;
[self.window addSubview:mpmPlayerViewController.view];
[self.window makeKeyAndVisible];
return YES;
}
- (void)splashMoviePlayBackDidFinish:(NSNotification *)notification{
[[NSNotificationCenter defaultCenter] removeObserver:self];
[self.window addSubview:rootViewController.view];
[mpmPlayerViewController.view removeFromSuperview];
[mpmPlayerViewController release];
}
こちらはデリゲートのインプリメントの方ですね。
didFinishLaunchingWithOptionsでムービーをビューにのっけています。
addSubViewすることで表示と同時に再生も勝手にやってくれます。
Notificationを追加することでムービーの終了を知らせてくれます。
splashMoviePlayBackDidFinishが終了したあとの処理ですね。
ここでメインの画面をウィンドウに追加して、プレイヤーを除去しています。
ポイントとしては、、、
1.ウィンドウの背景色を黒にしておく
2.プレイヤーのコントローラースタイルはNoneに設定する
3.メインのビューをAddしてからムービー用のビューを取り除く
ですね。
1と3をきちんとしておかないと入れ替えのタイミングで
ウィンドウの背景色が表示されてしまいます。
デフォルトだと白ですので、一瞬フラッシュしたようになります。
2の処理は再生とかシークバーの表示を隠すということですね。
スプラッシュムービーで表示されたらなんかダサイですしね。
今回の実装ですとスプラッシュは初回起動時とアプリが
タスクリストにないときのみ再生されます。
毎回は再生しません。
スプラッシュのON/OFFを操作したい場合は、
ムービーの作成やら諸手続きをdidFinishLaunchingWithOptionsではなく、
applicationDidBecomeActiveなどで行うと良いかもしれません。
こちらのメソッドはアプリがアクティブになったら
処理を行うと言うものですので、
アプリが選択されたら毎回実行されるメソッドになります。
あとは、設定画面などを設けて、そこでON/OFFを行うようにすれば良いでしょう。
駆け足の解説でしたが、参考になれば良いかと思います。
