Помощь · Поиск · Пользователи · Календарь
Полная версия этой страницы: Подсказка на элементе Flash
Flash Zone Forum > Macromedia Flash > ActionScript
SunShadow
Делаю меню во флэш, не смог найти как поставить стандартную подсказку при наведении мыши на объект. Неужто нет такого и придется реализовывать все через клипы? Надеюсь на вашу помощь в освоении Flash)
P.S: Работаю с Macromedia Flash 8;
MustLive
SunShadow

Встроенного тултипа во флеше нет. Поэтому его нужно создавать вручную (через мувиклипы).

И при наведении курсора показывать мувик "тултип" (_visible = 1), а при уведении курсора - прятать (_visible = 0).

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

Замечу, что мною уже обсуждался ранее этот вопрос. И если у тебя найти конкретной информации не получилось, и если не хочется ждать выхода этого материала в рассылке (срочно нужно), то я могу запостить предварительный материал сюда в тему.
SunShadow
Цитата(MustLive @ 10.10.2006 - 15:37) *
SunShadow

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


Большой срочности в общем нет, но из-за этого тормозится мой проект. Буду признателен за подсказку в направлении движения). Через поиск я не смог найти материал, поэтому и обратился. И еще просьба, все дожидаюсь ответа по последнему вопросу про SharedObject. Если не сложно
MustLive
Цитата
Большой срочности в общем нет, но из-за этого тормозится мой проект.

SunShadow

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

На форуме детальное описание найти не получится, т.к. на самом форуме лишь в общих чертах этот вопрос рассматривался, а детальное руководство я писал одной из участниц форума, которая обратилась ко мне через ПМ. Поэтому детальная инфа ещё не опубликована (ни на форуме, ни в рассылке - до публикации в которой ещё очередь данного материала просто не дошла).

Насчёт вопроса о SharedObject. Я ещё туда не добрался, но не беспокойся, я веду учёт всех тем форума где мне нужно ответить, поэтому как доберусь до той темы, я обязательно отвечу.
MustLive
SunShadow и все кому это интересно

Вашему вниманию руководство по созданию тулитипов во флеше.

Это цитата из моей статьи Разработка своего tooltip во Флеше, которая будет опубликована в новом номере нашей рассылки (который выйдет в ближайшее время).

Для разработки подобного функционала во флеше, нужно сделать объект, динамическое текстовое поле (в случае если будет много различных текстовых надписей для разных объектов), или же сделать заранее подготовленную надпись, и помещённую в объект (мувиклип) с заданным именем. Это нужно, чтобы можно было статически или динамически формировать текстовую строку при наведении курсора на объект.

Далее нам нужно будет при наведении мыши показать тултип возле курсора. Допустим наш мувиклип (объект) тултипа называется tooltip. При этом сам объект тултип, стоит разместить в самом верхнем слое, чтобы он появлялся над всеми другими объектами.

В первом кадре флешки спрячем тултип (он будет появляться лишь при наведении на нужный объект):

Код
_root.tooltip._visible = 0;


Сам тултип расположен где-либо на сцене, оптимально сбоку возле границы сцены (он всё равно будет изначально невидим), чтобы не мешал.

Для динамического тултипа, размещаем на сцене динамическое текстовое поле, с именем tooltip. Сделаем функции, к которым будем обращаться из объектов.

Код
function ShowTooltip (text) {
_root.tooltip._visible = 1;
_root.tooltip._x = _root._xmouse - 60;
_root.tooltip._y = _root._ymouse - 40;
_root.tooltip.text = text;
}
function HideTooltip () {
_root.tooltip._visible = 0;
}


Этот код располагаем в первом кадре сцены.

И далее для всех объектов (кнопок) нужно лишь задать вызовы функций:

Код
on (rollOver) {
ShowTooltip("Тултип");
}
on (rollOut) {
HideTooltip();
}


Удачных тултипов!
SunShadow
Спасибо за помощь)))
Я открываю новую тему, буду рад увидеться еще и там)
SunShadow
Цитата(MustLive @ 16.10.2006 - 00:15) *
SunShadow и все кому это интересно


И далее для всех объектов (кнопок) нужно лишь задать вызовы функций:

Код
on (rollOver) {
ShowTooltip("Тултип");
}
on (rollOut) {
HideTooltip();
}


Удачных тултипов!


Я немножко доработаю данный пример))) Думаю все таки нужна небольшая задержка, чтобы сильно не портить интерфейс и настройка для отключения тултипов) Что получится выложу
MustLive
Цитата
Я немножко доработаю данный пример))) Думаю все таки нужна небольшая задержка, чтобы сильно не портить интерфейс и настройка для отключения тултипов) Что получится выложу

Хорощо, поделишься своими наработками в тултипо-строении wink.gif

Задежка (настраиваемая) - при появлении тултипа - тоже интересная идея.

А также можно ещё сделать, о чём я не упоминал в своей статье, т.к. не суть важно было, но тоже вполне может пригодиться (в некоторых частных случаях) - это подвижный тултип. Интерактивный так сказать. Которые реагирует на движения, и двигается за курсором (в предлах своего объекта). Обычные тултипы (в Виндовсе) - статические, но вполне возможны и динамичные (подвижные) тултипы.

Подобные тултипы я использовал в старой версии своих новостей на флеше на своём сайте.
tiHo
Код
var createAlt:Function = function (name:String, str:String, x:Number, y:Number)
{
    var textFormat:TextFormat = new TextFormat();
    textFormat.font = "Tahoma";
    textFormat.size = 11;
    var metrics:Object = textFormat.getTextExtent(str);
    _root.createTextField(name, _root.getNextHighestDepth(), x, y, metrics.textFieldWidth, metrics.textFieldHeight);
    _root[name].border = true;
    _root[name].text = str;
    _root[name].setTextFormat(textFormat);
    _root[name].background = 0xffffff;
    _root[name].selectable = false;
};
clip.onRollOver = function()
{
    var i:Number = 0;
    createAlt("gg", "ето клип :D", -1000, -1000);
    this.onEnterFrame = function()
    {
        i++;
        if (i >= 100)
        {
            i = 0;
            delete this.onEnterFrame;
            gg._x = _xmouse;
            gg._y = _ymouse - gg._height;
        }
    };
};
clip.onRollOut = function()
{
    removeMovieClip(gg);
};


SunShadow, етот код на 1-ый кадр пишеш, потом делаеш клип. называеш его clip, и тестируй.

PS> я как всегда половину лишнего написал наверно smile.gif упрощайте сами.
MustLive
Цитата
PS> я как всегда половину лишнего написал наверно smile.gif упрощайте сами.

Нормально, Саша. SunShadow-у, должно понравиться.

Вполне оптимальный код, сильно там не уменьшиш код wink.gif. Полностью динамичный тултип.

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

У тебя идёт постоянный процесс уничтожения и создания новых тултипов. И это я считаю не оптимальным - и данных методов не практикую. В случае полной программной генерации, включая саму текстовую надпись, или сделанную вручную предварительно надпись с программной генерацией тултипа, или даже в случае полностью ручной генерации тултипа, я предпочитаю прятать/показывать тултип (_visible), а не удалять и заного создавать (это медленней). Как для заранее сделанного, так и для полностью/частично программно сделанного тултипа. Это экономит ресурсы и более производительно. В конечно счёте. Ну а так - вполне хороший пример.
SunShadow
Спасибо всем за помощь)
Как и следовало ожидать, на самом деле все оказалось просто, главное было лень победить. На базе ваших советов соорудил класс, если кому пригодиться буду рад.
Цитата
class Tooltip extends MovieClip //Подсказки
{
var tiptext:TextField; //текст подсказки
var timeWait = 8; //время задержки перед появлением подсказки в кадрах
var i = 0; //счетчик кадров до отображения подсказки

public function Tooltip() //инициализируем объект
{
this._visible = false; //делаем подсказку невидимой
i = 0; //не активна
tiptext.backgroundColor = 0xFAFBEA; //цвет фона подсказки по умолчанию
tiptext.autoSize = true; //авто-подгонка текстового поля под содержание
}

public function ShowTooltip (text) //показать подсказку
{
tiptext.text = text; //запоминаем текст сообщения в текстовое поле
i = timeWait; //устанавливаем счетчик кадров
this.onEnterFrame = StartTimer; //определяем таймер
}

public function HideTooltip () //скрываем подсказку
{
this._visible = false; //делаем ее невидимой
i = 0; //сбрасываем счетчик кадров
this.onEnterFrame = null; //уничтожаем таймер на случай если он не успел сработать
}

private function ViewTooltip () //отображение подсказки
{
if (_root._xmouse + this._width + 15 <= _root.getBounds(_root).xMax)
//проверяем чтобы клип с подсказкой умещался в границы главного клипа
this._x = _root._xmouse + 15 //выводим его правее мыши
else //иначе
this._x = _root._xmouse - this._width - 15; //выводим его левее указателя мыши
if (_root._ymouse + this._height + 15 <= _root.getBounds(_root).yMax) //то же по вертикали
this._y = _root._ymouse + 15
else
this._y = _root._ymouse - this._height - 15;
this._visible = true; //делаем клип видимым
this.play(); //запускаем его на проигрывание
this.onEnterFrame = null; //уничтожаем таймер он больше не нужен
}

private function StartTimer () //таймер отображения подсказки
{
if (i > 1) i --; //уменьшаем счетчик
if (i == 1) this.ViewTooltip(); //отображаем клип
}
}


Теперь как он работает:
1) Создаем текстовое поле, присваиваем ему name = 'tiptext';
2) Преобразуем его в клип и связываем с данным классом;
3) Помещаем данный клип в первый кадр самого верхнего слоя нашего клипа и даем ему name для дальнейшего обращения (например tip);
4) Все объектам которым нужна подсказка добавляем в обработчики:
Цитата
on (rollOver) {
//Здесь будет ваш код
_root.tip.ShowTooltip ("Текст подсказки");
}
on (rollOut) {
//Здесь будет ваш код
_root.tip.HideTooltip();
}

Разумеется что в коде пункта 4 _root.tip - взято для примера, вместо tip вы подставляете имя своего клипа с подсказкой. Все дальше можно использовать)
Плюсы использования данного класса:
1) Подсказку можно сделать анимированный, единственный минус, надо очень осторожно обращаться с текстовым полем tiptext в клипе, так как при анимации свойства сохраняются и соответственно все определенные программно свойства текстового поля буду сброшены;
2) Можно организовать настройку текстового поля динамически, устанавливая свойства tip.tiptext.Color
При выводе подсказки учитывается размер клипа для отображения в пределах главного клипа, поэтому создавая анимацию учитывайте что если вы создадите скажем помошника который будет выплывать на экран и говорить вам подсказку текст будет отображаться с учетом сдвига на помошника, что в принципе скорей даже достоинство чем недостаток ;-)
Ну вот пожалуй и все, жду отзывов)
Русская версия IP.Board © 2001-2009 IPS, Inc.