アプリが起動すると表示されるスプラッシュ画像は Xcode 上で設定すれば簡単に表示されますが、このスプラッシュ画像を静止画ではなく動画にしたいと思ったことはないでしょうか。
今回はこのスプラッシュ画像を動画にする方法を紹介したいと思います。
アプリ起動画面（スプラッシュ）を動画に変更する
冒頭ではアプリの起動画面に動画を表示すると述べていますが、具体的には通常のスプラッシュの後に mp4 等の動画ファイルを再生する方法を説明していきます。
通常のスプラッシュ画像は設定をしないか、アニメーションの背景色と同じ画像を設定しておくことで、スプラッシュが動画になっているように見せるというものです。
概要
- 動画ファイルを準備する
- Xcode プロジェクトに動画ファイルをコピーする
- 必要なフレームワークのインポート
- AppDelegate.m にコードを記述する
- アプリをビルドし確認する
手順詳細
-
動画ファイルを準備する
起動時に表示したい動画ファイルをあらかじめ準備しておきます。Objective-C のプレイヤーがサポートしている形式 mp4、mov、avi、mpg 等で出力したものであれば問題なく使用できるかと思います。
-
Xcode プロジェクトに動画ファイルをコピー
(1)で準備した動画ファイルを Xcode のプロジェクトにドラッグして追加します。ここでは SpriteKit Game のテンプレートを使用しています。
Destination の Copy items… にチェック、Create Groups… を選択し、Add to targets をチェック し Finish をクリックします。
-
必要なフレームワークのインポート
動画の再生に必要なフレームワークをインポートします。
プロジェクトの設定 General の Linked Frameworks and Libraries 項目の 「+」をクリックし MediaPlayer.framework を追加します。
-
AppDelegate.m にコードを記述する
AppDelegate.m のソースコードを開き #import “AppDelegate.h” の下に MPMoviePlayerViewController を定義します。
[code]
@implementation AppDelegate
{
MPMoviePlayerViewController *MPMPlayerController;
}
[/code]次に – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions メソッドに以下のコードを追加します。
[code]
NSURL *filePath = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@”logo_sirochro_animation” ofType:@”mp4″]];MPMPlayerController = [[MPMoviePlayerViewController alloc]initWithContentURL:filePath ];
MPMPlayerController.moviePlayer.backgroundView.backgroundColor = [UIColor whiteColor];
MPMPlayerController.moviePlayer.controlStyle = MPMovieControlStyleNone;
MPMPlayerController.view.frame = self.window.frame;[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(splashMoviePlayBackDidFinish:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:nil];[[NSNotificationCenter defaultCenter] removeObserver:MPMPlayerController
name:MPMoviePlayerPlaybackDidFinishNotification
object:MPMPlayerController.moviePlayer];MPMPlayerController.moviePlayer.scalingMode = MPMovieScalingModeAspectFill;
[MPMPlayerController.moviePlayer setFullscreen:YES animated:NO];[self.window.rootViewController.view addSubview:MPMPlayerController.view];
[self.window makeKeyAndVisible];
[/code]続いて上記メソッドの下に動画再生後に実行される以下のメソッドを追加します。このメソッドでは動画再生完了後に、画面がブラックアウトするアニメーションを再生、ブラックアウト完了後にスプラッシュに関連するビューを削除するというものです。
このメソッドは動画の内容に応じて実行する内容を変更しても構いません。
[code]
– (void)splashMoviePlayBackDidFinish:(NSNotification *)notification
{
UIView *fadeView = [[UIView alloc]initWithFrame:self.window.frame];
fadeView.backgroundColor = [UIColor blackColor];
fadeView.alpha = 0.0f;
[self.window.rootViewController.view addSubview:fadeView];// Fadeout & remove
[UIView animateWithDuration:0.5f
animations:^{
fadeView.alpha = 1.0;
}
completion:^(BOOL finished){
[fadeView removeFromSuperview];[[NSNotificationCenter defaultCenter] removeObserver:self];
[MPMPlayerController.view removeFromSuperview];
}];
}
[/code] -
アプリをビルドし確認する
ビルドしアプリが起動すれば、起動時に動画が再生され、再生完了後に ViewController の画面が表示されます。
まとめ
アプリがダウンロードされるかどうかは、もちろんアプリそのものの出来不出来こそが重要なファクターですが、アプリを起動したときの画面に動きがあるだけで「このアプリはちゃんと一手間かけて作られているんだな」という印象をユーザーに対し与えることが出来ます。
アニメーションの制作から実装まで、全ての工数を考えると大変手間のかかる作業ですが、多数のアプリのなかから差別化をはかり、アプリのブランディング力を高めるためにとても効果的ですので、ぜひ一度お試し下さい。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
