Objective-C:iOSアプリ起動画面(スプラッシュ)を動画に変更する

アプリが起動すると表示されるスプラッシュ画像は Xcode 上で設定すれば簡単に表示されますが、このスプラッシュ画像を静止画ではなく動画にしたいと思ったことはないでしょうか。

今回はこのスプラッシュ画像を動画にする方法を紹介したいと思います。

アプリ起動画面(スプラッシュ)を動画に変更する

冒頭ではアプリの起動画面に動画を表示すると述べていますが、具体的には通常のスプラッシュの後に mp4 等の動画ファイルを再生する方法を説明していきます。

通常のスプラッシュ画像は設定をしないか、アニメーションの背景色と同じ画像を設定しておくことで、スプラッシュが動画になっているように見せるというものです。

概要

  1. 動画ファイルを準備する
  2. Xcode プロジェクトに動画ファイルをコピーする
  3. 必要なフレームワークのインポート
  4. AppDelegate.m にコードを記述する
  5. アプリをビルドし確認する

手順詳細

  1. 動画ファイルを準備する

    起動時に表示したい動画ファイルをあらかじめ準備しておきます。Objective-C のプレイヤーがサポートしている形式 mp4、mov、avi、mpg 等で出力したものであれば問題なく使用できるかと思います。

    img_splashanim_1

  2. Xcode プロジェクトに動画ファイルをコピー

    (1)で準備した動画ファイルを Xcode のプロジェクトにドラッグして追加します。ここでは SpriteKit Game のテンプレートを使用しています。

    img_splashanim_2
    Destination の Copy items… にチェックCreate Groups… を選択し、Add to targets をチェックFinish をクリックします。

  3. 必要なフレームワークのインポート

    動画の再生に必要なフレームワークをインポートします。

    img_splashanim_3
    プロジェクトの設定 General の Linked Frameworks and Libraries 項目の 「+」をクリックし MediaPlayer.framework を追加します。

  4. AppDelegate.m にコードを記述する

    AppDelegate.m のソースコードを開き #import “AppDelegate.h” の下に MPMoviePlayerViewController を定義します。

    @implementation AppDelegate
    {
        MPMoviePlayerViewController *MPMPlayerController;
    }
    次に – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions メソッドに以下のコードを追加します。

    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];
    続いて上記メソッドの下に動画再生後に実行される以下のメソッドを追加します。このメソッドでは動画再生完了後に、画面がブラックアウトするアニメーションを再生、ブラックアウト完了後にスプラッシュに関連するビューを削除するというものです。

    このメソッドは動画の内容に応じて実行する内容を変更しても構いません。

    - (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];
                         }];
    }

  5. アプリをビルドし確認する

    ビルドしアプリが起動すれば、起動時に動画が再生され、再生完了後に ViewController の画面が表示されます。

    img_splashanim_4

まとめ

アプリがダウンロードされるかどうかは、もちろんアプリそのものの出来不出来こそが重要なファクターですが、アプリを起動したときの画面に動きがあるだけで「このアプリはちゃんと一手間かけて作られているんだな」という印象をユーザーに対し与えることが出来ます。

アニメーションの制作から実装まで、全ての工数を考えると大変手間のかかる作業ですが、多数のアプリのなかから差別化をはかり、アプリのブランディング力を高めるためにとても効果的ですので、ぜひ一度お試し下さい。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents