2 Replies Latest reply on Nov 29, 2011 8:15 AM by ReshapeMedia

    Photoshop to MXML to Web  to iPhone iPad


      Finally Flash can dual render in both web(Flash) and iPhone or iPad(non Flash).

      • Works with Flex (I'm not releasing this until Adobe contacts me)
      • Backwards compatable with Flash (I'll launch this in the new year, any SWF file can convert to HTML)
      • Instant render, no compiling - change your FTML page and see the results
      • 100% HTML and XML compliant - without HTML5


      Visit: http://reshapemedia.com/ftml/ on both your desktop and non Flash player devices like iPhone or iPad for a live examle.


      Full Post: http://reshapemedia.com/ftml/learn/flash-to-iphone-ipad/


      The Concept

      Why configure multiple layouts and build the same application on multiple systems - it wastes time and money.  With FTML you can deploy the same application all across the board - all from Flash/Flex.  When rendering to non Flash environments you can add your own custom CSS file to change the style and layout with out rebuilding the entire application.


      Reshape Media strongly believes: If you want 'interactivity' on an iPhone web page = build an iPhone app - dont kid yourself.  This is all raw HTML, no HTML5 - Flash all the way.


      What Environment Can I Code FTML In?

      Any!  You can code FTML in:

      • HTML
      • PHP and ASP
      • Notepad
      • Dreamweaver / VisualStudio
      • Flex


      Talk Is Cheap, How Can I Try It Now?

      You can do this your self in under 5 minutes! 

      • All the code is live and renders changes instantly
      • You only need to refresh your web page to see the changes


      Lets get started...


      1. Start by taking a Photoshop PSD file.  This file will server as the layout to your project.  Use our Photoshop to Flash jsx script to convert your PSD into a Flash Text website in seconds.
        Photoshop to Flash jsx script: http://reshapemedia.com/ftml/learn/photoshop-to-flash-ftml/
      2. Once the script is completed you will have a [ftml-www] folder with all the required files for your server.  Place the files on yoru server or localhost and your website will be up and running right away.
        Visit the site using your localhost: http://localhost/ or put the files on your website
      3. The Flash Text website is instantly available on all browsers and devices.  You can view your Flash website on a desktop browser with Flash Player, or a non Flash Player device such as an iPhone or iPad.
        (this is my testing environment - I spoof my headers as mobile for my server)


      Thats it... simple and easy with no headache required.


      How Does It Render?

      There are 3 main render modes for HTML.  All you do is add the meta tags to your HTML page to change the render style.

      • <meta name='content-ftml' content='ftml' />
        This is the default render for FTML on iPhones when no meta data is present.  This will render the Flash Text page similar to a Flash layout.  Its important to use x and y postions for this render.
      • <meta name='content-ftml' content='ftml/html' />
        This will render the Flash Text page similar to a HTML layout.  All elements are stacked and can use costom CSS stylesheets for layout.  This is the best render method if you are used to working with HTML.
      • <meta name='content-ftml' content='ftml/flash' />
        This will render the page with a full-screen layout.  Use this method if you do not have scrollable content on your page.


      Try it your self... Build a multi-device project with Flash from anywhere... in seconds!


      Remember, FTML is free of change and requires no downloads to get started.


      My Actual Question

      What would the Flash/Flex community like to see / have when rendering to iPhone.  I'm not Adobe so if you make a suggestion to me and I like it - its added yesterday.  I can do anything when rendering so use your imagination!


      Eg. 'Suggestions' From Myself

      • Parse the actionscript into 'somewhat' compatable javascript - maybe jQuery
      • Create a 'somewhat' compatable tweener for HTML
      • Add support for all media (audio and video) on iPhone
      • Find a way to access the native device functions (mostly through file types and external events)
        • 1. Re: Photoshop to MXML to Web  to iPhone iPad
          drkstr_1 Level 4

          I'm not sure if this is the best place for that, but your work does seem interesting.


          As far as parsing Actionscript into js, I don't think a solution like that will ever be practical. I think the only way we will see a truly consistent(ish) rendering of flash content is through a js lib that exposes the flash player api and interprets the byte code at runtime using base64 encoding. I can only hope that the hardware advances quick enough to make a solution like that practical in the near future.

          • 2. Re: Photoshop to MXML to Web  to iPhone iPad
            ReshapeMedia Level 1

            Parse the actionscript into 'somewhat' compatable javascript - maybe jQuery


            drkstr_1 wrote:


            I think the only way we will see a truly consistent(ish) rendering of flash content is through a js lib that exposes the flash player api and interprets the byte code at runtime


            That was my first path actually.  I wanted to just take the byte data from Flash or event simple meta data.  But the problem in that is that not all devices support Flash Player, so the IDE is not accessable under all circumstances.


            I have class builders (I can send a manifest to it and it will spit out my Actionscriptcode, I've ran it on 100s of files at times)... this helped me to get a better understanding of syntax relationships between code.  That being said... I can parse some PHP and Javascript into Actionscript, but I'm not working on the opposit to apply Actionscript logic within PHP and Javascript - to be honest I'm about 40% complete on that one.


            FYI: I can render MXML live - at runtime and compile actionscript live - at runtime.  Try it out.


            Samples: http://reshapemedia.com/ftml/downloads/flash-samples/

            - lots of samples to test


            Tweening: http://reshapemedia.com/ftml/samples/tweening/

            - note: when using the samples you can edit and recompile the code live.


            Now bring both feet out of the box - I'll be working on this for the next little bit to perfect it for my needs, but I'd like to make it work for everyone. 


            Who doesn't need the ability to change thier existing SWF they made in CS4 to HTML... so it can be visible on iPhone?