Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 6:

Движемся дальше

Отображение фотографий

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

  1. Каждая пара фотографий будет создаваться под предыдущей парой, поэтому мы добавляем переменную depth после выражений include, которая будет начинаться со значения 1000 и будет постепенно уменьшаться.
    #include "tweento.as"
        #include "brightness.as"
        #include "stage.as"
        _root.depth = 1000;
        _root.filename = "pictures.xml";
  2. Теперь мы создаем фильм, который будет использоваться для маски. Дайте ему имя mask и внутри него нарисуйте квадрат 100х100 пикселей.
  3. Щелкните правой кнопкой мыши на mask в Library и выберите Linkage: из меню для отображения диалогового окна Linkage Properties. Выберите опцию Export for ActionScript и в поле Identifier введите mask.

  4. Функция triggerPhoto обеспечит несколько возможностей.
    function triggerPhoto (currentPicture)	{

    Во-первых, она будет определять объект рисунка, который будет использоваться, путем поиска в массиве pictureObjects значения, переданного функции.

    function triggerPhoto(currentPicture) {
            var nextPicObj = pictureObjects[currentPicture];

    Затем она создаст пустой фильм для содержания в нем рисунка. Далее внутри него будет создан другой фильм, в который будет непосредственно загружаться рисунок. Это делается потому, что когда фильм содержит загруженный рисунок или иной SWF, удаляются многие элементы, такие как элементы управления onEnterFrame и (что более подходит к нашему случаю) маскирование данных.

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

    _root.depth--;
        var noopic = createEmptyMovieClip("picClip"+depth, depth);
        noopic.createEmptyMovieClip("inner", 1);
        noopic.inner.loadMovie(nextPicObj.file);
        nooPic._xscale = nooPic._yscale = 101;
        nooPic.inner._x = (Stage.originalWidth-nextPicObj.width)/2;
        nooPic.inner._y = (Stage.originalHeight-nextPicObj.height)/2;

    После этого создаем максу, которая будет располагаться по левому краю рабочего стола и растягиваться по высоте фильма. Внутри маски мы устанавливаем ссылку на соответствующий фильм с рисунком, чтобы при удалении маски изображение также могло быть удалено.

    _root.depth--;
        var nooMask = _root.attachMovie("mask", "mask"+depth, depth);
        nooMask._x = 0;
        nooMask._yscale = Stage.originalHeight;
        nooMask._xscale = 1;
        nooMask.myPic = nooPic;
        nooPic.setMask(nooMask);

    Мы будем постепенно изменять размер маски для покрытия всего рабочего места.

    noMask.tweenTo ({_xscale:Stage.originalWidth+200}, 15);

    Следующим шагом выясним, находится ли уже рисунок на рабочем месте, и вызовем функцию maskOut, если это так.

    if (_root.latestMask) {
            maskOut();
        }

    После этого мы устанавливаем latestMask на текущую маску, указывая, что она будет удалена следующей.

    _root.latestMask = nooMask;

    Наконец, проверяем, опустилось ли значение depth ниже величины 900. Если да, то возвращаем значение на 1000 для предотвращения перезаписи каких-либо элементов на рабочем столе.

    if (_root.depth<900) {
                _root.depth = 1000;
            }

    Приведем полный код функции.

    function triggerPhoto(currentPicture) {
            var nextPicObj = pictureObjects[currentPicture];
            _root.depth--;
            var noopic = createEmptyMovieClip("picClip"+depth, depth);
            noopic.createEmptyMovieClip("inner", 1);
            noopic.inner.loadMovie(nextPicObj.file);
            nooPic._xscale = nooPic._yscale=101;
            nooPic.inner._x = (Stage.originalWidth-nextPicObj.width)/2;
            nooPic.inner._y = (Stage.originalHeight-nextPicObj.height)/2;
            _root.depth--;
            var nooMask = _root.attachMovie("mask", "mask"+depth, depth);
            nooMask._x = 0;
            nooMask._yscale = Stage.originalHeight;
            nooMask._xscale = 1;
            nooMask.rayPic = nooPic;
            nooPic.setMask(nooMask);
            nooMask.tweenTo((_xscale:Stage.originalWidth+200}, 15);
            if (_root.latestMask) {
                maskOut();
            }
            _root.latestMask = nooMask;
            if (_root.depth<900) {
                _root.depth = 1000;
            }
        }
  5. Теперь нам нужно создать функцию maskOut, которая будет перемещать предыдущую маску за пределы рабочего места. Имейте в виду, что мы перемещаем этот фильм на ту же самую позицию ( Stage.originalWidth+200 ), на которую была перемещена первая маска. При этом открывающая и скрывающая маски появляются и исчезают примерно с одинаковой скоростью.
    function maskOut() {
            _root.latestMask.tweenTo({_x:Stage.originalWidth+200}, 
               15, _root, "remove");
        }
  6. По достижении фильмом конечной точки вызывается функция remove, которая удаляет его вместе с соответствующим рисунком.
    function remove(maskMc) {
            maskMc.myPic.removeMovieClip();
            maskMc.removeMovieClip();
        }

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

    #include "tweento.as"
        #include "brightness.as"
        #include "stage.as"
        _root.depth = 1000;
        _root.filename = "pictures.xml";
        embedder._visible = 0;
        buttonTf = new textFormat("Arial", 20, 0x4375A6);
        statusTf = new TextFormat("Arial", 40, 0x4375A6);
        //rest of code goes here
    
        function createButtons(imageArr, tF) {
            _root.createEmptyMovieClip("buttonHolder", 100000);
            var currx;
            for (var i = 0; i<pictureObjects.length; i++) {
                _root.buttonHolder.depth = i+1;
                var caption = (i+1) .toString().length<2 ? "00"+(i+1) : "0"+(i+1);
                var obj = {myText:caption, _x:currx, obj:_root,
                КdefaultBright:0, rollOverBright:30, visitedBright:60,
                КactiveBright:-30, pressFunction:"triggerPhoto",
                К-pressArgs:i, tf:buttonTf, embedFonts:true};
                var nooButton = buttonHolder.attachMovie ("nooButtonMc",
                К"noob"+i, i, obj);
                currX += nooButton.width+5;
            }
            buttonHolder.noob().setActive();
            buttonHolder._x = (Stage.originalWidth-buttonHolder._width)/2;
            buttonHolder._y = Math.round(Stage.bottorn)-buttonHolder._height;
            buttonHolder.onResize = function() {
                var у = Math.round (Stage.bottom) -30;
                this.tweenTo({_y:y}, 3);
            };
            Stage.addListener(buttonHolder);
            Stage.onResize();
            buttonHolder.onResize();
        }
        function triggerPhoto(currentPicture) {
            var nextPicObj = pictureObjects[currentPicture];
            _root.depth--;
            var noopic = createEmptyMovieClip("picClip"+depth, depth);
            noopic.createEmptyMovieClip("inner", 1);
            noopic.inner.loadMovie(nextPicObj.file);
            nooPic._xscale = nooPic._yscale=101;
            nooPic.inner._x = (Stage.originalWidth-nextPicObj.width)/2;
            nooPic.inner._y = (Stage.originalHeight-nextPicObj.height)/2;
            _root.depth--;
            var nooMask = _root.attachMovie("mask", "mask"+depth, depth);
            nooMask._x = 0;
            nooMask._yscale = Stage.originalHeight;
            nooMask._xscale = 1;
            nooMask.myPic = nooPic;
            nooPic.setMask(nooMask);
            nooMask.tweenTo((_xscale:Stage.originalWidth+200}, 15);
            if (_root.latestMask) {
                maskOut();
            }
            _root.latestMask = nooMask;
            if (_root.depth<900) {
                _root.depth = 1000;
            }
        }
        function maskOut() {
            _root.latestMask.tweenTo({_x:Stage.originalWidth+200}, 15, _root,
            К"remove");
        }
        function remove(maskMc) {
            maskMc.myPic.removeMovieClip();
            maskMc.removeMovieClip();
        }
        function init() (
            if (!checkShared()) {
                importXml(};
            }
        }
        init();
    Пример 5.14.
  7. Сохраните файл с именем finalVersion.fla и запустите его. Вы сначала увидите сообщение о загрузке рисунков. Затем оно исчезнет перед появлением кнопок при отображении первой картинки.
    Загрузка рисунка завершена

    Загрузка рисунка завершена
    Рисунок 1 появляется во время перемещения кнопок на их места

    Рисунок 1 появляется во время перемещения кнопок на их места
    Настройка рабочего места почти завершена

    Настройка рабочего места почти завершена
    Рисунок 1 исчезает, а рисунок 3 появляется

    Рисунок 1 исчезает, а рисунок 3 появляется

    Таким образом, при создании этого интерфейса вы изучили намного больше, чем при работе с двумя предыдущими версиями. Здесь рисунки загружаются динамически, а с использованием XML можно выбирать рисунки для загрузки без изменения FLA. Мы также минимизировали время инициализации, использовав sharedObjects для кэширования созданного при обработке XML массива. Интерфейс может работать с массивами различного размера, хотя массивы, с которыми мы работали, были одинаковы по величине. Даже если вы будете быстро щелкать на разных кнопках, фотографии по-прежнему будут плавно скользить через экран. При помощи системы обратных связей можно изменить работу масок так, чтобы фотографии появлялись только после исчезновения других. Данные заголовка, которые мы включили в XML, можно использовать для добавления названий рисунков.

Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

объект созданый мной упорно не желает оставлять след(единственное что добился, так это то что шарик резво гоняется за курсором) функция duplicateMovieClip остаётся не активной, т.е. следа от объекта не остаётся, но если я тоже самый код вбиваю в учебный файл всё работает, не могу понять где я ошибаюсь и почему в документе созданном заново, не работает код начиная от функции duplicateMovieClip? 

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2