part 3. slide shows / animations
DESCRIPTION
Part 3. Slide Shows / Animations. Storyboards show scenes and transitions The viewer has to assimilate these into a fluid interface. Instead, interactive slide shows and simple animations can make storyboards come alive. Method 1: Linear storyboard stack. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/1.jpg)
Part 3. Slide Shows / Animations
Storyboards show scenes and transitions
The viewer has to assimilate these into a fluid interface.
Instead, interactive slide shows and simple animations can make storyboards come alive
![Page 2: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/2.jpg)
Method 1: Linear storyboard stack
Stack storyboard scenes atop each other• make sure they register
Click on interface element • enacts the transition
![Page 3: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/3.jpg)
Storyboard of a computer telephone
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Help->
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
Call connected...
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Connected
Hang up
Call completed...
Return
Help Screen You can enter either the person's name or their number. Then hit the place button to call them
Call by name->
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Establishing connection->
![Page 4: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/4.jpg)
Home screenAsk for help
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
![Page 5: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/5.jpg)
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Help screenReturn to home screen
Return
Help You can enter either the person's name or their number. Then hit the place button to call them
![Page 6: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/6.jpg)
Home screenType last name
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
![Page 7: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/7.jpg)
Home screenName entered
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Greenberg
![Page 8: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/8.jpg)
Home screenType last name
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Greenberg
![Page 9: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/9.jpg)
Dialling…
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
![Page 10: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/10.jpg)
ConnectedHang up when done
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Connected
Hang up
![Page 11: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/11.jpg)
Home screen
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
![Page 12: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/12.jpg)
Button
Lets do it again: Simple animation
Motion paths• Custom animation / Add Effect / Motion Paths /
Draw Custom Path / Curve
![Page 13: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/13.jpg)
Button
Lets do it again: Simple animation
Simulate Button Press• Create a 2nd button that is shaded• Place atop first button• Add Effect – Appear• Option menu: Start after previous• Effect Options: Sound / Click• Note stacking order, front to back
Button
![Page 14: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/14.jpg)
Button
And again: Simple animation
Simulate Click and unpress• Create a 3rd button that is a copy of the first• Place atop 2ndbutton• Add Effect – Appear• Option menu: Start after previous• Effect Options: Sound / Click• Effect Optons: Timing 1 secs
ButtonButton
![Page 15: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/15.jpg)
Constucting a simple animations-these are the elements-add motion path-make shaded button appear with click sound-make clear button appear after 1 sec-make help appear after .5 sec as a dissolve-add motion path to Return-make help exit with dissolve
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Computer Telephone
Last Name: First Name: Phone:
Place Call HelpReturn
Help You can enter either the person's name or their number. Then hit the place button to call them
Help
Help
![Page 16: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/16.jpg)
Constucting a simple animations-add motion path-make shaded button appear with click sound-make clear button appear after 1 sec-make help appear after .5 sec as a dissolve-add motion path to Return-make help exit with dissolve
Computer Telephone
Last Name: First Name: Phone:
Place Call HelpHelpHelp
Computer Telephone
Last Name: First Name: Phone:
Place Call HelpReturn
Help You can enter either the person's name or their number. Then hit the place button to call them
Aint that sweet!
![Page 17: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/17.jpg)
Interactive Transitions by Hyperlinks
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Computer Telephone
Last Name: First Name: Phone:
Place Call HelpReturn
Help You can enter either the person's name or their number. Then hit the place button to call them
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Greenberg
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
12
34
Create four independent slidesFor each button, select it andhyperlink to the appropriate slide.Add animation as needed
![Page 18: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/18.jpg)
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Help: Hyperlink to next slidePlace call: Hyperlink to 3rd slide
1
![Page 19: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/19.jpg)
Return: Hyperlink to previous slide
Computer Telephone
Last Name: First Name: Phone:
Place Call HelpReturn
Help You can enter either the person's name or their number. Then hit the place button to call them
2
![Page 20: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/20.jpg)
Hyperlink Place call to next slideNote: Greenberg appears as a wipe add…
Computer Telephone
Last Name: First Name: Phone:
Place Call Help
Greenberg
3
![Page 21: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/21.jpg)
Continue as neededEg., cancel returns
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
4
![Page 22: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/22.jpg)
Scan the stroller ->
Change the color ->
Place the order ->
Initial screen
![Page 23: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/23.jpg)
Scan the shirt ->
Touch previous item ->
Delete that item->
Alternatepath…
![Page 24: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/24.jpg)
CrossY Prototype for Tablets
Inspired by the CrossY system: http://www.cs.umd.edu/hcil/crossy/ by Apitz and Guimbretiere
![Page 25: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/25.jpg)
CrossY Prototype for Tablets – How?
Draw static elements• color palette, line triangle • drawn lines, rectangles colored to background yellow
Find hand drawing image• clip art• made white background transparent
Animate using motion paths• Uncovering = drawing
o lines: underneath yellow rectangleso motion paths of hand and rectangle are the same
![Page 26: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/26.jpg)
Simple Interface: PostIts & Video
From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site
![Page 27: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/27.jpg)
One vs. Two Finger Scaling
From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site
![Page 28: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/28.jpg)
One vs. Two Finger Scaling
From Bill Buxton Sketching User Experiences, Morgan Kaufman Web site
![Page 29: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/29.jpg)
One vs. Two Finger Scaling - How?
Draw • individual rectangles as multiple sketch
Photograph and cut out • left / right index fingers: extended & bent• position over the rectangles as needed
Assemble • as single frames in Windows Movie Maker
Render• as movie
From Bill Buxton Sketching User Experiences, page 305
![Page 30: Part 3. Slide Shows / Animations](https://reader033.vdocuments.site/reader033/viewer/2022051401/56813d65550346895da73fa6/html5/thumbnails/30.jpg)
From Bill Buxton Sketching User Experiences, page 302
One vs. Two Finger Scaling - How