director课件总结.docx

director课件总结.docx

《director课件总结.docx》由会员分享，可在线阅读，更多相关《director课件总结.docx（12页珍藏版）》请在冰豆网上搜索。

director课件总结

[Director笔记]2006课件制作详细总结

2010-08-0611:

20:

35|分类：

默认分类|标签：

|字号大中小订阅

Director制作多媒体教学课件（总结）

一、规划课件框架

一般的多媒体教学课件所需辅助教学功能无非加入一些文字、图片、视频、动画、交互来起到辅助文字阐述内容的作用。

在这里简单以一个以文字（名词解释）、图片、视频为辅助的多媒体教材的制作为例，说明如何使用director制作一个简单的多媒体课件，也作为对前一段所做工作的一个简单总结。

首先要规划课件的框架结构。

在这里我用到的稿本是一个比较规矩的三级目录结构的文字稿本，简单描述一下：

稿本共三章，每章分三节，每节有三讲内容，每讲内容对应一篇文字，其中包含超链接，跳转到名词解释、图片、视频等内容辅助说明对应本讲的具体内容。

二、准备相应素材

依据稿本内容，搜集所需的名词解释、图片、视频等素材。

我用到的是jpg格式图片和mpeg格式的视频。

在素材准备阶段还要准备好界面所需的图片，要保留设计界面所用的psd文件，保存分层信息，以备在界面改动时所用。

有些界面上的元素还需要分层输出，如按钮等。

三、制作程序框架

建立工程文件，并进行设置。

新建一个director工程文件，设置窗口大小为800*600（我做的课件参照的制作标准要求为800*600），背景色设置为适当颜色，尽量和自己设计的程序的背景图片的主色调一致，Movie面板中设置stagesize为800X600，channels为150，color为#000000。

设置程序窗口居中显示，无边框，无标题栏，通过将属性面板中displaytemplate的location选项中centered勾选，取消resizable勾选，设置titlebaroptions下的四个多选项全都取消选取可实现。

在这里还可以设置打包输出后可执行程序的图标。

这样就设置好了一个全屏为黑色背景，窗口无边框，大小为800*600的舞台。

导入事先制作好的背景和按钮等图片。

将事先设计好的程序背景和按钮图片导入，注意若有图片包含白色区域时，要将trimwhitespace选项取消勾选，否则会将图中白色区域作为透明处理，除非你想要这种效果。

我在设计背景时将背景和上面的文字按钮分别输出，也就是说背景上不含有文字，这样可以实现背景图片的重复使用，减少主程序体积，同时，也利于日后的内容修改，我可以单独修改任何一个文字按钮或其它内容而尽可能减少对其它内容的影响。

由于director中的文字无法做出阴影等效果，我在PS中制作它们，并以png格式输出为图片，并导入到DR中使用，这样可以带有阴影或描边等效果，同时也可以保留透明度等信息，实现和背景的完美融合。

由于在各个章节目录页面上，章节标题的文字要做为按钮使用，所以在从设计的psd文件输出png文件时，每个文字标题需要输出两个文件，分别表示按钮的正常和高亮状态。

要保持图片大小相同，文字位置一致，只有效果不同，这样才可以避免出现mouseover时文字高亮出现错位的情况。

输出这些按钮的过程是个重复而枯燥的过程。

在这里就涉及到了一个文件命名的问题，为了统一，同时为了便于将来编写代码时便于引用spirte的名称进行批量操作或循环操作，作为标题按钮用的图片要按照一定规范进行命名。

因为我的稿本是三级目录结构，我就使用三位数字分别表示三级层次，文件名统一以tt开始，表示这些是标题文字，如第一章标题使用“tt100”表示，第一章第一节“tt110”，第一章第一节第一讲“tt111”对应的高亮图片在后面加一个a进行区分，如“tt100a”、“tt110a”、“tt111a”，这样导入后就不需再改castmember名称，可以直接放到舞台上用，并通过变量引用sprite名称进行编程。

界面图片导入后，需要把每章的具体内容的文字拷贝到cast中，作为一个个单独的castmember，命名时与对应的那一讲的标题文字的数字一致，在前面再加上字母txt来区分，如“txt111”。

在时间线上将演员按照稿本的框架结构进行布局。

在每个界面最后一祯的script层加入一个holdoncurrentframe的behavior，使程序能停在每一级界面上。

在每个界面第一祯处添加一个marker，命名与标题文字的命名保持一致，为“t100”等。

第一级界面标记为“start”。

四、进行程序功能设计

为文字按钮添加behavior

添加鼠标效果：

先写一个名为CursorChange的behavior如下：

onmouseenterme

cursor280

end

onmouseleaveme

cursor0

end

onmousedownme

cursor0

end

实现鼠标经过按钮上方时变为手形，离开按钮恢复原状。

再写一个控制程序跳转位置的behavior名为titleforward如下：

globalgDestination

globalprePage

globalgUpPage

globalgIndex

onmouseUpme

gDestination=chars（sprite（_player.currentspritenum）.member.name,2,5）

gIndex=gIndex+1

gUpPage[gIndex]=gDestination

gotogDestination

prePage=gDestination

end

实现根据文字按钮演员名称跳转到对应的页面的功能。

这里用到了几个全局变量gDestination/prePage/gUpPage/gIndex，在程序初始化的behavior中进行声明，该behavior名为init。

在init中所有变量声明、全局函数都写在onstartmovieme这个方法中，现在我要声明用到的四个全局变量，应写为：

onstartmovieme

globalgDestination

gDestination="start"

globalprePage

prePage="start"

gUpPage=[]

globalgIndex

gIndex=1

gUpPage[gIndex]="start"

end

其中gDestination用于获取跳转的目标位置，prePage用于保存在内容页面中向名词解释、图片、视频等辅助页面跳转前的位置，给返回按钮用,gUpPage作为一个数组，用于记录跳转路径，给返回按钮引用，gIndex用于gUpPage数组的下标值。

从behavior库中调入一个PushButton的behavior。

选中所有文字按钮，赋予CursorChange、TitleForward、PushButton三个属性，在赋予PushButton属性的时候需要指定按钮各个状态的castmember，可以各个单独拖动PushButton到每个按钮上，也可以全选所有的按钮，先进行相同的设置，然后再从属性面板一个个调整按钮的设置，这样可以省去每次都要拖动一个PushButton到sprite上。

这样就实现了将章节标题制作成带有文字特效的按钮的功能。

文本框及滑动杆的制作。

有很多具体内容是大篇幅的文字，无法在一屏内显示，分成多屏显示会显得结构混乱，于是可以给文字加入类似word等软件右侧的滑动条，实现文字滚动的效果。

首先要自己制作滚动条按钮的图片，在PS中涉及一套滚动控制杆的外观，包括向上、向下按钮，滑动杆，滑动杆下面的背景滑动条。

可以根据自己做的课件的性质制作成个性化的界面，可以做成类似winXP风格的，也可以做成水晶的效果，不规则的图形等，还可以完成后在DR中设置为半透明的效果（调整ink属性的透明度即可）。

将制作好的滑动条图片导入后放置在舞台上，从library->text中拖动一个CustomScrollbar的behavior到cast中，再将其赋予滑动条的各个控件，设置好各个参数。

现在运行程序会发现滑动条和文本演员一样长，而且文本演员还是100%显示，并无滑动效果，所以还需要对需要进行滚屏的文本演员进行设置，在属性text面板中的framing设置为fixed，再在舞台上将文本演员放置在合适的位置，此时就可以自己调整文本演员的大小了，再次运行程序，会发现可以实现滚屏效果了。

比较奇怪的是其它控件可以自动对齐到文本演员的旁边，而向下箭头偏偏不会自动调整，每次都要自己手动对位，不知道是不是我的软件版本或是系统的问题（郁闷……）。

现在感觉文本背景是黑乎乎的很难看，好，将文本sprite的ink属性设置为backgroundtransparent，好，现在文字下方可以透出下面的背景图了，效果很好！

其它文本页面和名词解释的页面也作相同设置。

如果精巧设计背景图，为文本区域设计一个漂亮的边框，会是很好的效果。

（在总结的工程文件中名词解释部分我用了一个自己设计的比较满意的背景和文字融合得比较好）

制作图片和视频播放器

出于简单起见，图片浏览器和视频播放器我把quicktime的播放器界面PS了一下用于这两个界面。

将设计好的播放器背景和按钮导入cast中，再摆放到舞台上对应页面的合适位置。

完成图片浏览器按钮功能

由于一个内容配以多幅图片来辅助说明，我把它做成一个简单的图片浏览器的形式，在时间线上每幅图占一祯的位置。

使用GoNextButton和GoPreviousButton两个按钮来实现前后图片的翻页，由于这两个按钮实现的是向前后marker位置的跳转，所以要在每一个有图片的祯上标记一个marker，注意：

第一幅图的向前按钮和最后一幅图的向后按钮不添加按钮的behavior，考虑到将来在进入图片浏览器时要加转场效果，而又不想在每次由第二幅图翻回第一幅图时都出现转场，所以要把第一幅图的长度向前延长一祯，转场放在最前面的祯上。

具体实现为：

在第二祯处切断fbw按钮，向后一部分添加GoNextButton的behavior；在最后一祯处切断ffw按钮，向前一部分添加GoPreviousButton的behavior。

按钮需要鼠标变形，现在给图片浏览器和视频播放器所有功能按钮添加CursorChange和PushButton的behavior。

第一幅图的fbw和最后一幅图的ffw就不必了。

完成视频播放器的按钮功能

首先，我用的是mpeg格式的视频文件，由于DR不支持mpeg文件，所以在这里要用到一个插件，方法为：

应先将DirectorMediaXtras.x32文件放到DR的安装目录下的插件目录中。

（ProgramFiles-）Macromedia-）Directormx2004-）Configuration-）Xtras-）MediaElement）在DR菜单Insert-〉TabuleiroXtras->DirectorMediaXtra中，可以打开DirectorMediaXtra的设置菜单，在此选择所要导入的mpeg文件，确定即可，在确定左边“注册”按钮可输入注册码“dmx0000000”。

导入视频文件后要向播放器按钮添加控制，闲闪中一位朋友发给我一个名为MpegControl的behavior可以很好地完成此功能，代码如下：

propertypControlType

propertypVideoSprite

ongetpropertydescriptionlist

mylist=[:

]

addpropmylist,#pControlType,[#comment:

"ControlType:

",#format:

#symbol,#range:

[#play,#stop,\

#pause,#stepForward,#stepReverse,#reverse,#start,#end,#fastForward,#fastReverse,#loop],#default:

\

#stop]

addpropmylist,#pVideoSprite,[#comment:

"Videosprite:

",#format:

#sprite,#default:

6]

returnmylist

end

onmouseUpme

casepControlTypeof

#play:

sprite（pVideoSprite）.movieRate=1

#stop:

sprite（pVideoSprite）.movieRate=0

sprite（pVideoSprite）.movietime=0

#pause:

sprite（pVideoSprite）.movieRate=0

#stepForward:

sprite（pVideoSprite）.movietime=sprite（pVideoSprite）.movietime+100

#stepReverse:

sprite（pVideoSprite）.movietime=sprite（pVideoSprite）.movietime-100

#reverse:

sprite（pVideoSprite）.movieRate=-1

#start:

sprite（pVideoSprite）.movieRate=0

sprite（pVideoSprite）.movietime=0

#end:

sprite（pVideoSprite）.movieRate=0

sprite（pVideoSprite）.movietime=sprite（pVideoSprite）.duration

#fastForward:

sprite（pVideoSprite）.movieRate=3

#fastReverse:

sprite（pVideoSprite）.movieRate=-3

#loop:

sprite（pVideoSprite）.member.loop=notsprite（pVideoSprite）.member.loop

endcase

end

将此behavior赋予每个控制按钮，并设置按钮类型及视频sprite所在channel号。

至此视频播放器功能完成。

添加文字链接

在文本内容界面上选中一部分文字添加链接，在TextInspector面板中最后一项HyperlinkData中填入目标位置的marker名称。

则完成了文字链接功能，具有鼠标形变和跳转功能，问题是链接文字默认是蓝色，带有下划线，无法改变字体字形颜色。

于是，通过在闲闪论坛求教，得到了一个behavior可以很好解决这个问题，名称为MyHyperLink，如下：

globalgh

propertyjh

onhyperlinkclickedme,pp

cursor0

gotoframe（pp）

end

onenterframeme

ifmember（sprite

（2）.member）.char[jh].hyperlink<>""then

cursor280

else

cursor0

endif

end

onmouseleaveme

cursor0

end

onprepareframeme

gh=pointtochar（sprite2,themouseloc）

ifgh>1then

jh=gh

else

gh=1

jh=gh

endif

end

将此behavior填入cast中，赋予含有链接文字的sprite，此时再设置链接便可自定义链接文字的字体颜色风格等。

但在我实际使用过程中遇到问题，我按以上步骤进行之后并无效果，后发现，需要对文本sprite属性面板上的Text面板修改设置：

将UseHypertextStyles选项取消选择。

这样效果就出来了，以前记得似乎还要将下面的Pre-Render选项改为OtherInk并勾选该项下方的SaveBitmap。

这次总结时尝试了一下不改也没什么影响。

不过现在遇到一个怪异的现象，上面代码中的参数2应当是制定文本sprite应位于channel2上，在写此总结时我将文本sprite放在了channel3上，于是把两个参数2改成了3，运行时发现鼠标效果没有了，悬停链接文字上方时鼠标不变形，再换回channel2参数改回来，就可以了，郁闷中……

在名词解释、图片、视频间加入跳转按钮

由于有些文本内容需要辅助名词解释、图片、视频等多种手段进行说明，在几种辅助说明功能之间还需要设置相关按钮。

将事先设计好的按钮导入cast中，摆放到适当位置，加入CursorChange和PushButton两个behavior，之后就需要写三个behavior：

“ToText”、“ToImage”、“ToVideo”分别赋予三个按钮，完成跳转功能。

如下：

ToText为：

globalgDestination

globalprePage

onmouseenter（）

put"prePage="&prePage

endmouseenter

onmouseDown（）

temp=sprite（8）.member.name

gDestination="c"&（chars（temp,2,4））

endmouseDown

onmouseUp（）

gotogDestination

endmouseUp

ToImage为：

globalgDestination

globalprePage

onmouseenter（）

put"prePage="&prePage

endmouseenter

onmouseDown（）

temp=sprite（8）.member.name

gDestination="i"&（chars（temp,2,4））

endmouseDown

onmouseUp（）

gotogDestination

endmouseUp

ToVideo为：

--文本、视频、图片资料应采用“1+3”方式命名，相关的内容命名时保证前缀不同编号相同

globalgDestination

globalprePage

onmouseenter（）

put"prePage="&prePage

endmouseenter

onmouseDown（）

temp=sprite（8）.member.name

gDestination="v"&（chars（temp,2,4））

endmouseDown

onmouseUp（）

gotogDestination

endmouseUp

由于在这里都是从sprite8获取统一的编号变量，所以我需要将名词解释中的文本sprite，图片部分的图片sprite和视频部分的视频sprite都调整在channel8上，这样就可以实现behavior的重复使用了。

背景音乐的控制

为了用户浏览内容不会感到疲惫，需要加上舒缓的背景音乐，而每章之间希望音乐有所变化，转到辅助内容页面时希望音乐暂停播放，这样就涉及到背景音乐的控制问题，为三章内容分别导入三个mp3文件，命名为01、02、03，再写三个behavior，如下：

onenterFrameme

globalgCurrentChapter

gCurrentChapter=1

puppetSound1,"01"

end

分别命名为EnterCh1、EnterCh2、EnterCh3，其中变量gCurrentChapter用来标记当前是在哪一章内。

将三个behavior分别放置在章页面的第二祯处的script层（第一祯要放转场效果）。

有了背景音乐，还要能够控制它的音量大小，将事先做好的音量控制的拉杆和音量条的图片导入，分别命名为VolumeBar和VolumeSlider摆放在舞台合适位置，从Library->Media->Sound中拖一个ChannelVolumeSlider的behavior到cast中，并赋予VolumeSlider的sprite，参数设置使它约束在VolumeBar上。

在返回的时候还要继续播放背景音乐，因此对应需要一个PlayMusic的behavior如下：

onenterFrameme

sound

（1）.play（）

end

只不过现在还没做返回按钮。

那就现在做，还需要什么呢？

那就是退出按钮。

制作返回和退出按钮

把事先制作好的返回和退出的两种状态的图片导入到cast中

想一下，当我从名词解释、图片、视频等辅助说明部分返回文本页面时需要做什么呢？

首先要回到跳转前的位置，就需要用到前面代码中出现的prePage这个变量，其次，跳转过来时将背景音乐关掉了，现在需要恢复背景音乐继续播放。

于是有了下面的BackToContext的behavior：

--用于返回按钮

globalprePage

onmouseupme

playMusic

gotoprePage

end

其中的playMusic是个函数，我们需要定义在init初始化的script中，内容为：

onplayMusicme

sound

（1）.play（）

end

这样就不需要前面提到的名为PlayMusic的behavior了，因为函数使用时有更大的灵活性。

退出按钮需要什么功能呢？

当然最简单的就是给它一句quit，让程序退出，但这里我还想要在退出前显示一下我的版权信息，那么，就把它处理成一个普通的按钮，完成一个向退出界面跳转的功能。

写一个名为ExitButton的behavior如下：

onmouseUp（）

goto"exit"

endmouseUp

下面就需要设计一下退出界面了，退出界面需要标记marker为exit我需要分别显示出作者群和出品单位信息，之后退出程序。

在每个信息页面使用一个LoopForXSeconds的behavior使画面停顿三五秒钟，当然，最后的退出还是要由一句quit完成的：

onenterframeme

quit

endenterframe

这个名为exit的behavior要放在退出界面的最后一祯。

这样程序就基本完成了，最后统一将转场设置一下，调出score窗口的效果图层，在各级界面的第一祯处设置一下转场，很简单的事情，需要提一下的是，程序自带的转场效果比较平淡，如果想要得到比较炫的转场效果，就需要第三方插件的帮忙了。

转场插件位置应放到C:

\ProgramFiles\Macromedia\DirectorMX2004\Configuration\Xtras\Transition目录下，之后打开DR在转场设置的菜单内就可以看到新拷贝进来的插件效果了，我从网上下载到了dmtoolsxtra、Hybrids、KillerTransitions三个转场插件，包含很多很炫的效果，只是使用转场涉及到一些注册的问题，我找到了KillerTransitions的注册码为：

Sn:

KT1-10001-49885-77254这样我就用到了几个效果不错的转场，为课件稍有增色。

这时候感觉课件已经基本完成，运行时发现，按照稿本的树形层级结构向下跳转是没有问题的，可是向上一级的按钮还没有。

现在给它加上。

“向上”按钮的制作

导入事先制作好的向上按钮的两种状态的图片，在舞台上摆放到适当的位置，并为其赋予CursorChange和PushButton两个behav