Question

I have a project with that uses flash for most pages. Now the client want to replace the flash with jquery/html. So from where I have to start with?

The project has swf file and it is embedded by swfobject(javascript).
Can someone help me with giving a idea or steps how I can convert the swf to javascript/html?

Answer 1

If the Flash doesn’t contain a huge amount of animation/dynamic interaction then I’d say you should follow a process along these lines:

1. Create HTML documents where the content is structured in a simple, consistent format. If you’re not sure about how to do this then I’d suggest you find out some of the basic principles associated with semantic markup (Google is your friend here, there are plenty of great resources – but here’s a starter I just came across). Don’t worry about elements which involve animation or special user interaction at this stage – just set aside a part of your HTML where such elements need to go for now
2. Use CSS to layout the document structure with the desired appearance. Do this one step at a time – starting from the largest elements in the page and working your way down to the smallest ones (I find this the best way to build your UI reliably though others may approach it differently).
3. Once your basic pages are structured correctly and looking good it’s time to focus on the animated/interactive aspects. The easiest way to do this is to use other people’s work: jQuery plugins. Identify what functionality you need and find plugins that already provide that functionality (i.e. you mentioned a slideshow function – Google for “jQuery slideshow” and play around with the options – there will be plenty).

Realistically, if you’re not particularly familiar with HTML/CSS/JS this will not be a simple task for you. Here’s a few other thoughts that might help you:

• Focus initially on the content structure: if you get this right everything else builds on top of it with much less pain. In addition, Google really likes good document structure so this will go a very small way to getting the site better search result rankings.
• Don’t worry too much about HTML5: aside from the fact that you have to do extra work to make it fully browser compatible (at least, if you have need of a great deal of browser compatibility), it just isn’t really necessary to take advantage of elements like nav or video yet (unless your client won’t allow the use of Flash video – but that’s for another discussion). Don’t bite off more than you can chew.
• Be consistent, this is related to the first point above – if you apply structure to your elements consistently across all of your documents you can then take advantage of the same CSS and JS much more easily.
• As for the w3schools comments elsewhere on this page, I would say don’t use them for tutorials – but they can be a useful reference source for learning HTML elements and attributes and for CSS rules (although there are many other sites who could help here).

Well, I hope this helps you out. Sorry I can’t be more specific but I’d need a much more detailed description of your problem before I could give you much more… Good luck