Petit exercice pour la forme, créer* et déplacer un carré rouge avec quelques lignes de code.
Dans mes exemples j’utilise le modulo :
359 modulo 360 = 359
360 modulo 360 = 0
361 modulo 360 = 1
on code avec un signe « % » comme ex : 359%360=359
* sauf pour After Effects
en actionscript 2 :
this.createEmptyMovieClip("square_mc", 1);
square_mc.beginFill(0xFF0000);
square_mc.moveTo(0, 0);
square_mc.lineTo(100, 0);
square_mc.lineTo(100, 100);
square_mc.lineTo(0, 100);
square_mc.lineTo(0, 0);
square_mc.endFill();
square_mc._x=0;
square_mc._y=150;
onEnterFrame=function(){
square_mc._x=square_mc._x%550+10;
}
en actionscript 3 :
var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = stage.stageHeight/2-square.height/2;
square.addEventListener(Event.ENTER_FRAME, bouge);
function bouge(e:Event):void{
square.x=square.x%550+1;
//square.rotation=square.x;
}
en processing :
int x = 0;
void setup(){
size(500,500);
background(255);
smooth();
frameRate(25);
}
void draw(){
background(255);
noStroke();
x = x%550 + 10;
rect(x-50,200,100,100);
fill(255,0,0);
}
en JavaScript avec la librairie Mootools :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bouge</title>
<script type="text/javascript" src="lastMoo.js"></script>
<!--<script type="text/javascript" src="lastPlug.js"></script>-->
<script type="text/javascript">
window.addEvent('domready', function(){
var monSquare = new Element('div', {
'id':'square',
'styles': {
'position':'absolute',
'top':'100px',
'left':'0',
'width':'100px',
'height':'100px',
'background-color':'#f00'
},
});
monSquare.inject($(document.body));
var i=0;
var begin = function() {
i=i%window.getWidth()+5;
$('square').setStyle('left',i);
}.periodical(1000/25);
})
</script>
<style type="text/css">
<!--
/* rien */
-->
</style>
</head>
<body>
<!-- ici on injecte notre div-->
</body>
</html>
en expression pour After Effects sur la position d’un comp (pour le fun ^-^) :
[(-thisComp.width), (thisComp.height/2)] + [(900*time)%1000,0]
si vous excellez dans un de ces langages, n’hésitez pas à commenter ;¬)
suggestions : as3 . fontpark 2.0 | morisawa by yugop. learn learn learn. motion code . flash vs html5.
tags : actionscript, after effects, as2, as3, javascript, mootools, processing