Создание сложного Flash ролловера в несколько этапов (цикл> анимация ролловера> временная анимация) - PullRequest
0 голосов
/ 24 января 2012

Хорошо, теперь все становится немного сложнее.Мне нужно создать объект Flash, который может располагаться над углом изображения, чтобы обслуживать дополнительный контент.Это намного выше моего уровня владения Flash, моя работа обычно ограничена печатными работами в Photoshop и Illustrator, поэтому, извините, если что-то из следующего не понятно.Я пытаюсь учиться, поэтому любые указатели в правильном направлении будут высоко оценены.

Так вот как все это должно работать, наряду с моими проблемами;

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

  2. Тогда все усложняется ... если пользователь остается в углу до тех пор, пока он не будет полностью очищен, мне нужноперед запуском лайтбокса (должен ли это быть jQuery, или это может быть сделано во Flash?) в браузере для показа контента сделать небольшой отсчет (вроде ситуации 3, 2, 1).

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

1 Ответ

0 голосов
/ 24 января 2012

ОБНОВЛЕНИЕ : На основе комментариев ОП, ниже предлагается новое предлагаемое решение.

Я выписал обновленное (но не проверенное) решение ниже. Поскольку вы относительно новичок во Flash, я добавил несколько небольших «обходных путей», которые, я надеюсь, прояснят работу частей ActionScript 3, особенно в отношении обработки событий.

Начиная с этого момента, я бы настроил вашу основную временную шкалу FLA:

  1. Создайте 4 слоя на основной временной шкале - действия, горячая точка, петля и скручивание в указанном порядке сверху вниз
  2. На слое горячей точки создайте прямоугольник, который покрывает «мышиную» область вашего клипа. Установите цвет прямоугольника в alpha = 0 и удалите все границы. Затем преобразуйте его в символ MovieClip и назовите экземпляр сцены "hotspot_mc".
  3. Поместите цикл MovieClip на слой цикла и назовите его "loop_mc".
  4. Поместите мувиклип curl на слой curl и назовите его «curl_mc».
  5. Добавьте код к первому ключевому кадру слоя действий по следующим линиям:

import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import flash.events.Event;

//Stops the main timeline on the first frame
stop();

//Makes the curl_mc invisible
//(Note: alpha varies from 0 to 1, so for instance you can make any 
//clip half-transparent by typing clipName.alpha = 0.5)
curl_mc.alpha = 0;

//Stop the curl_mc clip from playing initially, we only want it to begin 
//playing on rollover
curl_mc.stop();

//Make your hotspot look like a button when users mouse over it
//by setting these properties on it
hotspot_mc.useHandCursor = true;
hotspot_mc.buttonMode = true;

//We attach our event handlers to the hotspot.  Because the hotspot is a 
//rectangle of specific position and size it lets us control exactly where 
//mouse actions will trigger events.  You *could* attach the handlers to 
//loop_mc instead, so a hotspot clip isn't strictly necessary, but it's 
//handy.  You can also make the shape in the hotspot_mc any shape you 
//want, it does not need to be a rectangle.

hotspot_mc.addEventListener(MouseEvent.ROLL_OVER, onLoopRollover, false, 0, true);
hotspot_mc.addEventListener(MouseEvent.ROLL_OUT, onLoopRollout, false, 0, true);

//Lastly, to be extra fancy, let's trigger your lightbox when 
//the user clicks the hotspot OR when the curl_mc dispatches 
//the 'curlComplete' event (which you will set up yourself on 
//the last frame of the curl_mc timeline).

hotspot_mc.addEventListener(MouseEvent.CLICK, showLightbox, false, 0, true);
curl_mc.addEventListener('curlComplete', showLightbox, false, 0, true);

//When we roll over the hotspot, hide the loop and show the curl
function onLoopRollover(e:MouseEvent):void
{
  //Hide the loop animation so we can see the curl beneath it
  loop_mc.alpha = 0;
  loop_mc.stop();

  //Show the curl animation and play it
  curl_mc.alpha = 1;
  curl_mc.gotoAndPlay(1);
}

//When we roll out of the hotspot, hide the curl and show the loop
function onLoopRollout(e:MouseEvent):void
{
  loop_mc.alpha = 1;
  loop_mc.gotoAndPlay(1);

  curl_mc.alpha = 0;
  curl_mc.stop();
}

//Shows the JavaScript-based lightbox
function showLightbox(e:Event = null):void
{
  ExternalInterface.call('JS_ShowLightbox');
}

... Наконец, на последнем кадре временной шкалы curl_mc (после вашей последовательности обратного отсчета) добавьте этот код в ключевой кадр на слое действий этой временной шкалы:

import flash.events.Event;
dispatchEvent(new Event('curlComplete'));
stop();


//dispatchEvent() is a function that sends an event out to be 
//handled by any listening handler functions (like the ones on 
//frame 1 of the main timeline).  dispatchEvent() accepts an Event 
//as a parameter, which we create new for this purpose.  In turn, 
//when creating a new Event, you pass in the name of the event so 
//that handlers can tell them apart.  This matches the event name 
//passed in to addEventListener(eventName, eventHandler, false, 0, true).

//This is how event handlers basically work in AS3.  By putting this 
//code on the last frame of curl_mc, we use a new event to signal to 
//our application that the curl animation is done.

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

НТН!

ОРИГИНАЛЬНЫЙ ОТВЕТ :

Я не могу понять, как сделать начальный цикл до наведения мыши, а затем воспроизвести откат, когда мышь наведена. И вернитесь к начальному циклу анимации, если пользователь откатится.

Используйте функции ActionScript gotoAndPlay () и gotoAndStop ().

Вы можете использовать эти две функции для создания петель и управления воспроизведением анимации. Например, если вы создаете ключевой кадр, выбираете его и открываете окно «Действия», вы можете добавить этот код ActionScript:

gotoAndPlay(1);

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

Вы также можете использовать метки кадров, если они определены на временной шкале, например:

gotoAndPlay('rolloverStart');

gotoAndStop () работает аналогичным образом, за исключением того, что он перейдет к данному кадру и остановит анимацию там.

если пользователь остается в углу до полного отката, мне нужно сделать небольшой отсчет времени (вроде ситуации 3, 2, 1) перед запуском лайтбокса (это должен быть jQuery, или может это можно сделать во Flash?) в браузере для обслуживания контента.

Просто чтобы уточнить, нужно выполнить две функции:

  1. Когда пользователь наводит указатель мыши на угол («горячая точка»), вторичная анимация начинает воспроизводиться и предпринимает действия после ее завершения

  2. Flash должен поднять лайтбокс на веб-странице

Re: функция # 1, самый простой способ, который я могу придумать, - добавить анимацию обратного отсчета в конец анимации при опрокидывании. Это эффективно создает одну длинную анимацию ролловера с действием в конце.

Re: функция # 2, вы можете использовать Flash для вызова функций Javascript, включая функцию, которая будет отображать лайтбокс. В конце анимации обратного отсчета вы можете добавить ключевой кадр и использовать этот код ActionScript 3:

import flash.external.ExternalInterface;
ExternalInterface.call('JS_ShowLightbox');

Если на вашей веб-странице есть функция Javascript с именем JS_ShowLightbox (), она будет вызываться, когда Flash достигает этого ключевого кадра.

НТН,

Ross

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