begin process at 2012 02 10 14:44:28
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Tutoriels

 > 

ActionScripts

 > REDIMENSIONNEMENT PROPORTIONNEL D'UNE IMAGE

REDIMENSIONNEMENT PROPORTIONNEL D'UNE IMAGE


 Information sur le tutoriel

Note :
Aucune note

 Description

Hello,

Beaucoup de personnes cherche cette source. je la met donc à disposition pour le plus grand plaisir de tous et toutes :-)

Voici donc une source permettant de redimensionner une image suivant la taille du navigateur et ceci tout en gardant les proportions de l'image.

PS: Je met cette source dans les tutoriels car le zip faisant plus de 1 Mo, il m'est impossible de mettre cette source dans "Codes>Ajouter une source".

Tutorial

Hello,

Beaucoup de personnes cherche cette source. je la met donc à disposition pour le plus grand plaisir de tous et toutes :-)

Voici donc une source permettant de redimensionner une image suivant la taille du navigateur et ceci tout en gardant les proportions de l'image.

PS: Je met cette source dans les tutoriels car le zip faisant plus de 1 Mo, il m'est impossible de mettre cette source dans "Codes>Ajouter une source".

----------------------------------------------------------

1/ Ouvrez Flash.

2/ Importer une image dans la bibliotheque (preferez une taille superieur ou egal a 1024 en largeur car cette dernière sera utilisé a 100% en width et 100% en height dans un doc html afin d'éviter la pixelisation)

3/ Créez un nouveau clip et incorporer cette image a l'intérieur. Le centre de l'image doit se trouver au point d'alignement du clip (vous pouvez utiliser la fenetre d'alignement : Fenetres>Aligner)

4/ Revenez sur le root du document et inserer ce clip sur le stage.

5/ Donnez un nom d'occurence a votre clip. Dans notre exemple "pic".

6/ Mettez ce code AS sur la premiere frame :

VERSION AS2 :

/* ##########################################
ALIGNEMENT "TOP-LEFT" ET
AUCUN REDIMENSIONNEMENT DU STAGE
########################################## */

Stage.align = "TL";
Stage.scaleMode = "noScale";

/* ##########################################
DEFINITION DYNAMIQUE DU RATIO
########################################## */

picHeight = new Object ();
picHeight = pic._height / pic._width;

picWidth = new Object ();
picWidth = pic._width / pic._height;

/* ##########################################
CONDITIONS POUR TENIR COMPTE DE LA TAILLE ET
PROPORTIONS LORS DE LA PREMIERE OUVERTURE
DANS UN BROWSER
########################################## */

if ((Stage.height / Stage.width) < picHeight) {
pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
}

/* ##########################################
CENTRAGE DE L'IMAGE SUR LE STAGE
########################################## */

pic._x = Stage.width / 2;
pic._y = Stage.height / 2;


/* ##########################################
CREATION D'UN ECOUTEUR + FONCTION ONRESIZE
PERMETTANT LE REDIMENSIONNEMENT DE L'IMAGE
SUIVANT LA TAILLE DU BROWSER EN GARDANT LES
PROPORTIONS
########################################## */

sizeListener = new Object();

sizeListener.onResize = function() {

if ((Stage.height / Stage.width) < picHeight) {

pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
};

pic._x = Stage.width / 2;
pic._y = Stage.height / 2;
}

Stage.addListener(sizeListener);



VERSION AS3 :

/* ##########################################
ALIGNEMENT "TOP-LEFT" ET
AUCUN REDIMENSIONNEMENT DU STAGE
########################################## */

stage.align = "TL";
stage.scaleMode = "noScale";

/* ##########################################
DEFINITION DYNAMIQUE DU RATIO
########################################## */

picHeight = new Object ();
picHeight = pic.height / pic.width;

picWidth = new Object ();
picWidth = pic.width / pic.height;

/* ##########################################
CONDITIONS POUR TENIR COMPTE DE LA TAILLE ET
PROPORTIONS LORS DE LA PREMIERE OUVERTURE
DANS UN BROWSER
########################################## */

if ((stage.stageHeight / stage.stageWidth) < picHeight) {
pic.width = stage.stageWidth;
pic.height = picHeight * pic.width;
} else {
pic.height = stage.stageHeight;
pic.width = picWidth * pic.height;
}

/* ##########################################
CENTRAGE DE L'IMAGE SUR LE STAGE
########################################## */

pic.x = stage.stageWidth / 2;
pic.y = stage.stageHeight / 2;

/* ##########################################
CREATION D'UN ECOUTEUR + FONCTION ONRESIZE
PERMETTANT LE REDIMENSIONNEMENT DE L'IMAGE
SUIVANT LA TAILLE DU BROWSER EN GARDANT LES
PROPORTIONS
########################################## */

stage.addEventListener(Event.RESIZE, sizeListener);

function sizeListener(e:Event):void {

if ((stage.stageHeight / stage.stageWidth) < picHeight) {
pic.width = stage.stageWidth;
pic.height = picHeight * pic.width;
} else {
pic.height = stage.stageHeight;
pic.width = picWidth * pic.height;
}

pic.x = stage.stageWidth / 2;
pic.y = stage.stageHeight / 2;
}

stage.addEventListener(Event.RESIZE, sizeListener);

----------------------------------------------------------

Il ne reste plus qu'à tester (CTRL + ENTER) ou d'inserer cette anim dans un doc html en specifiant la hauteur et largeur a 100% + en rajoutant ce style css :

body, html{
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}

Voili Voilou :-)


 Historique

14 avril 2009 17:23:53 :
correction texte
14 avril 2009 17:24:41 :
correction texte

Commentaires

Commentaire de pegase31 le 14/04/2009 17:48:54 administrateur CS

Question idiote : pourquoi ne fonctionnes-tu pas avec le scale de l'image et une règle de 3 toute bête, du genre :

var pic:Object = {w:image.width, h:image.heigth};
var scale:Number = Math.min(pic.w/stage.stageWidth, pic.h/stage.stageHeight);
image.scaleX = image.scaleY = scale;

de plus, je n'ai pas saisis la raison de la création d'objets pour picWidth et picHeight

Peg'

ps: le code est de tête

Commentaire de Orange73 le 14/04/2009 18:00:51

Car cela laisse des marges au redimensionnement.

Correction de ta ligne :
var scale:Number = Math.min(stage.stageHeight/pic.h, stage.stageWidth/pic.w);

Commentaire de pegase31 le 14/04/2009 18:15:41 administrateur CS

des marges ? c'est à dire ?

Peg'

Commentaire de Orange73 le 15/04/2009 09:21:07

Ce que je veux dire c'est que l'image ne prend pas toute ta zone (Browser ou stage).

Fais le test en remplaçant :

if ((stage.stageHeight / stage.stageWidth) < picHeight) {
pic.width = stage.stageWidth;
pic.height = picHeight * pic.width;
} else {
pic.height = stage.stageHeight;
pic.width = picWidth * pic.height;
}

par

var pico:Object = {w:pic.width, h:pic.heigth};
var scale:Number = Math.min(stage.stageHeight/pico.h, stage.stageWidth/pico.w);
pic.scaleX = pic.scaleY = scale;

Commentaire de Orange73 le 15/04/2009 09:22:02

Correction :

var pico:Object = {w:pic.width, h:pic.height};

Commentaire de pegase31 le 15/04/2009 09:31:51 administrateur CS

Comme je te l'ai dit, c'est un code "de tête", mais je prendrais 2 min cet AM pour te faire un truc fonctionnel en quelques lignes d'as3, plus simple que ce que tu as proposé.

On est bien d'accord que le cahier des charges est :
- modification proportionnelle de l'image pour qu'elle soit affichée en totalité sur la taille de la scène
- réduction des images trop grandes
- agrandissement des images trop petites
c'est bien ça ?

Peg'

Commentaire de pegase31 le 15/04/2009 09:37:03 administrateur CS

juste pour préciser que la définition de l'objet "pico" est à mettre en dehors de la fonction déclenchée au resize car elle sert à stocker la taille de l'image "normale", ton soucis vient de là.

Peg'

Commentaire de Orange73 le 15/04/2009 09:37:45

En quelque sorte oui.
J'ai envoyé un message privé a Nix pour qu'il me poste mon zip.

Tu n'auras qu'a le télécharger ou tester avec ce tuto afin de voir le rendu final.

merci Peg'

Commentaire de Orange73 le 15/04/2009 10:01:14

"juste pour préciser que la définition de l'objet "pico" est à mettre en dehors de la fonction déclenchée au resize car elle sert à stocker la taille de l'image "normale", ton soucis vient de là."

T'inquites pas, c'est ce que j'ai fais. Mais cela marche pas !

Commentaire de pegase31 le 15/04/2009 15:31:30 administrateur CS

Voilà le code tout a fait fonctionnel et trés simple en AS3 (j'ai ajouté quelques petits trucs optionnels, pour le fun) :

//Créez une animation de n'importe quelle taille et de n'importe quel FrameRate
//Importez une image dans la bibliothèque que vous lierez sous le nom "Image"
//Placez le code sur la première frame de l'animation :


stage.align = "lt"; //origine de l'animation en haut à gauche
stage.scaleMode = "noScale"; //Empèche le redimensionnement de l'animation

var img:Bitmap = new Bitmap(new Image(0,0)); //crée un objet Bitmap contenant l'image de la bibliothèque
var rect:Rectangle = img.getBounds(stage); //Récupère la taille de l'image à l'échèle 1:1
img.smoothing = true; //Indice de lissage de l'image (optionnel)
addChild(img); //Affiche l'image sur le stage

resizeImg(); //Déclenche la fonction "à vide" pour le premier redimensionnement

stage.addEventListener(Event.RESIZE, resizeImg); //écouteur de la mise à l'échelle

function resizeImg(evt:Event=null):void { //Event=null permet l'appel de la fonciton sans évènement
var coef:Number = Math.min(stage.stageWidth/rect.width, stage.stageHeight/rect.height); //taille proportionnelle
img.scaleX = img.scaleY = coef; //Mise à l'échelle de l'image
img.x = (stage.stageWidth-img.width)/2; //centrage horizontal de l'image (optionnel)
img.y = (stage.stageHeight-img.height)/2; //centrage vertical de l'image (optionnel)
}

Peg'

Commentaire de Orange73 le 15/04/2009 15:53:37

J'ai testé ton code mais c'est pas du tout le meme resultat ! Il y a des marges si stage plus grand en width ou height !

regarde mon test avec ton code : http://www.megaupload.com/?d=RMZBLWJG

Commentaire de pegase31 le 15/04/2009 16:12:57 administrateur CS

je viens de regarder et c'est exactement le même rendu que le code que je t'ai donné ... quelle différence y a t'il ?

Peg'

Commentaire de pegase31 le 15/04/2009 16:18:56 administrateur CS

oui, ok, c'est mon code ... je croyais que tu me montrais le tiens.
Si tu veux que l'image remplisse tout l'écran, avec un dépassement du stage, il te suffit de remplacer min par max et le tour est joué.

Mais au départ tu n'as jamais précisé que l'image dépasserait de l'écran visible ...

Peg'

Commentaire de Orange73 le 15/04/2009 16:23:11

Quand tu étires ton stage, avec ton code l'image garde les proportions mais ne prend pas la totalité du stageWidth et stageHeight. Si tu l'etires etu aura des marges.

Commentaire de Orange73 le 15/04/2009 16:30:17

On c'est croisé :-)

Oui exact avec Math.max c'est niquel. Merci

C'est quand meme plus joli avec Math.max plutot que Math.min non ?

Commentaire de pegase31 le 15/04/2009 16:37:51 administrateur CS

Ben une redimension d'image pour moi c'est "voir l'ensemble de l'image dans la zone donnée", donc à moins que la zone ne soit proportionnelle au rapport H/L de l'image il y a forcément des marges. (comme dans n'importe quel viewer ou slideShow)

Après tout dépends de ce que tu souhaites faire et le but de ton animation.

Mais les deux sont possibles avec ce code ... il est même prévu pour ;)

Peg'

Commentaire de Orange73 le 15/04/2009 16:42:57

Question :

getBounds(stage);

en AS2 recuperer les coordonnées minX minY maxX maxY
et en AS3 sa renvoi simplement un rectangle ???

Alors pourquoi ne pas avoir simplement utiliser un movieclip ?

je vois pas l'intérêt du getBounds() !

Commentaire de pegase31 le 15/04/2009 17:07:19 administrateur CS

ça donne la taille de l'image avant de la redimensionner, pour garder la proportion exacte du scale.

De plus, tu n'as pas bien regardé la portée de cette fonction de DiplayObject : elle renvoie le rectangle exacte de l'image dans un espace donné (ici c'est stage, c'est à dire l'origine). J'aurais pu créer un object contenant width et height, mais ça en revient au même avec une écriture plus simple.

Pour le movieClip, ça t'apporterais quoi exactement ? L'as3 gère très bien les bitmaps et de façon très légère sans objets d'affichage supplémentaires.

Toi, tu places un bitmap dans un movieClip pour le contrôler ... aucun intérêt, autant contrôler le bitmap directement.

Peg'

Commentaire de Orange73 le 15/04/2009 17:34:47

Ok merci.

Etant curieux :-), j'ai testé cela :

stage.align = "lt";
stage.scaleMode = "noScale";

var img:Bitmap = new Bitmap(new Image(0,0));
var rect:MovieClip = new MovieClip();

rect.addChild(img);
addChild(rect);

resizeImg();

stage.addEventListener(Event.RESIZE, resizeImg);

function resizeImg(evt:Event=null):void {
var coef:Number = Math.max(stage.stageWidth/rect.width, stage.stageHeight/rect.height);
rect.scaleX = rect.scaleY = coef;
rect.x = (stage.stageWidth-rect.width)/2;
rect.y = (stage.stageHeight-rect.height)/2;
}

mais mon image sautille au redimensionnement .

As tu une idée ?

Merci

Commentaire de Orange73 le 15/04/2009 17:40:31

Arf j'ai trouvé mon erreur.. j'ai pas recuperer la largeur et la hauteur du movieclip avant d'appliquer le resize...

merci quand meme :)

Commentaire de pegase31 le 15/04/2009 17:47:32 administrateur CS

Mais je ne vois toujours pas l'intérêt d'ajouter un movieClip dans ton code ...

Peg'

ps : dans mon jeu de gurger, il n'y a qu'un seul movieclip, et c'est l'animation faite à la main du logo de départ.. le reste n'est que sprite, shape et bitmap.

Commentaire de patrickart le 05/01/2010 22:27:50

en as2 ca marche parfaitement,  c'est exactement ce que je cherchais! merci orange73!

Commentaire de kraaguer le 19/01/2011 10:58:11

Ne serait il pas possible de rajouter un clip qui contiendrait une navigation de site ou un menu
et qui serait toujours centré par rapport à la taille de cette animation?

Commentaire de Orange73 le 19/01/2011 11:25:19

Hello kraaguer,

Ce tuto n'est pas le but.

Pour centrer ta nav par rapport à la taille de l'animation :

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function centerNav(e:Event){
     maNav.x = (stage.stageWidth-maNav.width)/2;
     maNav.y = (stage.stageHeight-maNav.height)/2;
}

stage.addEventListener(Event.RESIZE, centerNav);

Commentaire de kraaguer le 19/01/2011 14:08:32

Impec merci,

j'ai fais un test aussi en reprenant les valeurs de largeur (pic._width) que je divise par deux et que j'applique à mon clip de navigation et ça marche.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Waterfall in Kauai Hawaii With Rainbow
Photo Underwater View of the Ocean With Plants and Coral 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,326 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)