2 заметки с тегом

flash РСС

19 июля 2009, 16:06

Копируем в буфер обмена в FireFox 3.5 и IE8

С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).

Сейчас ЕкшонСкрипт даёт скопировать в буфер обмена только при действии пользователя, то есть при клике по ролику (а ролик то можно сделать прозрачным ;). Этим и воспользовался jhuckaby при создании своего скрипта Zero Clipboard.

Посмотреть демо:


Скрипт работает во всех современных браузерах.
Проверено в ФФ3.5, ИЕ8, ИЕ8(мод7), Хром3, Опера10б2, Сафари4. Поддержка флеш 9 и 10.

Суть:

После того, как мы с помощью JS, инициализируем скрипт, укажем путь к ZeroClipboard.swf и создадим клиент для копирования, мы можем смело заносить в буфер по клику, любую информацию.

Но скрипт этим не ограничен, у него есть чудесные свойства (методы):
  • приклеивание к DOM элементу (Gluing) — то бишь, мы указав айди элемента, приклеиваем поверх него флешку (она копирует в буфер), которая автоматически подстроится под размер элемента;
  • ксс эффекты — скрипт подсвечивает элемент, на который подвешена кнопка, создавая сабклассы «hover», «active» (аля псевдо). Их можно изменить на своё усмотрение в CSS;
  • возможность задать собственное представление — это на случай, если нужно создать кастомный прямоугольник, и не нужно никуда клеить флешку;
  • и ещё он может рулить стандартными событиями (onLoad, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onComplete).

О этом и многом другом, чудесно викирасписано

Пример

<html>
<body>
 <!-- Инициализируем, с учётом что ZeroClipboard.swf радом с *.js -->
 <script type="text/javascript" src="ZeroClipboard.js"></script>
 <!-- Делаем кнопку с айди -->
 <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div>

 <script language="Javascript">
  // Создаём клиент
  var clip = new ZeroClipboard.Client();
  // Указываем что копируем
  clip.setText( 'Copy me!' );
  // Клеим к кнопке
  clip.glue( 'd_clip_button' );
 </script>
</body>
</html>

Полный пример

<html>
<head>
<style type="text/css">
  #d_clip_button {
    text-align:center;
    border:1px solid black;
    background-color:#ccc;
    margin:10px; padding:10px;
  }
  /* Указываем свои стили для пседо-саб-классов */
  #d_clip_button.hover { background-color:#eee; }
  #d_clip_button.active { background-color:#aaa; }
</style>
</head>
<body>
  <script type="text/javascript" src="ZeroClipboard.js"></script>

  Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/>

  <div id="d_clip_button">Copy To Clipboard</div>

  <script language="Javascript">
    var clip = new ZeroClipboard.Client();
    clip.setMoviePath( 'ZeroClipboard.swf' ); // укажем путь к флешке
    clip.setText( '' ); // onМouseDown будет копировать нужный текст
    clip.setHandCursor( true ); // делаем курсор в виде руки
    clip.setCSSEffects( true ); // разрешаем CSS эффекты
    
    clip.addEventListener( 'load', function(client) {
      // alert( "Загрузилась флешка " );
    });
    
    clip.addEventListener( 'complete', function(client, text) {
      alert("Скопирован текст: " + text );
    });
    
    clip.addEventListener( 'mouseOver', function(client) {
      // alert("Навели мышку на флешку");
    });
    
    clip.addEventListener( 'mouseOut', function(client) {
      // alert("Убрали мышку с флешки");
    });
    
    clip.addEventListener( 'mouseDown', function(client) {
      // alert("Нажали мышкой по флешке");
      // Копируем нужный текст, в данном случае значение инпута 'clip_text'
      clip.setText( document.getElementById('clip_text').value );
    });
    
    clip.addEventListener( 'mouseUp', function(client) {
      // alert("Отжали мышку");
    });
    // Приклеили к кнопке с айди 'd_clip_button'
    clip.glue( 'd_clip_button' );
  </script>
</body>
</html>

Ещё раз ссылки:

flash   javascript

26 мая 2008, 15:19

Валидная страница с флешем

<object width="ДЛИНА" height="ШИРИНА" 
vspace="0" hspace="0"  type="application/x-shockwave-flash" 
data="ПУТЬ_К_ФЛЕШКЕ">
    <param name="allowScriptAccess" value="sameDomain"/>
    <param name="movie" value="ПУТЬ_К_ФЛЕШКЕ"/>
    <param name="bgcolor" value="#FFFFFF"/>
    <param name="quality" value="high"/>
    <param name="wmode" value="transparent"/>
    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"/>
</object>
embedet   flash   html   validate   w3c