Galerie artkabis

super ca me fait lagger toutes ces particules^^

Oui, c'est déconseillé aux personnes qui viennent de manger, ça peut foutre la gerbe

Bonjour à tous, voici une petite application que j'ai créée pour une formation la semaine dernière, elle est assez simple, mais comme les marmots ont bien aimé, je me suis dit que ça serait peut-être sympa de vous la montrer:

(passez sur le bouton "info" pour naviguer dans les différents exercices)
[Vous devez être inscrit et connecté pour voir ce lien]

Voici une galerie utilisant seulement les fonctionnalités offertes par flash, donc aucun moteur 3D additionnel n'a été utilisé, voili voilou

Bien fun le petit exercice.
La gallerie est propre aussi. Sauf peut être sous firefox quand on monte ou descend la page il y en a une autre qui s affoche dans la gallerie. Good work !

Merci sereni-t, sinon je viens de tester la galerie avec mozilla et en effet des fois on voit les images les plus proches devenir transparentes, alors je ne sais pas d'où ça vient, c'est bizarre, car ceci ne le fais pas à chaque fois.

Pour ceux qui voudraient voir comment j'ai construit mon projet exercice, voici le fichier fla:

exercice_axe_cs3.fla
exercice_axe_cs4.fla

bien fun tout ça j'ai aimer =o sur tout la galerie =)

Bonjour à tous, je voulais vous présenter une de mes dernières créa, celle-ci est plutôt sympa, car elle permet de charger plusieurs images indépendamment, dans cet exemple nous avons cinq colonnes et quatre lignes ce qui nous fait 20 images, c'est 20 images on était découpés dans une créas, puis hébergés sur mon serveur. Grace à l'as3, j'ai pu charger chaque image, une par une, une fois les 20 images chargés la créa finale apparait:

(Si vous n'avez pas vu, le chargement, je vous conseille de recharger la page)


Vous avez aussi sans doute remarqué ma nouvelle signature, en fait là aussi j'ai utilisé le chargement d'image en as3, là différence réside dans le code, car là je découpe mes images en plusieurs parties et ceci grâce au code, puis quand on passe sur l'une des parties, celle-ci est envoyé en dehors de l'animation et après quelques secondes elle revient à ça place initial, je peu vous dire que même si ce n'est pas exceptionnel, ceci m'a demandé pas mal de tant pour mettre au point le script.

Voici cette créa:
Si vous n'avez pas vu, le chargement, je vous conseille de recharger la page




Si vous voulez voir comment j'ai pu coder ceci, voici le code de chacune d'entre elle.
Le code de la première créa:

Code:


//Import TweenLite
import gs.*;
import gs.easing.*;

var imageURLs = new Array();

var imageHolders = new Array();
 
var loadedImages:Number = 0;
 

imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img1.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img2.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img3.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img4.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img5.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img6.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img7.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img8.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img9.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img10.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img11.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img12.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img13.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img14.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img15.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img16.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img17.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img18.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img19.jpg");
imageURLs.push("http://urliss35.free.fr/animation/charg_img/img/img20.jpg");
 

var rows:Number = 4;
var columns:Number = 5;
 

var imageWidth:Number = 40;
var imageHeight:Number = 40;
 

var padding:Number = 1.05;
 

var left:Number = 20;
 
for (var i = 0; i < rows; i++) {
 
   for (var j = 0; j < columns; j++) {
 
      
      var imageHolder:MovieClip = new MovieClip();
 
      
      imageHolder.x = left + j * imageWidth * padding;
      imageHolder.y = i * imageHeight * padding;
 
      
      var preloader:StarPreloader = new StarPreloader();
      preloader.x = imageWidth / 2;
      preloader.y = imageHeight / 2;
      imageHolder.addChild(preloader);
 
      
      imageHolder.preloader = preloader;
 
      
      preloader.addEventListener(Event.ENTER_FRAME, rotatePreloader);
 
      
      addChild(imageHolder);
 
      
      imageHolders.push(imageHolder);
   }
}
 
loadImage();
 
function loadImage():void {
 
   
   var loader:Loader = new Loader();
 
   
   var urlRequest:URLRequest = new URLRequest(imageURLs[0]);
 
   
   loader.load(urlRequest);
 
   
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
 
   imageURLs.splice(0,1);
}
 

function imageLoaded(e:Event):void {
 
   
   var image:Bitmap = (Bitmap)(e.target.content);
 
   
   var holder:MovieClip = imageHolders[loadedImages];
 
   
   holder.addChild(image);
 
   
   TweenLite.from(holder, 3, {alpha: 0});
 
   
   TweenLite.to(holder.preloader, 1, {scaleX: 2, scaleY: 2, alpha: 0,
    onComplete:tweenFinished, onCompleteParams:[holder.preloader, holder]});
 
   
   loadedImages++;
 
   
   if (imageURLs.length > 0) {
      loadImage();
   }
}
 
function rotatePreloader(e:Event):void {
 
   
   e.target.rotation += 5;
}
 
function tweenFinished(preloader:MovieClip, holder:MovieClip):void {
 
   holder.removeChild(preloader);
}


Et celui de la deuxième:

Code:



import gs.*;
import gs.easing.*;
 

const IMAGE_PIECE_WIDTH:uint = 20;
const IMAGE_PIECE_HEIGHT:uint = 13;
 
var imagePieces:Number = 0;
 
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("logoA.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(event:Event):void {
 
   
   var imageTextureMap:BitmapData = event.target.content.bitmapData;
 
   var columns:Number = Math.ceil(imageTextureMap.width / IMAGE_PIECE_WIDTH);
   var rows:Number = Math.ceil(imageTextureMap.height / IMAGE_PIECE_HEIGHT);
 
   for (var i = 0; i < columns; i++) {

      for (var j = 0; j < rows; j++) {
 
         var imagePieceHolder:MovieClip = new MovieClip();
 

         var imagePiece:Bitmap = new Bitmap();
         imagePiece.bitmapData = new BitmapData(IMAGE_PIECE_WIDTH,IMAGE_PIECE_HEIGHT);
 
   
         imagePiece.bitmapData.copyPixels(imageTextureMap,
           new Rectangle(i * IMAGE_PIECE_WIDTH, j * IMAGE_PIECE_HEIGHT,
         IMAGE_PIECE_WIDTH, IMAGE_PIECE_HEIGHT),
           new Point(1,1));
 
         imagePieceHolder.addChild(imagePiece);
 

         imagePieceHolder.x = i * IMAGE_PIECE_WIDTH;
         imagePieceHolder.y = j * IMAGE_PIECE_HEIGHT;
 

         imagePieceHolder.origX = imagePieceHolder.x;
         imagePieceHolder.origY = imagePieceHolder.y;
 
         imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

         addChild(imagePieceHolder);
 
         imagePieces++;
      }
   }
}
 
function mouseOverHandler(e:Event):void {
 
   var imagePieceHolder = (MovieClip)(e.target);
 
   var randomX = Math.random() * 1000 - 500;
   var randomY = Math.random() * 1000 - 500;
   var targetX = imagePieceHolder.x + randomX;
   var targetY = imagePieceHolder.y + randomY;
 

   TweenLite.to(imagePieceHolder, 1, {x:targetX, y:targetY, onComplete:outTweenFinished, onCompleteParams:[imagePieceHolder]});
 

   setChildIndex(imagePieceHolder,imagePieces - 1);
 
   imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
}
 
function outTweenFinished(imagePieceHolder:MovieClip):void {
 
   var origX = imagePieceHolder.origX;
   var origY = imagePieceHolder.origY;
 
   TweenLite.to(imagePieceHolder, 1, {x:origX, y:origY, onComplete:inTweenFinished, onCompleteParams:[imagePieceHolder]});
}
 
function inTweenFinished(imagePieceHolder:MovieClip):void {

   imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 
}


Bravo très belle création comme d'habitude .
Continue comme sa !
Je serai fier de toi

Tout ca en code..., et dire que je me disais que c'etait plutot realisable avec l'anime.Clip, onRollover etc ... J'ai honte

C'est vraiment genial.
Quel boulot ! Un mec qui gagne a etre connu 20/20.

Merci pour vos com's, en tout cas je dois dire que ce qui m'a le plus embêté, c'est le second, j'ai dû mettre au moins une heure avant de trouver comment il était possible de garder en mémoire la position initiale de chaque carré, avec deux trois collègues et leurs english touch on a réussi à en venir à bout, donc un petit merci à freezy, même s'il n'est pas présent sur ce forum.

PS: je vous mettrais des commentaires sur chaque ligne, histoire de mieux comprendre chacun des éléments.

:D
"Donc merci à freezy même si il n'est pas sur ce forum"
Ralala Sacré Artkabis !

Et bien merci Milye, tu sais chaque compliment me donne la patate donc: merci pour le compliment. Par contre, je ne sais pas si cela vient de ma résolution d'écran ou de la couleur rouge sur gris, mais j'ai pas mal de soucis à lire correctement ton message, à mon avis ceci vient bien de la couleur rouge sur gris, bref sa pique un peu les yeux.

Encore une fois merci pour le compliment !!!!

Very good c est propre ! En pleine exploration de l AS3 !

Pourquoi tu ne mets pas pas un wmode="transparent" un truc dans le genre dans le code de ta sign cela cachera la partie grise. Depuis la version 7 IE gere la transpa.

Continue comme ca

bon.......ben je viens d'arriver et quoi faire d'autre que de visiter la galerie du patron ^^
et ben y'a de quoi faire pour arriver a ton niveau, merci à toi de nous faire partager tes créations elles sont très belles

Merci pour ce compliment, ça fait toujours plaisir de voir que d'autres personnes aiment ce que je fais. En tout cas, dit-toi qu'en bossant un peu, tu arriveras largement à ce type de résultat

Au risque de reprendre quelqu'un je vais dire quoi de plus normal que de visiter la gallérie du boss . En tout cas chapeau pour tes créa , j'espère arriver ne fusse qu'a 3% de ton taf . Merci encore de partager avec nous . Pour l'instant je suis aux interpolations de mouvement mais qui sais un jour peut-être . "Le vrai champion c'est celui qui aide les autres à le devenir" . Merci champion

:D sacré BiDio ne t'inquiète pas on est la pour apprendre !

franchement j'ai honte
sa fait quoi? un mois que je suis inscrit sur le forum et je ne suis pas encore venue voir la galerie du grand chef.
pour ma défence je dirai :"WAOUUUUUUUU
c'est vraiment trop classe, j'adore"

serieusement tes créa sont top en plus tu nous passe les codes pour qu'on puisse
le refaire a la maison tout seule comme des grands.
ELLE EST PAS BELLE LA VIE?

Lol moi non plus c'est honteux

Super artkabis du bon boulot


ça donne envie l'as 3 mais bon...

encore de travail du pro !!!

I am in awe !!

Merci pour vos com's c'est sympa !!!

D'ailleurs pour fêter vos gentils messages, voici une petite intro que j'ai fait entièrement avec flash, bon c'est clair que c'est juste une ébauche, il y a encore pas mal de choses qui ne collent pas, mais bon on va dire que c'est montrable:

[Vous devez être inscrit et connecté pour voir ce lien]
(création supprimé pour le moment)

Excellent je m en lasse pas ! Je ne critiquerai pas (y a pas grand chose d ailleurs a critiquer, peut etre les dents), je ne demanderai pas le travail effectué (Ca m a bien l air du vectoriel tout ca). Le son est trop bien posé dessus, avec les flash ca fait... trop propre.

Joli boulot

Le fofo va passer en .fr donc ? Ou c est comme ca, t as anticipé sur un eventuel avenir proche ?

Merci pour ce commentaire, en effet il reste quelques défauts que j'essayerais de régler en fonction de ma créativité, pour les dents, je vais essayer d'animer tous ça individuellement.

Et oui c'est bien de la vecto, à la base, j'ai repris un bitmap, puis je les refais avec l'outil plume de flash.

Pour le artkabis.fr, en fait c'est déjà l'adresse de mon site...