507687 Flash Graphics Manipulation - Building image with layers

Summary: Since this can require multiple clicks and renders on each layer, I am thinking the most efficient way would be through flash. Feel free to make other suggestions if suitable and please mention the word cartoon in your quote. An image is built up through the user selecting various items (see attached layout) and uploading a photo of their face which shows through a blank area in the layers (they are transparent png files). In the example attached, the user would first upload their image (this is a preset stage)... then the image on the left would display the first layer which is just the gown & board. Then the user would click on a wig... it would appear in the image... they can keep clicking on wigs until they are happy... then they click next.. then they select from "what are you holding?" etc.... The layers and available items within those layers are database driven (mysql) - details below. Once the building process is complete - the positional parameters need to be passed to a script we already have for rendering the images. Details: Process is as follows (database details are below): Default to project id 1 unless a parameter is passed to script Display page as in attached JPG: The image displayed initially is from project.p_image The steps on the right... 1) is upload image... then 2) is the first "layer" record... 3) is the second... etc... So... each image step as follows: User can click on an thumb in the step The preview image on the left will show the image up to this point The user can then click a different icon from the same layer and the preview image will change EXAMPLE: WIG stage, they can click the red wig... the image on the left shows the red wig, they then click the blue wig, the red wig is replaced in the image by the blue... and so on until they select NEXT or PREVIOUS Once the user clicks the NEXT button they will proceed to the next step When a user clicks on a THUMB or the current stage is skipable, the NEXT buttons will appear, otherwise they will disappear or be greyed. When the user is past step 1, a Previous Step button will appear If l_allow_skip is true, display the SKIP icon and allow NEXT without selecting/processing an image on that layer At the last stage - generate the images Now go to new screen... displaying the result image on the left (can make it a little bigger than the working image) Display download link (for low res image) Display email this to your friends box... with from email / from name / to emails / to names OTHER NOTES -------------- CONVERT CODE TO USE IMAGE MAGIK or whatever it was called! Your page will have CSS or include files so I can easily include header and footer HTML (sidebar will be in same include as footer). Note... the step is only displayed where interaction is required.. so for example, if there is only 1 layer_image record and l_skip_allowed=false, just add the layer at the correct sequence without interaction (bear in mind that back will have to go back to the previous interactive step). The current step is highlighted so it is clear which step the user is on. Please add a configuration variable [render_at_each_stage]... if set... you should render down to a flat image after each NEXT button... I think we will probably need this for performance. Obviously BACK will be simpler if you retain the layers... but will be memory intensive so... Add special admin option which allows user positioning of every layer and stores the X/Y co-ords in l_pos_x/y (Graphics in /images folder at [login to view URL]) DATABASE SCHEMA ---------------- layer: `l_id` int(13) [unique id] `p_id` int(13) [link to project] `l_seq` int(4) [display and process the layers in this order] `l_name` varchar(128) [unused] `l_prompt` varchar(255) [Displays as box heading] `l_type` enum 'image' -> [use layer_image table for list of images for this layer],'text' -> [simple text layer],'upload'-> manipulate uploaded face image here - I think its probably better to upload the image first... and just resize/move it at this step `l_pos_type` enum 'user' -> [place at l_pos_x/y and user can move this] 'preset' -> [ place at l_pos_x/y and user may not move ] `l_pos_x` int(9) `l_pos_y` int(9) `l_allow_skip` smallint(1) [if true display SKIP icon and allow user to skip this layer] layer_image: `li_id` int(13) [unique id] `l_id` int(13) [link to layer] `li_seq` int(5) [display image icons in this order] `li_thumb` varchar(64) [this is the thumb image to display] `li_image` varchar(64) [the actual image which is used for building the result] project: `p_id` int(13) [unique id] `p_name` varchar(128) `p_thumb` varchar(64) `p_image` varchar(64) [This is the image you should display before the user clicks on the first layer] `p_edit_percent` int(3) [Use this as the percent size you will display the image when editing]