MegaZine working on iPhone

[MPete]

Most page flip solutions fail when it comes to using on an iPhone because the core system is based on Flash which has had a long running issue with the iPhone as they don't want Flash developers being able to build iPhone apps outside of their own licensing and app building model so a solution of Flash running on iPhone is still looking like a long way off.

Within a few minutes of testing I've come up with a pretty nice looking solution. Instead of using swf pages, these will need to be converted to jpg files (these programs are freely available). There's also a free program you'll need to convert flv and any other video/audio files to the native mp4 format for iPhone. I've used a free iPhone website template. The pages go next/previous. Page links work with an image map and I assume could be combined with the xml links? The pages slide across but I've seen jQuery and other JavaScripts that do the simple page flipping technique, but for now I think sliding works fine.

Will be interesting to see how far it can be developed and incorporated, and interested to see how others have implemented a solution, if any.

Let me know if you're interested to hear more!

[joakimhoegset]

I am indeed.
Joakim

[MPete]

At the moment I'm using a whole bunch of freeware and GPL programs etc, just trying to make it a more streamlined to be easier for other's to use, I've also not incorporated it into the megazine.mz3 xml file - it would be good to simply have an <iphone> or <mobile> tag within pages so it can be part of the same structure.

Create JPG files
If you're not using jpg files for pages already, you can create jpg files from your source swf or pdf.

PDF2JPG:
PDF-XChange viewer - http://www.docu-track.com/home/prod_user/PDF-XChange_Tools/pdfx_viewer
This is a great PDF tool that lets you set links and export to jpg. Pro version isn't required for basic features.

SWF2JPG:
SWF to JPG PHP class - http://www.phpclasses.org/browse/package/4312.html
Freeware Cyber-D swf2jpg - http://cyber-d.blogspot.com/2008/10/cyber-ds-swf2jpg.html
E.M. Magic Swf2Avi v6.6.9.803 - http://www.effectmatrix.com/swf2avi/index.htm (trial)

Note: You want to make sure the files output to the iPhone screen size (ie 480x320 @ 163 ppi) so the width should be at least 460px wide.

This allows you to switch between landscape and portrait view on the iPhone/iPod touch without needing to scroll AND allow for navigation for next/previous buttons next to the page if you want. The iPhone automatically anti-aliases the image for you so it won't look too crunchy like it does in browsers.

JavaScript
Obviously iPhone doesn't support flash so we need to use JavaScript. There are some great modules available with jQuery such as jparse (to parse the xml from the megazine.mz3 xml file) and some jquery page curl effects.

There's also a great free iPhone website template (iSite) released by Joe Hewitt (http://joehewitt.com/), the source can be found here: http://www.modmyi.com/files/isite.zip
This has some nice clean iPhone app-style design and sliding etc. I've used this as the basis for my iPhone magazine site.

There's also a good jquery loading script that can be implemented to load only a few pages into the cache instead of hundreds of pages etc.

Automatically detecting iPhone
Because iPhone doesn't view flash, you may as well automatically redirect them to your iPhone site straight away by adding this code (change the address to your iPhone version):

Code: [Select]

<script type="text/javascript">if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)){ location.href='http://iphone.example.com/';}</script>
On the iPhone index page you can redirect regular browsers to the MegaZine flash version by adding this code (changing example.com with your site):

Code: [Select]

<script type="application/x-javascript">if(!(navigator.userAgent.match(/iPhone/i)) || !(navigator.userAgent.match(/iPod/i))){location.href='http://www.example.com/';}</script>
Future updates
If I get the time I hope to incorporate all of this much better into the MegaZine core structure with less steps and messing around but this is what I've done for a rough and ready magazine for iPhone. With additional information in the megazine xml file, eventually we can parse the xml objects to have layers, links, texts, search, zoom etc but for now this will have to suffice. Because it's not part of the main MegaZine engine or flash core, it's almost a fork but in my opinion keeping up with technology still an important feature to include.

My main focus will be dynamically generating content server-side through an administration panel used to build regular MegaZines so this whole process is invisible to the user.

Let me know if you've developed around this concept before or have work arounds of your own you can contribute.

Source
I work best with a demonstration, so here it is - nothing fancy but at least a start: http://pacraig.com/megazine/iphone

[thatcher]

I'm not sure if you have heard the news. But Adobe announced on the Adobe MAX conference (early October) that flash professional CS5 will be equipped with a compiler for iPhone native objective C.

Effectively meaning that we will be able to build apps in flash and compile them for the iPhone. I think that is good news, but I realize that it only partly solves the need for creating the kind of javascript app you are talking about.

The good: we can make an app with mp's pageflip
The bad: we have to provide it through the app store, and cannot provide it on a website.

[MPete]

I'm not sure if you have heard the news. But Adobe announced on the Adobe MAX conference (early October) that flash professional CS5 will be equipped with a compiler for iPhone native objective C.

Effectively meaning that we will be able to build apps in flash and compile them for the iPhone. I think that is good news, but I realize that it only partly solves the need for creating the kind of javascript app you are talking about.

The good: we can make an app with mp's pageflip
The bad: we have to provide it through the app store, and cannot provide it on a website.

So yes there are some great developments under way but still restrictive and a lite version of Flash also to be playable on portable devices without soaking up the battery power. Will be interesting to see how it develops further. Because MegaZine is under a GPL license and free for personal use and relatively cheap for commercial use, it depends if hte engine can easily convert to the iphone format, whether it's free or a small fee and whether there is enough use for it to bother in the first place.

[bobbo]

Strange...when I go to your /iphone demo site , my Iphone says 'you are not using an Iphone '  or words to that effect... I am in Canada on a 3G network ....any suggestions?

[MPete]

Strange...when I go to your /iphone demo site , my Iphone says 'you are not using an Iphone '  or words to that effect... I am in Canada on a 3G network ....any suggestions?

That's very interesting... do you know if it's iPhone 3GS or version you're running etc?

The alert is simply coming from the javascript:

Code: [Select]

<script type="application/x-javascript">
if(!(navigator.userAgent.match(/iPhone/i)) || !(navigator.userAgent.match(/iPod/i))){ alert("Hey, you're not using an iPhone!"); }</script>
This is supposed to detect if your user agent is an ipod or iphone, I might need to update this to match your useragent? Not sure how you get this easily?

[Florian Nücke]

Try adding a

Code: (html4strict)

<div id="userAgent"></div>
<script>document.getElementById("userAgent").innerHTML = "You're using: " + navigator.userAgent;</script>

somewhere on your page, then it should display to the visitor what the browser thinks he's using