Open the Properties panel, and then click the Component Parameters arrow to expand it.. Open the Properties panel, and then click the Component Parameters arrow to expand it, and th
Trang 1Adding a Progress
Bar
Add a ProgressBar Component
Open the Components panel.
Click the User Interface arrow to
expand the list
Drag the ProgressBar component
onto the Stage, and then select the
bar
Give the ProgressBar component a
unique instance name in the
Property Inspector
Open the Properties panel, and
then click the Component
Parameters arrow to expand it.
Click the Mode list arrow, and then
click Event.
6
5
4
3
2
1
4
ProgressBar component
Did You Know?
The ProgressBar component doesn’t
make a good preloader A preloader is
a custom progress bar that shows the
loading status of an entire movie, and
is usually smaller in file size than the
ProgressBar component
The loading process can be
determi-nate or indetermidetermi-nate A determidetermi-nate
progress bar is linear, tracking
progress over time Use this when the
amount of content is known
Indeterminate progress bar is used
when the amount of content is
unknown
The ProgressBar component is a necessity for Flash documents that require a long time to download, because they display the loading progress while a user waits Web designers live under what is called the "ten-second rule." What that implies is that visitors to your Web site have very little patience, and they want to see things happening When you add a ProgressBar component, the visitor sees a moving represen-tation (a bar), letting them know the information is being downloaded
1
2
3
6 5
Trang 2Drag a Loader component from the
Components panel onto the Stage
Give the Loader component a
unique instance name in the
Property Inspector
Select the ProgressBar
component
Open the Properties panel, and
then click the Component
Parameters arrow to expand it,
and then enter the instance name
of the Loader into the Source
value field
Select Frame 1 in the actions layer
in the Timeline
Open the Actions panel, and then
enter the script as shown in the
illustration that will load a jpg, or
.swf file into the Loader
component
When executed, the ProgressBar
component will display a
horizontal bar, and the percentage
of the file that's loaded
Click the Control menu, point to
Test Movie, and then click Test.
When executed, the ProgressBar
component will display a moving
horizontal bar, and a percentage
which displays how much of the
file has loaded
IMPORTANT Notice that
you're not adding scripts to the
components on the Stage The key
is that these components are
activated by scripts in Frame 1 on
the Timeline, and are identified by
using unique instance names for
each component
13
12
11
10
9
8
7
7
9
12 10
Trang 3The ScrollPane component can be used for displaying large movie clips, jpg files, and swf files that need a scrollable area to display, or that you want to confine to a specific area on the Flash Stage You have the ability to display images in a limited area, using scroll bars, and the content loaded into the ScrollPane can be from a local location, or over the Internet
Adding a Scroll Pane
Add a ScrollPane Component
Open the Components panel.
Click the User Interface arrow to
expand the list
Drag the ScrollPane component
onto the Stage, and then select the
pane
Open the Properties panel, and
then click the Component
Parameters arrow to expand it.
Select from the following
ScrollPane parameters:
◆ contentPath (2.0) or source (3.0)
Click the Value field, and then
enter the full path name to the
movie clip, jpg, or swf file
◆ hLineScrollSize (2.0) or
horizontalLineScrollSize (3.0)
Click the Value field, and then
enter the number of pixels to
move the content when the left
or right arrow in the horizontal
scroll bar is pressed
◆ hPageScrollSize (2.0) or
horizontalPageScrollSize (3.0)
Click the Value field, and then
enter the number of pixels to
move the content when the
track in the horizontal scroll bar
is pressed
◆ hScrollPolicy (2.0) or
horizontalScrollPolicy (3.0)
Click the Value field, and then
select whether the horizontal
scroll bar is always present (on),
never present (off), or appears
automatically according to the
image size (auto)
5
4
3
2
2
3
ScrollPane component
Trang 4◆ scrollDrag Click the Value
field, and then select whether
there is scrolling when a user
presses and drags within the
ScrollPane (true), or no
scrolling (false)
◆ vLineScrollSize (2.0) or
verticalLineScrollSize (3.0)
Click the Value field, and then
enter the number of pixels to
move the content when the up
or down arrow in the vertical
scroll bar is pressed
◆ vPageScrollSize or
verticalPageScrollSize (3.0)
Click the Value field, and then
enter the number of pixels to
move the content when the
track in the vertical scroll bar is
pressed
◆ vScrollPolicy (2.0) or
verticalScrollPolicy (3.0) Click
the Value field, and then select
whether the vertical scroll bar
is always present (on), never
present (off), or appears
automatically according to the
size of the image (auto)
◆ enabled When you select the
check box, the field can be
selected If you deselect the
check box, the field appears
grayed out and is not
selectable
◆ visible When you select the
the check box, the field can be
viewed If you deselect the
check box, the field is invisible
◆ minHeight (2.0) Click the Value
field, and then enter a minimum
height for the ScrollPane
◆ minWidth (2.0) Click the Value
field, and then enter a minimum
width for the ScrollPane
Click the Control menu, point to
Test Movie, and then click Test.
6
6 5
4
Trang 5Data binding is a simple way of connecting Flash components to each other Components can be viewed as containers that transfer informa-tion (images, text, numbers, video, graphics) from one to the other In the Component Inspector panel, the Bindings tab controls the two contain-ers, so that when property X of component A changes, it will copy the new value to property Y of component B You can do data binding within the Component Inspector panel using the Bindings tab The Bindings tab lets you add, view, and remove bindings for the selected component
Although data binding works with any component, its main purpose is to connect Component panel UI components to external data sources
These external data sources are available as components with proper-ties, which you can bind to other component properties The Component Inspector panel is the main tool that is used within Flash for data bind-ing It contains a Schema tab for defining the schema for a component and a Bindings tab for creating bindings between component properties
The following example demonstrates how to create basic data binding
by connecting one UI component to another
Creating Bindings
Create Bindings
Open the Components panel.
Click the User Interface arrow to
expand the list
Drag the NumericStepper
component onto the Stage, and
then select the component
Give the NumericStepper a unique
instance name in the Property
Inspector
Drag a second NumericStepper
onto the Stage, and then give it a
unique instance name
Select the first NumericStepper
component
6
5
4
3
2
1
4
5 3
Trang 6Open the Component Inspector
panel, and then click the
Bindings tab.
Click the Add Binding (+) button to
add a binding
In the Add Binding dialog box,
select Value.
Click OK.
Move to the Name/Value section,
located at the bottom of the
Bindings tab
Click the Bound To item under
Name, and then click the
Magnifying Glass icon.
In the Bound To dialog box, select
the NumbericStepper component
B
Click OK.
Click the Control menu, point to
Test Movie, and then click Test.
When you click the up and down
buttons on the first
NumericStepper, the value
changes automatically in the
second NumericStepper
IMPORTANT You can use the
Bindings tab to link two or more
components together If you want
to add another component, just
click the Add Binding (+) button to
bind a second, or third component
There is no limit to the number of
components that can be bound
together
15
14
13
12
11
10
9
8
13
9
10
11
12
14 8