Adobe Edge Animate --异步条件加载框架（yepnop）应用之一：加载Google Maps

Adobe Edge Animate --异步条件加载框架（yepnop）应用之一：加载Google Maps

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

下面将使用一个案例为大家讲解如何使用异步条件加载框架（yepnop）

一、创建工程并建立基本的一些工具，如下图：

1.整体界面

2.排布及命名，左侧按钮为元件：btn_googlemaps，右侧整个为元件：frame_googlemap

3.btn_googlemaps内部元素：一个圆角长方形和文本

4.frame_googlemap内部元素：

map：用于显示地图

圆角长方形：作为背景

文本：Google Maps

二、做完了这些，就可以开始为元件添加代码了

1.添加frame_googlemap的控制代码，如图，进入元件，点击属性面板的Open Actions按钮，选择creationComplete

2.添加如下代码：

Var map = sym.$("map");   //获得元件中的元素“map”

Var map_url = ' ';  //定义一个变量，用于存放map中显示google 地图的链接

3.那么map_url中的内容是什么呢？我们打开谷歌地图：maps.google.com，点击分享链接，如图。

4.复制下方<iframe>的内容到代码中

5.如图，将数字修改为map元素的大小：

如图，注意添加符号：

6.将url给map：

在浏览器中预览，可以看到我们的初步成果：加载了Google Maps

三、接下来添加按钮功能，点击Google Maps按钮才出现右侧的谷歌地图

1.在时间线第一帧，添加触发器（为方便往后的例子进行，这里多写一部分代码）

2.在1秒处添加触发器，并且标签名为googlemaps

3.为按钮btn_googlemaps添加控制代码click，并且改变鼠标手势：

在浏览器中预览效果，如下：

本文地址：http://www.cnblogs.com/adobeedge/archive/2012/11/30/Adobe_Edge_Animate_Google_Maps.html

作者：北京联友天下科技发展有限公司  肖伟民