Tải bản đầy đủ (.pdf) (50 trang)

Tài liệu Foundation Flash CS5 For Designers- P13 doc

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.15 MB, 50 trang )

VIDEO

579

5.
Click once on the + sign, which is the Add parameter button, and enter AllowFullScreen as
the parameter. Press the Tab key to go to the Value area of the parameter just entered and
enter true. As shown in Figure 10-39, this parameter is now added to the lineup. Click OK to
close the Parameters dialog box, and test the page in a browser.

Figure 10-39. Dreamweaver needs to be told that the Full Screen button is live.
When video is not video
Up to this point in the chapter, we have treated video as entertainment. The user simply watches it. In this
case, video is a rather passive medium. However, sometimes video becomes content and does not require
a player, captions, or even full-screen capability. In this case, video can be imported directly into a Flash
movie clip, which makes it fully accessible to Flash as content on the stage.
Before we start, we want you to be real clear on a fact of video life: video files are large, and importing any
of the files you have worked with so far in the chapter directly onto the Flash timeline would be a major
error. When considering working with video content on the Flash timeline, think short—loops of about two
seconds—and think small. The physical size of the video should match precisely the area of the stage
where it will be used.
The FLV files used in this exercise were all created in Adobe After Effects. For details
about creating such videos, see From After Effects to Flash: Poetry in Motion Graphics
by Tom Green and Tiago Dias (friends of ED, 2006).
Embedding video
Earlier, we told you that embedding video in the timeline was, well, evil. Now we are going to show you
when this can actually be a good thing. The following exercise demonstrates how this works:
1.
Create a new Flash document, and change the stage size to 468 pixels wide by 60 pixels high,
which is a common banner ad size.
2.


Select File

Import

Import Video. This will launch the Import Video wizard.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
580

3.
On the Select Video page, navigate to the Apparition.flv file in your Chapter 10 Exercise
folder.
4.
On the same page, select Embed video in SWF and play in timeline. You will see a
missive at the bottom of the dialog box warning you of the evils of this technique, but don’t
worry—the file isn’t that big. Click the Continue button to open the Embedding page.
5.
On the Embedding page, select Embedded video from the Symbol type drop-down menu.
Also be sure the check boxes for Place instance on stage, Expand timeline if
needed, and Include audio are selected, as shown in Figure 10-40. Click the Continue
button.

Figure 10-40. Embedding an FLV file in the Flash timeline
6.
On the Finish Video Import page, click the Finish button to return to the Flash stage. You
will see a progress bar, and when it finishes, the video will be on the stage, and the timeline will
expand to accommodate the number of frames in the video.
7.
Select the video, and in the Properties panel, set its X and Y values to 0. If you open the

Library, you will also see the video is in a video object.
8.
Add a new layer to the timeline and enter your name.
9.
Save and test the movie. The weird ghostlike apparitions move around behind your name (see
Figure 10-41).

Figure 10-41. Embedded video can be used as content.
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

581

Embedding video as a movie clip
In this next exercise, you are going to create a rainy day in the mountains of Southern California. In this
example, you will discover the power of matching Flash’s blend modes with video.
1.
Open the Rainfall.fla file in your Chapter 10 Exercise folder. You will see that we have
placed an image of the mountains on the stage.
2.
Click the first frame of the Video layer. Select File

Import to stage. In the Import
dialog box, select the Rain.flv file, and click Open. This will launch the Import Video wizard.
3.
Embed the video in the timeline, as in this previous exercise, but this time, when you reach the
Embedding page, select Movie clip as the symbol type, as shown in Figure 10-42. This is a
good way to go, because it routes all the necessary timeline frames into a movie clip timeline,

rather than expanding the main timeline off a mile to the right.

Figure 10-42. Embedded video can be turned into a Flash movie clip.
4.
The new movie clip will appear in the first frame of the Video layer. Using the Properties
panel, set its X and Y values to 0. Obviously a big, black movie clip that hides the mountains isn’t
doing the job. Let’s fix that.
5.
Select the movie clip on the stage, and in the Properties panel, set the movie clip’s Blending
option to Add. The rain becomes visible, as shown in Figure 10-43.
6.
Save and test the movie. Sit back and enjoy the rain fall.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
582


Figure 10-43. Use the Add mode to remove the black background in the FLV.
Interacting with video content
So far, you have discovered how video content can interact with Flash content. In the next exercise, you
are going in the opposite direction: Flash content interacting with video content.
1.
Open the BlobEffect.fla file in this chapter’s Exercise folder. You will see we have already
placed an embedded video on the timeline. The video is a blobs effect. To see it, open the Blobs
movie clip in the Library, and when the Symbol Editor opens, press Enter (Windows) or
Return (Mac). As you can see in Figure 10-44, green blobs ooze from the top of the window and
coalesce into a giant blob, which then splits apart into smaller blobs.

Figure 10-44. We start with some green blobs, which is an FLV file embedded into a movie clip.

2.
Click in the Text layer, select the Text tool (or press T), and enter your name. Use a font and
size of your choosing. In the Properties panel, change the color of the text to #FFFF00 (bright
yellow).
3.
With the text selected, convert the text to a movie clip symbol named Name.
4.
With the Name movie clip symbol selected, select Overlay from the Blending drop-down
menu.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

583

The text will disappear. This is because the Overlay mode either multiplies or screens the colors,
depending on the destination color, which is the color immediately under the text. In this case, the yellow
text is against a black background, so you can’t see the effect.
5.
Save and play the movie. Notice how the text changes and becomes visible as the blobs pass
under it, as shown in Figure 10-45.

Figure 10-45. A classic example of Flash content interacting with video content
Adding cue points
You can add cue points to an FLV file in four ways:
 Add them when you create the FLV file in the Adobe Media Encoder.
 Add them using the FLVPlayback component’s parameters.
 Add them using the addASCuePoint() method in ActionScript.
 Add them using an XML document.
The first two methods are what we call destructive. Once you add a cue point using those two methods, it

can’t be removed. This means if your timing is off, the video will need to be reencoded and new cue points
added. Here’s some self-defense if you go with either of those methods: don’t remove the video from the
render queue until the video is approved for play. In this circumstance—and it works only for cue points
added in the Adobe Media Encoder—you select the video in the render queue and choose Edit

Reset
Status. When you return to the Cue Points tab, all the cue points will be there, and they can be
removed and changed.
The second method is one we showed you earlier in the chapter. You can use the cue points feature of the
Properties panel to add them. The downside to this is if changes need to be made you need to have
ready access to the original FLA.
The last two ways are the most flexible because, if the timing is off, you simply open the code and change
a number.
Here, we will concentrate on using an XML document to insert the cue points. Before we dig into the XML,
you should know that in Flash video, there are three flavors of cue points:
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
584

 Navigation cue points: These cue points do exactly what the name implies: they are used to
navigate, seek, and trigger ActionScript methods. If you create a navigation cue point, Flash will
actually insert a keyframe at that point in the video.
 Event cue points: These are the most common. They tell Flash and/or ActionScript to do
something when they are encountered.
 ActionScript cue points: These can be used only if you are using the Cue Points area in the
Properties panel. They can be used either for navigation or to initiate events while the video
plays.
In the upcoming exercise, you will create event cue points that will be used to tell Flash to display a
caption.

An alternate XML format for cue points
We tend to think the Timed Text format described earlier in this chapter is the way to go for cue points, if
only because it’s a nonproprietary specification. However, it’s good to know your options. You may just
decide to use the alternate approach described in this section instead. If you do, there is a very specific
format you must follow. Let’s look at it.
Open the CuePoints.xml document in this chapter’s Exercise/YourTurn folder. You can use
Dreamweaver CS5, a simple text editor, or even a word processor for this purpose. Just make sure that
when you save the file, you save it as plain text. When the document opens, the first “chunk” of code you
will encounter is the following:

<?xml version="1.0" encoding=“UTF-8” standalone="no" ?>
<FLVCoreCuePoints>
<CuePoint>
<Time>9000</Time>
<Type>event</Type>
<Name>fl.video.caption.2.0.0</Name>
<Parameters>
<Parameter>
<Name>text</Name>
<Value><![CDATA[<font face="Arial, Helvetica, _sans"
size="12">Look ... up in the sky ... look...</font>]]></Value>
</Parameter>
<Parameter>
<Name>endTime</Name>
<Value>11.0</Value>
</Parameter>
</Parameters>
</CuePoint>
</FLVCoreCuePoints>
www.zshareall.com

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

585

This is the syntax that must be used. Deviate from it at your own peril. The first line specifies the encoding
for the document, and the second line tells Flash that anything between the <FLVCoreCuePoints> tags is
to be considered within the context of a cue point.
Each cue point you will add must be enclosed between <CuePoint> and </CuePoint> tags. The <Time>
tag is the start of the cue point, and this number must be expressed in milliseconds. The next tag, <Type>,
tells Flash that the cue point is to be an event cue point, and the tag following it, <Name>, is the name of
the cue point.
The rules regarding naming are rigid. The <Name> tag must be fl.video.caption.2.0 followed by a
series of sequential numbers to guarantee unique values. In our sample XML, it goes fl.video.
caption.2.0.0, fl.video.caption.2.0.1, and so on.
The parameters contain the styling data for the text that will appear in the caption and an end time for the
caption. Later in the actual XML document, you’ll see that we used the <i> tag to identify who is speaking
by setting the person’s name in italics.
The endTime property, which must be expressed in seconds, will be the time when the caption disappears
from the screen. This number can be an integer (no decimals) or can contain up to three decimal places.
Finally, you may optionally contend with using color in captions, and there are a couple of rules involving
this as well. If you scroll down to caption 2.0.7 in the file, you will see the text in the caption uses
#FF0000, which is a bright red. A couple of lines later, the backgroundColor parameter changes the
background color of the caption to 0x01016D, which is a dark blue.
The key here is how the colors are identified. Colors are specified by hexadecimal values, but the
indication that the color is in hexadecimal notation—# or 0x—depends on where it’s being stated. The first
change to the red uses the pound sign, #, as traditionally used in HTML. Why? It’s because it appears
within HTML-formatted content. The second change—to the dark blue—uses the format for specifying
hexadecimal notation in ActionScript, 0x.
If you do change the background color of a caption, that color will “stick.” This means all subsequent

captions will use this background color. If you need only a single change, as in our example, change the
backgroundColor parameter back in the next cue point. In our case, we changed it to black again
(0x000000), as seen in caption 2.0.8.
Do your sanity a favor and separate each caption with an empty line or two in the XML. This makes the
captions easier to read and locate. The blank space, called whitespace, will be ignored by Flash.
What does all of this have to do with cue points and FLV files? You are about to find out. First, though, you
need to download a cartoon.







www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
586

HTML TAGS AND FLASH
HTML tags may be used only if they’re supported by Flash. They are as follows:

Anc hor ta g (
<a>
)): If you want to make a hyperlink without using the Properties panel, this
is your tag. This tag supports two attributes:
• href
: An absolute or relative URL, up to 128 characters in length. This attribute
corresponds to the Link setting of the Properties panel and is required if you want
the hyperlink to actually do something. If you’re opening a web document, use the

http:

or
https:
protocol. If you want to trigger ActionScript instead, use the
event:
protocol.
More on this in the section “Hyperlinks and Flash text.”
• target
: One of four values that correspond to the Target setting of the
Properties panel:
_blank
(opens the URL in a new browser window),
_parent

(opens the URL in the parent frameset of an HTML frameset),
_self
(opens the URL in the
same window or frame as the current HTML document that holds this SWF; this is the
default behavior), and
_top
(opens the URL in the topmost window of a frameset,
replacing the frameset with the new URL).

Bold ta g (
<b>
): Makes text bold, if the current font supports it. Yes, even though HTML jockeys
are all using
<strong>
nowadays, Flash Player doesn’t support it. Use the

<b>
tag.

Br eak tag (
<br>
): Represents a line break.

Fo nt tag (
<font>
): Provides three ways to format the styling of text, by way of the following
attributes:
• color
: A hex value representing a color.
• face
: The name of a font.
• size
: The size of the font in pixels. You may also use relative sizes, such as +2 or –1.

Image ta g (
<img>
): Displays a graphic file, movie clip, or SWF inside a text field. Supported
graphic formats are JPEG, GIF, and PNG. This tag may be configured by way of quite a few
attributes:
• src
: This, the only required attribute, specifies the URL of an external image or SWF, or the
linkage class for a movie clip symbol in the Library (see the “Symbol essentials” and
“Sharing assets” sections of Chapter 3). External files do not appear until they are fully
loaded, so depending on your needs, you may want to embed content in the SWF itself. To
refer to embedded Library content, simply use the linkage class as the value for the
src


attribute—
<img src='MyLinkageClass' />
—instead of the path to an external file.
• id
: If you want to control the content of your image tag with ActionScript, you’ll need to
know the instance name of the movie clip that contains that content. This is where you
provide that instance name.
• width
and
height
: These specify the width and height of the image, SWF, or movie clip
in pixels. If you like, you may scale content along the x axis and y axis by setting these
attributes arbitrarily.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

587

• align
: This determines how text will flow around the image, SWF, or movie clip. The
default value is
left
, and you may also specify
right
.
• hspace
and
vspace

: Just as with HTML, these values determine how much “padding”
appears around the image, SWF, or movie clip. Horizontal space is controlled by
hspace
,
and vertical space is controlled by
vspace
. The default is 8 pixels. A value of
0
gets rid of
the padding, and negative numbers bring in the edges, pulling in adjacent content with
them.
• checkPolicyFile
: This instructs Flash Player to check for a cross-domain policy file on
the server associated with the image’s or SWF’s domain.

Italic ta g (
<i>
): Makes text italicized, if the current font supports it. Like our note for the
<b>
tag,
use
<i>
for italics in text field HTML, as opposed to the
<em>
tag generally preferred by web
developers nowadays.

List ite m tag (
<li>
): Indents text and precedes it with a round bullet. In the case of normal HTML,

<li>
tags may be further managed by parent list tags. The bullets of unordered lists (
<ul>
), for
example, may be specified as circle, disk, or square. The bullets of ordered lists (
<ol>
) may be
specified as numbers, roman numerals, or letters. This is not the case in the microcosm of Flash HTML.
Lists require neither a
<ul>
nor an
<ol>
tag, are unordered only, and feature only round bullets.

Para graph ta g (
<p>
): Our good, old-fashioned paragraph tag. Paragraphs come with a built-in
line break, and you get two attributes with this tag:
• align
: This affects the text alignment. Valid settings are
left
,
right
,
center
, and
justified
—the same alignments available in the Properties panel.
• class
: This specifies the name of a CSS class selector, which can be used to stylize

content.

Spa n tag (
<span>
): This tag doesn’t do anything on its own, but it accepts a class attribute that
supports CSS, and that attribute is
styling
.

Text for mat ta g (
<textformat>
): In many ways, this is the HTML version of the
TextFormat

class. Use the following parameters to stylize text content:
• blockindent
: Determines block indentation.
• indent
: Determines indentation of the first line only and accepts both positive and
negative values.
• leading
: Affects line spacing. It accepts both positive and negative values.
• leftmargin
,
rightmargin
: Determines the left and right margins of the text.
• tabstops
: Specifies tab stops.

Un derline tag (

<u>
)): Makes text underlined. This tag is the easiest way to underline text in
Flash (other than through CSS styling).
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
588

Your turn: create XML captions for video
In the 1940s, the original Superman cartoons were produced by a gentleman named Max Fleischer. A
small number of these cartoons have entered the public domain, which means that they are free for you to
download and use. One of them, “Superman: the Mechanical Monsters,” is the cartoon you will be
captioning. To remain purer than pure, we aren’t including the cartoon in the Exercise downloads. We
would respectfully ask that you head over to www.archive.org/details/superman_the_
mechanical_monsters. The download options are on the left side of the page, offering files in different
compressions and sizes. In theory, it doesn’t matter which file you download. We used the 256Kb MPEG4
(27MB) version.
We find it rather fascinating that the copy of the video that plays on the page is Flash
video. It’s a low-quality one, but it’s Flash video all the same.
Now that you have downloaded the source video, proceed as follows:
1.
Open the Adobe Media Encoder, and drag the video from its location into the render queue.
2.
Open the Export Settings window. Enter Superman as the output filename, and select FLV
as the format.
3.
Click the Video tab. Ensure you are using the On2 VP6 codec, Deselect Resize Video if it is
selected; in the Bitrate settings, use VBR and Two encoding passes. Reduce the Bitrate
value to 300.
4.

Click the Audio tab. Change Output Channels to Mono, and reduce Bitrate to 64 kbps.
Let’s now turn our attention to the cue points area under the preview. This is where all of the pain, sweat,
and aggravation that went into creating the XML document comes into play. The care and diligence you
put into ensuring all of the tags in the XML document are correct are about to pay off. How so? Let’s add
the first cue point manually to give you the idea.
5.
Scrub the playback head of the FLV to the 00:00:09;500 mark of the video.
6.
Click the + button (which is the Add Cue Point button). Enter fl.video.caption.2.0.0 as
the name of the cue point. Notice how the default value for Type is Event.
7.
Click the Add Parameter button, and enter Text into the name area. Click in the Value area,
and enter <font face="Arial, Helvetica, _sans" size="12">Up in the sky,
look!</font>.
8.
Click the Add Parameter button, and enter endTime as the name and 10.9 as the value. The
cue point appears in the cue point area, as shown in Figure 10-46.
Now repeat steps 6, 7, and 8 about 30 more times to add the remaining cue points. (Yeah, we are
kidding.)
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

589


Figure 10-46. Manually adding cue points to an FLV
Obviously, going the manual route is tedious at best. Surely there must be an easier method. There is:
embed the CuePoints.xml document directly into the FLV file. Let’s use that technique.
9.

Select the cue point, and click the Remove Cue Point button (the – sign) to remove the cue
point you just added.
10.
Click the file folder icon (the Navigate button) in the cue points area. This will open the Load
Cue Points File dialog box. Navigate to the 15_YourTurn_CuePoints folder, select the
CuePoints.xml file, and click the Open button.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
590

In the cue points area, you will notice all the cue points in the XML document have been added. If you
select the first one, you will see that the parameters have also been added, as shown in Figure 10-47.
Seeing the cue point parameters can be a little tricky. Don’t click the cue point’s name.
That will select the name. Click in the gray area of the strip between the Cue Point
Name and Time areas, and the parameters for that cue point will appear.

Figure 10-47. Load the XML, and the cue points and their parameters are added in less than one second.
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

591

11.
Click the OK button to return to the render queue. Click the Start Queue button to encode the
cartoon.
12.
Return to Flash CS5 and create a new document. Save this document to the YourTurn folder.

13.
Drag an FLVPlayback component to the stage, add a skin (we used
SkinUnderAllNoFullScreen.swf), and set the source parameter to the FLV file you just
created. When the dialog box closes, you will see all of the event cue points from the XML
document are listed.
14.
Drag a copy of the FLVPlaybackCaptioning component anywhere onto the pasteboard or
stage (it doesn’t really matter where, because the component is invisible in the published SWF).
You will notice you don’t need to add the CuePoints.xml document as a parameter in the
FLVPLaybackCaptioning component. All it has to do is be present in the SWF. You only need to do
configure the parameter when using Timed Text captions.
15.
Save and test the movie. Notice how the captions automatically appear, as shown in Figure
10-48.

Figure 10-48. The FLVPlaybackCaptioning component only needs to be in the SWF and doesn’t
require configuration.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
592

Bonus round
You don’t need to add the cue points in the XML document in the Adobe Media Encoder. There is a new
way of doing it. Here’s how:
1.
Open the CuePoints.xml document in Dreamweaver CS 5 or a text editor.
2.
Select the word event in the first <type></type> tag, and using the Search and Replace
feature of your software, change the word from event to actionscript.

3.
Save the file as Superman.xml.
4.
Open a new Flash document, save it to the 15_YourTurn_CuePoints folder. Heave an
FLVPlayback component onto the stage, and set the source to the SupermanNoCuePoints.flv
file in that folder.
5.
Select the component on the stage, and in the Cue Points area of the Properties panel,
click the Import ActionScript Cue Points button, which opens the Import
ActionScript Cue Points dialog box.
6.
Navigate to the Superman.xml file you just created, and click Open. You will see a small Alert
box telling you that you have just imported 33 cue points. Click OK. When the alert closes, all of
the cue points and their parameters, as shown in Figure 10-49, will appear.
7.
Add a Captioning component to the pasteboard and test your movie.
What this should tell you is that you need to determine, up front, when the cue points in an XML document
will be added to the FLV. If it is during the encoding of the video, then you need to put event or
navigation between the <type> </type> tags. If it is during author time, then use actionscript as the
<type>.
Finally, if you think these two exercises are nothing more than “mildly interesting,” you would be making a
profound error in judgment. One of the reasons Flash video rarely appears on government or other publicly
funded/subsidized websites is that video was, for all intents and purposes, inaccessible. The ability to
easily add captioned video and to turn the captions on and off has opened up a market that was otherwise
closed to Flash designers and developers.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

593



Figure 10-49. The XML cue points can be added using the Properties panel.
Your turn: play with alpha video
In this exercise, we introduce you to a couple of new concepts. The first is that video doesn’t necessarily
need to use the FLVPlayback component and reside on the main timeline for it to work. The second
concept is that just because it is video is no reason for not having fun with it. Let’s start jamming with
video:
1.
Open the VideoJam.fla file in the Chapter 10 Exercise folder. You will notice we have provided
the background image.
2.
Create a new movie clip symbol, and name it Video.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
594

3.
In the Symbol Editor, open the Library, and select New Video from the Library drop-
down menu. Just click OK when the Video Properties dialog box opens.
4.
Drag the video object from the Library onto the stage. In the Properties panel, give it the
instance name of myVideo, set its X and Y values to 0, and change its Width and Height
values to 320 and 214.
5.
Add a new layer to the movie clip, and name it Actions. Select the first frame of the Actions
layer, open the Actions panel, and enter the following code:

var nc:NetConnection = new NetConnection();

nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachNetStream(ns);

ns.client = {};
ns.play("Alpha.flv");

6.
Return to the main timeline, select the Video layer, and drag your new movie clip symbol to the
stage.
7.
Save and test the movie.
What you have just discovered is video can be put into a movie clip and will still play on the main timeline.
This is an important concept for two reasons:
 The resulting SWF is under 30KB, meaning you can use it in banner ads. In fact, if you want it to
be even smaller, remove the image, and the file size drops to 1KB.
 Objects contained in movie clips are open to creative manipulation.
Let’s continue and check out that last point.
8.
Select the movie clip on the stage, and twirl down the Filters area of the Properties panel.
Add a Drop Shadow filter, and apply these values:
 Blur X: 15
 Blur Y: 15
 Strength: 75%
 Quality: High
 Distance: 10
9.
Test the movie.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

VIDEO

595

You’ll see that the people in the video have all developed shadows, as shown in Figure 10-50. This is
because the video, like a box drawn in a Flash file, a Fireworks PNG, or a Photoshop image, contains an
alpha channel. In the case of video, this channel moves, and Flash applies the drop shadow to the
channel. This looks OK, but let’s give the subjects a bit of depth.

Figure 10-50. Filters can be applied to video contained in a movie clip.
10.
Select the movie clip on the stage, and add a Bevel filter to the video with these values:
 Blur X: 6
 Blur Y: 6
 Quality: High
 Distance: 3
11.
Save and test the movie.
The subjects take on a bit of depth, and you have also added a hint of backlighting, as shown in Figure
10-51. Don’t get aggressive with filters; subtlety counts.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
596


Figure 10-51. Multiple filters can be applied to video.
Hang on, these guys are ghosts. Can you turn them into ghosts? You bet.
12.
In the Filters area, select the Drop Shadow filter, and select Knockout, Inner Shadow,

and Hide Object.
13.
Test the movie.
You have a 3D ghost. Interesting, but can you do better, of course.
14.
In the Filters area, select the Drop Shadow filter and deselect Knockout, Inner Shadow,
and Hide Object.
15.
Twirl down Display in the Properties panel.
16.
Select the video on the stage, and select Overlay from the Display area’s Blending drop-
down menu.
17.
Test the video.
You’ll see that the subjects take on a “ghost-like” appearance, as shown in Figure 10-52.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

597


Figure 10-52. Don’t be afraid to use the blend modes to create some interesting effects.
Your turn: think big, really big!
In this final exercise in this chapter, we want you to think big, and we mean really big. We are talking full-
screen, HD video. Using the FLVPlayback component to go full-screen has one small issue: the stage is
what goes full screen. That means the content on the stage scales up with it. With HD content—720p and
higher—this put a huge strain on the computer. The solution, which has been part of Flash Player since
Flash Player 9.0.115.0 quietly switched on HD, is to use hardware acceleration.
Hardware acceleration is applied through Flash Player. Simply right-click (Windows) or Control+click (Mac)

any video playing in a web page to open the Flash Player dialog box. Click the Display icon (It looks
like a monitor), and you will see the dialog box shown in Figure 10-53. Select Enable hardware
acceleration, and you are good to go.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
598


Figure 10-53. Enabling hardware acceleration
We suggest you open the fullScreenRect.fla file in your Exercise folder, and take a peek at the code.
The “magic” is found in the in the goFullScreen function at the end of the code:

function goFullScreen( e:MouseEvent ):void
{
stage.fullScreenSourceRect = screenRect;
stage.displayState = StageDisplayState.FULL_SCREEN;
}
The first line of the function—stage.fullScreenSourceRect = screenRect;—essentially tells Flash to
create a rectangle that will hover over the stage. This rectangle, in extremely simplistic terms, will be filled
with the video object and the button. The next line tells the stage to pop out to full screen, and when it
does, only the rectangle and its contents are scaled out to full-screen, and hardware acceleration takes
over to play the video.
What we suggest you do is to add this code to your Code Snippets panel and to make the changes
indicated in the comments.
Finally you can use the HTML template—Flash Only: Allow Full Screen—in the Publish
Settings or use Dreamweaver to tell the HTML page to permit full-screen video.
If you want to try it, open the fullScreenRect.html page in your Exercise folder in a browser.
What you have learned
In this chapter, you learned the following:

 How video can be streamed from your web server
 How to use the Adobe Media Encoder
 How to encode video containing an alpha channel
 Several methods of embedding and streaming video without using the FLVPlayback component
 How to display HD content in Flash Player
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

×