Redimensionnement proportionnel d'une image
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 :-)
- Redimensionner image en gardant les proportions
- Redimensionner jpg - Forum Delphi / Pascal
- Convolution image - Conseils pratiques -Java
- Fpdf image ✓ - Forum PHP
- Php redimensionner image - Conseils pratiques -PHP
- Vectoriser une image photoshop ✓ - Forum Graphisme/design