Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 22    Views: 152

SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
05/13/15 07:59 AM (4 years ago)

Animated App Home Screen. Kind of neat, actually.

I was playing around with an app called 'Gif Brewery', which converts video into Animated gifs... And thought "Why not try this in a mobile app". Animated gifs won't work in a UIView, but they will work just fine in a UIWebView...

So I promptly modified Chris' "Side Menu" plugin, although It can work on a lot of different screens...

I added this *before* the tableView code in the 'viewDidLoad' method:

UIWebView *myWebView = [[UIWebView alloc]initWithFrame:self.view.frame];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"beachscene" ofType:@"gif"];
NSData *gif = [NSData dataWithContentsOfFile:filePath];
[myWebView loadData:gif MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
myWebView.userInteractionEnabled = NO;
[self.view addSubview:myWebView];

And although it will need some tweaking and cleaning up, this is the result:

https://dl.dropboxusercontent.com/u/115208762/ani_app.mov

I think this has a bit of potential to really 'wow' a client, if done correctly.

'Gif Brewery' is $5 on the Mac App store:

https://itunes.apple.com/us/app/gif-brewery/id435989461?mt=12

I'm not promoting them, and there may be dozens of similar programs available. I'm just pointing out the tools I used to create this.

Cheers!

-- Smug
 
MacApple
Apple Fan
Profile
Posts: 4651
Reg: Oct 25, 2010
USA
60,910
like
05/13/15 08:03 AM (4 years ago)
Killer!

Love it.
 
tompos
Veteran developer
Profile
Posts: 101
Reg: Oct 19, 2013
Würzburg
7,110
like
05/13/15 08:14 AM (4 years ago)
Very nice.

And it will make a good first impression (you know, the first 7 seconds are important...).

Thanks for sharing
Thomas
 
chadh0130
Apple Fan
Profile
Posts: 349
Reg: Nov 05, 2011
Rhode Island
3,990
like
05/13/15 08:24 AM (4 years ago)
That is wicked cool.

Awesome work, Thanks for sharing!
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
05/13/15 08:48 AM (4 years ago)
I like it too. Thanks Smug.
 
CMCOFFEE
Android Fan
Profile
Posts: 2017
Reg: Jan 04, 2013
Amarillo, Texas
26,670
like
05/13/15 09:28 AM (4 years ago)
Nice!!!
 
Red Dog
buzztouch Evangelist
Profile
Posts: 805
Reg: Jun 16, 2011
Southern Califo...
18,800
like
05/13/15 10:22 AM (4 years ago)
Pretty cool Smug!
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
05/13/15 11:27 AM (4 years ago)
Whoa! That is pretty darn cool!
 
mysps
Code is Art
Profile
Posts: 2076
Reg: May 14, 2011
Palma
33,260
like
05/13/15 01:29 PM (4 years ago)
Very slick!!!

Thanks a lot for the share Smug!
 
CMCOFFEE
Android Fan
Profile
Posts: 2017
Reg: Jan 04, 2013
Amarillo, Texas
26,670
like
05/13/15 06:34 PM (4 years ago)
Nice!!thank you
 
nadthevlad
Code is Art
Profile
Posts: 1025
Reg: Jun 07, 2012
Denver
21,850
like
05/13/15 08:36 PM (4 years ago)
Nice, How well does it work on different size device screens. Any resolution lost.
Have you tested it on a device or just the emulator?
 
fusionsch
I hate code!
Profile
Posts: 508
Reg: Dec 28, 2010
Montreux Switze...
11,530
like
05/14/15 12:52 AM (4 years ago)
Great! Thanks, Smug, I have to try this!

Er... Wouldn't it work with a video file instead of a gif? Wouldn't it be smoother?

Cheers

Jack
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
05/14/15 03:00 AM (4 years ago)
Jack,

probably, but depending on the video, the size might be a bit too big to include in the app, whereas a animated gif can be much smaller in filesize.

And I 'could' increase the frame rate, I was just fooling around with defaults to see if it was viable. :)

Cheers!

-- Smug
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
05/14/15 03:49 AM (4 years ago)
I found some online tools that make 5 second clips for free, so I made one. I'm definately going to try dropping this code into a plugin and see what happens.

Just as an idea, how easy would it be to set the the url of an animated gif as the background image value in the control panel for a plugin?

Alan
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
05/14/15 05:18 AM (4 years ago)
Well, if you were to use the standard 'background image' property in BT, it shouldn't be too hard...

In your plugin, I'd do an 'if' statement to detect if the image is a gif file, if so, create an instance of the webView, otherwise, go with the UIImageView...

Maybe a slightly more complex 'if' statement to gleen between large and small devices...

But completely doable...

Cheers!

-- Smug
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
05/14/15 06:17 AM (4 years ago)
Nice Smug!

The animated gif looks like it can autoplay- which was a limitation I had run into before with testing out an approach using video player.

Would it be possible to play over only a portion of the screen if you had smaller dimension gif? (If not could areas of the gif use transparency for clear)

Thanks
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
05/14/15 06:33 AM (4 years ago)
I suspect 'in theory' that could work, but you'd have to be a graphic wiz to get all the seams just right, or custom make things for each device size... Not sure what the best approach would be...

But again, the 'theory' of setting a UIView/UIWebView combo to use 1 'static' gif and another animated gif should work...

I probably won't be testing that however; it's not my requirements for the moment...

I'm just updating a friends app and thought this would be a cool effect to have on the home screen...

Cheers!

-- Smug
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
05/14/15 07:06 AM (4 years ago)
Now this is interesting...

I was having a bit of an issue getting the same animated gif to look decent across the multiple device sizes now available in iOS... The webView worked nice, but sometimes it wouldn't scale 'just right' depending on the aspect ratio of the device versus the aspect ratio of the gif...

I found this project on github (of course, lol!):

https://github.com/mayoff/uiimage-from-animated-gif

which as the title implies, allows the use of an animated gif in a UIImageView

From there, I was able to set the 'content mode' of the imageView to allow the gif to stretch a little, or compress a little, depending on the device used. A Vast improvement.

Add that "UIImage+animatedGIF" class to your project and this code works dandy:

NSURL *url = [[NSBundle mainBundle] URLForResource:@"beachani" withExtension:@"gif"];
UIImageView *gifImage = [[UIImageView alloc]initWithImage:[UIImage animatedImageWithAnimatedGIFData:[NSData dataWithContentsOfURL:url]]];
[gifImage setFrame:CGRectMake(0, 0, screenBounds.size.width, screenBounds.size.height)];
gifImage.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:gifImage];

@NCBuzz: This method might be a better way of using a static/animated image, because then you could control the aspect ratio of all images, therefore allowing easier 'seaming' of the two (or more) imageViews...

Cheers!

-- Smug
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
05/14/15 02:41 PM (4 years ago)
Cool!
We're heading out early for long weekend. I will give it a try next week.
Thanks!
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
05/14/15 08:12 PM (4 years ago)
Smug in da houz!!!!!
 
mrDavid
BTMods.com
Profile
Posts: 3936
Reg: May 21, 2011
San Diego, CA
51,910
like
05/29/15 12:14 PM (4 years ago)
@Smug, wouldn't you be able to just do:

myWebView.scalesPageToFit = YES;

to your original code, and get the same thing, without having to add the extra class / changes?

Haven't tested, but assume so :-)

David.
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
05/29/15 01:05 PM (4 years ago)
@David, actually I did that. But it scales them 'proportionately', which is nice, but not always desirable; in some devices it left gaps at the bottom trying to keep the page 'perfect'. With the imageView, it's not always 'perfect' but it fills the entire screen.

Cheers!

-- Smug
 
mrDavid
BTMods.com
Profile
Posts: 3936
Reg: May 21, 2011
San Diego, CA
51,910
like
05/29/15 01:06 PM (4 years ago)
Ahh, gotcha! I'm playing with it now, I'll try it on a few devices. You rock, as usual!
 

Login + Screen Name Required to Post

pointerLogin 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.