Embed Size (px)
Citation preview
PATHWAYS DEVELOPMENT-- WEB FILES --
Bob Devine
Web ProgrammerWilliam Mitchell College of Law
2010
Overview
• Some familiarity with Adobe Flash is assumed
• Pathway Demo Link and Download• Development Environment• Editing and Customizing the Pathways
Graphics• Coding Changes and Tips
2William Mitchell College of Law
William Mitchell College of Law 3
Creating a Pathway Guide using the Demo File provided• Loading up the demo file• The editing environment• Linking to your school’s courses• Graphical widgets and changes• Signaling related Pathways• Pathway Guide Worksheet.
4William Mitchell College of Law
Creating a Pathway— Getting the Files
• Where are the files?• Steps:
1. Download
2. Save
3. Unzip
4. Open the files in the Flash editor
• http://www.wmitchell.edu/pathways/demo/DownloadForm.asp
5William Mitchell College of Law
William Mitchell College of Law 6
• Select Pathways Bundle – to download all the development files in one zip file.
William Mitchell College of Law
7
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.
• 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.
William Mitchell College of Law
8
Creating your own Pathway Guide
• Important Terms, Editing regions and Development tips
• Linking to your Institution’s online course descriptions
• Adding & removing course information in the workspace area
9William Mitchell College of Law
Editing Environment•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.
• Pathways Timeframe• Workspace• Properties Window
It is important to note that this layout is only one of many possible setup situations and your environment may be configured differently.
William Mitchell College of Law
10
William Mitchell College of Law 11
Graphical Workspace
• On Slide #13, below, is a sample of the editing screen in Flash.
The screen shows only the graphical workspace portion of the editor.This screen will allow you to edit the graphics and connections associated with your pathway.
Additional Features• 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.
William Mitchell College of Law 12
William Mitchell College of Law
13
William Mitchell College of Law 14
William Mitchell College of Law
15
Other Additional Features
Slide 16 illustrates how some all graphical items can be copied, moved, deleted, renamed or otherwise modified to suit your schools individual pathway requirements.
• 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.
• 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.
William Mitchell College of Law
16
Customization
On Slide #18, we will first change the title of the Pathway to begin the customization of your own guide.
• Select the Dynamic Text box titled “Development Demo”.
• Then select the <embed> button in the properties window at the bottom.
William Mitchell College of Law 17
William Mitchell College of Law
18
After selecting the <embed> button – you will see the following screen:
Select <Auto Fill> to ensure the pathways title appears correctly on the Pathways Guide.
William Mitchell College of Law 19
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).
William Mitchell College of Law
20
• 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.
• This allows users who click on your course info box to open the detailed course information in their web browser.
William Mitchell College of Law
21
William Mitchell College of Law
22
• Select the <Actions> window by pressing <F9>
• 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).
William Mitchell College of Law
23
William Mitchell College of Law
24
• Slide 26 shows how we code for the highlighting behavior of connected courses. • See Frame 10 of the ActionScript in the “Actions” window
(press <F9> to bring this up if it isn’t already.
• The onRollOver function allows us to determine which movie controls will be highlighted. Just cut and paste the code and put in the correct movie control ID.
• Remember to include the 2 lines in the onRollOut section to remove the highlighting once the control has lost the mouse focus.
• Slide 25 shows how we can copy and paste a connector to show visually the prerequisites for a given course.• 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.
William Mitchell College of Law
25
William Mitchell College of Law
26
