Pathways development


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Select Pathways Bundle to download all the files (including the development files) in one large zip file.
  • Cut and paste your school’s course info into the behaviors window at the top of the workspace window show above:Thereby allowing users who click on your course info box to open the detailed course information in their web browser.
  • Pathways development

    1. 1. PATHWAYS DEVELOPMENT-- WEB FILES --<br />Bob Devine <br />Web ProgrammerWilliam Mitchell College of Law<br />2010<br />
    2. 2. Overview<br />Some familiarity with Adobe Flash is assumed<br />Pathway Demo Link and Download<br />Development Environment<br />Editing and Customizing the Pathways Graphics<br />Coding Changes and Tips<br />2<br />William Mitchell College of Law<br />
    3. 3. William Mitchell College of Law<br />3<br />
    4. 4. Creating a Pathway Guide using the Demo File provided<br />Loading up the demo file<br />The editing environment<br />Linking to your school’s courses<br />Graphical widgets and changes<br />Signaling related Pathways<br />Pathway Guide Worksheet.<br />4<br />William Mitchell College of Law<br />
    5. 5. Creating a Pathway— Getting the Files<br />Where are the files?<br />Steps:<br />Download<br />Save<br />Unzip<br />Open the files in the Flash editor<br /><br />5<br />William Mitchell College of Law<br />
    6. 6. William Mitchell College of Law<br />6<br />
    7. 7. <ul><li>Select Pathways Bundle – to download all the development files in one zip file.</li></ul>William Mitchell College of Law<br />7<br />
    8. 8. Once you unzip the bundles file, – you will see the following folder structure has been created. The pertinent development files are located in the Guide Folder as shown below. <br /><ul><li>We are now ready to customize the Pathways guide for your College or University (see slides below). You should open the file demo.fla to begin customizing for your school.</li></ul>William Mitchell College of Law<br />8<br />
    9. 9. Creating your own Pathway Guide<br />Important Terms, Editing regions and Development tips<br />Linking to your Institution’s online course descriptions<br />Adding & removing course information in the workspace area<br />9<br />William Mitchell College of Law<br />
    10. 10. Editing Environment<br /><ul><li>On Slide #11, below, you see the overall layout of a typical Flash editing environment – labeled for reference purposes as I will refer to various areas of the editing environment later in this document.
    11. 11. Pathways Timeframe
    12. 12. Workspace
    13. 13. Properties Window</li></ul>It is important to note that this layout is only one of many possible setup situations and your environment may be configured differently.<br />William Mitchell <br />College of Law<br />10<br />
    14. 14. William Mitchell College of Law<br />11<br />
    15. 15. Graphical Workspace<br /><ul><li>On Slide #13, below, is a sample of the editing screen in Flash.</li></ul>The screen shows only the graphical workspace portion of the editor.<br />This screen will allow you to edit the graphics and connections associated with your pathway.<br />Additional Features<br /><ul><li>Slide #14, below, shows that by ‘blocking’ out certain elements of the timeline, we can focus our attention on the graphical elements we would like to change – such as connectors, course boxes and course info bubbles.</li></ul>William Mitchell <br />College of Law<br />12<br />
    16. 16. William Mitchell <br />College of Law<br />13<br />
    17. 17. William Mitchell College of Law<br />14<br />
    18. 18. William Mitchell <br />College of Law<br />15<br />Other Additional Features<br />Slide 16 illustrates how some all graphical items can be copied, moved, deleted, renamed or otherwise modified to suit your schools individual pathway requirements. <br /><ul><li> Be sure to check the properties window for each element when it needs to be renamed (duplicate names/id’s will create problems for your movies – all control names should be unique so they can be properly referenced by your code.
    19. 19. Slide 16 demonstrates how you can signal the unique aspects of certain courses by placing a ‘course bubble’ next to it. On mouse-over the bubble automatically expands to give the user more information about the course.</li></li></ul><li>William Mitchell College of Law<br />16<br />
    20. 20. Customization<br />On Slide #18, we will first change the title of the Pathway to begin the customization of your own guide.<br /><ul><li> Select the Dynamic Text box titled “Development Demo”.
    21. 21. Then select the <embed> button in the properties window at the bottom.</li></ul>William Mitchell <br />College of Law<br />17<br />
    22. 22. William Mitchell College of Law<br />18<br />
    23. 23. After selecting the <embed> button – you will see the following screen:<br />Select <Auto Fill> to ensure the pathways title appears correctly on the Pathways Guide.<br />William Mitchell <br />College of Law<br />19<br />
    24. 24. Select any Class Name Box to begin the process of customizing your school’s course information.Then press <Shift> <F3> to bring up the “Behaviors” screen (see below).<br />William Mitchell College of Law<br />20<br />
    25. 25. <ul><li>Cut and paste your school’s course info URL into the “Behaviors” window. See Slide #22 for detailed view of where to past your URL.
    26. 26. This allows users who click on your course info box to open the detailed course information in their web browser.</li></ul>William Mitchell College of Law<br />21<br />
    27. 27. William Mitchell College of Law<br />22<br />
    28. 28. <ul><li> Select the <Actions> window by pressing <F9>
    29. 29. Select Frame 10 – Proceed to the associated movie control in the ActionScript and change the name to your Institution’s corresponding course name (see text in red box).</li></ul>William Mitchell College of Law<br />23<br />
    30. 30. William Mitchell College of Law<br />24<br /><ul><li>Slide 25 shows how we can copy and paste a connector to show visually the prerequisites for a given course.
    31. 31. By using the course connector tool we can make multiple connections. Finally to fully implement the effect we use coding to highlight the course boxes when appropriate.
    32. 32. Slide 26 shows how we code for the highlighting behavior of connected courses.
    33. 33. See Frame 10 of the ActionScript in the “Actions” window (press <F9> to bring this up if it isn’t already.
    34. 34. The onRollOverfunctionallows us to determine which movie controls will be highlighted. Just cut and paste the code and put in the correct movie control ID.
    35. 35. Remember to include the 2 lines in the onRollOut section to remove the highlighting once the control has lost the mouse focus.</li></li></ul><li>William Mitchell College of Law<br />25<br />
    36. 36. William Mitchell College of Law<br />26<br />
    37. 37. Thank you!Questions? Contact Bob Devine atbob.devine@wmitchell.edu651-290-6372<br />