AS3 Scaling - обрезает текст и искажает диагональную линию на фотографиях - PullRequest
0 голосов
/ 11 февраля 2010

Привет! Я использовал какой-то код, который нашел, я думаю, что даже у вас, ребята, масштабируется внешний SWF, загружаемый в фоновый видеоклип. Прекрасно работает за исключением того, что он обрезает текст и создает забавные диагональные линии и плохое качество изображения. У меня есть ощущение, что это связано с небольшой разницей в размерах некоторых, где вдоль линии. Размер сцены равен 2560 x 1440, и его размер уменьшен до любого размера, но, как я уже говорил, я не думаю, что высота и ширина синхронизируются с широкоформатным форматом. Пожалуйста, помогите, это делает мою голову.

Пожалуйста, взгляните, я не особо разбираюсь в AS3.

www.sirwin.co.uk

// perform initial size check

checkStageSize();

// register to re-check when stage size changes
stage.addEventListener( Event.RESIZE, onResize, false, 0, true );

function onResize( e:Event ) {

    checkStageSize();
}

// do the scaling here

function checkStageSize():void {

    var wid:Number = stage.stageWidth;

    var hi:Number = stage.stageHeight;

    var needToScaleDown:Boolean = (wid < 0); // or some other test

    if ( needToScaleDown ) {

        var scale:Number = wid/0;

        backgroundRectangle.scaleX = backgroundRectangle.scaleY = scale;

    } else {

        backgroundRectangle.scaleX = backgroundRectangle.scaleY = 1;
    }
}

stop();
var portRequest:URLRequest = new URLRequest("main.swf");

var portLoader:Loader = new Loader();

 portLoader.load(portRequest);
 backgroundRectangle.addChild(portLoader);

Ответы [ 3 ]

0 голосов
/ 17 февраля 2010

Спасибо, Бин. Я буду искать более эффективные способы для галереи, главная причина, по которой я хотел, чтобы изображения в SWF были, когда я закончил дизайн и изменил все проблемы, которые я могу заблокировать и защитить паролем, чтобы было меньше шансов кража образов.

Тем не менее, я получил большее улучшение изображений, хотя обрезка текста (в основном кнопки) раздражает меня, знаю больше, чем когда-либо.

Код, который я изменил:

stage.addEventListener(Event.RESIZE, resizeListener);
stage.scaleMode=StageScaleMode.SHOW_ALL;
stage.align=StageAlign.TOP_LEFT;

function resizeListener(e:Event):void {
    trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);


    // do the scaling here

    var wid:Number=100/this.stage.stageWidth;
    var hi:Number=100/this.stage.stageHeight;
    this.stage.scaleX=this.stage.scaleY;
    this.stage.scaleX=this.stage.scaleY;

    this.stage.x = (100 - this.stage.width) * 0;
    this.stage.x = (100 - this.stage.height) * 0;
}
0 голосов
/ 17 февраля 2010

Использование .SWF для упаковки ваших файлов не является идеальным по многим причинам, но я не думал об аспекте безопасности. Хотя, конечно - если это в сети, это не безопасно ...

Сегодня утром я приготовил для вас небольшую демонстрацию, которую можно найти здесь:

демо: http://www.digital.leskiwis.com/sirwin/

скачать: http://www.digital.leskiwis.com/sirwin/sirwin.zip

Позвольте мне объяснить несколько особенностей:

  • он использует класс queueLoader hydrotik. Это делает загрузку и мониторинг бризом
  • все активы находятся в скомпилированных SWF. Одна из замечательных особенностей загрузки очереди - рисование кадров SWF в виде растровых данных (отлично подходит для сглаживания)
  • он использует событие изменения размера, чтобы убедиться, что размер изображения изменяется в масштабе
  • Все изображения в SWF имеют размер 720p (1024 x 720), так что вы получите хорошее представление о том, как большое изображение масштабируется меньше (и больше на 24 - 27 дюймовом экране)

Изменение размера слушателей:

            stage.scaleMode = StageScaleMode.NO_SCALE;      // the standard top left align, add some no scaling and throw in the event listener
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(Event.RESIZE, resizePhoto, false, 0, true);   

Функция изменения размера: (мы сохраняем переменные photoWidth и photoHeight один раз при загрузке изображения, поэтому нам не нужно проверять каждый кадр)

        function resizePhoto(e:Event){

            var targetWidth = stage.stageWidth - buffer - photo.x       
            // this gives us the target width we want the photo. we can figure out what percent the image would need to be to make this, and use that as a scale mutiplication..

            var targetHeight = stage.stageHeight - buffer - photo.y     
            // this gives us the target height we want the photo. we can figure out what percent the image would need to be to make this, and use that as a scale mutiplication..               

            //note: add in some smart sizing on this - this means the photo resize stops when it hits a height or width limit..                             
            var wMult:Number = (targetWidth / photoWidth)   
            var hMult:Number = (targetHeight / photoHeight)

            if(wMult < hMult){
                photo.width =  photoWidth * wMult   
                photo.height = photoHeight * wMult
            }else{
                photo.width =  photoWidth * hMult   
                photo.height = photoHeight * hMult
            }
        }

Хотя это далеко не лучшая практика, у вас достаточно улучшений, чтобы вы могли работать с ними, оставляя некоторых в комфортной зоне, основываясь на коде, который я видел в ваших файлах. Если вам нужны какие-либо разъяснения, просто кричите. Вот полный код - вы можете скачать все здесь: http://www.digital.leskiwis.com/sirwin/sirwin.zip

Наслаждайтесь!

package{

    import flash.ui.*;
    import flash.display.*;
    import flash.events.*;  
    import flash.text.*;
    import flash.geom.*;
    import flash.net.*; 
    import flash.utils.*;
    import flash.media.*

    import fl.controls.Button;

    import com.hydrotik.queueloader.QueueLoader;
    import com.hydrotik.queueloader.QueueLoaderEvent;
    import com.hydrotik.queueloader.QLManager;  


    public class Sirwin extends MovieClip { 

        var sec_PERSONAL:Array = ['Animals', 'Macro'];  // all of the topic sections... Note, the swf files need to match these names!          
        var sec_LENGTH:uint = 0;    // the length of the loaded array
        var sec_CUR:uint = 0;       // the length of the loaded array
        var bmp_ARRAY:Array = [];   // the container for the loaded section
        var buffer:uint = 10;       // buffer in pixels for button placement

        var _oLoader:QueueLoader = new QueueLoader();
        var photo:Sprite = new Sprite();        // holder for the photo to load into

        var nextBut:Button = new Button();      // attach the next button from the library
        var prevBut:Button = new Button();      // attach the prev button from the library

        var photoWidth:Number   // we store these as variables to improve performance, check once - not each time
        var photoHeight:Number  // we store these as variables to improve performance, check once - not each time


        public function Sirwin(){
            trace("initialising Document...");
            addEventListener(Event.ADDED_TO_STAGE, popStageVars);   // once the movie has been added to the stage, we can set up some more vars 
        }

        private function popStageVars(e:Event){
            trace("popping stage vars...")  
            removeEventListener(Event.ADDED_TO_STAGE, popStageVars);

            stage.scaleMode = StageScaleMode.NO_SCALE;      // the standard top left align, add some no scaling and throw in the event listener
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(Event.RESIZE, resizePhoto, false, 0, true);   

            _oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
            _oLoader.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, onQueueProgress, false, 0, true);
            _oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);                 

            photo.x = 180
            photo.y = buffer
            addChild(photo)

            setSections();
            setNav();
            toggleNav();                
        }


        function resizePhoto(e:Event){

            // set photo dimensions to match stage;
            photo.width = stage.stageWidth - buffer;
            photo.height = stage.stageHeight - buffer;

            // choose the larger scale property and match the other to it;
            ( photo.scaleX < photo.scaleY ) ? photo.scaleY = photo.scaleX : photo.scaleX = photo.scaleY;




        }


        public function setSections(){  // this function places the section buttons on the stage... not so neccesary if you make your own buttons

            for(var i:uint = 0; i < sec_PERSONAL.length; i++){  
                var but:Button = new Button();  // attach the button from the library
                but.label = sec_PERSONAL[i]     // give the button a label from the array of names
                but.x = buffer
                but.y = buffer*5 + (i * (buffer + but.height));                 
                but.addEventListener(MouseEvent.CLICK, loadSection, false, 0, true);    // weak handler for better garbage collection
                addChild(but)
            }
        }

        public function setNav(){   // this function places the nav buttons on the stage... better practice would be having their own class and dispatching mouse events to be listened for. Baby steps..
            nextBut.label = "Next >"
            nextBut.x = buffer
            nextBut.y = 350
            nextBut.addEventListener(MouseEvent.CLICK, navForward, false, 0, true);
            addChild(nextBut)               

            prevBut.label = "Previous <"
            prevBut.x = buffer
            prevBut.y = 400
            prevBut.addEventListener(MouseEvent.CLICK, navBack, false, 0, true);
            addChild(prevBut)
        }


        public function loadSection(e:MouseEvent){
            bmp_ARRAY = []; // reset the array to nothing
            var swf:String = convertFolderName(e.target.label, '_') + ".swf";   
            _oLoader.addItem("assets/"+swf, null, {title:"SWF Images", drawFrames:true});
            _oLoader.execute();                         
        }       

        public function loadPhoto(){
            while(photo.numChildren){
                    photo.removeChildAt(0);     // get rid of any existing photo
            }

            var bmp:Bitmap = new Bitmap(bmp_ARRAY[sec_CUR]);        // this gets the bitmap data from the array that has been loaded from the zip file
            bmp.smoothing = true;   // this should solve your smoothing issues
            photo.addChild(bmp);

            photoWidth = photo.width;   // update the photos height and width for easy ref              
            photoHeight = photo.height;
            resizePhoto(null);      // pass through a null event to avoid any compiler errors
        }


        public function convertFolderName(s:String, replacement:String):String{ // this function returns an underscore instead of a space                           
            var trimmedValue:String = s.replace(" ", replacement)
            return trimmedValue;
        }   


        public function updateCur(n:Number){                        
            sec_CUR += n;       // add a +1, or -1 to the current pointer
            displaying.text = "Displaying: " + (sec_CUR + 1) + "/" + sec_LENGTH;        // this updates the 'number of/how many' text. you need plus one to adjust for arrays starting at 0
        }

        public function navForward(e:MouseEvent){
            updateCur(1)
            toggleNav();
            loadPhoto();
        }

        public function navBack(e:MouseEvent){
            updateCur(-1)
            toggleNav();
            loadPhoto() 
        }


        public function toggleNav():void{   //this function decides if the next or back should be shown
            trace(sec_CUR + " - " + sec_LENGTH)
            nextBut.visible = (sec_CUR >= sec_LENGTH-1) ? false : true
            prevBut.visible = (sec_CUR <= 0) ? false : true

            if(sec_CUR < 0){
                sec_CUR = 0;    
            }

            if(sec_CUR >= sec_LENGTH-1){
                sec_CUR = sec_LENGTH-1; 
            }
        }

        // ----------------------------------------------------- queue loading event handlers


        public function onQueueProgress(event:QueueLoaderEvent):void {  // cheap preloading...
            trace("\t>>onQueueProgress: "+event.queuepercentage);
            displaying.text = "Loading: " + event.queuepercentage + "%";
        }

        public function onItemComplete(event:QueueLoaderEvent):void {
            trace("\t>> "+event.type, "item title: "+event.title + " type: " + event.fileType);
            if (event.title == "SWF Images") {
                bmp_ARRAY = [];
                for (var i:int = 0; i<event.bmArray.length; i++) {
                    var bm:BitmapData = event.bmArray[i]                
                    bmp_ARRAY.push(bm)
                }
            }
        }

        public function onQueueComplete(event:QueueLoaderEvent):void {
            trace("** "+event.type);

            sec_LENGTH = bmp_ARRAY.length
            sec_CUR = 0;

            updateCur(0)
            toggleNav();
            loadPhoto();                                            
        }               


    }       
}
0 голосов
/ 16 февраля 2010

Кажется, есть несколько проблем с вашим кодом. Один технический, другой фундаментальный. Давайте сначала посмотрим на фундаментальную сторону

Мне пришлось декомпилировать ваш файл, чтобы увидеть, как именно выглядел весь ваш код (в данном случае - http://www.sirwin.co.uk/two.swf) Этот файл имеет размер 1,9 МБ, что ОЧЕНЬ велико для флэш-файла, содержащего несколько фотографий. Лучше Подход заключается в том, чтобы хранить эти изображения во внешней папке и динамически загружать их по мере необходимости. Для этого есть много преимуществ:

  • простота обновления - не нужно перекомпилировать флэш-файл
  • xml или php (для тех, кто не любит использовать xml, вы даже можете сгенерировать структуру на основе структуры папок в вашем каталоге, используя php)
  • когда вы немного более предприимчивы в отделе кода / операций, вы можете даже взглянуть на класс загрузчика очереди hydrotiks для загрузки в zip-папки - http://blog.hydrotik.com/2008/10/29/queueloader-rev-31-major-update-usage/
  • Вы даже можете использовать флэш-API flickr для запроса наборов из своей учетной записи flickr и динамической загрузки (мне нравится этот подход, так как он позволяет использовать flickr как своего рода систему управления контентом)

Я не уверен в вашем уровне квалификации, поэтому давайте сначала займемся технической проблемой. Не обращая внимания на то, что ваши изображения настолько велики - вам нужно убедиться, что сглаживание включено, либо через библиотеку, либо через какой-то код. Самый простой, но трудоемкий метод - дважды кликнуть на изображении в библиотеке и установить флажок «разрешить сглаживание». Хотя с такими большими изображениями, вероятно, будет некоторая неровность даже при включенном.

Второй подход заключается в написании сценария для извлечения растровых данных из мувиклипа при смене кадра, удаления его содержимого и отрисовки его обратно в контейнер с атрибутом сглаживания, установленным в значение true.

Что касается кода, который делает это, он будет сильно различаться для метода, который вы используете для генерации массива фотографий для каждого раздела, но суть кода можно найти здесь:

http://www.kaourantin.net/2005/12/dynamically-loading-bitmaps-with.html

Но на самом деле, если вы идете по этому пути, вы можете просто пройти целые 9 ярдов.

за копейки, за фунт Надеюсь, это поможет!

...