SlideShare a Scribd company logo
1 of 13
Download to read offline
User Guide:




   ---- Let’s make e-learning cheaper! -----

       A Component for Flash 8




                       * Flash® is the registered trademark of Adobe Systems INC.
Developed by :
Enterprise System Solutions Pvt. Ltd. (ESSPL)
Infocity, Bhubaneswar, India – 751024
www.esspl.com

Component Author:
Samir K. Dash, Systems Consultant, ESSPL

Component Page URL : http://www.esspl.com/FlashComponents/flashonavigationhome.asp

Also available at Adobe’s Flash Exchange URL:
       http://www.adobe.com/cfusion/exchange/#loc=en_us&view=sn111&viewName=Flash%20Extens
       ion&authorid=0&page=0&scrollPos=0&subcatid=0&snid=sn111&itemnumber=-
       1&extid=1035646&catid=50&avm=1

Support Information

This product is provided on as-is basis. For feedback/ suggestions please send your mails to
samirk@esspl.com or ess@esspl.com




License Agreement for Flash-O-Navigation

Flash-O-Navigation is distributed by Enterprise System solutions Pvt. Ltd. (ESSPL) as is
without any warranties whatsoever. By using this Flash component you accept the fact that
ESSPL will not be liable for any damage it may cause.




     Disclaimer:

      ® Flash® is the registered trademark of Adobe Systems INC.

     All content/ information presented here is the exclusive property of Enterprise system solutions Pvt. Ltd. (ESSPL).
     The copyrights of trade marks/ logos of any other organizations/ companies/ vendors are under their respective
     copyright holders and are in no way linked to ESSPL or any of its subsidiaries. The content/ information contained
     here is correct at the time of its publishing. No material from here may be copied, modified, reproduced,
     republished, uploaded, transmitted, posted or distributed in any form without prior written permission from ESSPL.
Contents
1. About Flash-O-Navigation
2. Contents of the Component
3. Features of the Component
4. Install the Component
5. Know the Component Parameters
6. Listing Your Contents
7. Getting additional information




About Flash-O-Navigation
This is a Macromedia Approved component for Flash 8. It is the ultimate a Component for
     ®
Flash based e-Learning development. With this component:

     •   No need to worry about the navigation interface for content arrangement.
         Everything is there if your training content/ simulations are created in Flash or
         just an image (jpeg/ gif/ png type).
     •   No need to mention how many contents are there in each chapter (set of
         earning objects), you just list down the chapter names and individual file name
         in provided XML, rest is taken care of.
     •   Change your content any time with the help of XML, and the table of content is
         ready Adding deleting items from table content is easy.
     •   The internal controller helps you playing your swf contents just like a movie.
         You can reach any frame at any point of time.
     •   Keep bookmark of the last visited page, and go to its exact point, even in the
         exact point of the swf content any ime you wish.
     •   While studying found something worth for the notes…then just note it down
         using the provided note pad. You can keep notes for any specific point of the
         swf content and reach it at any other time . You can keep as many notes as
         you wish.
     •   Can control volume of the content swf any time.
     •   Change color of the lay out and the whole interface.
     •   Add logo of your training kit at the header.
     •   Highly customizable and easy to use.
     •   There is the credit section to mention the developer name, year etc.
     •   Just have some images to make a presentation, just mention the file names
         and you are ready for the show .




Contents of the Component
The Flash-O-Navigation package contains the following:

   1. flashonavigation.mxp
   2. flashonav_list.xml (it is a sample XML. You have to modify to fit your needs)
   3. Chapter1.xml, Chapter2.xml, Chapter3.xml -- all these are sample xmls you have to
      modify or create similar xmls to fit your needs.
The MXP file (with out XML files ) is available at the following link(s):
http://www.samirshomepage.com/flashonavigation/flashonavigation.zip

The MXP file with the XML files is available at the following link(s):
http://www.samirshomepage.com/flashonavigation/flashonavigation_withxml.zip

All these XML files (without the MXP file)will be available at the following link(s) :
http://www.samirshomepage.com/flashonavigation/saqmplexmlfiles.zip




Features of the Component
Flash-O-Navigation has the following features:

    1. It provides you with an easy navigational interface for e-learning and slideshow/
       presentational development. Just drag the component and your interface is ready !
    2. You can e-learning for two level content structures, which can be for example Chapter
       and Units, where the Chapter is first level of group and each chapter is made up of some
       units.




        Each Unit here can be made of just one slide image (made of either JPG/ GIF/ PNG/
        SWF) or an animation created in SWF (in the _root timeline) or a simulation created in
        SWF (in the _root timeline) or just a quiz created in SWF (in the _root timeline).


    3. The component lets the learner to move to any point of your learning tool using different
       buttons , and playback control.
    4. They can keep notes for any point of your content (for example they can keep notes for
       any particular point of simulation they are viewing ) and can access it any time they want.
       They can keep any number of such notes.
5. The users can keep bookmark
    6. The component allows easy updation of the menu system through XML. Using the simple
       XML format anyone can change or re-arrange the content index to fit the need of the e-
       learning development.




Install the Component


Double click on the flashONavigation.mxp file                   to run it. If you have Flash 8 or
above version installed in your system then it will open the Macromedia Extension manager and
you will be then asked to accept the terms. If you agree to the conditions then the extension will
be automatically installed.
Now open Flash 8 IDE and in components panel you will see the components under
SamirComponents folder.




Know the Component Parameters




color:
This parameter has 2 options – (1) defaultGray (2) dreamyWhite. Chossing either of these
options changes the interface color to any of these predefined color. In future versions more cor
options will be added.



fullscreen
This option has two values – “True” or “False”. If you choose “True”, then on stand alone mode
the Flash file will go to fullscreen mde. However if you publish it for web, (selecting forWeb
parameter to “True”, or just view the swf file through a browser like IE/ Netscape etc.) then the
fullscreen won’t take effect, even if set to “True”)




headerTitle:
This string you will enter here will be the title of your e-Learning kit. The default value is “Flash-O-
Navigation Training Kit”.
This will also be reflected in credits section.




headerImage:
Enter the path of your logo image (JPG/ GIF/ PNG/ SWF) with height equal to 38 px. to be
displayed at the top of the header area. The header title will be displayed just after the width of
the image ends in the header.




headertitle_color:
This sets the color of the text of your header title. The default value is 0x FFFFFF. For any other
color please enter the HEX value after “0x”


forWeb:
If you intend to publish your flash e-learning to the web / intranet, then please select this option as
“True” ( the default values is set to “False”) and publsish your HTML with the Flash with
FSCommand template in publish setting
This will help you to close your interface (while inside browser )using the “Exit” button available at
the right bottom.




Please note that some browsers having some restrictions to Javascript may not allow to close the
window through Flash.


developerName
Here enter the developer name of the e-learning kit , may be your name or your company name.
This will appear in the creditssection




publicationYear
Here enter the year of publication/ development of your e-Learning tool. It will be reflected in the
creditssection




firstlevelPrev
It shows the name that appears at the button which on click takes user to the previous first level
group (in our example “to the previous Chapter”). The default value is “Prev. Chapter”




secondlevelPrev
It shows the name that appears at the button which on click takes user to the previous second
level group (in our example “to the previous Unit”). The default value is “Prev. Unit”
firstlevelNext
It shows the name that appears at the button which on click takes user to the next first level group
(in our example “to the next Chapter”). The default value is “Next Chapter”




secondlevelNext
It shows the name that appears at the button which on click takes user to the next second level
group (in our example “to the next Unit”). The default value is “Next Unit”




Listing your contents
There are two levels of groups that devide the whole contents that are to be used in your e-
learning. The first one is first level (high level) high level and the other one is the second level
(low level). For example we can consider the high levels as “Chapters” and the low levels as
“Units”.


In the following we’ll see how to list our contents for the menu system:


Step 1: List the First Level Groups


All the high level groups are listed in “flashonav_list.xml”




In this XML file you list down all your high level groups as the following format:

             <?xml version="1.0" encoding="ISO-8859-1" ?>
           - <slideshow>
             <fon tab="Your first level group name goes here" />
             </slideshow>

For example, if you have a course structure containing three chapters namely “Chapter 1”,
“Chapter 2” and “Chapter 3” , then you have to create the flashonav_list.xml as follows:

            <?xml version="1.0" encoding="ISO-8859-1" ?>
- <slideshow>
             <fon tab="Chapter 1" />
             <fon tab="Chapter 2" />
             <fon tab="Chapter 3" />
             </slideshow>


Now these will be reflected in your e-learning interface as shown in the following figure:




Step 2: List the Second Level Groups
In this step you need to create one XML files for each first level group you have defined in step 1.
For example, if you have defined first level groups as “Chapter 1”, “Chapter 2” and “Chapter 3”,
then you need to create three XML files with the similar file name, namely “Chapter 1.xml”,
“Chapter 2.xml” and “Chapter 3.xml”. Note that your file name must match exactly to your groups
names you have mentioned in the “flasonav_list.xml” file.




Now each of these xml file will keep all the information about the contents that
come under its higher level group. For example “Chapter 1.xml” will keep all the
information such as how many topics will be there in this chpter alomng with their
name, related file name etc.
Let’s see the format of such an xml:

  <?xml version="1.0" encoding="ISO-8859-1" ?>
- <items>
     <item url="Give your file name here" desc="Give your label name here"
         info="Give here the description that will appear when the info button is
         pressed" playback_control="Write Yes or No, to either allow user to be able
         to use the play back control or not" />
  </items>
For instance, lets say there will be 4 units inside Chapter 1, namely “Unit 1: Introduction”, “Unit 2:
Need of Flash-O-Navigation”, “Unit 3: Features of Flash-O-Navigation”, and “Unit 4: Going
Forward”, where you would present the first two content as animation where the user should be
able to move across the animation using the playback control, where as in the other two cases
the playback control is disabled, then the following can be a sample xml for “Chapter 1”:

<?xml version="1.0" encoding="ISO-8859-1" ?>
- <items>
     <item url="file1.swf" desc="Unit 1: Introduction" info="This introduces Flash-O-
         Navigation." Playback_control="Yes" />
     <item url="image.jpg" desc="Unit 2: Features" info="It provides information on
         the features of Flash-O_Navigation" playback_control="No" />
     <item url="flashquiz.swf" desc="Unit 3: Quiz" info="A quiz for you !"
         playback_control="No" />
  </items>




You can see that there are 4 attributes in each item node , namely url, desc, info and
playbackcontrol. The attribute url represents the file (either SWF or any image format such as
non-progressive JPG, PNG, GIF). If the SWF has animation then its animation should be based
on the “ _root” timeline, so as to be controlled by the playback control of Flash-O-Navigation.


The desc attribute represents what will be displayed as the name / label in the menu list. You can
take it as the Unit Name in our example where some units combine tpo form a Chapter.




The info attribute keepsw additional data about the item and this appears when the learner clicks
on the info “i” button of Flash-O-Navigation.
The playbackcontrol is the attribute that has two values – either “Yes” or “No”. If you select
“Yes”, then the user can drag the seek bar of the playback control provided in the Flash-O-
Navigfation to view the simulation/ animation to any point on wish. But if you opted for “No”, then
the seek bar will dissapear and the iusers won’t be able to move back and forth in that second
level group by dragging the seek bar. This is useful when you present a quiz or any interactive
where you want the users to complete certain steps before moving forward to a particular point.




General Information to be kept in mind
1) Flash-O-navigation is designed for creating e-Learning application for 1024 x 768 screen
resolutions. The minimum stage needed to place this component is 1000 x 700 px.
So make sure you drag the component and place it on the stage of above mentioned or of greater
dimension.




2) Note that after publishing you will need to place the related XML files (including
“flashonav_list.xml) in the same folder where you have placed your flash elearning swf that
contains the component.
About ESSPL

ESSPL offers a wide range of e-learning, m-Learning and interactive solutions, from
animation, interface design, multimedia assessment need analysis, customized
courseware design, simulations, interactive kiosks, online design solutions, Flash based
mobile content designing and development, to suit the wide range of client needs ranging
from e-learning, m-learning to sales promotional campaign and presentation needs.

For more details on ESSPL’s offerings in e-Learning and interactive design, refer to
ESSPL website at www.esspl.com

More Related Content

What's hot

California Sunset
California SunsetCalifornia Sunset
California Sunsetcboss1008
 
Incandescent
IncandescentIncandescent
Incandescentcboss1008
 
Ts102575614
Ts102575614Ts102575614
Ts102575614sha846
 
Rectangles Rotate
Rectangles RotateRectangles Rotate
Rectangles Rotatecboss1008
 
Facebook video optimization
Facebook video optimizationFacebook video optimization
Facebook video optimizationDAVID NG
 
Joomla Tutorial: Joomla 2.5 a first look
Joomla Tutorial: Joomla 2.5 a first lookJoomla Tutorial: Joomla 2.5 a first look
Joomla Tutorial: Joomla 2.5 a first lookTim Plummer
 
Technical considerations 2c
Technical considerations 2cTechnical considerations 2c
Technical considerations 2cCrashin
 
Consilium Responsive Joomla Template
 Consilium Responsive Joomla Template Consilium Responsive Joomla Template
Consilium Responsive Joomla TemplateNETBASE CMSMART
 
Multimedia UX
Multimedia UXMultimedia UX
Multimedia UXMicrosoft
 

What's hot (17)

Earthscape
EarthscapeEarthscape
Earthscape
 
California Sunset
California SunsetCalifornia Sunset
California Sunset
 
Incandescent
IncandescentIncandescent
Incandescent
 
Liquid Sky
Liquid SkyLiquid Sky
Liquid Sky
 
Liquid Sky
Liquid SkyLiquid Sky
Liquid Sky
 
Ts102575614
Ts102575614Ts102575614
Ts102575614
 
Sun Rays
Sun RaysSun Rays
Sun Rays
 
Dots Rotate
Dots RotateDots Rotate
Dots Rotate
 
Ts102579999
Ts102579999Ts102579999
Ts102579999
 
Rectangles Rotate
Rectangles RotateRectangles Rotate
Rectangles Rotate
 
Facebook video optimization
Facebook video optimizationFacebook video optimization
Facebook video optimization
 
Joomla Tutorial: Joomla 2.5 a first look
Joomla Tutorial: Joomla 2.5 a first lookJoomla Tutorial: Joomla 2.5 a first look
Joomla Tutorial: Joomla 2.5 a first look
 
Joomla Day1
Joomla  Day1Joomla  Day1
Joomla Day1
 
Social website
Social websiteSocial website
Social website
 
Technical considerations 2c
Technical considerations 2cTechnical considerations 2c
Technical considerations 2c
 
Consilium Responsive Joomla Template
 Consilium Responsive Joomla Template Consilium Responsive Joomla Template
Consilium Responsive Joomla Template
 
Multimedia UX
Multimedia UXMultimedia UX
Multimedia UX
 

Viewers also liked

Mobile Wish 200
Mobile Wish 200Mobile Wish 200
Mobile Wish 200Samir Dash
 
Learning&collaboration
Learning&collaboration Learning&collaboration
Learning&collaboration Samir Dash
 
Presentation Samir Mobilewish Esspl Seminar 2007
Presentation Samir Mobilewish Esspl Seminar 2007Presentation Samir Mobilewish Esspl Seminar 2007
Presentation Samir Mobilewish Esspl Seminar 2007Samir Dash
 
Las Estaciones Del AñO
Las Estaciones Del AñOLas Estaciones Del AñO
Las Estaciones Del AñOguestb59502
 
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)Samir Dash
 

Viewers also liked (6)

Mobile Wish 200
Mobile Wish 200Mobile Wish 200
Mobile Wish 200
 
Learning&collaboration
Learning&collaboration Learning&collaboration
Learning&collaboration
 
Cuerpo Fuerza
Cuerpo FuerzaCuerpo Fuerza
Cuerpo Fuerza
 
Presentation Samir Mobilewish Esspl Seminar 2007
Presentation Samir Mobilewish Esspl Seminar 2007Presentation Samir Mobilewish Esspl Seminar 2007
Presentation Samir Mobilewish Esspl Seminar 2007
 
Las Estaciones Del AñO
Las Estaciones Del AñOLas Estaciones Del AñO
Las Estaciones Del AñO
 
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
Socio-cultural User Experience (SX) and Social Interaction Design (SxD)
 

Similar to User guide flashonavigation

Similar to User guide flashonavigation (20)

Foundation flash
Foundation flashFoundation flash
Foundation flash
 
Intro toflash
Intro toflashIntro toflash
Intro toflash
 
Manual
ManualManual
Manual
 
Chromatique
ChromatiqueChromatique
Chromatique
 
Chromatique
ChromatiqueChromatique
Chromatique
 
flash-flv
flash-flvflash-flv
flash-flv
 
flash-flv
flash-flvflash-flv
flash-flv
 
Pmug130215
Pmug130215Pmug130215
Pmug130215
 
Oracle User Productiviy Kit
Oracle User Productiviy KitOracle User Productiviy Kit
Oracle User Productiviy Kit
 
Powerpoint 1.pptx
Powerpoint 1.pptxPowerpoint 1.pptx
Powerpoint 1.pptx
 
JSN Gruve Customization Manual
JSN Gruve Customization ManualJSN Gruve Customization Manual
JSN Gruve Customization Manual
 
Joomla Templates101
Joomla Templates101Joomla Templates101
Joomla Templates101
 
XOOPS Headlines Module Tutorial
XOOPS Headlines Module TutorialXOOPS Headlines Module Tutorial
XOOPS Headlines Module Tutorial
 
Intro to Adobe Flash
Intro to Adobe FlashIntro to Adobe Flash
Intro to Adobe Flash
 
Assetry media management_user_guide_0818
Assetry media management_user_guide_0818Assetry media management_user_guide_0818
Assetry media management_user_guide_0818
 
JSN Pixel Customization Manual
JSN Pixel Customization ManualJSN Pixel Customization Manual
JSN Pixel Customization Manual
 
Documentation.pdf
Documentation.pdfDocumentation.pdf
Documentation.pdf
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
World's Youngest Web Desigener
World's Youngest Web Desigener World's Youngest Web Desigener
World's Youngest Web Desigener
 

More from Samir Dash

Empowering Web-Accessibility through Artificial Intelligence (AI) _5Apr202...
Empowering  Web-Accessibility  through Artificial Intelligence (AI)  _5Apr202...Empowering  Web-Accessibility  through Artificial Intelligence (AI)  _5Apr202...
Empowering Web-Accessibility through Artificial Intelligence (AI) _5Apr202...Samir Dash
 
Exploring Paper Types - Samir 2 Mar 2024
Exploring Paper Types - Samir 2 Mar 2024Exploring Paper Types - Samir 2 Mar 2024
Exploring Paper Types - Samir 2 Mar 2024Samir Dash
 
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...Samir Dash
 
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020Samir Dash
 
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...Samir Dash
 
Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
Session UXnUI SJCIT-1.0.1-1apr2019-desops.ioSession UXnUI SJCIT-1.0.1-1apr2019-desops.io
Session UXnUI SJCIT-1.0.1-1apr2019-desops.ioSamir Dash
 
Des ops101 : Overview - RH CoP UI/UX 9nov2018
Des ops101 : Overview - RH  CoP UI/UX 9nov2018Des ops101 : Overview - RH  CoP UI/UX 9nov2018
Des ops101 : Overview - RH CoP UI/UX 9nov2018Samir Dash
 
Applying des ops in your enterprise 04 oct 2018 v1.0 slides
Applying des ops in your enterprise 04 oct 2018 v1.0  slides Applying des ops in your enterprise 04 oct 2018 v1.0  slides
Applying des ops in your enterprise 04 oct 2018 v1.0 slides Samir Dash
 
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018Samir Dash
 
Dev conf 2018 DesOps - Prepare Today for Future of Design
Dev conf 2018 DesOps - Prepare Today for Future of Design Dev conf 2018 DesOps - Prepare Today for Future of Design
Dev conf 2018 DesOps - Prepare Today for Future of Design Samir Dash
 
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...Samir Dash
 
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOpsInfographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOpsSamir Dash
 
Ditto – Design Life Cycle Management Concept for DesOps (2016-17)
Ditto – Design Life Cycle Management Concept for DesOps (2016-17) Ditto – Design Life Cycle Management Concept for DesOps (2016-17)
Ditto – Design Life Cycle Management Concept for DesOps (2016-17) Samir Dash
 
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017Samir Dash
 
The Ten Commandments of DesOps
The Ten Commandments of DesOpsThe Ten Commandments of DesOps
The Ten Commandments of DesOpsSamir Dash
 
Using IBM Design Thinking in Everyday Job 2017
Using IBM Design Thinking in Everyday Job 2017Using IBM Design Thinking in Everyday Job 2017
Using IBM Design Thinking in Everyday Job 2017Samir Dash
 
Rediscovering Accessibility for Future Tech - Everyone is affected!
Rediscovering Accessibility for Future Tech - Everyone is affected!Rediscovering Accessibility for Future Tech - Everyone is affected!
Rediscovering Accessibility for Future Tech - Everyone is affected!Samir Dash
 
Flip the Cart! : Reimagining Next in eCommerce
Flip the Cart! : Reimagining Next in eCommerceFlip the Cart! : Reimagining Next in eCommerce
Flip the Cart! : Reimagining Next in eCommerceSamir Dash
 
Course explorer
Course explorerCourse explorer
Course explorerSamir Dash
 

More from Samir Dash (20)

Empowering Web-Accessibility through Artificial Intelligence (AI) _5Apr202...
Empowering  Web-Accessibility  through Artificial Intelligence (AI)  _5Apr202...Empowering  Web-Accessibility  through Artificial Intelligence (AI)  _5Apr202...
Empowering Web-Accessibility through Artificial Intelligence (AI) _5Apr202...
 
Exploring Paper Types - Samir 2 Mar 2024
Exploring Paper Types - Samir 2 Mar 2024Exploring Paper Types - Samir 2 Mar 2024
Exploring Paper Types - Samir 2 Mar 2024
 
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...
Presentation Deck: Revolutionizing Design Education: AI-Powered Design-Thinki...
 
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020
Beyond design DesOps - IBM:: iXponential Deep Dive - 4 Dec 2020
 
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
 
Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
Session UXnUI SJCIT-1.0.1-1apr2019-desops.ioSession UXnUI SJCIT-1.0.1-1apr2019-desops.io
Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
 
Des ops101 : Overview - RH CoP UI/UX 9nov2018
Des ops101 : Overview - RH  CoP UI/UX 9nov2018Des ops101 : Overview - RH  CoP UI/UX 9nov2018
Des ops101 : Overview - RH CoP UI/UX 9nov2018
 
Applying des ops in your enterprise 04 oct 2018 v1.0 slides
Applying des ops in your enterprise 04 oct 2018 v1.0  slides Applying des ops in your enterprise 04 oct 2018 v1.0  slides
Applying des ops in your enterprise 04 oct 2018 v1.0 slides
 
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018
Semantic Design System : Redefining Design Systems for DesOps - v1.0 1sep 2018
 
Dev conf 2018 DesOps - Prepare Today for Future of Design
Dev conf 2018 DesOps - Prepare Today for Future of Design Dev conf 2018 DesOps - Prepare Today for Future of Design
Dev conf 2018 DesOps - Prepare Today for Future of Design
 
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...
In Search of Truth: At the Crossroad of Critical Theory and Technology in Des...
 
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOpsInfographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps
Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps
 
Ditto – Design Life Cycle Management Concept for DesOps (2016-17)
Ditto – Design Life Cycle Management Concept for DesOps (2016-17) Ditto – Design Life Cycle Management Concept for DesOps (2016-17)
Ditto – Design Life Cycle Management Concept for DesOps (2016-17)
 
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017
Beta studio Reimagining Beta Testing -Samir Dash - 07-12-2017
 
The Ten Commandments of DesOps
The Ten Commandments of DesOpsThe Ten Commandments of DesOps
The Ten Commandments of DesOps
 
Using IBM Design Thinking in Everyday Job 2017
Using IBM Design Thinking in Everyday Job 2017Using IBM Design Thinking in Everyday Job 2017
Using IBM Design Thinking in Everyday Job 2017
 
Sx Heuristics
Sx HeuristicsSx Heuristics
Sx Heuristics
 
Rediscovering Accessibility for Future Tech - Everyone is affected!
Rediscovering Accessibility for Future Tech - Everyone is affected!Rediscovering Accessibility for Future Tech - Everyone is affected!
Rediscovering Accessibility for Future Tech - Everyone is affected!
 
Flip the Cart! : Reimagining Next in eCommerce
Flip the Cart! : Reimagining Next in eCommerceFlip the Cart! : Reimagining Next in eCommerce
Flip the Cart! : Reimagining Next in eCommerce
 
Course explorer
Course explorerCourse explorer
Course explorer
 

User guide flashonavigation

  • 1. User Guide: ---- Let’s make e-learning cheaper! ----- A Component for Flash 8 * Flash® is the registered trademark of Adobe Systems INC.
  • 2. Developed by : Enterprise System Solutions Pvt. Ltd. (ESSPL) Infocity, Bhubaneswar, India – 751024 www.esspl.com Component Author: Samir K. Dash, Systems Consultant, ESSPL Component Page URL : http://www.esspl.com/FlashComponents/flashonavigationhome.asp Also available at Adobe’s Flash Exchange URL: http://www.adobe.com/cfusion/exchange/#loc=en_us&view=sn111&viewName=Flash%20Extens ion&authorid=0&page=0&scrollPos=0&subcatid=0&snid=sn111&itemnumber=- 1&extid=1035646&catid=50&avm=1 Support Information This product is provided on as-is basis. For feedback/ suggestions please send your mails to samirk@esspl.com or ess@esspl.com License Agreement for Flash-O-Navigation Flash-O-Navigation is distributed by Enterprise System solutions Pvt. Ltd. (ESSPL) as is without any warranties whatsoever. By using this Flash component you accept the fact that ESSPL will not be liable for any damage it may cause. Disclaimer: ® Flash® is the registered trademark of Adobe Systems INC. All content/ information presented here is the exclusive property of Enterprise system solutions Pvt. Ltd. (ESSPL). The copyrights of trade marks/ logos of any other organizations/ companies/ vendors are under their respective copyright holders and are in no way linked to ESSPL or any of its subsidiaries. The content/ information contained here is correct at the time of its publishing. No material from here may be copied, modified, reproduced, republished, uploaded, transmitted, posted or distributed in any form without prior written permission from ESSPL.
  • 3. Contents 1. About Flash-O-Navigation 2. Contents of the Component 3. Features of the Component 4. Install the Component 5. Know the Component Parameters 6. Listing Your Contents 7. Getting additional information About Flash-O-Navigation This is a Macromedia Approved component for Flash 8. It is the ultimate a Component for ® Flash based e-Learning development. With this component: • No need to worry about the navigation interface for content arrangement. Everything is there if your training content/ simulations are created in Flash or just an image (jpeg/ gif/ png type). • No need to mention how many contents are there in each chapter (set of earning objects), you just list down the chapter names and individual file name in provided XML, rest is taken care of. • Change your content any time with the help of XML, and the table of content is ready Adding deleting items from table content is easy. • The internal controller helps you playing your swf contents just like a movie. You can reach any frame at any point of time. • Keep bookmark of the last visited page, and go to its exact point, even in the exact point of the swf content any ime you wish. • While studying found something worth for the notes…then just note it down using the provided note pad. You can keep notes for any specific point of the swf content and reach it at any other time . You can keep as many notes as you wish. • Can control volume of the content swf any time. • Change color of the lay out and the whole interface. • Add logo of your training kit at the header. • Highly customizable and easy to use. • There is the credit section to mention the developer name, year etc. • Just have some images to make a presentation, just mention the file names and you are ready for the show . Contents of the Component The Flash-O-Navigation package contains the following: 1. flashonavigation.mxp 2. flashonav_list.xml (it is a sample XML. You have to modify to fit your needs) 3. Chapter1.xml, Chapter2.xml, Chapter3.xml -- all these are sample xmls you have to modify or create similar xmls to fit your needs.
  • 4. The MXP file (with out XML files ) is available at the following link(s): http://www.samirshomepage.com/flashonavigation/flashonavigation.zip The MXP file with the XML files is available at the following link(s): http://www.samirshomepage.com/flashonavigation/flashonavigation_withxml.zip All these XML files (without the MXP file)will be available at the following link(s) : http://www.samirshomepage.com/flashonavigation/saqmplexmlfiles.zip Features of the Component Flash-O-Navigation has the following features: 1. It provides you with an easy navigational interface for e-learning and slideshow/ presentational development. Just drag the component and your interface is ready ! 2. You can e-learning for two level content structures, which can be for example Chapter and Units, where the Chapter is first level of group and each chapter is made up of some units. Each Unit here can be made of just one slide image (made of either JPG/ GIF/ PNG/ SWF) or an animation created in SWF (in the _root timeline) or a simulation created in SWF (in the _root timeline) or just a quiz created in SWF (in the _root timeline). 3. The component lets the learner to move to any point of your learning tool using different buttons , and playback control. 4. They can keep notes for any point of your content (for example they can keep notes for any particular point of simulation they are viewing ) and can access it any time they want. They can keep any number of such notes.
  • 5. 5. The users can keep bookmark 6. The component allows easy updation of the menu system through XML. Using the simple XML format anyone can change or re-arrange the content index to fit the need of the e- learning development. Install the Component Double click on the flashONavigation.mxp file to run it. If you have Flash 8 or above version installed in your system then it will open the Macromedia Extension manager and you will be then asked to accept the terms. If you agree to the conditions then the extension will be automatically installed.
  • 6. Now open Flash 8 IDE and in components panel you will see the components under SamirComponents folder. Know the Component Parameters color: This parameter has 2 options – (1) defaultGray (2) dreamyWhite. Chossing either of these options changes the interface color to any of these predefined color. In future versions more cor options will be added. fullscreen This option has two values – “True” or “False”. If you choose “True”, then on stand alone mode the Flash file will go to fullscreen mde. However if you publish it for web, (selecting forWeb parameter to “True”, or just view the swf file through a browser like IE/ Netscape etc.) then the fullscreen won’t take effect, even if set to “True”) headerTitle: This string you will enter here will be the title of your e-Learning kit. The default value is “Flash-O- Navigation Training Kit”.
  • 7. This will also be reflected in credits section. headerImage: Enter the path of your logo image (JPG/ GIF/ PNG/ SWF) with height equal to 38 px. to be displayed at the top of the header area. The header title will be displayed just after the width of the image ends in the header. headertitle_color: This sets the color of the text of your header title. The default value is 0x FFFFFF. For any other color please enter the HEX value after “0x” forWeb: If you intend to publish your flash e-learning to the web / intranet, then please select this option as “True” ( the default values is set to “False”) and publsish your HTML with the Flash with FSCommand template in publish setting
  • 8. This will help you to close your interface (while inside browser )using the “Exit” button available at the right bottom. Please note that some browsers having some restrictions to Javascript may not allow to close the window through Flash. developerName Here enter the developer name of the e-learning kit , may be your name or your company name. This will appear in the creditssection publicationYear Here enter the year of publication/ development of your e-Learning tool. It will be reflected in the creditssection firstlevelPrev It shows the name that appears at the button which on click takes user to the previous first level group (in our example “to the previous Chapter”). The default value is “Prev. Chapter” secondlevelPrev It shows the name that appears at the button which on click takes user to the previous second level group (in our example “to the previous Unit”). The default value is “Prev. Unit”
  • 9. firstlevelNext It shows the name that appears at the button which on click takes user to the next first level group (in our example “to the next Chapter”). The default value is “Next Chapter” secondlevelNext It shows the name that appears at the button which on click takes user to the next second level group (in our example “to the next Unit”). The default value is “Next Unit” Listing your contents There are two levels of groups that devide the whole contents that are to be used in your e- learning. The first one is first level (high level) high level and the other one is the second level (low level). For example we can consider the high levels as “Chapters” and the low levels as “Units”. In the following we’ll see how to list our contents for the menu system: Step 1: List the First Level Groups All the high level groups are listed in “flashonav_list.xml” In this XML file you list down all your high level groups as the following format: <?xml version="1.0" encoding="ISO-8859-1" ?> - <slideshow> <fon tab="Your first level group name goes here" /> </slideshow> For example, if you have a course structure containing three chapters namely “Chapter 1”, “Chapter 2” and “Chapter 3” , then you have to create the flashonav_list.xml as follows: <?xml version="1.0" encoding="ISO-8859-1" ?>
  • 10. - <slideshow> <fon tab="Chapter 1" /> <fon tab="Chapter 2" /> <fon tab="Chapter 3" /> </slideshow> Now these will be reflected in your e-learning interface as shown in the following figure: Step 2: List the Second Level Groups In this step you need to create one XML files for each first level group you have defined in step 1. For example, if you have defined first level groups as “Chapter 1”, “Chapter 2” and “Chapter 3”, then you need to create three XML files with the similar file name, namely “Chapter 1.xml”, “Chapter 2.xml” and “Chapter 3.xml”. Note that your file name must match exactly to your groups names you have mentioned in the “flasonav_list.xml” file. Now each of these xml file will keep all the information about the contents that come under its higher level group. For example “Chapter 1.xml” will keep all the information such as how many topics will be there in this chpter alomng with their name, related file name etc. Let’s see the format of such an xml: <?xml version="1.0" encoding="ISO-8859-1" ?> - <items> <item url="Give your file name here" desc="Give your label name here" info="Give here the description that will appear when the info button is pressed" playback_control="Write Yes or No, to either allow user to be able to use the play back control or not" /> </items>
  • 11. For instance, lets say there will be 4 units inside Chapter 1, namely “Unit 1: Introduction”, “Unit 2: Need of Flash-O-Navigation”, “Unit 3: Features of Flash-O-Navigation”, and “Unit 4: Going Forward”, where you would present the first two content as animation where the user should be able to move across the animation using the playback control, where as in the other two cases the playback control is disabled, then the following can be a sample xml for “Chapter 1”: <?xml version="1.0" encoding="ISO-8859-1" ?> - <items> <item url="file1.swf" desc="Unit 1: Introduction" info="This introduces Flash-O- Navigation." Playback_control="Yes" /> <item url="image.jpg" desc="Unit 2: Features" info="It provides information on the features of Flash-O_Navigation" playback_control="No" /> <item url="flashquiz.swf" desc="Unit 3: Quiz" info="A quiz for you !" playback_control="No" /> </items> You can see that there are 4 attributes in each item node , namely url, desc, info and playbackcontrol. The attribute url represents the file (either SWF or any image format such as non-progressive JPG, PNG, GIF). If the SWF has animation then its animation should be based on the “ _root” timeline, so as to be controlled by the playback control of Flash-O-Navigation. The desc attribute represents what will be displayed as the name / label in the menu list. You can take it as the Unit Name in our example where some units combine tpo form a Chapter. The info attribute keepsw additional data about the item and this appears when the learner clicks on the info “i” button of Flash-O-Navigation.
  • 12. The playbackcontrol is the attribute that has two values – either “Yes” or “No”. If you select “Yes”, then the user can drag the seek bar of the playback control provided in the Flash-O- Navigfation to view the simulation/ animation to any point on wish. But if you opted for “No”, then the seek bar will dissapear and the iusers won’t be able to move back and forth in that second level group by dragging the seek bar. This is useful when you present a quiz or any interactive where you want the users to complete certain steps before moving forward to a particular point. General Information to be kept in mind 1) Flash-O-navigation is designed for creating e-Learning application for 1024 x 768 screen resolutions. The minimum stage needed to place this component is 1000 x 700 px. So make sure you drag the component and place it on the stage of above mentioned or of greater dimension. 2) Note that after publishing you will need to place the related XML files (including “flashonav_list.xml) in the same folder where you have placed your flash elearning swf that contains the component.
  • 13. About ESSPL ESSPL offers a wide range of e-learning, m-Learning and interactive solutions, from animation, interface design, multimedia assessment need analysis, customized courseware design, simulations, interactive kiosks, online design solutions, Flash based mobile content designing and development, to suit the wide range of client needs ranging from e-learning, m-learning to sales promotional campaign and presentation needs. For more details on ESSPL’s offerings in e-Learning and interactive design, refer to ESSPL website at www.esspl.com