Flex cookbook BETA 如何创建一个聚光灯效果
2007-12-07 20:47
471 查看
导读:
Problem Summary
Using Flash CS3 or prior its trivial to create a spotlight effect using a couple layers and making one of them, etc. Without Flash's timeline though something like a spotlight effect in Flex has to be done differently. 使用FLASH CS3创建一个聚光灯效果是很容易的,使用FLEX来创建,因为没有时间轴,做法是不同的。
Solution Summary
The code is trivial to create a spotlight effect. I've essentially used two images and then with a little ActionScript setup the mask to a circle that will follow the mouse around. There are other ways to do this, this is one way. 下面的代码。私用了两张图片以及一些AS的API来创建一个鼠标周围的遮罩。当然还有其他的方法来做这件事情,这只是一种解法。
Explanation
Make a basic Flex application with the following MXML:
private function myfunc():void
{
var myclass:MyClass = new MyClass();
myCanvas.rawChildren.addChild(myclass);
}
]]> private function myfunc():void
{
var myclass:MyClass = new MyClass();
myCanvas.rawChildren.addChild(myclass);
}
]]>
Once the Flex application was ready I added an ActionScript class file to the project called "MyClass.as" with the following code:
package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.net.URLRequest;
public class MyClass extends Sprite
{
public function MyClass():void
{
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("myImage.jpg");
loader.load(url);
this.addChild(loader);
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x00FFFFFF, 1.0);
circle.graphics.drawCircle(0, 0, 50);
circle.graphics.endFill();
this.addChild(circle);
loader.cacheAsBitmap = true;
circle.cacheAsBitmap = true;
loader.mask = circle;
circle.startDrag(true);
}
}
}
Of course for the "myImage.jpg" you will need to substitute some sort of image of your own and bring it into your project for the spotlight effect to work. Adjust the sizes as determined by your image size and needs. Its goes without saying that there are better spots to put this code other than the class's constructor but since this is just a simple example I wanted to keep everything as simple as possible. 当然你可以替换自己的图片将代码整合到自己的项目中去
Run the project and simply click on the rendered SWF in your web browser and you should see the spotlight effect following your mouse around. 运行代码测试一下
本文转自
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=6842
Problem Summary
Using Flash CS3 or prior its trivial to create a spotlight effect using a couple layers and making one of them, etc. Without Flash's timeline though something like a spotlight effect in Flex has to be done differently. 使用FLASH CS3创建一个聚光灯效果是很容易的,使用FLEX来创建,因为没有时间轴,做法是不同的。
Solution Summary
The code is trivial to create a spotlight effect. I've essentially used two images and then with a little ActionScript setup the mask to a circle that will follow the mouse around. There are other ways to do this, this is one way. 下面的代码。私用了两张图片以及一些AS的API来创建一个鼠标周围的遮罩。当然还有其他的方法来做这件事情,这只是一种解法。
Explanation
Make a basic Flex application with the following MXML:
private function myfunc():void
{
var myclass:MyClass = new MyClass();
myCanvas.rawChildren.addChild(myclass);
}
]]> private function myfunc():void
{
var myclass:MyClass = new MyClass();
myCanvas.rawChildren.addChild(myclass);
}
]]>
Once the Flex application was ready I added an ActionScript class file to the project called "MyClass.as" with the following code:
package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.net.URLRequest;
public class MyClass extends Sprite
{
public function MyClass():void
{
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("myImage.jpg");
loader.load(url);
this.addChild(loader);
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x00FFFFFF, 1.0);
circle.graphics.drawCircle(0, 0, 50);
circle.graphics.endFill();
this.addChild(circle);
loader.cacheAsBitmap = true;
circle.cacheAsBitmap = true;
loader.mask = circle;
circle.startDrag(true);
}
}
}
Of course for the "myImage.jpg" you will need to substitute some sort of image of your own and bring it into your project for the spotlight effect to work. Adjust the sizes as determined by your image size and needs. Its goes without saying that there are better spots to put this code other than the class's constructor but since this is just a simple example I wanted to keep everything as simple as possible. 当然你可以替换自己的图片将代码整合到自己的项目中去
Run the project and simply click on the rendered SWF in your web browser and you should see the spotlight effect following your mouse around. 运行代码测试一下
本文转自
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=6842
相关文章推荐
- Flex中如何创建一个具有良好排序效果的TileList
- Flex中如何创建一个自定义数据显示Tips的slider控件。鼠标按住滑标察看效果
- Flex中如何通过dropShadowColor, shadowDirection和shadowDistance样式,创建一个有阴影效果的TextArea控件
- Flex中如何创建一个线性斜度填充列图(ColumnChart)的例子
- photoshop教程之如何创建一个冻结的冬季效果
- 如何创建一个非常酷的3D效果菜单
- Flex中如何利用PopUpButton控件创建一个弹出TitleWindow的例子
- Flex中如何在ArrayCollection创建一个可视化的游标(cursor)的例子
- Unity Shaders and Effects Cookbook (3-6) 创建各向异性高光类型(Anisotropic) 模拟金属拉丝效果
- 【Flex CookBook】TEXT组件添加到一个定制的TreeItemRenderer
- [HttpClient] 创建一个HTTP POST 请求 (from Jakarta Commons cookbook 11.7 )
- Flex cookbook beta
- Flex中如何通过strokeWidth, strokeColor和shadowColor样式,创建一个自定义风格的HRule或VRule
- Flex中如何利用PopUpManager类创建一个弹出Image控件的例子
- Flex中如何利用PopUpButton控件创建一个弹出TitleWindow的例子
- Flex中如何通过设置editable属性创建一个可编辑的DataGrid控件的例子
- jQuery Howto: 如何快速创建一个AJAX的"加载"的图片效果
- 如何创建一个JavaScript弹出DIV窗口层的效果
- 如何创建一个非常酷的3D效果菜单(swift)
- Flex中如何创建一个可以自动换行并调整布局的ToolBar容器