G050 Lecture 04 IMMP Design Methodology

Presentation on theme: "G050 Lecture 04 IMMP Design Methodology"— Presentation transcript:

1 G050 Lecture 04 IMMP Design Methodology
4/21/2017 G050 Lecture 04 IMMP Design Methodology Mr C Johnston ICT Teacher

2 4/21/2017 Session Objectives Know the methodology behind the design of Interactive Multimedia Products, Commence design documentation for your product.

3 4/21/2017 Design Overview Good interactive multimedia products of any nature need to be designed carefully, Good design gives the best opportunity for the product to be delivered on time, meeting the user requirements and functional, There are a number of different tools and techniques which can be used to ensure good design.

4 Design Tools and Techniques
4/21/2017 Design Tools and Techniques A design specification including a clear statement of purpose, user requirements and technical requirements, Initial ideas for your product including the elimination of inappropriate or technically impossible content, Storyboards for each scene including annotation describing the content, Flowcharts showing how interactivities work Time lines showing any element timings on the scene, Structures diagrams showing how scenes link together, Task list / Action Plan / Gantt Chart Design of master page / house style if not already overt.

5 4/21/2017 Design Specification The design specification is a written document which sets out what is going to be made, and the criteria for its success, Your design specification will need to include: A description of the product you intend to produce What is the aim of the product, who will use the product (the audience), why is it required? Describe the user requirements A detailed list of what the product must be able to do when it is finished, Technical requirements Hardware and software required to develop the solution Hardware and software (especially input and output devices) required to run the product once it has finished

6 4/21/2017 Initial Ideas Initial ideas are a brain storm of ideas – (content, features, interactivities) which could feature on each scene, You could produce a mind map showing your thoughts – software for this is included on my website, To get higher marks for you design section you need to add some rationale to the ideas – recommending some ideas and discounting others for valid reasons. This is not the best idea as I don’t know anything about mortgages and trying to code a mortgage calculator without knowing anything may lead to me misleading visitors to my website and giving them incorrect mortgage payments. Mind map for a website homepage

7 Storyboard - Scene Designs
4/21/2017 Storyboard - Scene Designs Each scene within your interactive multimedia product will need designing, Using a storyboard with annotation is a suitable way of showing your ideas, Storyboards at for band 1/2 level will have sufficient detail to be implemented by somebody else, Storyboards for band 3 will clearly show all content and note why particular images, fonts, music colours have been chosen, and a possible source for them.

8 Example Storyboard Design
4/21/2017 Example Storyboard Design 8

9 Storyboard - Annotation
4/21/2017 Storyboard - Annotation Annotation will: Describe the scene – give an overview of what is going on Identify sounds including – sound effects, backing music, narration Identify images – if not clear from design be specific as can e.g. Black and White Labrador - NOT JUST - picture of a dog Colour scheme??? Should be clear from the design really Identify font face, size, style – use font list to find exciting faces Identify video – brief description of what video will be about Identify animation – show motion paths, scene transitions, element transitions, tweens, GIFs Give a potential source for assets

10 OPUS Types of Animation
4/21/2017 OPUS Types of Animation Tween Animation The Tween object allows sophisticated animations to be created very easily and even includes shape tween animation. Simply create the state of the object at the beginning and the end, and/or at key points along the way. Path Animation Any object can be animated along a custom path QuickAnim And to get you started quickly we've even provided sets of preset animation actions which you can simply select from a list and apply to your object. Including Pulse, Acrobat, Spin Dry, Penguin Waddle, Kaboom and many more. Transitions The simplest animations are transitions which occur when the object appears on screen or when it disappears or is hidden by a Hide action. There are a wide range from simple fades and scrolls to 3D flips, page curls and kaleidoscope effects. All you do is pick the category and choose a transition and then decide how long it should take. Incorporate Existing Animations You can also include objects which are already animated such as Flash SWF files and videos and can even animate those again using the Opus animation facilities. So, for example, you could have a SWF of a flapping bird which you then animated along a path using Opus path animation tools.

11 OPUS Types of Transition
4/21/2017 OPUS Types of Transition Fades From a simple fade to a diagonal wipe, fades are probably the most commonly-used transitions alongside Scroll. Which is why we've also combined the two. Reveals & Blinds Another popular transitions style is the reveal and again we've also combined this with fade. Reveal your object from left, right, up, down or split into blinds. Scroll and Scroll Page Scroll Page simply brings the object on or off the screen in the direction chosen whilst Scroll will do the same but restricts the scroll to the frame which contains the object. Shapes and Shape Explosions Use circle, diamond, triangle and star shapes to uncover your object either as single shapes or in a variety of combinations including grids and explosions. Zooms Zoom your object in from a variety of directions - including centre out. Special For Windows publications we also have a wide range of special transitions such as Ghost and are also provided with directional variants. Text Animations Opus also includes a range of animations to bring text onto the screen. The animation can be applied to each letter, to each word or to whole lines. The options include many of those provided in transitions but with several special additions.

12 You could even add the transition effect to help with your annotation
4/21/2017 Time Lines Time lines are used in your planning to show the order in which elements will appear on the screen, Write a time scale down and then at different times place blocks on the diagram to represent different elements. Scene Background Background Music Main scene text – typewriter transition Main scene speech Image 1 - swirl Image 2 - swirl Image 3 - swirl Next Button - appear Scene Background Background Music Main scene text Main scene speech Image 1 Image 2 Image 3 Next Button You could even add the transition effect to help with your annotation

13 4/21/2017 Time Lines Rules Only include on your time line elements which automatically appear, Any elements which appear as a result of the user doing something (pop ups, rollovers etc.) are controlled by a flow chart.

14 4/21/2017 Flow Charts Flow charts are used to show how interactive elements on your product, What happens when you click a mouse, an object is dropped They show the coding which will be incorporated within the product, Flow charts are constructed using symbols to represent different instructions. START / STOP You can draw flow charts either manually or using the freely available yEd Graph Editor Software: DECISION INSTRUCTION

15 4/21/2017 Flow Charts Examples 15

16 4/21/2017 More Flow Charts

17 Flow Chart Exercises Draw a flow chart for each of these situations…
4/21/2017 Flow Chart Exercises Draw a flow chart for each of these situations… Will play a sound continuously when next button is clicked, Changes sound volume down when a button is clicked and up if double clicked, When a word is dropped in the correct place on the grid the word vanishes, 1 is added to the score, positive sound played and letters in word search grid are highlighted. If its not in the correct place it will be returned to where it came from, When an answer to a multiple choice question is selected all other options are locked…. If correct score added and positive sound if incorrect then bad sound, When a draggable item of rubbish is over a bin, the lid opens. If the item is dropped the item of rubbish is hidden the lid animates to look like chewing, lid opens again and a burp sound is made….. Before the lid shuts again…..

18 4/21/2017 QUESTION #1: Draw a flow chart which will - Play a sound continuously when next button is clicked

19 Are these two answers the same?
4/21/2017 QUESTION #2: Draw a flow chart which will - Change sound volume down by 10% when a button is clicked and up by 10% if double clicked Are these two answers the same? NO - if you check single click first, double click will never be detected because as soon as the mouse button is clicked once the actions for single click will run!!!!

20 QUESTION #3: Draw a flow chart which will - When a word is dropped in the correct place on the grid the word vanishes, 1 is added to the score, positive sound played and letters in word search grid are highlighted. If its not in the correct place it will be returned to where it came from 4/21/2017 How can we modify this so that a popup displays after 10 attempts have been made? 10 attempts means 10 goes – doesn’t matter if they are right or wrong NO.. DO IT PROPERLY – Need a variable to count the number of goes

21 QUESTION #4: Draw a flow chart which will - When an answer to a multiple choice question is selected all other options are locked…. If correct score added and positive sound if incorrect then bad sound, 4/21/2017 Is this the best way of getting the popup to show after 6 questions answered? NO.. DO IT PROPERLY – Need a proper decision which compares a variable which counts the number of questions answered How can we adjust this flowchart so that a good popup appears when score is above 4 otherwise the standard popup appears??

22 QUESTION #5: Draw a flow chart which will - When a draggable item of rubbish is over a bin, the lid opens. If the item is dropped the item of rubbish is hidden the lid animates to look like chewing, lid opens again and a burp sound is made….. Before the lid shuts again….. 4/21/2017

23 Example Storyboard Design
4/21/2017 Example Storyboard Design With flowchart and timeline Hmmmm not the best example, there's more on my website 23

24 4/21/2017 Structure Diagrams Structure diagrams show how the different scenes link together – they show the different navigation paths through the product, Interactive multimedia products can have three different types of pathways: Linear - one scene after another Index Scene 1 Scene 2 Scene 3 Scene 4 Hierarchical – like an organisation structure Index Scene 1 Scene 2l Scene 3 Scene 4l Mesh – each scene links to every other Index Scene 2 Scene 3 Scene 4l Scene 1l

25 Task list/Action Plan/Gantt Chart
4/21/2017 Task list/Action Plan/Gantt Chart This involves producing a list of tasks which need to be completed in order to complete the product, Timings will be assigned to each task so you have an idea of what needs to be completed when, You may wish to present this evidence as a Gantt chart made in excel.

26 4/21/2017 Producing Task Bi Need multiple designs to get any marks – more detail the better – remember content this was missed by many centres in Jun2010 session, Plans should be different designs for the same product, Write a script that covers the main content of each product, Create two different plans for the product - each plan needs to include: Suitable screen layouts including time lines / flow charts showing actions and details of navigation Structure diagram allowing alternative pathways Task list / action plan showing the development of the product (Gantt chart) Don’t forget to plan interactive elements, Use the examples on my website to help you - here is the design template 26

27 4/21/2017 Task Bi Annotation Annotation in this unit simply requires you to explain what items are and how they work – Not like G053 It is also useful to label your diagrams with a possible source, You may have to draw expanded diagrams to show how animations work, Additional notes sheets can be added – The next slides show plans for my Rough Horrid Henry product. 27

28 4/21/2017 Moderation Feedback 2012 “For task b(i) some candidates produced plans for completely different products; the requirement is to produce different designs for the same product. Content must be considered as part of the plan to access higher marks; some plans seen in this session contained very little indication of content. Some candidates that had been awarded mark band 3 had produced detailed designs, as required.” Principal Moderator - OCR Report to Centres June 2012 ©OCR 28

29 4/21/2017 Producing Task Bii Task Bii requires you to choose which of the designs for your product you will use, For band 3 you need to produce a critical analysis of the designs not just a description of them, Good and bad points of each design need to be clearly identified, A reasoned argument then needs to be presented explaining why the final design has been chosen and how it met the needs of the client. 29

30 4/21/2017 Moderation Feedback 2012 “Task b(ii) required a critical analysis of the designs in order to access higher mark points, not just a description of the designs. Good and bad points of each design need to be identified and a reasoned argument presented to explain why the final design was chosen by the candidate and how it met the needs of the client. Again, an analysis that was not critical in nature restricted marks awarded to a maximum of mark band 2.” Principal Moderator - OCR Report to Centres June 2012 ©OCR 30