fundamental of multimedia story boarding
TRANSCRIPT
FUNDAMENTAL OF MULTIMEDIA STORY BOARDING"
"By"
Dr. Rahmah Mokhtar "Faculty of Computer Systems & Software
"
CHAPTER DESCRIPTION!
• Expected Outcomes
• Inthischapter,Studentwillbeable - To understand the concept of storyboarding - To sketch the storyboarding based on their project
• References - TayVaughan.Mul;media:MakingItWork,NinthEdi;on.McGrawHill.2014.ISBN-13:978-0071832885.- Zhe-NianLi,MarkS.Drew.S&JiangchuanLiu.FundamentalsofMul;media(TextsinComputerScience)2nded.
2014Edi;on.SpringerPublica;on.2014.ISBN-13:978-3319052892.- KhalidSayood.Introduc;ontoDataCompression,FourthEdi;on(TheMorganKaufmannSeriesinMul;media
Informa;onandSystems)4thEdi;on.Elsevier.2012ISBN-13:978-0124157965.- Savage,T.M.,Vogel,K.E.AnIntroduc;ontoDigitalMul;media2nded..2013.Jones&Bartle_LearningASIN:
B00LZM6ESY.- ParagHavaldar,GerardMedioni.Mul;mediaSystems:Algorithms,Standards,andIndustryPrac;ces(Advanced
Topics)1stEdi;on.CengageLearning.2011.ISBN-13:978-1418835941
What is Storyboard!
Astoryboardisasketchofhowtoorganizeastoryandalistofitscontents.
Why Storyboard?!
• Helps Developers plan and manage the development process.
• Enables Developers to test the concept in a visual representation of the whole project
• Facilitate visual communication between developer-users
• Proceed to develop at the same time
Example!
No:Title:linkfrom:linkto:
ELEMENTSINVOLVES
AUTHORING
TextImageAudioVideoAnima;on
Storyboarding for Web Pages!
Mission Statement!
• The mission statement helps us to focus our project.
• Example: The Video Gamers web site will provide reviews of new video games for Sega and Nintendo. It will provide links to other web sites with related information. It will be updated at least once a week. I will let people know about my site by telling them.
Naviga;onDiagramThishelpsustokeeptrackofallofourpages.
Web Site Name - e.g., Video Gamers
Contact
Game ReviewMegaGlop
Game ReviewWizards
Nintendo
Game ReviewDragon Zoom
Another Review
Sega Other Sites News
HOME PAGEVideo Gamers Site
FAQ
Following created with Microsoft Organization Chart software…
PageLayout–summaryinforma;on
Web Site: _____________________ Page Name: ___________________ Creator:_______________________ Reviewer: _____________________ Date: _________________________
Links: Graphics: Other:
Page Layout – Setup, fonts, links!
Title(h1)HomeFAQContact
Child-Pages(opt1)
Child-Pages(opt2)
PrevNextPageLinksCopyrightinforma;on
Title (h1)
Sub Title (h3)
H1 – 16 pt Arial H2 – 14 pt Arial H3 – 12 pt Arial Normal – 10 pt Arial
Page Layout - Frames!SiteTitleMenuContent1Content2Content3
CaseStudies
ContentLinkstoCaseStudies(below)
Rules.. Make frames functional. Take advantage of scrolling Avoid lateral scrolling Be consistent in what appears in each frame.
Resize Bars for Frame (to increase viewable space)
PageLayout–howtouseit!• Create a page
for each page of the web site (for each box in the navigation diagram).
• Do it on paper first, get your ideas together.
Storyboard Page Layout Site Name: Page name: Created by: Date
Video Gamers Site by Dave Nintendo Sega News Other Sites
Where will pictures come from.
Where do links go to?
Site Diagram (v. 1)!
HomePage
CorporateInfo
Search
View/Select
ShoppingCart
FAQ Contact
PlaceOrder
Start Top Level (all pages)
Payment(secure)
Receipt
This technique is most useful to show the sequence of events.
Finish
Exis;ngClient
Site Diagram (v. 2) – Search Engine!HomePageStartSearchCategories
SearchAgainHits
CategoryDetails
SelectedPage
CategoryDetails Category
Details
Wrapping back to same page
Drilling to more detail based on a topic.
Site Diagram (v. 3) – Database Details!
HomePage
Search
View/Select
ShoppingCart
PlaceOrder
Payment(secure)
Receipt
Inventory Trans-ac;on
Sessiondata
Assumes detailed understanding of environment.
Site Diagram (v. 4) – Data Flow!
WebSite0.0
User Query
Results
ProcessSearchTerm1.0
Each layer decomposes the previous layer (variation of classic software decomposition)
DisplayRetrievedInforma;on2.0
Query
Informa;onDatabase
SelectfinalInforma;on3.0
Results
Top level shows interaction of all agents.
Current-term
Retrieved-data SQL
Record(s)
Other example of storyboard !
• h_p://templatelab.com/storyboard-templates/