Flash表单制作实例集锦(1)--简单表单制作

  自从Macromedia公司发布flash以来,flash以其强大的功能很快就在网络上风靡起来,闪客一族也成为目前网络上最潮流的一族。flash不仅在动画制作上有很强的实力,在交互功能上也毫不逊色,网络学院应许多网友的要求,推出连续7节的flash在交互功能上的应用实例,希望能使你在flash网站制作上达到较高的水平。

  第1节 简单表单

  在这个简单表单实例中,在输入框中输入想要输入的内容,然后按提交按钮,这时从输出框中将输出输入框中的内容,如果按清除按钮,则将清除输入框和输出框中的所有内容,以便进行下一次的输入.

  本实例最终效果如图1.1所示;


  图1.1 简单表单最终效果

  1.首先启动Flash,新建一个影片,设置影片舞台大小为350px*250px(单位为象素),影片背景色为桔黄色,颜色代码为#FF9933.

  2.选择工具箱中的文本工具,在舞台上部拖动,绘制一个长条形的文本框,如图1.2所示:


  图1.2 绘制文本框

  打开属性面板,在属性面板中对此文本框进行相关属性的设置.因为此文本框要被用来输入文本,所以应该在文本框属性下拉列表中设置其为输入文本类型,然后设置文本框文本的字体,字号和文本颜色等属性,最后重要的一步是设置文本框的文本变量为text1,以便使用Action对其中的内容进行控制,具体设置如图1.3所示;


  图1.3 设置文本框属性

  最后使用文本工具在此文本框前面添加文本框提示信息:输入,表明此文本框的作用是用来输入文本的,如图1.4所示;


  图1.4 添加文本提示信息

  3.按照制作输入文本框相似的方法再制作一个文本框,这个文本框是用来输出文本的,所以需要在属性面板中设置其类型为动态文本框,设置其文本框变量名为text2,其它相关设置如图1.5所示:


  图1.5 设置输出文本框属性

  同样给输出文本框添加上提示信息:输出,最后如图1.6所示;


  图1.6 添加输出文本

  4.接下来给表单添加两个控制按钮:提交和清除.首先新建一个按钮元件,命名为btn,进入元件的编辑区后,绘制一个如图1.7所示的简单矩形按钮即可,然后在Hit帧插入关键帧,如图1.7所示;


  图1.7 制作按钮

  5.回到主场景中,在舞台的靠下位置分别放置一个按钮元件,并将其左右排列好,然后给左边的按钮添加提示文本:提交,给右边的按钮添加提示文本:清除,如图1.8所示;


  图1.8 给表单添加控制按钮

  6.最后的任务就是给控制按钮添加Action了.给提交按钮添加如下Action:

  On (Release)

  Set Variable: "text2" = text1

  End On

  //当点击该按钮时,变量名为"text2"的文本框中将显示变量名为"text1"的文本框中的内容.

  给清除按钮添加如下Actions为:

  On (Release)

  Set Variable: "text1" = ""

  Set Variable: "text2" = ""

  End On

  //当点击该按钮时,变量名为"text1"和"text2"的文本框将显示为空。

时间: 2024-08-02 16:03:55

Flash表单制作实例集锦(1)--简单表单制作的相关文章

Flash表单制作实例集锦(2)--存储及查阅信息

第2节 存储及查阅信息 在此表单中,用户可以事先往表单中添加多条信息,然后可以在所添加的信息中查找特定的信息项,该表单的最终效果分别如图2.1和图2.2所示; 图2.1 表单的输入信息界面 图2.2 表单的查询信息界面 1.首先启动Flash,新建一个影片,设置影片舞台大小为400px*300px(单位为象素),影片背景色为浅蓝色,颜色代码为#CCCCFF. 2.首先来制作表单中要用到的三个按钮,分别为后退按钮,提交按钮和查找按钮.此3个按钮的制作方法相同,只是按钮上的文字提示信息不同,这里以后

实例详解jQuery表单验证插件validate_jquery

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq

Flash表单制作实例:Email表单

第6节 Email表单 本实例制作一个简单的Email电子邮件表单,用户只需要添好相应的邮件信息,就可以自动调出系统默认的邮件收发程序,邮件收发程序中邮件的相关信息会自动根据表单中的内容被添好,表单的界面如图6.1所示;   图6.1 Email表单主界面 1.首先启动Flash,新建一个影片,设置影片舞台大小为400px*300px(单位为象素),设置影片背景色为灰色,颜色代码为. 2.将主场景中的默认图层更名为Form,使用文本工具分别在舞台的垂直方向上绘制3个文本框,全部设置为输入文本框,

Flash表单制作实例:用户登陆系统

第5节 用户登陆系统 使用Flash制作的表单可以用做网站的登陆入口,至于输入特定的用户名和密码,才可以进入该网站,本实例就来制作一个简单的用户登陆系统,如果输入的密码和用户名相同,则可以登陆到网站上,如果不相同,则给出提示信息,不能登陆到网站. 此登陆系统界面如图5.1所示;   图5.1 用户登陆系统主界面 比如我们在用户名文本框中输入User,然后在密码文本框中也输入Use,则自动打开Ie浏览器窗口,进入网站,如果输入的密码和用户名不相同,则给出如图5.2所示的出错信息:   图5.2 出

jquery获取form表单input元素值的简单实例_jquery

一般取值方法 $("#id").val(); $("#id").attr("value");  //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sa

JS判断form内所有表单是否为空的简单实例_javascript技巧

如下所示: function checkForm(){ var input_cart=document.getElementsByTagName_r("INPUT"); for(var i=0; i<input_cart.length; i++) { if(input_cart[i].value==""||input_cart[i].value==null) { alert("信息不能为空!"); input_cart[i].focus()

HTML5和css3实例:制作HTML5验证的网页表单

文章简介:今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现.在这个示例中,我们就制作一个比较简单的留言表单.需要的功能如下: 名称 电子邮件 网站地址 提交

AngularJs表单验证实例详解_AngularJS

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

AngularJs表单验证实例代码解析_AngularJS

常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.