Using a flash drawing program to create dynamic HTML possible?

Question

I am interested in developing an application where people can draw the background to their personal homepage using a generic flash drawing program (like graffiti app on facebook.. something very simple). I have little/no experience with flash, but I assume I could simply output the drawing as an image file and have that be the background. That seems easy enough.

The real question is how to then incorporate simple HTML into it. I see problems in regards to different screen resolutions and browsers. For example, the most basic setup would be drawing a picture and incorporating a search box. Let's say the search box (fixed HTML code) was an option to be dragged into the flash program onto the canvas. Is there any way to get around how/where the HTML would show up on different screen resolutions and browsers? I feel like as the browser is enlarged, the alignment of the picture with the HTML would get messed up. Would only allowing fixed image sizes solve it?

Any ideas on how to implement something like this? Would be greatly appreciated!!

Answer 1

Overall, I think the simplicity of the functionality you're seeking betrays how complex this may be. I would start by breaking down your problem into components:

• Producing a user-created image
• Applying an image as a background
• Getting that image to look good & behave like you want it to

For each, there are more than one way to approach the problem.

For producing the image in Flash, note that unless you're using a ready application/plugin, your users will likely need drawing options, such as different sizes pens, colours, erase, etc. If you have limited experienced in Flash, building these will be a serious challenge. Alternatively, there are some Jquery/Javascript drawing plugins with ready drawing options that you could look into. They are likely to be far simpler to incorporate.

For the background image, adding HTML on top of it in a way that will look fine in all browsers won't be your problem. To give you a quick idea, you could either use the image directly in your HTML and overlay it with a div that contains your HTML code, or you could use Jquery (for example) to dynamically swap a div's background image. Depending on your image size and how you want it to behave, your image size and/or your HTML page width may need to be fixed (which is fine). If you insist on creating an image that dynamically stretches (i.e. where the image proportions change) as the browser window is resized, the task gets significantly harder.

Depending on your flexibility, there may considerably easier options available, such as just allowing users to upload a ready background image they've created on their own machines. If you want all that functionality to be on the web, you could possibly direct the users to a web-based drawing application/editor on another website where they can produce their images and then upload on your own site.

Hope that helps.

Answer 2

You should take a look at AIR.If you need an online application maybe you'll spot a way to link air with it.

AIR has HTML rendering capabilities.

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/ and click on flash.html in the Packages section

Answer 3

One way that many sites get around this (stackoverflow included) is to have a fixed width site that is centered vertically. This does require a minimum screen width, but provides a fixed layout with low complexity that still looks good on larger monitors.