JavaScript使用技巧精萃,Javascript与flash交互通信控制的方法

原文地址:
www.macromedia.com/support/flash/ts/documents/java_script_comm.htm
说明: 略作修改,主要是一些很初级的操作; 又很多相似的文章,不过这个很权威

出处:

这是一段典型的html typical HTML file:

下面是一些在Flash和使用Javascript的HTML文件直接通信的示例,每个示例都有简略的步骤

  (一).确认删除用法:
   
    1. BtnDel.Attributes.Add(“onclick”,”return
confirm(‘”+”确认删除?”+”‘)”);
    2. linktempDelete.Attributes[“onclick”]=”javascript:return
confirm(‘”+”确认删除?”+”‘);”;
    3. private void grdProject_ItemDataBound(object sender,
DataGridItemEventArgs e)
    4.
    {
    if ((e.Item.ItemType == ListItemType.Item) | (e.Item.ItemType ==
ListItemType.AlternatingItem))
    {
    // 刪除按鈕上的提示部分
    e.Item.Cells[10].Attributes.Add(“onclick”, “return
confirm(‘确定删除吗?’);”);
    }
    }
    5.
    <script language=”JavaScript” type=”text/JavaScript”>
    function delete_y(e)
    {
    if(event.srcElement.outerText == “删除”)
    event.returnValue=confirm(“确定删除?”);
    }
    document.onclick=delete_y;
    </script>
   
     (二).跨语言字符串替换
   
   
System.Text.RegularExpressions.Regex.Replace(str1,@”<{1}[^<>]*>{1}”,””).Replace(” “,””).Replace(“/”,”//”).Replace(“-“,”-“).Replace(“&”,”&”).Replace(“<“,”<“).Replace(“>”,”>”).Replace(“br”,”/n”);
   
     (三).关闭窗体
   
    1.
    this.btnClose.Attributes.Add(“onclick”, “window.close();return
false;”);
    2.关闭本窗体间跳转到另一个页面
    this.HyperLink1.NavigateUrl =
“javascript:onclick=window.opener.location.assign
    (‘” + “index.aspx”+ “?&Func=Edit&AutoID=” + intAutoid +
‘);window.close();”;
    3.关闭父窗体:
    <INPUT type=”reset” value='<%=this._Cancel%>’
onclick=”window.parent.close()” Class=”Button”>
   
   
     (四).Web MessageBox
   
    1.
    Response.Write(“<script language=javascript>
window.alert(‘保存成功1’);</script>”);
    2.
   
Response.Write(“<script>alert(‘”+”保存成功!”+”‘);</script>”);
    3.
    this.Page.RegisterStartupScript(“ChiName”,”<script
language=’javascript’>alert(‘” + “保存成功!” +
“‘)</script>”);
   
     (五).DataGrid中加CheckBox控件模板列.
    请看:

   
     (六). window.open() 方法
   
     语法:window.open(pageurl,name,parameters);
   
     window对象的open()方法用于创建一个新的窗口实例,新创建的窗口的外观由参数:parameters指定。新窗口中打开的文档由参数:
   
    pageurl指定。系统能够根据参数:name确定的名称访问该窗口。
   
    下表为parameters参数表:
    参数 衩始值 说明
    alwaysLowered yes/no 指定窗口隐藏在所有窗口之下。
    alwaysRaised yes/no 指定窗口浮在所有窗口之上。
    dependent yes/no
指定打开的窗口为父窗口的一个了窗口。并随父窗口的关闭而关闭。
    directions yes/no 指定Navigator 2和3的目录栏是否在新窗口中可见。
    height pixel value 设定新窗口的像素高度。
    hotkeys yes/no 在没有菜单栏的新窗口设置安全退出热键。
    innerHeight pixel value 设置新窗口中文档的像素高度。
    innerWidth pixel value 设置新窗口中文档的像素宽度。
    location yes/ no 指明位置栏在新窗口中是否可见。
    menubar yes /no 指明菜单栏在新窗口中是否可见。
    outerHeight pixel value 设定窗口(包括装饰边框)的像素高度。
    outerWidth pixel value 设定窗口(包括装饰边框)的像素宽度。
    resizable yes /no 指明新窗口是否可以调整。
    screenX pixel value 设定新窗口离屏幕边界的像素长度。
    screenY pixel value 设定新窗口离屏幕上边界的像素长度。
    scrollbars yes /no 指明滚动栏在新窗口中是否可见。
    titlebar yes /no 指明菜单题目栏在新窗口是否可见。
    toolbar yes /no 指明工具栏在新窗口中是否可见。
    Width pixel value 设定窗口的像素宽度。
    z-look yes /no 在文档中包含各个<pplet>标签的数组。
    fullscreen yes / no 打开的窗体是否进行全屏显示
    left pixel value 设定新窗口距屏幕左方的距离
    top pixel value 设定新窗口距屏幕上方的距离
   
    例子:
    <html>
    <head>
    <title>window.open函数</title>
    </head>
    <body>
    <script language=”javascript”>
    <!–
   
window.open(“”,”name1″,”width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100″);
    //–>
    </script>
    </body>
    </html>
   
     (七).location对象
   
    href 整个URL字符串.
    protocol 含有URL第一部分的字符串,如http:
    host
包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
    hostname 包含URL中主机名的字符串.如
    port 包含URL中可能存在的端口号字符串.
    pathname URL中”/”以后的部分.如~list/index.htm
    hash “#”号(CGI参数)之后的字符串.
    search “?”号(CGI参数)之后的字符串.
   
     (八).按键捕捉
   
    1.Ctrl+Enter按键捕捉方法
    <body onkeydown=”doKeyDown()”>
    <script language=”JavaScript”>
    <!–
    function doKeyDown()
    {
    if (event.ctrlKey && event.keyCode == 13)
    {
    alert(“You pressed the Ctrl + Enter”)
    }
    }
    //–>
    </script>
    </body>
    2.Alt加快捷键: Alt+A
    <button accessKey=A title=”Alt+A” onclick=”alert(‘Button
clicked!’)”>Alt+A</button>
   (九).控制输入,非法字符不能输入到TextBox.
    <asp:textbox class=”Text”
    onkeypress=”if (event.keyCode < 48 || event.keyCode >57)
event.returnValue = false;”
    id=”txtY_Revenue” style=”TEXT-ALIGN: right” runat=”server”
Width=”90%” MaxLength=”12″>
    </asp:textbox>
    说明: 此方法控制TextBox只收数字:0~9 ,
也自可以定义其它可输入字符,如改成: 65~123,只允许输入: a~z和A~Z 等. 
 

<!DOCTYPE html>  <html>    <head>      <title>Bootstrap 101 Template</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>    <body>      <h1>Hello, world!</h1>      <script src="http://code.jquery.com/jquery.js"></script>    </body>  </html>

本文讨论了3种基本的Flash/Javascript通信方式:
Javascript 到 Flash的通信—-使用Flash播放器的javascript方法
Flash 到 Javascript的通信—-使用Flash的fscommand
Flash 到 Flash的通信———-使用本地连接对象或综合上2种技术


To make this a Bootstrapped template, just include the appropriate
CSS and JS files:

并不是所有的浏览器都很重视脚本.为了和Flash播放器通信,浏览器必须有内置的钩子以便Flash播放器可以’监听’.浏览器必须是下列的几种:
Netscape Navigator 3.0-4.7x, 和 Netscape 6.2或更高
(Windows 95/98/NT/2000/XP
或 MacOS; 允许Java和LiveConnect)
Internet Explorer 3.0 或更高
(仅Windows 95/98/NT/2000/XP; 允许ActiveX)

<!DOCTYPE html>  <html>    <head>      <title>Bootstrap 101 Template</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">    </head>    <body>      <h1>Hello, world!</h1>      <script src="http://code.jquery.com/jquery.js"></script>      <script src="js/bootstrap.min.js"></script>    </body>  </html>

Javascript到Flash的通信

And you’re set! With those two files added, you can begin to develop
any site or application with Bootstrap.

这个例子演示了如何使用Flash的method把变量从HTML的input text
发送到该页面中的Flash文件中.HTML
input的数据通过Flash的SetVariable方法传送到Flash文件中.

 

查看示例:示例
下载源文件: javascript_to_flash.zip(17k)

全局设定global setting:

步骤:

Requires HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that
require the use of the HTML5 doctype. Include it at the beginning of all
your projects.

Bootstrap用到的HTML元素和CSS属性需要HTML5
doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

<!DOCTYPE html>  <html lang="en">    ...  </html>

Flash中
1.新建一个文件,保存为javascript_to_flash.fla
2.用文字工具在舞台上创建一个文本域
3.选择这个文本域,在属性面板中,从下拉列表中选择动态文本(Dynamic
Text),在变量(variable)栏填上”myVar”
注意:最好的习惯是使用Instance,用myVar.text更改myVar的值.为了简单起见和兼容Flash4和Flash5,我们使用的是变量名的形式.
4.保存文件
5.发布HTML文件和SWF文件

Typography and links

Bootstrap sets basic global display, typography, and link styles.
Specifically, we:

  • Remove margin on the body
  • Set background-color: white; on the body
  • Use the @baseFontFamily@baseFontSize,
    and @baseLineHeight attributes as our typographic base
  • Set the global link color via @linkColor and apply link underlines
    only on :hover

These styles can be found within scaffolding.less.

Dreamweaver中
下一步的工作转移到Dreamweaver中了,当然也可以是其他的HTML编辑器
1.打开上一步发布的HTML文件
2.插入生成的SWF文件和OBJECT/EMBED标签
(1) Insert>Media>Flash,并选择这个Flash
(2)
切换到代码视图,我们需要修改被选中的<OBJECT>和<EMBED>标签
(3) 在OBJECT标签中,插入id=”myFlash”

Reset via Normalize

With Bootstrap 2, the old reset block has been dropped in favor
of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that
also powers the HTML5 Boilerplate. While we use much of Normalize within
our reset.less, we have removed some elements specifically for
Bootstrap.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”
flash/swflash.cab#version=5,0,0,0″
width=366 height=142 id=”myFlash”>
注意:如果你是粘贴复制代码的话,确保删除不必要的换行.否则可能会引起错误;
id也可以在属性面板里直接输入
(4)
在EMBED标签中,插入name=”myFlash”和swLiveConnect=”true”,确保没有使用id属性!代码应当是这样子的:

Default grid system

<embed src=”javascript_to_flash.swf” quality=high width=366
height=142
type=”application/x-shockwave-flash”
pluginspage=”
P1_Prod_Version=ShockwaveFlash”
name=”myFlash” swLiveConnect=”true”>
</embed>

Live grid example

The default Bootstrap grid system utilizes 12 columns, making for a
940px wide container without responsive features enabled. With the
responsive CSS file added, the grid adapts to be 724px and 1170px wide
depending on your viewport. Below 767px viewports, the columns become
fluid and stack vertically.

做为框架默认的一部分,Bootstrap提供了940px宽,
12列的栅格系统(没有交互式开启)。如果引入了responsive
css文件,那么就会依据你的设备viewport来更改宽度。如果设备在767以下,列就会变成流动

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注