26 июня 2012



ADOBE FLASH как сделать кнопку ссылкой

                                          ADOBE FLASH
CS4- CS5
после того, как кнопка создана
в основной шкале ( там, где кнопка занимает 1 кадр, а не внутри символа)

 - F9 - открыть окошко Action Script 2 (в Action Script 3 этой команды, вроде, нет. создание ссылки там осуществляется как-то иначе. и не забыть, что AS2 и AS3 несовместимы)
 - щелкнуть по самой кнопке, так чтобы в верхней части окошка Actions появилась надпись Actions-Button (а не Actions-Frame)
 - добавить 
   1 on (release) {
   2 getURL("http://paragliding-macedonia.com/competitions/czech-open-2012/news-results/", _blank);
   3 }
синеньким выделена интернет-ссылка для примера
_blank   открывает ссылку в новом окне. без него откроется в том же.



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

если перейти нужно на страничку строящегося сайта, нужно задать ее адрес, н-р:
file:///C:/Users/Vika/Documents/ucheba_CS5/Itsuv/gmar/KesemShakuf_site/basic_page3.html
короче, в какой папке она хранится, и где эта папка находится.
что делать, если эта папка должна быть перемещена, я пока не уверена, но, поскольку флеш-кнопка будет находиться так же внутри "корневой папки", скорее всего достатьчно будет задать внутренний адрес.

у вопроса есть решение:

как правильно писать ссылки
ссылки бывают абсолютные и относительные
абсолютная ссылка - это подробное перечисление куда и через где пойти, чтобы что-то взять.
в ActionScript2 такая ссылка будет выглядеть так:

getURL("file:///C:/Users/Documents/ucheba_CS5/Itsuv/gmar/KesemShakuf_site/html/gift_home.html", _blank);

getURL("file:///с какого диска/у какого юзера, если их несколько/папка/папка2/папка3/.../корневая папка сайта/в ней папка html/имя странички.html", _blank);


относительная ссылка на ту же страничку под именем gift_home.html выглядит покомпактнее:

getURL("html/gift_home.html", _blank);

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

общее описание для ActionScript2

что такое URL адреса, относительные и абсолютные ссылки

принцип построения относительных и абсолютных ссылок в html


24 июня 2012

Dreamweaver - самое начало


ADOBE DREAMWEAVER
CS4- CS5
ура! добрались до построения сайтов
только самых простеньких, на большее времени не хватит, но все равно хорошо



здесь можно скачать самоучитель по Dw CS3 уж не знаю, стоит ли, нет ли

подготовка рабочего пространства:

первым делом нужно создать папку, так называемый ROOT FOLDER (корневую, основную).  ну и обозвать как-нибудь - н-р, по названию будущего проекта.
папку можно разместить там, где нам будет удобно (лишь бы знать, где).
в ней должно находиться  предположительно еще 4 папки

естественно, содержимое для папок image и flash нужно подготовить заранее  - фотографии нужных рвзмеров, иллюстрации, кнопки, тексты, флеш ролики... в любой папке могут быть дополнительные папки для удобства. temp папка для временных  (н-р недоработанных) файлов, к-рые в будущем будут доделаны и перемещены в одну из основных папок, либо удалены.



открываем программу:

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

открывшийся экран разделен на две части. в CS4 на верхнюю и нижнюю, а в CS5 на правую и левую: в левой части находится html код, автоматически пополняющийся по ходу эволюции создаваемой интернет-страницы. в него вполне можно вмешиваться - ежели знать, как. так что надо бы начать разбираться
пока же можно в левом верхнем углу основного окна найти кнопочки: code - на экране будет только окно с кодом;
                    split - экран разделен пополам;
                    design - экран открыт без кода


в правой верхней части окна стоит поменять режим Designer 
на более удобный Classic 

создать новый сайт:

Site -          New Site

в CS4это окошко выглядит несколько иначе, но суть та же: перейти в Advanced  Settings, дать новому сайту название и загрузить заранее подготовленную "корневую" папку - ROOT FOLDER

Window -                     Files

в этом окошке мы видим ROOT FOLDER
файлы из этого окна можно открывать или просто перетягивать в основное окно

создание html страниц:

установить курсор на нужную папку (скорее всего на папку html) и нажать на правую кнопку мышки: New File. непременно задать название и убедиться, что оно заканчивается расширением . html 
для удаления чего-либо, в меню правой кнопки мышки выбрать Edit - Delete

кстати, главную станичку сайта  Home page мы назовем index.html  и помещать в папку html не будем - эта цаца будет проживать в основной папке, чтобы в дальнейшем, при загрузке сайта компьютеру было легче ее найти. 

























09 мая 2012

интересные уроки из и-нета

сюда буду скидывать находки, показавшиеся интересными, - те, что хочется когда-нить опробовать, или которые уже пригодились.
когда наберется много, рассортирую в разные сообщения




Загибающийся флеш-уголок для сайта.


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



50 креативных портфолио сайтов.

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

«Блог о веб-дизайне» - еще не смотрела.


построение тени1 - удачный и простой урок о посторении тени, ее правильном расположении
построение тени2 - продолжение. тот же автор.


тени - василий пирогов. От автора: "цель этого урока показать тени, которые похожи на реальные, применимы для дизайна сайтов и которые не надо рисовать по 5 часов."



Создание градиентной маски расписано по пунктам + пример. и аналогичный урок 2012


След от MovieClip'а тающий след движущегося объекта.











08 мая 2012




ADOBE FLASH покадровая анимация  frame by frame
                                          ADOBE FLASH
CS4- CS5

требуется
- нарисовать две ноги
- в каждом ключевом кадре одну из них перемещать в новое положение
- запустить проверить сохранить


пошагово
1. на временной шкале обозначен одн кадр с пустым кружочком.
когда на "сцене" появится рисунок, этот кружочек станет черным.
2.  для того, чтобы ноги не бежали слишком быстро, keyframes будем делать не в каждом, а в каждом пятом кадре:
   -  курсором щелкаем по кадру номер 5
   -  F6 - создание нового ключевого кадра 
   -  смещаем правую ногу в новое положение
     и т.д.
   - кадры на временной шкале можно выделять и копировать,
   и "приклеивать" в другое место
   - в нижней части временной шкалы есть иконка onion scin, нажав которую можно увидеть уже созданные кадры (см в предыдущем сообщении), это облегчит размещение новых

3.проверочный запуск Ctrl + Enter





ADOBE FLASH анимация - введение
                                             
ADOBE FLASH
CS4- CS5

во Флеше можно создать анимацию 4-ех видов:

Frame by Frame покадровая анимация: в каждом кадре происходит маленькое изменение;

Shape Tween анимация формы, плавное превращение одной фигуры в другую, промежуточные кадры программа просчитывает самостоятельно;











Motion Tween анимация движения - смещение объекта из одной точки в другую, причем нужно создать первый и последний кадры, промежуточные кадры программа просчитывает самостоятельно. можно задавать дополнительные параметры вращения, замедления\ускорения;

Classic Tween похоже на Motion Tween, но, так сказать, упрощенный вариант

анимация - изменение свойств объекта во времени.

общее для всех четырех видов анимации во Флеше:

временная шкала Timeline


слева layers - слои. их может быть много. желательно каждый анимированный объект размещать на отдельном слое. порядок слоев на временной шкале обычно соответствует порядку наложения объектов на "сцене".

на разных слоях могут параллельно находиться разные виды анимации

справа кадры.
Keyframe , ключевой кадр - это кадр, в котором мы задаем новые свойства (местоположение, цвет, размер...) объекта. он обозначается на шкале черной точкой.
для добавления ключевого кадра курсором щелкнуть по нужному кадру на шкале, после чего F6.
для добавления обычного кадра курсором щелкнуть по нужному кадру на шкале, после чего F5.
для удаления кадра то же + Shift


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



для предварительного просмотра ролика Ctrl + Enter

для того, чтобы сохранить формат swf достаточно запустить Ctrl + Enter после того, как рабочий файл был сохранен обычным способом (File - Save as...) - файл swf автоматически будет сохранен в той же папке, что и рабочий








04 мая 2012


ADOBE FLASH еще не анимация                                                 ADOBE FLASH
CS4- CS5



Window - 
                Other Panels -
                                       History 
History - описание на адобовском сайте


Window - 
                Library

библиотека существует для хранения символов.
символ  - Graphic изображение, Button кнопка или Movie Clip фрагмент ролика.
символ может быть повторно использован, 
из него можно создать экземпляры символа, позволяющие использовать его , вариируя местоположение, цвет и т.д.

для того, чтобы созданное нами нечно поместить библиотеку, его нужно перетянуть, и в появившемся окошке задать тип и название. другой вариант - Modify - Convert to symbol или попросту F8

при импорте картинок (JPG,GIFF, PNG и др: Об импорте иллюстраций во Flashв библиотеке тоже создаются символы. импортировать можно двумя способами:              
                                                  Import to Stage
                            File - Import -                                         
                                                  Import to Library

Import to Stage разместит все выбранные картинки на сцене одну под другой и создаст для каждой символ типа image
Import to Library создаст для всех выбранных картинок символ в библиотеке.
любой символ типа image может быть использован в качестве заливки. если имидж маленький, он, как паттерн, повторяет себя нужное количество раз. изменить, повернуть, увеличить-уменьшить его можно с помощью инструмента Gradient Transform.
превратить имидж в графический символ можно с помощью F8.

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

для каждого экземпляра символа типа Movie Clip можно задать instance name - имя экземпляра.
у экземпляров типа Movie Clip и Graphic можно менять color effects в окошке Properties: tint - оттенок , alpha - прозрачность, advanced - (типа, продвинутые настройки для крутых пацанов) все сразу.



пустой кружок в первом кадре становится черным, когда кадр заполняется (мы создаем что-нибудь на сцене). 
   для того, чтобы создать изменения существующего положения объектов нужно поместить курсор в нужный (новый) кадр на временной шкале и создаем keyframe - ключевой кадр (с черным кружочком внутри) с помощью меню из правой кнопки мышки или F6. после чего в новом ключевом кадре производим (на сцене) требуемые изменения.
   для того, чтобы существующее на сцене положение просуществовало дольше по времени, можно добавить обычные (неключевые) кадры F5 или insert frame  из правого меню мышки. курсор размещается на том кадре, до которого  мы хотим оставить нынешнее положение неизменным.
   для выделения нескольких кадров нужно щелкнуть черной стрелочкой вне временной шкалы, выделить их с шифтом или протянув по ним курсором. выделенные кадры можно перетягивать по временной шкале, из слоя в слой, копировать перетягиванием + Alt.
   для того, чтобы удалить некоторое количество кадров, нужно выделить их и нажать Shift + F5.
   для удаления одного из ключевых кадров Shift + F6.
   ключевые кадры всегда обозначены черной точкой, в последнем кадре есть пустой прямоугольничек.
   можно копировать, вырезать кадры и даже менять их направление - reverse frames.
   если нажать на цветной квадратик на одном из слоев, на сцене мы увидим контуры того же цвета, что и квадратик, тех фигур и объектов, которые принадлежат этому слою.
   в нижней части временной шкалы имеются кнопочки:
onion skin (луковая кожа) , дает эффект стеклянного стола с подсветкой :позволяет видеть очертания фигур из прошлых кадров. можно увеличить или уменьшить количество видемых кадров на верху временной шкалы).
   edit multiple frames кажется,позволяет редактировать кадры, перетягивать содержимое. надо будет проверить.