Немного фона
Я занимаюсь созданием Flash-комиксов уже три года, включая некоторые базовые анимации, синхронизированный саундтрек и просмотр страниц с перетаскиванием.Недавняя вспышка Flash, мое желание достичь iHandhelds и мое предпочтение открытому и проприетарному означает, что я хочу перейти на методы HTML5 в этом году.В долгосрочной перспективе, я думаю, что написание статьи для продукта Adobe, и я не совсем уверен, что это плохо.
Я относительно комфортно с CSS и HTML, немного поработавв веб-дизайне раньше.Тем не менее, JavaScript для меня чужая страна, и я просто хотел получить совет относительно
- , можно ли добиться того, чего я хочу достичь последовательно во всех браузерах и
- Каковы лучшие методы / подходы к проблеме.
Любые советы, даже общие принципы, очень приветствуются.Я уже разыскивал несколько учебных пособий по HTML5, которые наводят меня на мысль, что элемент canvas будет основой для моего плана;однако, несмотря на то, что на все отдельные проблемы, с которыми я сталкиваюсь, ответили многие посты и руководства, объединение различных решений в одну сущность я пока не могу понять, поскольку не уверен в ограничениях нового HTML5.теги или передовой опыт.
Если мне удастся добиться того, чего я добиваюсь, я опубликую полный код в Интернете с объяснением всех элементов.Вебкомикс может и не быть огромным доменом, но наличие ресурса, который бы это делал, сделало бы мою жизнь намного проще - надеюсь, это поможет кому-то другому в подобной ситуации.
То, что я преследую
Вот диаграмма, дающая основы проектных требований.Ниже я объясню элементы и необходимые дополнения.
(Пожалуй, самый простой способ продемонстрировать, что мне нужно, - заинтересованным людям перейти на мой сайт и посмотрите, как в данный момент работает мой комикс. Это не плагин - он просто дал бы самое быстрое понимание.)
По сути, я за зрителем, который будет:
- отображать текст (изображение SVG) в элементе Canvas над растровым изображением. На обложке страницы
- оба изображения должны быть с возможностью масштабирования и перетаскивания синхронно , но в идеале должны постепенно исчезать,сначала идет растровое изображение, а затем SVG-изображение
Я предполагаю, что лучший способ сделать это - наложить два элемента canvas один над другим, используя z-index, сФайл SVG в самом верхнем элементе.Затем они могут быть вложены, как на диаграмме, в элемент div, который будет выполнять функцию zoom-drag.Это разумный подход или есть более эффективные варианты?
Следующая и предыдущая кнопки не требуют пояснений.Будет ли лучше, чтобы каждая страница (учитывая, что некоторые из них будут включать анимацию и музыку) на отдельной странице или чтобы все страницы в пределах главы на одной странице, с кнопками, делающими их видимыми постепенно?Я полагаю, что это сильно повлияет на скорость загрузки.
Наконец, мне бы хотелось, чтобы зритель мог отображать полноэкранный режим, если того пожелает читатель.Я полагаю, что это может быть достигнуто с помощью Javascript, чтобы элементы canvas и окружающий их div переключались между различными CSS, давая определенный размер px и 100% высоту и ширину.Это хороший подход?Можно ли применить изменение размера только к элементу div и сделать так, чтобы элементы canvas автоматически следовали его примеру, возможно, определяя их размер с помощью% в CSS?
Желаемые дополнения
В различных точках комикса я использую базовые приемы анимации - простые перемещения многослойных растровых изображений по панели просмотра. Я думаю, это было бы просто сделать с помощью Javascript; Правильно ли я считаю, что применение переполнения: скрытое в div обтекания предотвратит проливание изображений, превышающих область просмотра, за пределы области просмотра?
Я также хочу синхронизировать звук с некоторыми из этих анимаций. Я понимаю, что синхронизация событий холста со звуком была бы наилучшим способом сделать это, позволяя обоим начинать деятельность только после загрузки страницы или следующего нажатия кнопки.
Это обо всем. Как уже говорилось, любой совет на уровне независимо от уровня будет принят с благодарностью, даже если он отвечает «да» или «нет» на различные вопросы, которые я задавал. В корне было бы также полезно узнать, является ли HTML5 лучшим вариантом для того, что мне нужно, или я должен (покачивая зубы) пока что придерживаться Flash и использовать карманные компьютеры с помощью Adobe AIR.