title: Placing Animation in a Page-Based Application
body: <p>I have taken the Page-Based Application template in Xcode and turned it from a calendar booklet to a comic book. Each page has a grid of 12 views - 3 across &amp; 4 down. Each view has a .png file showing my character as he struggles with his existence. I'll briefly cover the code and then explain what I want and maybe some of you can point me in the right direction.</p>
  
  <p>In the XTBModelController.m file I created an “@property NSArray *Pages;” to deal with all the pages in the comicbook and then a series of NSArrays for each individual page ranging form “*Page0 to *Pagewhatever”.</p>
  
  <p>The code looks like this:</p>
  
  <pre><code>@property (strong, nonatomic)NSArray *Pages; // This array handles all the pages of the comic
  
  // the rest of the arrays (Page#) take care of the content for each page which are simple .png     graphic files
  @property (strong, nonatomic)NSArray *Page0;
  @property (strong, nonatomic)NSArray *Page1;
  @property (strong, nonatomic)NSArray *Page2;
  </code></pre>
  
  <p>... and so on up to the end of the comic book...</p>
  
  <pre><code>@end
  
  
  @implementation XTBModelController
  
  - (id)init
    {
      self = [super init];
      if (self)
        {
          // Create the data model.
  
          _Page0 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"Cover.png"], nil];
  
          _Page1 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"1.png"],[UIImage imageNamed:@"2.png"],[UIImage imageNamed:@"3.png"], ... and so on up to 12.png, nil];
  
          _Page2 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"13.png"],[UIImage imageNamed:@"14.png"],[UIImage imageNamed:@"15.png"], ... and so on up to 32.png, nil];
  </code></pre>
  
  <p>... and so on up to the end of the comic book.</p>
  
  <pre><code>        _Pages = [[NSArray alloc]initWithObjects:_Page0,_Page1, ... and so on up to the last page in the comic book, nil];
    }
  
      return self;
  </code></pre>
  
  <p>There. That should give you an idea. The result on the iPad is a comic book with an even grid of 12 views; 3 across, 4 down.</p>
  
  <p>Swipe the page and you see the next 12 frames of the comic book. But it is your typical comic book, just a bunch of still drawings lined up to tell a story.</p>
  
  <p>What I want to do with _Page1 will make my app different from a mere static comicbook. I want to animate it with a flipbook style animation.</p>
  
  <p>_Page0 is the comic book cover – with just one big static .png file.  _Page1 is the animated part. The animation starts automatically when the page is swiped from _Page0 to _Page1 and stops after 250 frames. It goes through this animation cycle just once and ends up looking like the rest of the comic - a grid of 12 views.  When the animation stops the reader swipes to _Page2, which is your 3x4 grid of static .png files like all th pages that follow _Page2.</p>
  
  <p>I have done this (the animation only) on a single view application using NSArrays and it works just fine. But I can't put the code into the line _Page1 = ?? in my page based app. If you need, I’ll post that code up so you can see what I have done, but I don’t want to make my messagere here go on and on.</p>
  
  <p>I'm sure putting a flipbook animation on one of the pages in a Page-Based application can be done but I am just not getting anywhere. Do any of you have any suggestions?</p>
  
  <hr>
  
  <p>This is in response to Duncan S's request.</p>
  
  <p>The code below is the code of the flip book animation in a single view application.</p>
  
  <p>xOxAViewController.h file</p>
  
  <pre><code>#import &lt;UIKit/UIKit.h&gt;
  
  @interface xOxAViewController : UIViewController
  
  - (IBAction)cellAnimation:(id)sender;
  
  
  
  /* This IBOutlet is where the animation will be shown */
  @property IBOutlet UIImageView *imgView;
  
  /* This NSArray holds all the images in the animation. */
  @property NSArray* images;
  
  @end
  </code></pre>
  
  <p>xOXAViewcontroller.m file</p>
  
  <pre><code>#import "xOxAViewController.h"
  #import &lt;AVFoundation/AVFoundation.h&gt;
  
  @interface xOxAViewController ()
  
  @end
  
  @implementation xOxAViewController
  
  - (void)viewDidLoad
  {
    [super viewDidLoad];
  }
  
    // Do any additional setup after loading the view, typically from a nib.
    self.images=[NSArray arrayWithObjects:[UIImage imageNamed:@"a0.png"], [UIImage     imageNamed:@"a1.png"],
                 [UIImage imageNamed:@"a2.png"],[UIImage imageNamed:@"a3.png"],
                 [UIImage imageNamed:@"a4.png"], ... [UIImage imageNamed:@"a47.png"],
                 [UIImage imageNamed:@"a48.png"], nil];
  }
  -(IBAction)cellAnimation:(id)sender
    {
      self.imgView.animationImages=self.images;
      self.imgView.animationDuration=10;
      self.imgView.animationRepeatCount=1;
      [self.imgView startAnimating];
    }
  
  
  
  - (void)didReceiveMemoryWarning
  {
      [super didReceiveMemoryWarning];
      // Dispose of any resources that can be recreated.
  }
  
  @end
  </code></pre>
  
  <p>That is pretty well it. It is easy to figure out. The animation happens in just one Image View in the storyboard.</p>
  
  <p>But putting the same animation in the page based application is more complex. And a lot of that complexity has to do with the storyboard. I'll embed two graphics of the storyboard of both projects  followed with an explanation to get my point across. I hope I make it clear for you.</p>
  
  <p>Here is the storyboard for the animation in the single view app.</p>
  
  <p><img src="https://i.stack.imgur.com/hBS2s.png" alt="First the story board for the single view application."></p>
  
  <p>There is nothing to it really. I hope this makes the relationship between the code and the storyboard in the single view application clear to you.</p>
  
  <hr>
  
  <p>Now I will show you the storyboard of the page-based app followed by relevant code:</p>
  
  <p><img src="https://i.stack.imgur.com/i9mg0.png" alt="Now I will show you the storyboard of the page-based app followed by relevant code:"></p>
  
  <p>As you see in the storyboard there is just one Root View Controller and one Data View Controller. The code in Apple's Page-Based application template was very clever. Enabling me to put in as many pages as I need and the Image Views on each page will be 'cued' if I am using the right term to take care of memory issues. All the view scenarios with the required Image Views are on one Data View Controller all piled up on top of each other. Called by code in the XTBDataViewController class. I will show you the code here.</p>
  
  <p>XTBDataViewContoller.h</p>
  
  <pre><code>#import &lt;UIKit/UIKit.h&gt;
  
  @interface XTBDataViewController : UIViewController
  @property (strong, nonatomic) id dataObject;
  
  @property (strong, nonatomic) IBOutlet UIImageView *Image1Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image2Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image3Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image4Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image5Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image6Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image7Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image8Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image9Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image10Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image11Outlet;
  @property (strong, nonatomic) IBOutlet UIImageView *Image12Outlet;
  
  @property (strong, nonatomic) IBOutlet UIImageView *VillageViewOutlet;
  
  @property (strong, nonatomic) IBOutlet UIImageView *CoverImageOutlet;
  
  @end
  </code></pre>
  
  <p>XTBDataViewContoller.m</p>
  
  <pre><code>#import "XTBDataViewController.h"
  
  @interface XTBDataViewController ()
  
  @end
  
  @implementation XTBDataViewController
  
  - (void)viewDidLoad
    {
      [super viewDidLoad];
    }
  
  - (void)didReceiveMemoryWarning
    {
      [super didReceiveMemoryWarning];
      // Dispose of any resources that can be recreated.
    }
  
  
  - (void)viewWillAppear:(BOOL)animated
    {
      [super viewWillAppear:animated];
  
      if([_dataObject count]==1)
  
        // this code supports the comic's cover which has just one big Image View.
        {
          _CoverImageOutlet.image=[_dataObject objectAtIndex:0];
        }
  
      // and this code supports the pages that have 6 small Image Views at the top of the page and one big Image View at the bottom
      else if([_dataObject count]==7)
        {
          _Image1Outlet.image=[_dataObject objectAtIndex:0];
          _Image2Outlet.image=[_dataObject objectAtIndex:1];
          _Image3Outlet.image=[_dataObject objectAtIndex:2];
          _Image4Outlet.image=[_dataObject objectAtIndex:3];
          _Image5Outlet.image=[_dataObject objectAtIndex:4];
          _Image6Outlet.image=[_dataObject objectAtIndex:5];
          _VillageViewOutlet.image=[_dataObject objectAtIndex:6];
        }
  
      else
      // and this code supports the pages that have 12 small Image Views - 3 across by 4 down (most of the pages in the comic book are like this)
        {
          _Image1Outlet.image=[_dataObject objectAtIndex:0];
          _Image2Outlet.image=[_dataObject objectAtIndex:1];
          _Image3Outlet.image=[_dataObject objectAtIndex:2];
          _Image4Outlet.image=[_dataObject objectAtIndex:3];
          _Image5Outlet.image=[_dataObject objectAtIndex:4];
          _Image6Outlet.image=[_dataObject objectAtIndex:5];
          _Image7Outlet.image=[_dataObject objectAtIndex:6];
          _Image8Outlet.image=[_dataObject objectAtIndex:7];
          _Image9Outlet.image=[_dataObject objectAtIndex:8];
          _Image10Outlet.image=[_dataObject objectAtIndex:9];
          _Image11Outlet.image=[_dataObject objectAtIndex:10];
          _Image12Outlet.image=[_dataObject objectAtIndex:11];
  
        }
    }
  
  @end
  </code></pre>
  
  <p>And that is that. I hope I have explained it well enough for you. Getting things to animate in the single view animation was not too difficult. But getting an animation in the page-based template to work... Well, I just don't know how to begin. I tired a number of times but sometimes I feel I have coded myself in a corner.</p>
  
  <p>My first concern here is that I have explained the problem clearly to you. Maybe my problem is so complex that Stack Overflow isn't the format to publish it. Maybe I need to go through GitHub (which I'm trying to get my head around).</p>
  
  <p>What do you think, Duncan?</p>