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

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

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

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 исчезает, а рисунок 3 появляется

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