1. open file “cursor.dir” in the cursor exercise folder.
2. To create a custom cursor, you must first create or import into the Cast simple graphic images with the following specifications:
The graphic files MUST be 8 bit and no larger than 32 x 32 pixels in size.
(Note: on Mac, they must be no larger than 16 x 16 pixels).
To convert your graphic, select it in the Cast and go to Modify / Transform Bitmap and change the color depth to 8 bit and the size to 32 x 32. Under Palette, select “System – Win” and select “remap colors” instead of dither.
Then hit “Transform”.
For this exercise, use the files “square 1” to “square 3” to create the cursors.
3. Go to Insert / Media Element / Cursor to open the Cursor Properties Editor. Click through the Member images using the “<” and “>” buttons (the number refers to the cast member number) and pick number 15. Click “Add” and then “Preview” to preview your cursor. Click OK to create the custom cursor. A new cursor cast member is created. Name the cursor “default”.
Note: The “Automask” button will make any area in your cursor that is white, transparent. If you have this button off, your cursor will not be transparent.
Also, to set the coordinates of your cursor to be at the center (rather than the upper left corner of your cursor), change the “Hotspot Position” or x and y coordinates to be 16 by 16. To do this, double click your cursor in the Cast to edit it.
4. To create a custom animated cursor, open the Cursor Properties Editor again. Repeat step #3 except this time add Members 15 to 17. Name this new cursor “active”.
5. To first change the default cursor from being an arrow at the beginning of the director movie, you must create a script that is activated when you start the movie. Go to Window / Script to open up the Movie Script box. Type:
on prepareMovie
cursor (member "default") end
This script will set the cursor to be cast member “default” at the start of the movie. Try playing the movie.
6. To change the cursor from default to active when you rollover the blue circle, create a new behavior script by right clicking with the mouse on the invisible
7. hotspot on sprite channel 5 in the Score and select “Script”. Type the following and name this new script “LingoCursor”:
on mouseEnter
cursor (member "active") end
on mouseLeave
cursor (member "default") end
Note that when you create a script, it becomes a script cast member which you can access through the Cast Window.
8. Apply the same script “LingoCursor” to the other invisible hotspots in sprite channels 6 and 7 in the score. To do this, right click on the sprite, go to Behavior to open the Behavior Inspector and choose the behavior “LingoCursor” when clicking the “+” sign.
Try playing the movie and testing that the cursor changes when you roll over each circle.
9. To make one of the animated loops play when you roll over the blue circle, create a new behavior script that is applied to the hotspot in sprite channel 5 of the Score. To do this, right click with the mouse on the sprite in the score, open the Behavior Inspector by choosing “Behavior” and add a new behavior to this sprite by clicking the + sign (Behavior Popup) and selecting “New Behavior”. Name the behavior “animBlue” and then open the script by clicking the script icon in the window. Type the following in the “animBlue” script window:
on mouseEnter
set the member of sprite 1 to "BlueLoop"
end
on mouseLeave
set the member of sprite 1 to "blue"
end
This script will switch the sprite in channel 1 (the blue circle) for the filmLoop
“BlueLoop” in the cast when you roll over (mouseEnter) on the hotspot.
Try repeating this step and creating new behaviors to make the film loops “yellowLoop”
and “greenLoop” play when you click on the hotspots placed over the green and yellow circles. These new scripts will be applied to the hotspots that are in sprite channels 6 and 7. So, for sprite 6 (hotspot for green circle), the behavior script would read:
on mouseEnter
set the member of sprite 2 to "greenLoop"
end
on mouseLeave
set the member of sprite 2 to "green"
end
for sprite 7 (hotspot for yellow circle), the behavior would read:
on mouseEnter
set the member of sprite 3 to "yellowLoop"
end
67 on mouseLeave
set the member of sprite 3 to "yellow"
end
10. Open the script “animBlue” from the cast window by clicking the script icon in the upper right. Add the following line in this script to make you go to the marker “startDream” in the score when you click on the blue animation.
on mouseUp
go to frame "startdream"
end
11. Create additional links to the sprites in the score so that when you click on “A valley of broken glass” or “The black goddess’, you can link to other markers on the score.
For example: Place a behavior on the sprite “A valley of broken glass” (cast
#29 named “a valley” which shows up in sprite channel 1 in score) this time by highlighting the sprite in the stage and clicking the behavior icon (the 3rd icon below the info icon for the sprite). This will open the behaviors for the sprite in the Property Inspector window.
Add a new behavior and call it “go to glass”
In the script window, type in:
on mouseUp go to "glass"
end
This will make you jump to the marker “glass” in the score when you click.
12. Try creating a link to the marker “goddess” by adding a behavior to the text “The black goddess” on the score. Use the same guidelines as in step 10 but make sure to adjust the script to make sure it goes to the right marker.
13. To restart from the beginning, create a new behavior script and apply it to the text sprite
“restart” in channel 8 in the Score. Type the following:
on mouseUp go to "start"
end
14. If you want to make the cursor animate when rolling over the active text sprites (restart, a valley or black goddess), simply choose the behavior called “LingoCursor” from the menu of behaviors and apply it to the sprites in the score that you want to indicate as hotspots.
Rewind and test the movie and create a Projector to see how it plays!
68
附件六-- Interaction design.com by Dr. Rosemary Comella
Interaction design is a multidisciplinary field coming from Human-Computer interaction (HGI) which examines the role of embedded behaviors and intelligence in physical and virtual spaces as well as the convergence of physical and digital products. Sometimes referred to by the acronyms "IxD" or "iD," interaction design has recently developed as a field of study in a growing number of universities throughout the world.
(Working definition below taken from Interaction Designers mailing list.)[1]
Interaction design (IxD) is the branch of user experience design that illuminates the relationship between people and the machines they use. While interaction design has a firm foundation in the theory, practice, and methodology of traditional user interface design, its focus is on defining the complex dialogues that occur between people and interactive devices of many types-from computers to mobile communication devices to appliances.
Historically the term interaction design has its roots in GUI-design. Interaction design has become more and more concerned about other interactions than the ones happening between a single user and a digital device. As professor Irene McAra-McWilliam notes:
"interaction design used to be primarily about the aesthetics of the interactive experience - how it makes the user feel - whereas now it is increasingly concerned with the social and political implications of new technologies". One can ask if interaction design is tied only to situations where digital devices are involved. Could, for example, the design of party games and social events be seen as interaction design?
Interaction designers strive to create useful and usable products and services. Following the fundamental tenets of user-centered design, the practice of interaction design is grounded in an understanding of real users-their goals, tasks, experiences, needs, and wants. Approaching design from a user-centered perspective, while endeavoring to
69
balance users' needs with business goals and technological capabilities, interaction designers provide solutions to complex design challenges, and define new and evolving interactive products and services.
The success of products in the marketplace depends on the design of high-quality, engaging interactive experiences. Good interaction design
* effectively communicates a system's interactivity and functionality
* defines behaviors that communicate a system's responses to user interactions * reveals both simple and complex workflows
* informs users about system state changes
* prevents user error by using techniques such as behavior-shaping constraints
While interaction designers often work closely with specialists in visual design, information architecture, industrial design, user research, or usability, and may even provide some of these services themselves, their primary focus is on defining interactivity.
The discipline of interaction design produces products and services that satisfy specific user needs, business goals, and technical constraints. Interaction designers advance their discipline by exploring innovative design paradigms and technological opportunities. As the capabilities of interactive devices evolve and their complexity increases, practitioners of the discipline of interaction design will play an increasingly important role in ensuring that technology serves people's needs.
In summary, interaction design defines
* the structure and behaviors of interactive products and services * user interactions with those products and services
[edit]
70
External links
* Design Council on Interaction Design * American Institute of Graphic Arts
* Bruce Tognazzini's First Principles of Interaction Design * Design Patterns in Interaction Design
* Interaction Design Group
* Interaction-Design.org - an open-content, peer-reviewed Encyclopedia covering terms from the disciplines of Interaction Design, HCI, Design, Human factors, Usability, Information architecture, and related fields.
* NextD Leadership Institute
* How Images Think by Ron Burnett [edit]
Related concepts
* Interactivity * Interaction * Ethnography * Experience design * Generative research * Human geography * Information architecture * Interface design
* Knowledge visualization * User-centered design
* Cooperative design and participatory design * Usability
* Gameplay
71