Форум Flasher.ru - Dir-галерея книга с перелистыванием страниц

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - Dir-галерея книга с перелистыванием страниц (http://www.flasher.ru/forum/showthread.php?t=118429)

unused_name

23.11.2008 20:47

Dir-галерея книга с перелистыванием страниц

1. Задача: сделать презентацию книги, в виде, собственно, этой самой книги (около 400 страниц), где страницы будут перелистываться с соответствующей аниманцией, переход к следующей странице будет осуществляться нажатием кнопки (для упарвления будет использоваться лебедевская трехкнопочная клавиатура Оптимус, с экранчиками). В презентации будет одно меню-оглавление, доступное так-же по нажатию на одну из клавиш контроллера. На первый взгляд все довольно просто. В инете куча примеров с анимацией перелистывания и основанных на этом галерей, но, все они хороши для перелистывания с помошью мыши, без мыши анимация перелистывания выглядит, мягко говоря, простовато, нет перспективных искажений, ну и вообще довольно ненатурально. Исходя из вышесказанного, появилась мысль сделать все иначе.

2. В флеше CS4 появилась замечательная возможность вертеть мувики в 3Д, что позволило мне сделать довольно красивую анимацию перелистывания (650 Kb):

http://zeroiq.ru/book.gif тут видно конечно плоховато, но когда все доделаю - выложу исходник. Там действительно выглядит все весьма хорошо, по сравнению с обычным перелистыванием. Книга нарисована в максе + векторная маска по форме страниц в перелистывающихся мувиках.

На каждую страницу можно ставить любой мувик, это понятно. Но поддержка 3Д есть только в случае если документ во флеше создается с применением AS3...

Вот тут начинаются мои проблемы, я этот 3-й экшн-скрипт пока не понимаю вообще. Стандартное нытье - я дизайнер а не програмист, понимаю что все должно быть просто но с какой стороны подойти не знаю. Пытался сделать все загрузкой в AS2 swf-ку мувиков с перелистыванием, но тогда остается непонятным как ими тогда управлять. Все уроки AS3 для начинающих начинаются с примерно одного и того-же: вывода надписи "Hello world" и т.п. Это мне не поможет, времени на изучение языка поэтапно у меня просто нет. Новый хелп меня меня только сбивает с толку. И вот, собственно, мой вопрос: может ли кто-то подсказать как просто сделать несчастную кнопку перелистывания, как заставить рут перейти к определенному кадру, как заставить флэшку развернуться на весь экран, как на страницы грузить картинки из папки по порядку и т.д.
Есть ли в AS3 какой-то простой аналог простейших команд из AS2? Прошу сильно не глумиться над вопросами, поверьте, я не писал бы все это если бы не нужно было все это сделать ОЧЕНЬ срочно, и если бы я уже не сломал голову в попытках разобраться самостоятельно. :rolleyes:

musat

23.11.2008 23:57

Ну gotoAndPlay(), gotoAndStop() и т.п. и в AS3 есть.

Нажатие на кнопку делается так:

Код AS3:

// btn - имя кнопки

btn.addEventListener(MouseEvent.CLICK, onClick);

 

function onClick(e:MouseEvent):void {

    // кнопка нажата!

}

В полноэкранный режим:

Код AS3:

stage.displayState = "fullScreen";

А вообще, пользуйтесь поиском. Здесь, на форуме, можно найти все, что угодно :)

unused_name

24.11.2008 00:25

Спасибо, продолжаю копать :)

Там только отлавливать надо нажатие клавиши клавиатуры, мыши у просматривующего презентацию не будет, только Оптимус.

Добавлено через 12 минут
Может имеет смысл составить такой список, с самыми часто используемыми командами из AS2 и соответсвующими им аналогами на AS3 с объяснением разницы? Или это принципиально неверный подход? До этого я часто встречал мнение о том, что дизайнерам лучше вообще не лезьть в AS3, и оставить его програмистам, но как тогда быть в подобных ситуациях? Эффекты то в новом флеше сделаны именно для дизайнеров...

Добавлено через 3 часа 44 минуты
Сделал так:

Код AS3:

import flash.events.KeyboardEvent;

function pageFlip(event:KeyboardEvent):void

{

        if (event.keyCode==Keyboard.INSERT) {

        gotoAndPlay(2);

    }

        if (event.keyCode==Keyboard.BACKSPACE) {

        gotoAndPlay(3);

    }

        if (event.keyCode==Keyboard.ENTER) {

        gotoAndPlay(4);

    }

}

stage.addEventListener(KeyboardEvent.KEY_DOWN,pageFlip);

Криво? В принципе работает...

Добавлено через 17 часов 22 минуты
Теперь пытаюсь сделать переключение кнопок в 2 режима: навигация по меню и перелистывание страниц:

Код AS3:

import flash.display.Stage;

stage.displayState="fullScreen";

var showMenu = false; // - эта переменная должна указывать какой именно сценарий навигации использовать.

import flash.events.KeyboardEvent;

function control(event:KeyboardEvent):void

{ if (showMenu==false) { // меню выключено, кнопки управляют перелистыванием страниц.

     if (event.keyCode==Keyboard.INSERT) {

        gotoAndPlay(2);

    }

         if (event.keyCode==Keyboard.BACKSPACE) {

        play();

    }

         if (event.keyCode==Keyboard.ENTER) {

        this.menu1.gotoAndStop(2); // Меню становится видимым.

                showMenu==true; // Переключение в режим выбора пункта содержания. Кнопки должны перебирать пункты меню. 

    }

}

  if (showMenu==true) { // меню включено

     if (event.keyCode==Keyboard.INSERT) {

        this.menu1.play();

    }

         if (event.keyCode==Keyboard.BACKSPACE) {

        play();

    }

         if (event.keyCode==Keyboard.ENTER) {

        this.menu1.gotoAndStop(1);

                showMenu==false; // Выбор нужного пункта, переключение в режим пролистывания. 

    }

}

}

stage.addEventListener(KeyboardEvent.KEY_DOWN,control);

Почему так не работает? Как это вообще правильно делать в AS3?

SamFR

25.11.2008 03:45

Что конкретно не работает?
А вообще, за присваивание отвечает операция "=", а не "==".

Попробуй так:

Код AS3:

import flash.display.Stage;

import flash.events.KeyboardEvent;

 

var showMenu:Boolean = false;

 

stage.displayState = 'fullScreen';

stage.addEventListener(KeyboardEvent.KEY_DOWN, control);

 

function control(e:KeyboardEvent):void{

        if(!showMenu){

                if(e.keyCode == Keyboard.INSERT){

                        gotoAndPlay(2);

                }else if(e.keyCode == Keyboard.BACKSPACE){

                        play();

                }else if(e.keyCode == Keyboard.ENTER){

                        this.menu1.gotoAndStop(2);

                        showMenu = true; //!!!

                }

        }else{

                if(e.keyCode == Keyboard.INSERT){

                        this.menu1.play();

                }else if(e.keyCode == Keyboard.BACKSPACE){

                        play();

                }else if(e.keyCode == Keyboard.ENTER){

                        this.menu1.gotoAndStop(1);

                        showMenu = false; //!!!

                }

        }

}

unused_name

25.11.2008 05:52

С переключением режимов разобрался, (исправил второй if на else, и присвоение значения = ) теперь борюсь с "глобальной переменной" которая UILoader-у будет указывать какую картинку грузить из папки. Во первых почему-то не получается обратиться к экземпляру UILoader-а который внутри мувика-страницы, привычная конструкция

Код AS3:

this.page_l.loader_l.source = "pages_l/" + currentPage + ".jpg";

не работает, работает только в кадре внутри мувиклипа page_l без куска this.page_l соответственно, но оттуда не видно значиния переменной указывающей страницу currentPage. Пытаюсь создать класс global в файле global.as, как рекомендуют на всяких буржуйских сайтах - ничего не получается, выдается ошибка: 1119: Access of possibly undefined property currentPage through a reference with static type Class. Спасите кто-нибудь мой мозг...

musat

25.11.2008 13:53

А где находится переменная currentPage? В клипе page_l?

unused_name

25.11.2008 14:29

переменные заработали так:

Код AS3:

package {

 

public class global {

public static var currentPage:int;

global.currentPage = 2;

}

 

}

Заодно понял куда писать код если не в кадр )))))))))))))

Но отсюда сразу следующая проблема: 5007: An ActionScript file must have at least one externally visible definition.

- это возникает при переносе кода в, как я понимаю, главный класс mein.as, имя которого я пишу в настройках документа. Что там надо добавить чтоб был "хоть один externally visible definition"?

Добавлено через 19 минут
Добавил:

Код AS3:

package {

 

    import flash.events.Event;

    import flash.display.MovieClip;

 

    public class mein extends MovieClip {

начал ругаться на 1120: Access of undefined property stage тут:

Код AS3:

stage.displayState="fullScreen";

stage.addEventListener(KeyboardEvent.KEY_DOWN,control);

SamFR

25.11.2008 20:13

Если этот код находится в твоём классе mein, то ругаться не должен, потому что он у тебя наследует от MovieClip-а, а в нём это свойство определено.
А если не в mein-е, то перенеси его туда, в конструктор.

darksranger

25.11.2008 20:42

а чем не угодил pageFlip для as2 ? сурсы если порыть найти можно, даже у нас на форуме кто то кидал, анимация там выглядит правдоподобно
если не устраивает pageFlip, есть другой путь

качаем five3D as2 и делаем на его основе то что нужно

unused_name

26.11.2008 02:56

Цитата:

Сообщение от SamFR (Сообщение 779749)

А конструктор это главный класс куда загружаются все остальные, что-то типа root? У меня этот код находится в файле mein.as, и класс mein указан в поле инспектора свойств документа, но если его поместить в первый кадр на таймлайне - он работает.
А уровень вложенности клипов (классов) в AS3 указывается каким-то принципиально новым способом? Тут надо копать что-то типа parent - child?

Цитата:

Сообщение от darksranger (Сообщение 779754)

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

five3D - круто, спасибо, но мне уже поздно отступать, с ним я думаю попозже разберусь. Да и просто интересно в AS3 разобраться, буду редким дизайнером знающим его ;)

musat

26.11.2008 12:51

unused_name

Цитата:

Конструктор — специальный метод класса в объектно-ориентированном программировании, служащий для инициализации объекта при его создании.

Другими словами, на примере ActionScript, конструктор класса - это метод класса (функция) с таким же названием, как и сам класс. Этот метод будет вызван, например, при создании экземпляра этого класса с помощью new, аналогично

Код AS3:

var mc:MovieClip = new MovieClip();

или при указании класса как Document Class.

Попробуйте так:

Код AS3:

package {

 

    import flash.display.MovieClip;

    import flash.events.KeyboardEvent;

 

    public class mein extends MovieClip {

 

        public function mein() {

            // конструктор

 

            stage.displayState="fullScreen";

            stage.addEventListener(KeyboardEvent.KEY_DOWN,control);

        }

    }

}

Система вложенности объектов примерно такая же, только в AS2 _root - обращение к главной временной шкале, а в AS3 root - обращение к Document Class'у.

SamFR

26.11.2008 21:20

Если этот код расположен в mein (именно в КЛАССЕ mein, а не просто в файле mein.as), то ругаться, по идее, не должен. На всякий случай, попробуй сделать так:

Код AS3:

package {

        import flash.display.MovieClip;

        import flash.events.KeyboardEvent;

        import flash.events.Event;

 

        public class mein extends MovieClip {

 

                //это - конструктор, будет вызван при создании экземпляра класса,

                //то есть раньше всего остального, что есть в классе

                public function mein(){ 

                        addEventListener(Event.ADDED_TO_STAGE, eAdded);

                }

 

                protected function eAdded(e:Event):void{

                        stage.displayState = 'fullScreen';

                        stage.addEventListener(KeyboardEvent.KEY_DOWN, control);

                }

        }

}

Здесь мы слушаем событие ADDED_TO_STAGE, которое посылается, когда экземпляр класса добавлен в display list. Для обычных классов свойство stage становится ненулевым только после этого.
Для DocumentClass-а же свойство stage должно быть доступно уже в конструкторе, но, на всякий случай, попробуй так. Странный глюк.

unused_name

28.11.2008 02:30

А как можно выключить на время EventListener, пока идет какая-либо анимация например?
stage.removeEventListener(что тут писать?) или может есть какой-нибудь для него disable?

Смольный (Smolniy)

28.11.2008 05:15

В Инете действительно полно примеров - более того, готовых софтов, который вы покупаете и скармливаете ему ваши странички (растры или pdf), и оно сразу работает. Цена - около 100$ (например, тот же http://www.flashpageflip.com/ )
И знаете, оно работает не только от мышки, но и от клавы, например, кнопок влево-вправо!.. Если оптимус можно настроить так, чтобы кнопки на нем соответствовали курсорным, то задача решена - недорого, универсально, навсегда. И совсем срочно. :)

unused_name

28.11.2008 12:02

Цитата:

Сообщение от Смольный (Smolniy) (Сообщение 780217)

Что-то я уже замучался повторять что все эти готовые софты я подробно изучил перед началом работы и что они мне не подходят по ряду причин, основная из которых - моя придирчивость к натуралистичности анимации перелистывания. В контексте выполняемой задачи мой вариант выглядит на порядок круче (и так думаю не только я), и ничего подобного, уже готового я в инете не встречал. Если интересно, на результат можно посмотреть на книжной ярмарке NON-FICTION, на первом этаже ЦДХ, на интерактивном стенде напротив гардероба :rolleyes:
В данный момент я пытаюсь довести этот продукт до определенной стадии совершенства и реализовать с его помощью свои некоторые идеи в будущем, поэтому очень надеюсь на ответы по существу. И огромное спасибо тем кто откликнулся! :)

Добавлено через 19 минут
Кстати, решение с Оптимусом было ошибочным, на нажатие он реагирует примерно раз за секунду что делает навигацию по меню неудобной.
Соответствие стрелок на клаве и клавиши оптимуса (а так-же многих других кнопок, использующихся для навигации в готовых решениях) настроить, без написания собственного плугина к этой штуке - нельзя. И менять изображение на экранчиках, в зависимости от события в листалке, тоже нельзя. Программа-конфигуратор беспощадна к ресурсам компа.
Но горящие экранчики смотрятся хорошо, определенный ВАУ-эффект они создают.

Добавлено через 22 минуты
Подскажите плиз, как можно выключить на время EventListener то?
В примере хелпа че-то совсем не понятно как removeEventListener() использовать. Или его можно не удалять а просто приостановить?

musat

28.11.2008 15:29

Например, когда начинается анимация:

Код AS3:

stage.removeEventListener(KeyboardEvent.KEY_DOWN, control);

Когда заканчивется, снова повесить листенер:

Код AS3:

stage.addEventListener(KeyboardEvent.KEY_DOWN, control);

unused_name

28.11.2008 16:23

Спасибо! Не трудно конечно было и самому догадаться, даже не знаю что меня остановило :)

RedWalter

28.11.2008 16:44

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

unused_name

30.11.2008 18:20

Цитата:

Сообщение от RedWalter (Сообщение 780325)

- это где Вы увидели? На гифе в начале темы или в ЦДХ? Да, в центральном положение листа, когда мы смотрим в торец плоскости в которой он находится, его почти не видно, но ведь так и должно быть, находится он в таком положении 1 кадр, в нем происходит смена страницы. За неимением лучшего варианта или намека в вашем сообщении на то, как этот момент улучшить - оставляю все как есть, меня пока устраивает.

RedWalter

01.12.2008 21:52

Я гиф смотрел, а что такое ЦДХ ?( центр.дом х-ка? :) Может во флеше все и более естественно смотрится. Я имел в виду, что страница обычно немного изгибается при перелистывании, поэтому при переходе справа-налево видно как бы две части листа : уменьшающуюся левую полоску (изначально лицевую сторону) и увеличивающуюся правую полоску( оборотную сторону), которая наезжает-открывается не с центальной-верхней точки перелистывания, а раньше - градусов с ~45

unused_name

08.12.2008 00:33

ЦДХ - Центральный дом художника, где проходила книжная выставка и эта листалка была вмонтирована в один из стендов. Что касается изгиба страницы - то скорее ось сгибания должна отклоняться от вертикали и проходить не по центру страницы для полного эффекта, но я не знаю пока как это можно сделать, хотя кое какие мысли имеются, но вряд ли получится реализовать, т.к. я не програмист. А то что страницу видно должно быть с двух сторон - не согласен, от этого она кажется резиновой, и вообще это зависит от плотности и формата листа. Специально вертел перед глазами разные книжки и журналы.

Часовой пояс GMT +4, время: 16:26.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.