Листалка страниц HTML5 canvas. Чешу задумчиво в затылке.
Увидел сегодня на Хабре: листалка страниц на html5 canvas.
Конечно это пример пока корявенький, без всяких излишеств, типа теней и объемов, но однозначно рабочий.
Процесс идет. Медленно, но верно. Младенец уже уверенно держит головку, скоро научится садится.
Realaxy. Первые впечатления. Hands on review.
Первые впечатления… тут пожалуй подойдет такая метафора: прогулка на лыжах по песку.
Впрочем, речь даже не о прогулке, а о попытке сдвинуться с места. Я не буду давать никаких оценок, я просто опишу свой опыт первых часов работы с Realaxy.
Итак, дано:
Пользователь, который не имел дела с flex sdk, не знает ничего о jetbrains кроме самых общих слов. При этом активно пользуется редактором кода FlashDevelop, и имеет небольшой опыт работы с Flex Builder. Realaxy я попытаюсь использовать просто как редактор Action Script кода.
Ставим Realaxy. Все проходит быстро.
Первый запуск. Узнаем, что имеем дело с триальной версией на 30 дней.
Создаем проект.
Выбираем в меню Action Script проект
жмем далее, выбираем имя проекта. Ниже идет какая- галочка «Создать модуль».
Пожимаем плечами, бог его знает, что это, наверное так надо.
Жмем далее, пишем имя главного класса, ок!
Появляется окошко в котором показывается прогресс создания проекта. Машина на которой производилось тестирование - старье, пентиум 820D. Ждем. Ждем долго. Настолько долго, что я начинаю волноваться… Ок. Спустя каких-то три минуты имеем проект.( Позже выяснилось, что это только первый раз так долго. Потом все быстро грузится)
Открываем в дереве каталогов главный модуль. Вот она революция! Ну наконец-то!
Легким нажатием Enter генерим метод, даем ему имя.
Создаем переменную: var txt : String;… String почему-то подсвечено красным… Пробуем еще раз, снова. Не знаю такого типа, дает мне понять программа.
Хорошо. А Number ? - Хрен. int? - фигушки.
Что за черт?
UPDATE
В комментах Евгений Потапенко подсказал: чтобы тип переменных или класс стал доступен в проекте его надо импортировать с помощью ctrl+R. В появившемся диалоговом окне пишем имя переменной или класса, после этого она (он) становится доступной.
UPDATE 2
Александр Елисеев: по CTRL+R импортируется не класс, а вся модель (пакет), которая содержит этот класс. Можно также нажать CTRL+M и выбрать в списке именно пакет, классы из которого требуется сделать доступными. Модели из библиотек имеют постфикс @swc_stub после имени пакета, поэтому, например модель дефолтного пакета называется просто @swc_stub.
Пытаюсь написать trace(”Hello world”); редактор не понимает, чего я хочу, подсвечивает красным.
Минута молчания.
Создаю новый проект. Та же фигня. Ладно.
Лезу смотреть скринкасты. Делаю как там.
Пишу в строке “Hello world”, ставлю на нее курсор, жму ctrl-alt-V. О боги! Сработало, наконец-то! Все как в сказке - редактор сам создал переменную! Даю ей имя, ура!
Выдыхаем. Ну ка – ну ка, а что если мне нужна просто строковая переменная без инициализации. Ок. Создаем шаблон переменной, даем имя пишем тип… var txt2 : String; Что за черт?!
Подсвечено красным! Т. е. то, что редактор создал сам - его устраивает. А моя прекрасная переменная ему не катит? (Вспомнилось про поддельные елочные игрушки - все у них тоже самое, как у настоящих, но… не радуют!)
Где-то, на пятом по счету, новом проекте я внезапно смог написать trace(txt, …args); без того, чтобы редактор подсветил это красным.
Компилим swf - ура! Работает.
Только куда trace выводится? Я пока не понял. Не нашел.
UPDATE
Евгений Потапенко: по трейсам - нужно импортировать logger language (ctr+L - “logger”)
и сообщения выводить c помощью trace statement, (не глобальной функцией trace). trace и ctrl+space даст в списке trace statement.
так же доступны debug, error, warn стейтменты.
сообщения выводятся внизу в панеле “messages”.
кликнув на сообщении можно перейти в точку где сообщение было послано.
Автокомплит
Создаем переменную типа MovieClip - отлично, а к примеру TextField - хренушки.
Причем в списке автокомплита значатся только классы из пакета flash.display. А как подключить остальные? Никакой import flash.text; редактор написать не дает, светит краcным. Но ведь библиотеки где-то надо прописать? Точно так же я не смог добавить листенер, причем hasEventListener в списке автокомплита есть, а addEventListener нет.
Беготня по окнам свойств проекта, класса и модуля не дала результата, там и так упомянут playerglobal.swc включающий в себя все пакеты flash, но что толку?
Что это глюк или это, я тупо не знаю. Обычно в таких случаях я читаю справку. Но здесь ее нет. Совсем. Вопрос пока повис в воздухе.
UPDATE
В комментах Евгений Потапенко подсказал: чтобы тип переменных или класс стал доступен в проекте его надо импортировать с помощью Сtrl+R. В появившемся диалоговом окне пишем имя переменной или класса, после этого она (он) становится доступной. См. иллюстрацию.
Сам автокомплит работает… м-м-м иначе, чем во FlashDevelop, где я успеваю написать pr а он уже высвечивает подсказку private, остается только нажать Enter. То есть я пишу, а редактор FlashDevelop дает подсказку сразу. В Realaxy при наборе текста надо нажать Ctrl-пробел или Ctrl+Shift+пробел, и только тогда он показывает окно с подсказкой автокомплита.
Во FlashDevelop если я создал переменную var mc : MovieClip; и потом пишу mc = new , то сразу после new дается подсказка MovieClip, остается нажать Enter. Очевидно, не так ли? Realaxy в такой же ситуации рисует мне красный знак вопроса mc = new ?. Спрашивается, почему? Ведь вроде бы ясно что я хочу создать новый мувиклип, и первое предположение для автокомплита очевидно - MovieClip.
Realaxy может легко создать метод, или всю конструкцию for (var i:int… сразу целиком. Но автокомплит в мелочах пока далек от совершенства.
Realaxy пока ведет себя нестабильно. То все работает как в скринкастах, то, минуту спустя, редактор начинает дурить… строптивый у него характер, как у необъезженной лошади. Довольно часто можно увидеть это:
Причем после возникновения ошибки и перезагрузки - проект слетает. Окно с кодом открывается пустым, а сам редактор иногда впадает в кому. Пока оказалось проще всего удалить папку с проектом и начать сначала, чем разобраться в том, как это исправить. И примерно с десятого запуска редактора проект генерится пустым, без модуля. То есть в структуре проекта есть только библиотека, а самого package нет. Я пробовал создавать вручную проект и его начинку, но оно не компилится, выдает ошибки.
Вот такая получилась история. Пока работа с Realaxy не является “работой”. Это пока скорее изучение нового подхода, демонстрация новой концепции, можно поиграться, потрогать. А местами это похоже на загадку. Но интересно.
Я пока не берусь делать никаких выводов, поскольку многое из того, что у меня не сработало, могло не сработать просто по причине не знания мною правильных подходов к работе именно в этой среде (сказывается отсутствие справки даже в самом минимальном виде). Все представленное выше это скорее некая непосредственная реакция меня, как пользователя на происходящее. Для создателей это повод задуматься о том, что пытаются делать в редакторе люди привыкшие к других способам работы и подумать о том не пойти ли им на встречу. А они эти пользователи, как правило пытаются делать совсем не то и не так как задумал разработчик.
Realaxy. Делюсь впечатлениями от презентации на Creative Future 2010
Не зря говорят, что лучше один раз увидеть, чем тысячу раз услышать. И я увидел (и услышал) презентацию Ивана Дембицкого и Евгения Потапенко на мероприятии Creative Future 2010 об их детище - редакторе Realaxy. Я думаю,что у этого продукта есть все шансы стать хитом.
Внешне, это обыкновенный редактор кода, однако за довольно привычным интерфейсом скрыты возможности выходящие за рамки привычных представлений о редакторе кода для Action script 3.
Этот продукт построен на базе jetbrains mps. Это система мета программирования, позволяющая расширять язык программирования по своему усмотрению. Мета программирование… м-м-м? Звучит, мягко говоря не слишком ясно. Не бойтесь, я постараюсь объяснить… по крайней мере в той степени в которой это доступно моему пониманию.
Во всяком случае, в первую очередь Realaxy это очень, ну просто очень удобный редактор кода. С автокомплитом, с подсказками и автоматической генерацией кода, с подсветкой всего чего только можно. Все это можно внимательно изучить в скринкастах. Я не буду тут слишком углубляться в эти детали. Я остановлюсь на том, что привлекло мое внимание.
Первое, что удивило - наличие разбиения документа на секции в совершенно ультимативном порядке. То есть: вы создаете класс, и в документе сразу, жестко размечены секции: <<static fields>>,<static methods>>, <<methods>> и т.п. они обозначены специальными текстовыми тегами. И это означает, что cоответствующие переменные и методы могут быть размещены только там, где обозначен раздел для них. Т.е. вас заставляют делать правильный код, не позволяют мешать все в кучу. Эта идея, на мой взгляд весьма толковая, особенно для таких начинающих деятелей от дизайна, как я, жестко задавать шаблон документа. И тут настоящий воин должен задаться вопросом какого хрена, а что это простите за формат документа такой, который может, что-то не позволить? Как тупой текстовый документ может не позволить мне что-то?…
А вот в том то и дело, что редактор Realaxy хработает с данными не в виде обыкновенного текстового файла as. Да, дорогие мои девелоперы, это XML (он конечно тоже текст, но все-таки это явно не action script). Получается, что разработка проекта , будучи начатой в этой среде, довольно жестко к ней привязывается.
Такой подход дает довольно интересные возможности.
Например, меня очень порадовала такая возможность редактирования кода: если в уже написанном коде вы измените имя существующей функции, то все ее вхождения в код будут переименованы автоматически.
Безусловно, в любой момент вы можете экспортировать из редактора обыкновенный action script код для использования в других приложениях, но при этом вы получите некоторое количество кода сгенерированного автоматически с о всякими волшебными автоматическими именами типа “bs_23434″.
Еще одной необычная, по крайней мере для меня, возможность - вы можете переопределять синтаксис языка, или в терминологии этой среды - создавать расширения. Фактически Realaxy позволяет создавать нечто вроде надстройки над используемым языком. Для ясности приведу пример: кто-то из слушателей заметил, что это подобно тому, как если бы вместо ключевого слова function в редакторе показывалась бы условная иконка, наподобие смайлика, а область видимости ptivate или public тоже обозначалась условным значком… То есть у вас есть возможность переопределять конструкции языка для вашего удобства, для лучшей удобочитаемости кода. По существу это и есть основная идея мета программирования - возможность расширения языка, вот тут подробнее, но простите, на английском. Эта, на первый взгляд, неочевидная возможность позволяет улучшить удобочитаемость кода и сократить время разработки за счет уменьшения избыточной писанины (я думаю вы в курсе насчет некоторой избыточности синтаксиса action script). Планируется создать вокруг продукта некое сообщество пишущее эти расширения, с форумами, обсуждениями и т.п. Говорят что, что омериканцы проявляют нешуточный интерес к этим возможностям Realaxy.
(Еще раз подчеркну, я объясняю все так, как я понял, поэтому могу где-то ошибаться. Желающие могут обратиться к первоисточнику: тут в комментариях на хабре сами авторы дают пояснения по вышеописанным пунктам)
И еще пунктирно, что запомнилось:
- В Realaxy есть богатые возможности рефакторинга, которые на этой платформе можно с легкость выращивать пачками любых размеров и цветов…
- Код компилируется стандартным компилером flex3.
Переходя к жестокой прозе жизни, хочу отметить, что проект этот пока еще совсем бета – баги, глюки и прочие прелести большого растущего организма, плюс эффект презентации, когда отказывает и глючит все то, что в повседневности ведет себя пристойно. Но, это как известно, лечится и я надеюсь со временем и глазик перестанет дергаться и ножка выпрямится… Я вот тоже надеюсь получить бету и помучать ее как следует. Документации пока нет никакой, кроме скринкастов, но что касается базовых возможностей редактирования - клавиатурных сокращений там совсем не много, и благодаря подсказкам, все довольно понятно.
Я надеюсь, что ходе своего развития Realaxy не перейдет ту черту за которой начинается пародия на заботу о нуждах пользователя, по типу редактирования текста в ms powerpoint, когда редактор настолько умен, что способен довести до белого каления любого пользователя, которому нужно нечто более сложное, чем типовой шаблон. Я имею ввиду мудацкое поведение пауэрпойнта при атоматическом форматировании текста, которое определяется какими-то неочевидными закономерностями. Или такой необходимый Puntoswitcher, нагло пытающийся переводить код action script на русский язык, штука нужная и умная, но иногда хочется взять и у…ть ее чем-нибудь тяжелым… Простите, отвлекся.
Релиз Realaxy планируется в августе или сентябре (”…Какого года?” - ядовитый вопрос из зала, я лично, очень надеюсь, что 2010).
Иван сказал, что продукт будет платный, стоимость около ста баксов. Возможно когда-нибудь он станет бесплатным.
Подводя итог могу сказать, что было довольно интересно посмотреть живьем скринкаст “людей из Черногории”, редактор получился интересный, хочу себе такой.
P.S.
Несколько слов о собственно мероприятии Creative Future 2010. Организовано все весьма толково, народу было много, вернее ОЧЕНЬ МНОГО. В перерывах раздавали бесплатные кофе-соки-воды и прочие бутерброды и даже пиво с чипсами после 19.00. Самая главная презентация была посвящена новым возможностям CS5. Я честно говоря, читал о них еще недели две назад, а про флеш5 еще с месяца два тому назад… но одно дело читать, а другое живая демонстрация релизного продукта.
Понравилось как грузится 64-битный фотошоп на эппловском ноуте под виндами - 3 секунды. Презентеры явно наслаждались эффектом - нажали кнопку, и сосчитали “раз, два, три” и он открылся. Я вот не могу пожаловаться на свой core i7 c 64-битными win7, но у меня четвертый явно не три секунды грузится…
В целом, не смотря на мой застарелый цинизм в отношении публичных мероприятий такого рода, впечатление осталось положительное.
Новый проект: Феи, бабочки и часы!
В апреле сошел со стапелей теперь уже очередной мой коммерческий проект — флэш сайт ресторана “Золотое время”:
Сайт ресторана "Золотое время"
Да. Там летает фея, бабочка и играет блюз Golden time. Всю эту красоту мне помогла реализовать художница Светлана Шелихова.
Проект я реализовал на шаблоне проектирования MVC, активно используя собственные наработки предыдущих проектов, один из которых в эфире уже более года - zoom-mebel.ru
Для меня новым этапом в этом проекте была работа с аутсорсом, т.е. я нанимал художника, чтобы реализовать визуальную составляющую.
Проект был реализован в довольно сжатые сроки. В конце февраля состоялось первая встреча с клиентом, а 1 апреля сайт уже был открыт. Сказалось наличие готовых наработок от предыдущих проектов и мой существенно возросший опыт программирования на as3.
Что касается технических аспектов, то здесь есть два интересных момента:
- Я прикрутил в раздел “Контакты” — гугловскую карту. Оказывается у них есть флешовый API, с довольно развитыми возможностями. Я бы с удовольствием прикрутил и яндекс карты, но у них пока нет флэш api.
В разделе “Контакты” пока остался глюк полосы прокрутки, видимо внедренная карта возвращает полную высоту всей карт, что составляет какую-то немыслимую величину в десятки тысяч пикселей, в результате после ресайза окна браузера полоса прокрутки выглядит так, как-будто там вся эта карта мира засунута в полный рост. - Пришлось повозиться с феей, чтобы она прилетала и улетала когда надо, научил ее владеть волшебной палочкой
Что касается идеи сайта, то тут копирайт полностью принадлежит заказчику. Заказчик совершенно ясно представлял что ему нужно — фея, дерево, бабочки, сказочная атмосфера… И самое главное:в результате он получил именно то что хотел.
В конце концов им лучше известна их аудитория и ожидания приходящей к ним публики, поэтому я целиком сосредоточился на реализации и результат меня радует.
Realaxy ActionScript Editor is coming!
23 апреля на мероприятии Creative Future Евгений Потапенко и Иван Дембицкий представят свою новую разработку Realaxy ActionScript Editor.
11:45—12:45 «Новое поколение редакторов: Realaxy ActionScript Editor глазами создателей.»
Выездной подкаст Евгений Потапенко, Иван Дембицкий, Зал №8
http://creativefuture.ru/speakers#potapenko
Иван Дембицкий:
думаю что мы раздадим желающим бета версию редактора.
Скажем так: желающие смогут стать тестерами закрытой беты.
И возьмите флэшку на всякий случай.via ruFlash
А также просьба по возможности распространить эту информацию через свои блоги. За это тоже обещали выдавать бету. (Написав пост в своем блоге киньте ссылку на новость сюда: ivan.dembicki@gmail.com с сабжем [betatest].)
UPDATE
Скринкасты realaxy actionscript editor: