2 Replies Latest reply on Nov 20, 2012 3:37 AM by Envirographics

    Best approach for vector flash work as html5 ?

    Envirographics

      Hi,

      Currently using Flash CS5 for interactive map creation, bringing existing fh9 vector mapwork into CS5 via Flash 8 (as CS5 doesnt support Freehand 9 files, an Adobe political move) then coding using action script3 to create interactive control. Current project sees a county map with selectable districts that open the districts areas up, settlements show up depending on which bus service is hovered over in a datagrid fed a csv file from excel file of the bus services. Coding strips out apostrophes and gaps to allow movieClips to be identified.

      Do any of the progs such as wallaby or Edge carry on with this, would they allow use of vector artwork from Freehand9 or Flash8 ? I search on wallaby and dont see anything , so whats happened to the flash converter ?

      CS6 has a plug in or inbuilt HTML5 converter, is it best to use that and would it support the coding and datagrid and vector work. The map is scaleable and no pixels show as one zooms in.

       

      Would it support the zoom and pan.

       

      is it easy to use Edge to create this all over again or is CS6 the best route for those familiar with Flash ?

       

      Its bad enough learning as3, what is the coding like to get the functions we have to work, easier or worse ?

       

      If we code it in CS6 then export it as HTML5, does the resulting coding survive the process and work ?

       

      If we alter the map and use CS6 then we would have to export it as HTML5 again. is it that the code is good to go, or does it need tweaking to get functionality each time. What are your experiences ?

       

      Edge or wallaby or what for HTML5 ?

       

      As we are still getting into using Flash for such work, to have these distractions or alternatives is a pain., or is it in fact now easier and able to do all that Flash can do, all I see are comments on not quite there yet but making progress, but dated 2011.

      I heard of Edge, now we have Edge Animate, Edge Code, Edge Reflow and Edge Inspect... when we just had Flash. Is Edge available free without having some Cloud account, we dont have such accounts here at work and as far as I know can't have such.

       

      Its all very confusing !

       

      Envirographics

        • 1. Re: Best approach for vector flash work as html5 ?
          Harry de Lange

          Right now there are 3 HTML5 technologies available:

          1. Combination of plain DIV's and a lot of JQuery/ Javascript (Edge Animate is the best tool for this), works well for animated banners, headers and such.

          2. The Canvas tag  in combination with Easeljs gives you the best Flash alternative, specially for game development, though it ends up as an image (it's a canvas to draw something upon...).

          3. SVG with Jquery/javascript > best situation in your case with maps: scalable, zoomable and still vector: have a look at RaphaelJS

           

          You can create a free cloud account at Adobe Creative Cloud website and download the edge animate on the Cloud home page for free.

          • 2. Re: Best approach for vector flash work as html5 ?
            Envirographics Level 1

            Hi,

            Thanks for the replies,

            Looking at these each in turn.

             

            1.  banners headers are miles apart from the interactive maps with raster census data exported from Maiden etc, vector road structures created in Freehand and brought into Flash8 then onto CS5. Hope then arrives with mention of Edge animate which has a graphics flash prog interface, but requires Windows 7 and as a Govt body we are 1.5 yrs from having such PC’s. Edge is the only new prog contender looking at familiar interfaces but I cant even trial it due to the win7. I cannot code draw the route of hundreds of roads, or the shape of complex areas. I must import vector artwork and visually place it.

             

            2. Canvas tag with Easeljs best flash alternative…the website says done error to anything I click on, like demos, so googling it I find :-

            http://active.tutsplus.com/tutorials/html5/getting-started-with-easeljs-a-flash-like-inter face-for-the-html5-canvas/   I follow this through, but where is the flash interface, I see nothing representing a drawing package at all, nothing remotely like flash, its all coding.

             

            Not sure if this vid is still true but flash better than canvas http://www.youtube.com/watch?v=HH5GmZbKdOE&feature=related

             

            3.  http://raphaeljs.com/

            Again I dont see a means of  working with the files mentioned. Is this a drawing prog able to import vector work/files ?

            ‘Download and include raphael.js into your HTML page, then use it as simple as:

            I can’t imagine someone saying import the flash prog into your html page.

             

            Documentation  http://raphaeljs.com/reference.html

            Everything is done in code it would seem, allocating colours and so on, that would take months to create a map of the complexity of what we have.

            I see no drawing interface.

             

            I am left feeling very undermined, quite queasy, nauseous, like being expected to cook a meal with a mechanics toolset or be shot at dawn.

            Have I though missed something.

             

            I see you didnt mention Flash CS6 which gives all the functionality that we successfully use then allows for HTML5 export. Does this in fact work or is it going to leave us with a twitching semi borne item ?

             

            I searched on youtube flash v html5 canvas and those I did view saw html5 very slow comnpared to flash, cpu usage 90% html5 v flash 28% same video. One respondee says :-

            I really have a hard time understanding what is so geat about HTML5 and why Flash sucks. Flash: Easy to learn Great WYSIWYG editor. Reasonably fast scripting language great for animating stuff. Plugin installation is fast and simple. HTML5: Steep learning curve. No WYSIWYG editor for making animations and stuff. Slow, complex scripting difficult interaction with SVG content. No plugin (who cares!)

             

            I must agree, I am struggling to see how its better, just because Apple say so, but what I see doesnt justify things. To lose the flash GUI as well on what seems more a political move not one based on what performs best.

             

            However these vids are mostly 2010 so has the coding used for the html5 vids been improved on since or what has improved.

             

            It will be interesting to create a flash vid then html5 export it and see how both run on devices, has someone done this ? Love to see the results.

             

            Envirographics