Flash: Interactive Web–Based JPG Hotspot Editor

Flash: Interactive Web–Based JPG Hotspot Editor PLEASE READ the entire project requirements below BEFORE submitting a bid. If you have questions, please ask via PM. PURPOSE OF PROJECT: *************************************** We need a web based flash application to allow the end user to interactively add/edit/delete up to 9 “hotspots” for a single wide JPG image. We will pass the flash application the image to show, the existing hotspots locations (if any), and the associated links for each. The flash application then takes over and interactively allows the user to add/change/delete the hotspots on the JGP image. When the user is done editing hotspots, the flash application calls our server script and sends back the hotspots locations and links for each. The data return MUST be done via a web form POST to our server script using pre-defined form fields and values. More on this below. The flash application needs to be efficient, easy to use, and error free. Since we don’t know what design you may use for the application’s user interface, we reserve the right to request adjustments to the interface and controls to meet our needs / expectations as the project unfolds. This time and cost for this must be included in your bid. We suggest you create a couple of mock-up examples of the user interface before performing the actual coding. That way we can approve or select the interface that we would like to see used for the application. JPG IMAGES *************************************** Expended Range of JPG Image Size: 100-2879 pixels Wide by 100-400 pixels High: Test Images you can use: [login to view URL] [login to view URL] [login to view URL] If the jpg image exceeds the max width (2880 pixels) supported by flash, then truncate image at pixel 2880 during editing. Here is an example of a JPG that is too wide: [login to view URL] VIEWER & HTML *************************************** Information we will pass you when we call the flash pano: 1) the web page will include a block of html code to call the application. It will look something like this: VIEWER DISPLAY CONTROL *************************************** Notice the application window is stated as 500w x 400h in size. Since the expected JPG image will most likely be around 2800 w x 400 h, the application window will need to allow the user to scroll around the image in two ways: 1) using the mouse cursor (click and drag the image to scroll in any direction) as well as 2) with the control buttons. See this example: [login to view URL] VIEWER CONTROL BUTTONS *************************************** The control buttons perform the following functions (from left to right): Pan Image Left, Pan Image Right, Zoom In, Zoom Out, Display URL Help Page XML CONTROL FILE *************************************** Notice the Name of the application followed by the command line argument: XMLFile= Qparms/[login to view URL] This tells the flash application the directory and file name of the UNIQUE XML file to parse when loading the application. This file will contain XML data for the application to use. Data such as the name of the image file to display and the existing hotspots and links for the scene. This file will also contain other important information that will be used when POSTING the hotspot data back to the server CGI program. Expected data is in XML file (expect some changes to this list during project development) 1) The location on the server and name of the JPG image file to display for hotspot editing 2) Position information for 0 to 9 existing hotspots for the image. Since each hotspot is a rectangle area, we will need to pass will be the Upper Left and Lower Right coordinates (x1, y1 + x2, y2) of each hotspot in pixels. You can then identify, position, and draw the hotspot area overtop of the JPG image in the editor window. A hotspot area needs to be shown as a four corner re-sizeable control overtop of the JPG. The user can move, drag, or resize the area on the screen using the mouse. Inside the hotspot area, you need to display a number from 1 to 9 to designate which hotspot number it is. The number will correspond to fields below the window editor where the user can select the scene link for the hotspot. 3) For each existing hotspot 1 through 9, we will need to pass you the existing scene link name (if any). For more information on scene link names, see the next item. 4) A list of up to 99 “scene names” which can be used as the link for any one of the 9 hotspots. Example scene names would be “Living Room”, “Dining Room”, “Kitchen”, etc… These will be presented to the user in a drop down list for selection as the link for a hotspot. When the user selects an individual scene name as a link for a hotspot, you will need to return the link name for the hotspot as part of the form post back to the server CGI program. 5) Form fields and values to “echo” back to the server script. We will send these to you in the XML file and all you need to do it send them back by the same name and value. We will use them to control certain aspects of the form posting. 6) The name and location of the server CGI program to POST the form data back to. NOTE: the actual XML format and tag names to be determined as the project unfolds. USER INTERFACE *************************************** Here is a sample of what we would like see as far as the flash application’s user interface: [login to view URL] This is an idea of what we want to see. You may enhance it to use nicer buttons/graphics in flash. INTERFACE NOTES: n for an image with no hotspots, there will NO EDIT or DELETE buttons. Only ADD buttons will appear. n When a hotspot exists, a delete button will appear to allow for removal. No add button appears. n Clicking a delete button removes the hotspot from the viewer and sets the scene link to NONE. Its edit button is removed and replaced with an ADD button. n When the edit button is clicked, the corresponding hotspot over the JPG will change to red. The other hotspot areas will be shown in black like in the example (#1 is active, #2 is not). n When the edit button is clicked, the viewer is repositioned show the hotspot to the user (somewhere in the middle of the viewer). n If a user clicks on a hotspot area in the viewer, it becomes the active hotspot for editing. It changes to red (instead of black) and its edit button shows it has been selected or clicked. n Only one edit button at a time can show selected/clicked. n Hotspots over the JPG image can be resized simply by clicking and dragging the handles in their corners. They can be moved by clicking and dragging the hotspot in the middle. n When an add button is clicked, place a new hotspot area (in red) into the middle of the viewer. Change the add button to an edit button that is selected. n When the viewer is panned/repositioned, the hotspots move along with the image so they remain over the same position in the JPG image at all times. n The DONE EDITING HOTSPOTS cannot be clicked unless all active hotspots have a scene link selected (cant be NONE when active). FORM POSTING & FIELDS *************************************** NOTE: Form posting field names to be determined as the project unfolds. BIDS *************************************** a) You must provide us with online proof that they have the expertise or previous similar experience to handle this project. b) Your bid must be the total cost of the project including supplying the flash source code with documentation. c) [login to view URL] escrow service will be used for this transaction d) We will award the bid and development work will start. e) During development and testing, we will require that you supply us with a fully working flash application for testing. However, until we pay you from escrow, the flash application can say “Unpaid Demo Application” in the upper left corner of the viewer. f) Once we have completed testing and the flash applicationhas been be completed, the “Unpaid Demo Application” will be removed from the viewer. You will then send us the final swf runtime file as well as the flash source code. Documentation must also be provided as to the XML input fields and return form post fields. At that point we will release the escrow money to you and the project will be complete. g) You bid must also include fixing any bugs found in the software after escrow money has been released.