Question

I’m a long-time Flash developer who’s recently decided to dive into HTML-based web apps, since, in my opinion, HTML5 provides a really compelling alternative to Flash.

(Not in every case – each technology has it’s strengths and weaknesses – but HTML5 has a lot going for it).

Anyway – I can’t speak for anyone else – but any time I dig into a new technology/language – I need to get my head around some core concepts.

One of the notions for me that’s starting to gel is that divs in HTML are reasonably equivalent to movie clips (or sprites) in Flash.

In other words – wherever i’d use a movieclip/sprite in Flash – I’m now using a div.

Two key points of clarification:

1. I’m specifically ignoring the timeline concept, since I never used that in Flash anyway. In my mind, movie clips/sprites are just “objects” with visual properties that I could manipulate with code

2. I’m tending to use absolute positioning with divs, since A) that’s how I thought of things in Flash (x, y, and z, coordinates), and B) with web apps, the UI elements of app “screens” tend to have fixed positions, and don’t “flow” with variable-length content

So – my question, for those who consider themselves reasonably expert with both HTML and Flash…

Is this a useful/accurate comparison?

Or, do I have have an incorrect understanding of how divs should be used?

What fundamental ways are they different?

What trouble am I likely to get into based on this assumption?

Many thanks in advance!

Answer 1

Yes, in most cases you will be using div in HTML, where you would use a MovieClip (or Sprite) in Actionscript. Here are a couple of situations where a div alone won’t be enough:

• divs do not have the EnterFrame event. You’ll need timers to emulate that, or some sort of animation library (jQuery’s .animate() should do the job in most cases).
• If you use methods from the AS3 Graphics class (as in mc.graphics.beginFill(0xff0000)), you’ll may need to use HTML5 canvas instead. For example, if you need a circle, you can either use canvas, or use an image instead.

Also, you’ll have to keep your eyes open for browser support limitations on many HTML5/CSS3 features. For example, rotating a MC in AS is a no-brainer, but in HTML5 it’s not supported in all browsers.

I know this is not a complete answer, but I hope it helps!