CodeS-SourceS
Rechercher un code, un tuto, une réponse

Redimensionnement proportionnel d'une image

Juin 2017

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 :-)

Adresse d'origine

A voir également

Publié par Orange73.
Ce document intitulé «  Redimensionnement proportionnel d'une image  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Bouger un personnage avec les fleches!!!
Creer un lien url sur un bouton flash