MULTI-ACTIVITY

INTERACTIVE
STORYBOARD
Presented by
MEENHAZ AHMED
PIYALI DAS
SANJOY SAHA
SOUMI BHATTACHARYA (GROUP LEADER)

ST.THOMAS COLLEGE OF ENGINEERING &

TECHNOLOGY
CONTENTS:

BRIEF DESCRIPTION OF THE PROBLEM 3

INTRODUCTION 3

OBJECTIVE 3

PURPOSE 3

METHODOLOGY 5

PREWORK 5

DESIGN 6

INSERTING FRAME 6

INSERTING PDF 6

INSERTING VIDEO 7

INSERTING AUDIO 7

WHITEBOARD 8

DATABASE 12

ENTITY RELATIONSHIP DIAGRAM 13

PROPOSED PLATFORM 14

STORYBOARD 15

EFFORT ESTIMATION 18

CONCLUSION 19

2
BRIEF DESCRIPTION OF THE PROBLEM
Design a framework for the development of the multi-activity interactive storyboard.

INTRODUCTION
Storyboard allows the creator to design the layout of each screen within the presentation with
details such as size of graphics text or location or background colour etc. Each screen details the
media elements present along with their relative positions.

Interactivity provides the users a way to interact with the presentation using which we can
navigate directly to the region of interest. Thus we need the presentation to accept input from
user and modify itself accordingly.

The interactive storyboard is an active template where we allow the user to interactively design
the layout of each screen of the presentation specifying the necessary details of each media
elements present on the screen.

OBJECTIVE
The objective is to provide the user an active template with which one can interact to
produce the required artifact. A top menubar contains the navigation and editing controls.A
sidebar tree-menu displays the contents.The relevant multimedia contents and an interactive
whiteboard is displayed in the four display frames.

PURPOSE
Using an interactive storyboard ,the user can actively participate and produce a
customized artifact as per his/her specified needs. It can be modified as per the user’s
needs.

The entire screen will be divided into a number of frames.

• Top frame:Here there is a menubar containing the following
1.File:Suboptions includes new,open,save and close.
2.Insert:Here it is possible to select which multimedia elements is present in
which frame.Options present are text,audio,video,whiteboard etc.
3.View:Here two the artifact can be viewed in a)developer view b)User view

3
 4.This is a help option for the benefit of the developer or user

• Left frame:This is a sidebar containing a tree menu.Each submenu displays the

corresponding set of multimedia elements in the main frame.They contain links which
connect to the database containing the URL for loading each specific frame
Initially the treemenu has just 1 sub-part.The developer adds and expands the tree
menu as per specific requirements.Right-clicking a menulink gives an option to add a menu link
at the same level or to delete the link.
• Main frame:Here the different multimedia elements are displayed.It is divided into four
smaller frames.The different elements present are:

1) PDF : A PDF file is a portable secure document. Here is no direct method for adding
PDF file to an Html page, so we add it via Hyperlink.

2) VIDEO:We add this with the help of a hyperlink

.
3) AUDIO:Embedding sound incorporates the audio directly into the page,but the sound
plays only if the visitor has the appropriate plugin for the chosen sound file.It allows the
developer greater control in
• The clip’s play volume.
• Which part,if any,of the player’s control is visible
• The starting and ending points of the audio clip.

4) WHITEBOARD: Designing the whiteboard can help in sharing notes, images, and
video.
• It is the multi user web app that can be used for tutoring, distance learning,
training etc. With the whiteboard background images, text can be uploaded and
all users can se the changes in real time.
• The proposed white board can be document oriented ie, the user will be
allowed to save his work and restore them later.
• Only one document can be opened at a time like the text editor.
• There can be Internet Relay Chat where a number of users from different
part can connect to a server and communicate with each other

4
METHODOLOGY

PREWORK:
The information regarding whiteboard was gathered from
[1] www.groupboard.com.
[2] wikipedia.org/wiki/Interactive_whiteboard
[3] Education week’s digital directions:interactive whiteboard.

The information regarding methodology was gathered from

[1] http://help.adobe.com/en_US/Dreamweaver/10.0_Using/index.html
[2] http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started.html
[3] http://www.thesitewizard.com/faqs/youtube-video-dreamweaver.shtml

Books helpful were:

[1] Dreamweaver CS4 for dummies
[2] Dreamweaver CS4 Bible

DESIGN

5
Top frame: It is created by the spry menu bar option of Dreamweaver. First the horizontal menu
bar is to be selected. It comes with predefined defaults. In the properties windows on editing and
adding and deleting options the required format is created.

Left frame: The tree menu is implemented by a simple plug-in from pluginlabs.com. On
installation and adding, there appears an option to add a pre-defined or new menu. In the next
step the names of the links and related URLs are specified. It is added after that.

Main frame: The main frame is designed with multimedia elements:

• PDF: A PDF file is a portable secure document. Here is no direct method for adding PDF
file to an Html page, so we add it via Hyperlink.

• Video: We add this with the help of a hyperlink.

• Inserting Shockwave movies: ADOBE “Shockwave”, a standard for interactive
multimedia on the web is a compressed format that allows media files created in adobe
“Director” to be downloaded quickly and played by most popular browsers.
1. In the document window the insertion point is placed where we want to insert a
Shock wave movie.
Select: Insert>Media>Shockwave

6
 2. In the dialog block that appears, a movie file is selected.
3.In the property inspector the width and the height of the movie are entered in the W
and H text boxes.

• Inserting FLV files:

1.Select Insert>Media>FLV
2.In the Insert FLV dialog box Progressive download or Streaming video is
selected from Video type pop-up menu.
Progressive download video:Downloads the FLV file to the site visitors hard disc and plays it.
3.Streaming video:Streams the video content and plays it on a webpage after a short
buffer period and ensures smooth playback.
4.The rest of the options in the dialog box are to be completed
5.When an FLV file in inserted in a page Dreamweaver inserts the code that detects
whether the user has the correct version of the flash player.If not the page displays default
content that prompts the user the download the latest version.

• Adding video(non-FLV) :
1.The clip is placed in the site folder.These clips are often in the AVI or MPEG file
format.
2.The clip is linked or embedded into the page.To link to the clip the text is enetered is
entered for the link such as “Download clip”,the text is selected and the folder icon in the
property inspector is clicked.The video file is browsed and selected.
3.The user must download a helper application(plugin) to view the common streaming
formats like Realmedia,Quicktime and Windows media.

• Audio:Embedding sound incorporates the audio directly into the page,but the sound plays
only if the visitor has the appropriate plugin for the chosen sound file.It allows the developer
greater control in
• The clip’s play volume.
• Which part,if any,of the player’s control is visible
• The starting and ending points of the audio clip.
The steps for embedding sound files are:
1.In Design view, place the insertion point where you want to embed the file and do one of the
following:

2.In the Common category of the Insert panel, click the Media button and select the Plugin
icon from the pop-up menu.

3.Select Insert > Media > Plugin.

7
 4.Browse for the audio file and click OK.

5.Enter the width and height by entering the values in the appropriate text boxes in the Property
inspector or by resizing the plug-in placeholder in the Document window. These values
determine the size at which the audio controls are displayed in the browser

• Whiteboard:
The methodology to design it using the web-development application Dreamweaver is
discussed :

• Dreamweaver is started and then Site>New Site.

• The dialog box appears then.

• The advanced tab is selected and in order to create the local site first we need to
select local info and type in the details as required.

• After clicking Ok Manage Sites dialog box appears, showing the New local Site.

8
• Then similarly the Remote Site is set up. Background file transfer works for
all of the transfer protocols supported by Dreamweaver(FTP, SFTP, LAN etc).
There is also an option of using Local/Network to transfer files.

• Connection to the Remote Site is established.Then two sites are

synchronized.

9
 • Check In/Check Out system can be used to transfer files between local and
remote sites. If only one person is working on the remote site, Get and Put
commands are used to transfer files.

• To cancel the transfer of file, the Cancel button in the Background File Activity
dialog box is clicked.

• Two frequent causes for connection failures are a server that is down or is busy.

• The diagram below illustrates the major relay points data must go through to
complete a successful transfer(FTP).

• A new file is created under the local site and a jump menu is designed that
will link to the whiteboard and similarly for the remote site.

• The body of the html code will be:

<body>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu">
<option
value="http://www.groupboard.com/mp/gb.cgi?board_id=115017&amp;large=true&amp;a=false
">whiteboard
</option>
</select>

10
 <input type="button" name="go_button" id= "go_button" value="Go"
onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>
</body>

The Whiteboard will be designed as below:

WhiteBoard

• Creating a local site and a remote site and accessing suitable protocols for
transfering files , can easily help to implement the Whiteboard Application
.Thereby creating a virtual sharing system between the local and remote
machines.

Each link would bring changes in more than one frame.Steps for that will be:
1. Select your link text or image in the frame.
2. If you selected text for your link, type javascript:; in the Link field of the Text Property
Inspector.
3. Open the Behaviors panel by choosing Window ➪ Behaviors.
4. Click the Add (+) button at the top of the Behaviors panel, and in the drop-down menu,
choose Show Events For ➪ 4.0 and Later Browsers.
5. Click the Add (+) button again to display the list of available behaviors and choose Go
To URL.
6. Dreamweaver displays the Go To URL dialog box and scans your document
for all named frames. Select a target frame from the list of windows or frames.

11
DATABASE
The database will include:

TABLE NAME: TEMPLATE

NAME DATATYPE DESCRIPTION

Link Varchar(100) Identifies each link of the
artifact
Sublink Varchar(100) Associated sublink
url Varchar(100) Link for corresponding frame

TABLENAME: FILE DESCRIPTION

NAME DATATYPE DESCRIPTION

File_type Varchar(100) The type of file to be
inserted by the user.
Browsing _ink Varchar(100) link for associated type

TABLENAME:USER DETAILS

NAME DATATYPE DESCRIPTION

User_id Number(10) Unique number to identify a
user.
Username Varchar(100) Username of user
password Varchar(100) Password of user

ENTITY RELATIONSHIP DIAGRAM

The ER diagram can be used to create an abstract and conceptual representation of data.
It can be used to show the relationships between the database tables.

12
Figure 1

Figure 1 shows the proposed ER diagram.

Here the template, provided to the user ,will have a range of options (as discussed later in the
StoryBoard). We may choose LINK and SUBLINK to be the composite primary key to select a particular
option in each case.the corresponding URL will link to the required file,(in the FILE DESCRIPTION
table),thereby giving the user an option to insert the file of his choice as required.

CONNECTING TO THE DATABASE

An active content page is a blend of traditional HTML and a database server language such as
PHP,Active Server Pages (ASP), or ColdFusion Markup Language (CFML). The most efficient
way to connect to a data source is to use an OLE DB provider directly.
Steps to create an OLE DB connection string:
1. Choose Window ➪ Databases to display the Databases panel.
2. Click the Add (+) button and select Custom Connection String from the drop-
down list.
3. Enter a label for your new connection in the Connection Name field.
4. Enter the complete connection string in the Connection String field.
5. To ensure that your connection is properly set up, click Test in the Custom
Connection String dialog box. Dreamweaver tells you if the connection was
established successfully.

13
Dreamweaver’s PHP model supports MySQL connections only.Steps to setup MySQL
connections are:
1. Choose Window ➪ Databases to display the Databases panel.
2. Click the Add (+) button and choose MySQL Connection from the drop-down
list.
3. Enter a label for your new connection in the Connection Name field.
4. Enter the IP or domain address of your MySQL server in the MySQL Server
field.
5. Enter your database username in the User Name field and password.
6. Enter the database name in the Database field, or click Select and choose from a
list of all the databases to which you have access.

PROPOSED PLATFORM
The used IDE would be Dreamweaver CS4.The benefits of using Dreamweaver would be
1. Dreamweaver lets users apply JavaScript behaviors to create rollovers and other effects
2. Dreamweaver has numerous time-saving features including File Check In/Check Out,
integration with SourceSafe or Web DAV, and Design Notes for Web team collaboration.
3. Its Design view can be used to work visually and hide the underlying HTML, or its Code
view to write HTML and JavaScript by hand.
4. Dreamweaver even offers support for server-side tags, including ASP, JSP, ColdFusion,
and PHP.

Software requirement: Operating system Windows XP or higher version. Flash player, Adobe
Reader. Any other required software if not present, the user would be promoted to download it if
possible.

Hardware requirement: The minimum requirements are:

Main Memory : 512MB
Hard Disk Drive : 4.3GB

14
 Cache Memory : 512KB

STORYBOARD

1.Name of user

2.Artifact details

• 2.1 Artifact Name

• 2.2 No. of chapters

• 2.3 File size

3.Drop-down list showing artifacts created by present user.

4 Modify options

• 4.1 Button to edit existing artifact

• 4.2 Button for new artifact

• 4.3 Button to create the new artifact

15
1:It is allocated for the PDF file.
• 1.1 Button to browse and add file
• 1.2 Button to remove displayed file
2:It is allocated for the video file.
• 2.1 Button to browse and add video
• 2.2 Button to remove video
3:It is allocated for the Interactive Whiteboard
• 3.1 Send
• 3.2 Reset
• 3.3 Save
4:It is allocated for the image file.
• 4.1 Button to browse and add file
• 4.2 Button to remove displayed image

5:Tree menu
• 5.1 Index1

16
 o 5.1.1 Content 1:Displays relevant content. Right-click provides option to add new content
at the same level.
o 5.1.2 Content 2
• 5.2 Index2
6.Menubar
• 6.1 File
o 6.1.1 New
o 6.1.2 Open
o 6.1.3 Save
o 6.1.4 Close
• 6.2 Insert
o 6.2.1 PDF frame
o 6.2.2 Video frame
o 6.2.3 Image frame
o 6.2.4 Audio frame
• 6.3 View
o 6.3.1 Developer view
o 6.3.2 User view
• 6.4 Help

17
EFFORT ESTIMATION
For a given set of requirements it is desirable to know how much it will cost to
develop the software and how much time the development will take. The primary reason
for schedule estimation is cost benefit analysis ,and project monitoring and control. Effort
and schedule estimates are also required to determine the staffing level for a project
during different phases.

Gnatt chart for effort estimation in Man-Hours

Interface and HCI design 30-35 man-hours

Detailed design 70-75 man-hours.

Coding-55-60 man-hours

Testing-40-45 man-hours

Implementation-30-35 man-hours

18
CONCLUSION
The proposed system is intuitive and convenient by interactively updating the
document as and when required through user’s control, but further developments can be made.
. The template can be used to introduce the PDF,Audio,Video or images dynamically so
that the user is provided with the template where he can add or view his required data browsing
the files, avoiding static sections. Here we provide an option to add only PDF, video ,audio and a
whiteboard application but other documents can also be inserted as required. The Whiteboard
can be used to introduce an Internet Relay Chat where the users, from different parts of the world
can actively participate in the online tutorials or chat sessions.

19