Challenge Summary
The goal of this competition is to create the Flash file for the Photo Hunt Widget based on the provided storyboard designs.
This widget is designed for users to play a picture compare game. Two pictures that, at a glance, look like the exact duplicates are quickly found to have some minor differences. A total of 5 differences per picture should be implemented for each picture. Game includes 5 different sets of pictures for comparison.
This widget must be visually fun and engaging. The Flash animation should include innovative transitions and subtle yet engaging animations.
The widget is to engage and delight users, keep them coming back to play the game and for people to share/compete with one another. For this contest, you must take the provided storyboard designs and convert it into an exciting Flash application. Additional screens to be created not reflected in the attached storyboard. Examples provided. The most important aspect of this widget is providing a very easy to understand user experience. The user should not have to think about what to click, where to go or how to receive the information. All animations, transitions and interactivity should be innovative but subtle. Functional Overview Main Screen Initial Screen "Photo Hunt" create as depicted in attached design storyboard - Start, Option, How to play, Top rank (or change name to Leader Board) Start Implement as reflected in the picture comparison screen (screen 3 in attached storyboard). - Green dots fill in as person finds differences. - Time displayed should be countdown functional depending on the amount of time the user selected under the Option screen - not yet developed (described below). - If no time selected, timer should reflect unlimited. - Flash to be implemented in such a way as the user can not simply scan their mouse over the picture and wait for the hand to appear indicating clickable and correct answer. Clicking on a non-correct area does nothing. Option New Screen - not reflected in the storyboard - needs to be created. Instead of creating new screen, proposing that these elements be added to the bottom of the "How to play" screen. Option to include: - Select Time to Beat (seconds) 30, 60, 90. - Stress Free: Unlimited. How to Play As mentioned above the Option and How to Play screems can be combined into one screen if size permits. The image reflected in the storyboard in How to Play can be removed if this provides for more room in combining Options/How to Play. Game Over Implement as designed in the storyboard, with the following changes. - Score: total possible points 5 per picture, 5 pictures = 30. Place total number of correct answers into this field. - Rank: Display a rank of Beginner, Intermediate, or Expect based on the scoring calculations outlined under leaderboard. - Remove Difficulties as reflected in Storyboard - Change Timer to say Time and display total amount of time it took the user to finish. Times Up Screen This is a new screen not reflected in the storyboard. If a user selects a time of 30 seconds and does not finish the game within 30 seconds please display a message/screen that says something like "Times Up - Please try again" (could maybe add something funny into the error message) with the following navigational button (same style as Game Over screen) - Play Again - function of this option: Play Again, simply starts the same game over again with the same 5 pictures (new images will get integrated into the widget on a weekly basis). - Top Rank or Leaderboard - function of this option - displays Leaderboard or Top Rank Screen - Share with Friends - will point to Facebook API functionality placeholder screen. Share with Friends Screen not relected in the storyboard design and will need to be created. When the user selects the Share with friends option please create the look and feel that will get integrated into final version using Facebook's Invite Friends view API. See attached example: share-with-friends.jpg Design should match overall storyboard design. Top Rank (or Leader board) Screen not reflected in the storyboard design and will need to be created. -Leaderboard should reflect the 3 categories mentioned above: - Expert - Intermediate - Beginner The persons rank should based on the scoring calculation (1-10 correct = Beginner, 11-21 correct = Intermediate, 22-30 = Expert). -Best Time should also get displayed. Best time = per game, not cumulative per person. See 15750 Leader board as an example. Design and Interaction Considerations - The look and feel of this widget is set in the provided storyboard designs and should be followed. - Any other transitions, button hover states, interactions or animations are up to you. Please keep in mind that they should support the information and NOT distract from it. Special Note: Please make it easy to load new image sets - since the widget will get updated on a weekly basis with a new game. It will take more than just importing the images since the location of the differences in the images is crucial. There will probably need to be an accompanying XML file or something that lists the coordinates of the 5 differences in each photo. 5 photos included for this for game set. Code Considerations: - Must be developed in Flash using Actionscript 3 (AS3). - Compiled .SWF should <50k - Graphics must be rendered dynamically or imported from external source. - Avoid using any references to the 'stage' -- otherwise, the widget will not function correctly on certain platforms. - DO NOT use 'navigateToURL'; in it's place, use widget.navigateToURL(new URLRequest("http://www.somesite.com")) [A FUNCTION HAS BEEN INCLUDED - SEE THE ATTACHED MAIN DOCUMENT CLASS TEMPLATE] - Download and Install the wAPI (Flash CS3/CS4 Professional Required) at http://www.yourminis.com/developers/files/as3/yourminis-widget-api.zip. Download wAPI, un-zip, and double-click the widget.mxp to launch the adobe extension manager. Open the wAPI Widget Panel - This panel allows you to click a button within the IDE to TEST your widget. Open up the Widget Panel under Window -> Other Panels -> Widget Panel. You can move this panel and size it to your liking, and when you are ready, simply click the "LAUNCH" button to test out your widget locally. Widget Elements - Please add a Snag & Share button somewhere on the widget. Does not have to be functional but should include subtle animation. Project Considerations You will be designing a yourminis widget, so please be aware of the "look & feel", structural and technical considerations. More information about yourminis can be found here: http://dev.aol.com/api/yourminis/ http://www.yourminis.com/ http://www.yourminis.com/developers/docs.aspx http://dev.aol.com/blog/johnfronck/yourminis Judging Criteria Your submission will be judged on the following: - The smoothness of the animations and transitions. - Inclusion of all hover states for each clickable area including buttons, text links, body parts etc. - Retention of the visual design, layout and organization from the provided storyboard design to the functional Flash widget. - Organization and cleanliness of the Actionscript code. You MUST use AS3 in this contest. Preview Image For this contest, please use a screenshot within the widget that demonstrates some interaction or transition. Do NOT alter, skew or add dramatic effect to this image. The client will need to review the look and feel of the submission as is.
Entries must be your original work, and must not infringe on the copyright or licenses of others. Stock art, clip art, stock photography, templates and other design elements from other sources are prohibited unless specifically permitted here in the Contest Details.
The widget is to engage and delight users, keep them coming back to play the game and for people to share/compete with one another. For this contest, you must take the provided storyboard designs and convert it into an exciting Flash application. Additional screens to be created not reflected in the attached storyboard. Examples provided. The most important aspect of this widget is providing a very easy to understand user experience. The user should not have to think about what to click, where to go or how to receive the information. All animations, transitions and interactivity should be innovative but subtle. Functional Overview Main Screen Initial Screen "Photo Hunt" create as depicted in attached design storyboard - Start, Option, How to play, Top rank (or change name to Leader Board) Start Implement as reflected in the picture comparison screen (screen 3 in attached storyboard). - Green dots fill in as person finds differences. - Time displayed should be countdown functional depending on the amount of time the user selected under the Option screen - not yet developed (described below). - If no time selected, timer should reflect unlimited. - Flash to be implemented in such a way as the user can not simply scan their mouse over the picture and wait for the hand to appear indicating clickable and correct answer. Clicking on a non-correct area does nothing. Option New Screen - not reflected in the storyboard - needs to be created. Instead of creating new screen, proposing that these elements be added to the bottom of the "How to play" screen. Option to include: - Select Time to Beat (seconds) 30, 60, 90. - Stress Free: Unlimited. How to Play As mentioned above the Option and How to Play screems can be combined into one screen if size permits. The image reflected in the storyboard in How to Play can be removed if this provides for more room in combining Options/How to Play. Game Over Implement as designed in the storyboard, with the following changes. - Score: total possible points 5 per picture, 5 pictures = 30. Place total number of correct answers into this field. - Rank: Display a rank of Beginner, Intermediate, or Expect based on the scoring calculations outlined under leaderboard. - Remove Difficulties as reflected in Storyboard - Change Timer to say Time and display total amount of time it took the user to finish. Times Up Screen This is a new screen not reflected in the storyboard. If a user selects a time of 30 seconds and does not finish the game within 30 seconds please display a message/screen that says something like "Times Up - Please try again" (could maybe add something funny into the error message) with the following navigational button (same style as Game Over screen) - Play Again - function of this option: Play Again, simply starts the same game over again with the same 5 pictures (new images will get integrated into the widget on a weekly basis). - Top Rank or Leaderboard - function of this option - displays Leaderboard or Top Rank Screen - Share with Friends - will point to Facebook API functionality placeholder screen. Share with Friends Screen not relected in the storyboard design and will need to be created. When the user selects the Share with friends option please create the look and feel that will get integrated into final version using Facebook's Invite Friends view API. See attached example: share-with-friends.jpg Design should match overall storyboard design. Top Rank (or Leader board) Screen not reflected in the storyboard design and will need to be created. -Leaderboard should reflect the 3 categories mentioned above: - Expert - Intermediate - Beginner The persons rank should based on the scoring calculation (1-10 correct = Beginner, 11-21 correct = Intermediate, 22-30 = Expert). -Best Time should also get displayed. Best time = per game, not cumulative per person. See 15750 Leader board as an example. Design and Interaction Considerations - The look and feel of this widget is set in the provided storyboard designs and should be followed. - Any other transitions, button hover states, interactions or animations are up to you. Please keep in mind that they should support the information and NOT distract from it. Special Note: Please make it easy to load new image sets - since the widget will get updated on a weekly basis with a new game. It will take more than just importing the images since the location of the differences in the images is crucial. There will probably need to be an accompanying XML file or something that lists the coordinates of the 5 differences in each photo. 5 photos included for this for game set. Code Considerations: - Must be developed in Flash using Actionscript 3 (AS3). - Compiled .SWF should <50k - Graphics must be rendered dynamically or imported from external source. - Avoid using any references to the 'stage' -- otherwise, the widget will not function correctly on certain platforms. - DO NOT use 'navigateToURL'; in it's place, use widget.navigateToURL(new URLRequest("http://www.somesite.com")) [A FUNCTION HAS BEEN INCLUDED - SEE THE ATTACHED MAIN DOCUMENT CLASS TEMPLATE] - Download and Install the wAPI (Flash CS3/CS4 Professional Required) at http://www.yourminis.com/developers/files/as3/yourminis-widget-api.zip. Download wAPI, un-zip, and double-click the widget.mxp to launch the adobe extension manager. Open the wAPI Widget Panel - This panel allows you to click a button within the IDE to TEST your widget. Open up the Widget Panel under Window -> Other Panels -> Widget Panel. You can move this panel and size it to your liking, and when you are ready, simply click the "LAUNCH" button to test out your widget locally. Widget Elements - Please add a Snag & Share button somewhere on the widget. Does not have to be functional but should include subtle animation. Project Considerations You will be designing a yourminis widget, so please be aware of the "look & feel", structural and technical considerations. More information about yourminis can be found here: http://dev.aol.com/api/yourminis/ http://www.yourminis.com/ http://www.yourminis.com/developers/docs.aspx http://dev.aol.com/blog/johnfronck/yourminis Judging Criteria Your submission will be judged on the following: - The smoothness of the animations and transitions. - Inclusion of all hover states for each clickable area including buttons, text links, body parts etc. - Retention of the visual design, layout and organization from the provided storyboard design to the functional Flash widget. - Organization and cleanliness of the Actionscript code. You MUST use AS3 in this contest. Preview Image For this contest, please use a screenshot within the widget that demonstrates some interaction or transition. Do NOT alter, skew or add dramatic effect to this image. The client will need to review the look and feel of the submission as is.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.