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