4

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?

Improve this question
6
  • 2
    Wow, I'm sorry. There is no easy way to do this. If you have the original flash document (a .fla file), you can start by exporting the pictures used and recreating the structure. If you don't have the original flash documents, I feel even worse for you. Flash files are like PDFs in the print document world - they are meant to be accessed, not rewritten. Commented Jan 23, 2012 at 21:24
  • @Lamariffic That's true insofar as they're not meant to be rewritten in other formats. PDFs and flash files can be easily modified from the proper Adobe products, porting them to other formats is the nightmare. Commented Jan 23, 2012 at 21:30
  • You are right! I have the project that has swf file. So we need the source of flash to recreate it using javascript/jquery. Let me try asking about the source. Commented Jan 23, 2012 at 21:36
  • Is it possible to convert swf to .fla ? So I can start exporting the pictures used? Commented Jan 23, 2012 at 21:57
  • Try if at ALL possible to get the fla file and any other objects used to make the flash page. If you don't have the .fla, the best you can do is use print screen and then slice the images out with Photoshop or Gimp. If you have videos, you MUST get the original somehow. If there are animations, there is no way to port them to jquery - you will have to remake them. Work at building your static site and functionality first with html/css, then add the animations later with jQuery. Commented Jan 24, 2012 at 14:39

3 Answers 3

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Glad I could help. Don't forget to mark the correct answer (this or whichever other answer helps you most). It's really useful for people with the same problem to know which answer solved a particular problem. Just mentioning this because you're new here. Cheers,
0

1) Learn Flash (hopefully you've achieved that)

2) Learn Javascript. Learn html5. There are a lot of resources and tutorials.

3) Take the source of flash project. Read it and slowly rewrite to javascript.

4) Once you have translated the project, it is propably suboptimal. Think in javascript to change some flash-like constructions into javascript-like. Do minor optimizations until you're happy with results.

Improve this answer

4 Comments

You can skip 1) and 3) if it's just normal web pages except made in flash. You can easily replicate that without needing the flash source. 5) is the most important step
Thanks for the answer.. So i will ask for the source of the flash to start with..
@Esailija The website is normal , it uses flash for front page slideshow with some interaction, and banners in some other pages.
No need for Flash
0

Have you tried Wallaby or Swiffy? Adobe is reacting to the demise of excessive Flash usage in other ways too.

Improve this answer

2 Comments

Well, it was 2012! I could delete the answer if you think it needs to go…
Not exactly. It was good to know where the industry went and what changes we need to make to a project. I just thought that "information is outdated" had to be underlined here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.