Animating a list of images on a buzztouch Menu-List Screen.


a) Build a menu list and set the Advanced Settings to show a header image from an image in your Xcode project. Not an image from a URL.

b) Load your application and make sure the image displays as expected.

c) Add additional images to your Xcode project to use in the header. These images should be the same size as the Header Image you configued in the previous step. Most folks keep their custom images in a seperate folder. Make a folder on your desktop, drag the images into the folder then drag the folder into the BT_Images directory in the Xcode project.

d) Find the unique id for the screen you are working with in your buzztouch control panel. Every screen in your app has a unique buzztouch id. This id is about 20 characters long. You can see this unique-id in the address bar of your browser while working on a menu. Load the menu, look at your browsers address bar: Copy the BT_itemId value from the URL.

If your URL looks like this:

buzztouch.com/account/cp_v15/screen_menuList.php?BT_itemId=9657DF92A111C7086B12345&status=&searchInput.....

The screen's unique id is: 9657DF92A111C7086B12345 This is everything "past" the BT_itemId= and "before" the ampersand.

e) OK, you have the screen's id, we'll need this later. In Xcode, open the BT_screen_menuList.m file, it is in the BT_Screens folder. Scroll to about line 97 and find the line that reads:

if(addHeaderImage){

//create an image view from the screen data..It will size itself.
headerImageView = [[BT_header_image_view alloc] initWithScreenData:theScreenData];
headerImageView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[self.myTableView setTableHeaderView:headerImageView];

}

Under this line of code: [self.myTableView setTableHeaderView:headerImageView] is where we will add a new line of code to trigger a new method...

if(addHeaderImage){

//create an image view from the screen data..It will size itself.
headerImageView = [[BT_header_image_view alloc] initWithScreenData:theScreenData];
headerImageView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[self.myTableView setTableHeaderView:headerImageView];
[self.myTableView setTableHeaderView:headerImageView];

//NOTHING ABOVE THIS HAS CHANGED

//fire the header image animation about 2 seconds after this loads...
[self performSelector:(@selector(animateHeaderImages)) withObject:nil afterDelay:2.0];

}

OK, we told the iOS app to "run a method called animateHeaderImages about 2 seconds after the screen loads" so we now need to write this method. Copy this entire method and paste it in BT_screen_menuList.m You can put it anywhere above or below other existing methods. I like it right above the existing viewWillAppear method.

//animate images after screen loads
-(void)animateHeaderImages{

//Enter the id of the screen you are working with here...
if([self.screenData.itemId isEqualToString:@"9657DF92A111C7086B12345"]){
[BT_debugger showIt:self:@"animateHeaderImages"];

//create an array of images to use...
NSMutableArray *myImages = [[NSMutableArray alloc] init];
[myImages addObject:[UIImage imageNamed:@"myImage1.png"]];
[myImages addObject:[UIImage imageNamed:@"myImage2.png"]];
[myImages addObject:[UIImage imageNamed:@"myImage3.png"]];
[myImages addObject:[UIImage imageNamed:@"myImage4.png"]];

//next, we need to find the UIImageView to apply these images to...
UIImageView *viewToAnimate = nil;
for(UIView* subView in [self.headerImageView subviews]){
if([subView isKindOfClass:[UIImageView class]]){
viewToAnimate = (UIImageView *)subView;
}
}

//if we found our view...
if(viewToAnimate != nil){

//set the images in our array...
[viewToAnimate setAnimationImages:myImages];

//set the duration of the animation (seconds to go through the entire list)
[viewToAnimate setAnimationDuration:5];

//set the number of times the animation repeats, 0 (zero) is forever...
[viewToAnimate setAnimationRepeatCount:0];

//start the animation
[viewToAnimate startAnimating];

//release memory..
[myImages release];

}

}
}

Build and run your project...