Tutorial: Show a nice Intro screen

Discussion Forums > Plugins, Customizing, Source Code

Replies: 18 Views: 185

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	confirm \| cancel 04/22/13 04:48 PM (12 years ago) Tutorial: Show a nice Intro screen Hi, Just to share (iPhone only portrait): If you want a nice introduction screen that is only showed once (the first time a user starts your app). Download this:https://github.com/MatthewYork/iPhone-IntroductionTutorial Let's say you have a button screen as your homepage (you can do this with any plugin). From the just downloaded source from github drag the following files into the folder bt_screen_menuButtons: MYIntroductionPanel.h MyIntroductionPanel.m MyIntroductionView.h MyIntroductionView.m SampleBackground.png SampleHeaderImage.png SampleImage1.png SampleImage2.png Now edit MYIntroductionPanel.h and add on line 27 #import <UIKit/UIKit.h> Now edit MyIntroductionPanel.m and add on line 27 #import <UIKit/UIKit.h> open MYIntroductionView.h and change line 74 to this: @property (unsafe_unretained) id <MYIntroductionDelegate> delegate; now go into BT_screen_menuButtons.h: Make the line where it says @interface look like this: @interface BT_screen_menuButtons : BT_viewController <BT_downloadFileDelegate, UIScrollViewDelegate, MYIntroductionDelegate>{ See, I added ,MYINtroductionDelegate Add this right after #import "BT_Item.h" (line39) #import "MYIntroductionView.h" and add this right after BOOL isLoading (line 61) NSArray myPanels; NSUserDefaults standardUserDefaults; Add next after this:@property (nonatomic) int buttonPadding; @property (nonatomic, retain) NSUserDefaults standardUserDefaults; Now go to BT_screen_menuButtons.m add this on line 54: @synthesize standardUserDefaults; add this right after the last closing bracket from the ViewDidLoad (after line 134) -(void)viewDidAppear:(BOOL)animated{ if(![[NSUserDefaults standardUserDefaults] boolForKey:@"showIntro"]){ [[self navigationController] setNavigationBarHidden:YES animated:YES]; //STEP 1 Construct Panels MYIntroductionPanel panel = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage1"] title:@"My first intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view."]; //You may also add in a title for each panel MYIntroductionPanel panel2 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My second intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //You may also add in a title for each panel MYIntroductionPanel panel3 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My third intro screen" description:@"My test text in panel3"]; //You may also add in a title for each panel MYIntroductionPanel panel4 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fourth intro screen" description:@"My test text in panel4"]; //You may also add in a title for each panel MYIntroductionPanel panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //STEP 2 Create IntroductionView /A standard version/ //MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) headerImage:[UIImage imageNamed:@"SampleHeaderImage.png"] panels:@[panel, panel2]]; /A version with no header (ala "Path")/ //MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) panels:@[panel, panel2]]; //NSArray paneltest = @"panel, panel2, panel3, panel4, panel5"; /A more customized version/ MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; //Set delegate to self for callbacks (optional) introductionView.delegate = self; //STEP 3: Show introduction view [introductionView showInView:self.view]; } //[[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"hasSeenTutorial"]; [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; //zet introductie op gelezen! } -(void)introductionDidFinishWithType:(MYFinishType)finishType{ if (finishType == MYFinishTypeSkipButton) { [[self navigationController] setNavigationBarHidden:NO animated:YES]; } else if (finishType == MYFinishTypeSwipeOut){ [[self navigationController] setNavigationBarHidden:NO animated:YES]; } //One might consider making the introductionview a class variable and releasing it here. // I didn't do this to keep things simple for the sake of example. } That's it!! Now you have a nice introduction screen that shows only once (the first time the user starts the/your app) If you want to add more screens just copy this: MYIntroductionPanel panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; And change panel5 to panel6 Next look for this: MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; and add panel6 so it looks like this: MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5, panel6] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; Can't remember the lowest version this works but I think it's ios5 Have much fun with this! Best Regards, Danny See: http://tinypic.com/r/2ptrrjr/4 http://tinypic.com/r/5jz2vd/4 http://tinypic.com/r/qoyg4n/4 PS. When testing it would be usefull to comment this line: [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; so it looks like this: //[[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; or do this [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"showIntro"]; (see that I've changed setBool to NO) Edit: Made some changes. Tutorial was incomplete Title Comments Hi, Just to share (iPhone only portrait): If you want a nice introduction screen that is only showed once (the first time a user starts your app). Download this:https://github.com/MatthewYork/iPhone-IntroductionTutorial Let's say you have a button screen as your homepage (you can do this with any plugin). From the just downloaded source from github drag the following files into the folder bt_screen_menuButtons: MYIntroductionPanel.h MyIntroductionPanel.m MyIntroductionView.h MyIntroductionView.m SampleBackground.png SampleHeaderImage.png SampleImage1.png SampleImage2.png Now edit MYIntroductionPanel.h and add on line 27 #import <UIKit/UIKit.h> Now edit MyIntroductionPanel.m and add on line 27 #import <UIKit/UIKit.h> open MYIntroductionView.h and change line 74 to this: @property (unsafe_unretained) id <MYIntroductionDelegate> delegate; now go into BT_screen_menuButtons.h: Make the line where it says @interface look like this: @interface BT_screen_menuButtons : BT_viewController <BT_downloadFileDelegate, UIScrollViewDelegate, MYIntroductionDelegate>{ See, I added ,MYINtroductionDelegate Add this right after #import "BT_Item.h" (line39) #import "MYIntroductionView.h" and add this right after BOOL isLoading (line 61) NSArray myPanels; NSUserDefaults * standardUserDefaults; Add next after this:@property (nonatomic) int buttonPadding; @property (nonatomic, retain) NSUserDefaults standardUserDefaults; Now go to BT_screen_menuButtons.m add this on line 54: @synthesize standardUserDefaults; add this right after the last closing bracket from the ViewDidLoad (after line 134) -(void)viewDidAppear:(BOOL)animated{ if(![[NSUserDefaults standardUserDefaults] boolForKey:@"showIntro"]){ [[self navigationController] setNavigationBarHidden:YES animated:YES]; //STEP 1 Construct Panels MYIntroductionPanel panel = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage1"] title:@"My first intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view."]; //You may also add in a title for each panel MYIntroductionPanel panel2 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My second intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //You may also add in a title for each panel MYIntroductionPanel panel3 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My third intro screen" description:@"My test text in panel3"]; //You may also add in a title for each panel MYIntroductionPanel panel4 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fourth intro screen" description:@"My test text in panel4"]; //You may also add in a title for each panel MYIntroductionPanel panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //STEP 2 Create IntroductionView /A standard version/ //MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) headerImage:[UIImage imageNamed:@"SampleHeaderImage.png"] panels:@[panel, panel2]]; /A version with no header (ala "Path")/ //MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) panels:@[panel, panel2]]; //NSArray paneltest = @"panel, panel2, panel3, panel4, panel5"; /A more customized version/ MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; //Set delegate to self for callbacks (optional) introductionView.delegate = self; //STEP 3: Show introduction view [introductionView showInView:self.view]; } //[[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"hasSeenTutorial"]; [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; //zet introductie op gelezen! } -(void)introductionDidFinishWithType:(MYFinishType)finishType{ if (finishType == MYFinishTypeSkipButton) { [[self navigationController] setNavigationBarHidden:NO animated:YES]; } else if (finishType == MYFinishTypeSwipeOut){ [[self navigationController] setNavigationBarHidden:NO animated:YES]; } //One might consider making the introductionview a class variable and releasing it here. // I didn't do this to keep things simple for the sake of example. } That's it!! Now you have a nice introduction screen that shows only once (the first time the user starts the/your app) If you want to add more screens just copy this: MYIntroductionPanel panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; And change panel5 to panel6 Next look for this: MYIntroductionView introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; and add panel6 so it looks like this: MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5, panel6] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; Can't remember the lowest version this works but I think it's ios5 Have much fun with this! Best Regards, Danny See: http://tinypic.com/r/2ptrrjr/4 http://tinypic.com/r/5jz2vd/4 http://tinypic.com/r/qoyg4n/4 PS. When testing it would be usefull to comment this line: [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; so it looks like this: //[[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; or do this [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"showIntro"]; (see that I've changed setBool to NO) Edit: Made some changes. Tutorial was incomplete

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	04/22/13 05:01 PM (12 years ago) Very nice! My mind is reeling with the possibilities! Mark Comments Very nice! My mind is reeling with the possibilities! Mark

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	04/22/13 05:02 PM (12 years ago) Great, Yes! Lots of possibilities here...... Best Regards, Danny Comments Great, Yes! Lots of possibilities here...... Best Regards, Danny

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	04/22/13 05:52 PM (12 years ago) This looks great. Thanks Danny. Good stuff as always. Comments This looks great. Thanks Danny. Good stuff as always.

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	04/22/13 06:58 PM (12 years ago) Danny- forums are better place when you are around! As always, cheers. See you at #BuzzCon14 Comments Danny- forums are better place when you are around! As always, cheers. See you at #BuzzCon14

farcat buzztouch Evangelist Posts: 1008 Reg: Jan 27, 2012 France 13,230	04/22/13 11:48 PM (12 years ago) Thanks Danny, can't wait to try this! Farcat Comments Thanks Danny, can't wait to try this! Farcat

Mackimack Apple Fan Posts: 481 Reg: Dec 30, 2010 Sweden 14,310	04/23/13 12:04 AM (12 years ago) Nice one Danny! Comments Nice one Danny!

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	04/23/13 12:51 AM (12 years ago) Hi All, thanks and have fun with it. @MacApple Thanks for the kind words. Haven't been as much on the forums lately (and near future) as much as I would like....too busy :-( Yeah, hope that I can join buzzcon next year (if in Europe would be better) and meet you guys and girls all in person :-) Best Regards, Danny Comments Hi All, thanks and have fun with it. @MacApple Thanks for the kind words. Haven't been as much on the forums lately (and near future) as much as I would like....too busy :-( Yeah, hope that I can join buzzcon next year (if in Europe would be better) and meet you guys and girls all in person :-) Best Regards, Danny

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	04/23/13 01:38 AM (12 years ago) I made some small changes because the tutorial wasn't complete. Best Regards, Danny Comments I made some small changes because the tutorial wasn't complete. Best Regards, Danny

Kittsy buzztouch Evangelist Posts: 2251 Reg: Feb 22, 2012 Liverpool 31,360	04/23/13 02:00 AM (12 years ago) Europe for Buzzcon 14, EUROPE!!! EUROPE!!! EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!! Comments Europe for Buzzcon 14, EUROPE!!! EUROPE!!! EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!

chris1 Code is Art Posts: 3862 Reg: Aug 10, 2012 Austin, TX 50,120	04/23/13 04:33 AM (12 years ago) Nice job - you should make this into a plugin! I had plans for such a plugin but never found time to work on it. Would much rather pay you some cash and download the work ready to go! :) Comments Nice job - you should make this into a plugin! I had plans for such a plugin but never found time to work on it. Would much rather pay you some cash and download the work ready to go! :)

ATRAIN53 Code is Art Posts: 1755 Reg: Nov 17, 2011 Chicago 26,450	04/23/13 06:48 AM (12 years ago) Excellent. Great find and share and even better tutorial. I would think this is hard to make into a plug-in unless it was a splash screen OR you made modified versions of the Menu Screen/Button Menu or one of those killer new menus like the carousel or animated circle... and dropped the code in there..... I duped the button menu plug-in to add some animation code to that for a similar reason. Regardless, this is an excellent tool to add to the kit. Thanks for the share. For sure hope to meet up one of these days, all about a BuzzCon 14 in EU - just don't make it Amsterdam.... Comments Excellent. Great find and share and even better tutorial. I would think this is hard to make into a plug-in unless it was a splash screen OR you made modified versions of the Menu Screen/Button Menu or one of those killer new menus like the carousel or animated circle... and dropped the code in there..... I duped the button menu plug-in to add some animation code to that for a similar reason. Regardless, this is an excellent tool to add to the kit. Thanks for the share. For sure hope to meet up one of these days, all about a BuzzCon 14 in EU - just don't make it Amsterdam....

Otatech Code is Art Posts: 80 Reg: Jul 18, 2012 Rome 800	04/23/13 12:46 PM (12 years ago) Bravo Danny, as always :-) Comments Bravo Danny, as always :-)

Otatech Code is Art Posts: 80 Reg: Jul 18, 2012 Rome 800	04/23/13 12:51 PM (12 years ago) Bravo Danny, as always :-) Comments Bravo Danny, as always :-)

Mackimack Apple Fan Posts: 481 Reg: Dec 30, 2010 Sweden 14,310	04/24/13 12:51 AM (12 years ago) HI Danny. I try this to your BTA Design menu plugin. But I did not get this to work. I have you only try this to BT Button menu? Comments HI Danny. I try this to your BTA Design menu plugin. But I did not get this to work. I have you only try this to BT Button menu?

Kittsy buzztouch Evangelist Posts: 2251 Reg: Feb 22, 2012 Liverpool 31,360	04/24/13 01:12 AM (12 years ago) I came accross this in cocoa controls a while back. I modded the splash screen plugin. It's a bit more complicated than the tutorial above but well worth it. It showed the splash then showed the tutorial. The same way using nsuserdefaults (my new best friend over the past month) When it has initially loaded the splash screen would just react as normal and fade away. Comments I came accross this in cocoa controls a while back. I modded the splash screen plugin. It's a bit more complicated than the tutorial above but well worth it. It showed the splash then showed the tutorial. The same way using nsuserdefaults (my new best friend over the past month) When it has initially loaded the splash screen would just react as normal and fade away.

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	04/24/13 01:25 AM (12 years ago) Hi Marcus, I've only tried the button menu but it should work with every plugin. If it didn't work for you, did you get any errors or warnings? Be sure to use the #import Let me know. Best Regards, Danny Comments Hi Marcus, I've only tried the button menu but it should work with every plugin. If it didn't work for you, did you get any errors or warnings? Be sure to use the #import Let me know. Best Regards, Danny

Mackimack Apple Fan Posts: 481 Reg: Dec 30, 2010 Sweden 14,310	04/24/13 05:53 AM (12 years ago) Danny I have send you a mail. Comments Danny I have send you a mail.

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	04/24/13 06:11 AM (12 years ago) Sorry for the inconvenience but I updated the tutorial. I forgot the part of the @interface line and the edits needed in the MYIntroductionPanel h and m and the edit in MyIntroductionView.h. Think that everything should be ok now. Best Regards, Danny Comments Sorry for the inconvenience but I updated the tutorial. I forgot the part of the @interface line and the edits needed in the MYIntroductionPanel h and m and the edit in MyIntroductionView.h. Think that everything should be ok now. Best Regards, Danny

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > Plugins, Customizing, Source Code

Tutorial: Show a nice Intro screen

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments