我有兴趣在HTML5/JQuery的组合中做更多类似Flash的动画.
浮动的想法之一是飞鸟,角色动画和"补间"式动画序列.我是背景的Flash开发者所以这一切都是基于Flash的基于时间轴的补间动画系统的第二天性,所以我想知道HTML5 Canvas,CSS3和jQuery等新兴技术有什么可能呢？这些在动画之类的补间方面有多熟练？阅读有什么好的起点？
例如,http://www.thewildernessdowntown.com/上的飞鸟令人惊叹,它们似乎是3d,可变方向,速度,旋转,襟翼,速度.在Flash中可以相对轻松地实现这一点,创建设置动画作为动画片段,在舞台上生成这些动画,并以不同的速度甚至在PV3D中以tweenlite移动它们但我接下来不知道如何在画布上实现这一点.
简而言之,关于如何实现上述目标的想法,关于闪存之外的这类动画的良好阅读材料以及您可能拥有的任何一般提示将非常感激.
谢谢
我有一个带有两个链接的小页面,它根据按下的链接将内容加载到div中.
问题相当明显,我想用不同颜色突出显示当前内容链接,并根据按下的链接切换颜色.
我试图用我当前的函数使用以下函数执行此操作,但它无法正常工作:
非常简单的问题,所以我显然是愚蠢的.任何帮助将非常感激.
谢谢!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
完整代码:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat; …我正在开发一个项目,用户可以使用他们的网络摄像头拍摄自己的快照,然后通过转换比例和旋转来编辑此图像并保存结果.
我已经完成了大部分工作,用户可以自己拍摄快照,使用Senocular的变换工具变换对象,然后我使用.draw()来保存这个变换后的对象.问题是.draw()只是从舞台的左上角抓取数据.它正在绘制变换后的对象,但仅从左上角绘制.
为什么它只从左上角绘制,如何将坐标设置为仅从设置捕获图像的区域绘制？
谢谢.
您可以按以下网址查看该文件:http://s46264.gridserver.com/dev/dave/pb-photo/index.html
我已经在http://s46264.gridserver.com/dev/dave/pb-photo/pb-photo.zip上压缩了FLA和相关课程.
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.net.FileReference;
import com.adobe.images.JPGEncoder;
import com.senocular.display.transform.*;
// create container for captured image to apply Transform Tool to
var box:Sprite = new Sprite();
addChild(box);
box.graphics.beginFill(0xAACCDD);
box.graphics.drawRect(-160, -120, 320, 240); // xreg, yreg, width, height (x-y = width-height / 2 to set centered registration point)
box.x = 520;
box.y = 140;
// create the Transform Tool
var tool:TransformTool = new TransformTool(new …