Actionscript | jaiunblog.com | j'ai un blog - graphisme, design, programmation

flash vs html5

5 décembre 2011 | graphisme | 0 commentaire

Voici un jeu pour mettre fin aux polémiques ! À gauche le jeu est motorisé sous Flash et à droite en html5 (via canvas) :
http://labs.codecomputerlove.com/FlashVsHtml5/
bonus :
http://occupyflash.org/
http://occupyhtml.org/

5 langages

23 mars 2010 | programmation | 3 commentaires

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 ;¬)