| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
У веб-разработчиков существует известная проблема — как расположить DIV (или что либо другое) поверх flash-объекта внутри html-страницы. Стандартные манипуляции, типа z-index не помогают. И бедные разработчики начинают проклинать flash, хотя это совершенно напрасно, так как раз он здесь совершенно не при чем. Корни гораздо глубже.
Существует стопроцентно кроссбраузерное решение. Хотя может это и не очень официально со стороны Adobe, но тем не менее, именно этот метод они используют у себя на сайте.
При размещении Flash на странице (совершенно не важно, каким методом, будь-то стандартным от Adobe, либо используя SWFObject) необходимо использовать атрибут/параметр wmode тэга object/embed со значением «opaque».
Естественно — это только первый шаг. О том как позиционировать глубину «дивов» — здесь рассказывать смысла нет :)
Вот рабочий пример (сорри, но мне было лень делать демо-пример, так как закончив с этой задачей, решил сразу написать сюда, пока из головы не вылетело, а по ссылке около метра):
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript">swfobject.embedSWF("main.swf", "flash", "100%", "100%", "8", null, null, {menu:"false", wmode:"opaque"});</script> <div id="over-holder"><p>А этот текст мы видим поверх Флэш</p></div> <div id="flash">А тут будет сам Флэш</div>
Теперь, манипулируя значениям z-index, вы можете размещать поверх flash все что угодно.
P.S. Кстати, насчет атрибута wmode, раньше существовало недоразумение со стороны официальной документации и наверно отсюда и пошло недоверия к этому свойству:
«This attribute/parameter works only in Windows with the Flash Player ActiveX control» — т.е. данный атрибут работает только под Windows и IE (это документация трехлетней давности).
Проверено — это работает везде. И в нынешней документации такого утверждения больше нет.
Статья взята с www.habrahabr.ru
package { import flash.external.ExternalInterface; ...
ExternalInterface.addCallback("setRingtone", setRingtone);
document.getElementById(‘myFlashObjectId’).myMethod(param1,...)
, на MooTools получится немного короче
$(‘myFlashObjectId’).myMethod(param1,...)
Очень хороший и полезный flash урок.
Пришла мне в голову идея, создать календарь во flash, который потом, при желании, можно будет разместить на любом сайте.
1. Импортируем в наш flash проект картинку в формате .png, заранее подготовленную в программе adobe photoshop.
2. Создаем три динамических текстовых поля в пустых областях, где у нас должно быть сегодняшнее число, месяц и день недели.
3.Задаем в свойствах каждого поля instanse name cоответственно: число-day, месяц- month, день недели - day_of_week.
Вставляем в первом кадре, в панели actions следующий код:
var daytoday:String;
var monthtoday;
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, clock);
timer.start();
function clock(e:TimerEvent):void {
var datetoday:Date=new Date();
//datetoday.hours
switch (datetoday.day) {
case 0:
daytoday="воскресенье";
break;
case 1:
daytoday="понедельник";
break;
case 2:
daytoday="вторник";
break;
case 3:
daytoday="среда";
break;
case 4:
daytoday="четверг";
break;
case 5:
daytoday="пятница";
break;
case 6:
daytoday="суббота";
break;
}
day_of_week.text=String(daytoday);
switch (datetoday.month) {
case 0:
monthtoday="января";
break;
case 1:
monthtoday="февраля";
break;
case 2:
monthtoday="марта";
break;
case 3:
monthtoday="апреля";
break;
case 4:
monthtoday="мая";
break;
case 5:
monthtoday="июня";
break;
case 6:
monthtoday="июля";
break;
case 7:
monthtoday="августа";
break;
case 8:
monthtoday="сентября";
break;
case 9:
monthtoday="октября";
break;
case 10:
monthtoday="ноября";
break;
case 11:
monthtoday="декабря";
break;
}
month.text=String(monthtoday);
day.text=String(datetoday.date);
}Единственное работающее решение положить Flash объект под слой — обернуть объект контейнером, задать контейнеру абсолютное (относительное) положение с z-index:0. В параметрах объекта добавить параметр <param name="wmode" value="opaque"> и в embed — wmode="transparent". Все.
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
<div id="flash">
<object ...>
<param name="wmode" value="opaque">
<embed ... wmode="transparent">
</object>
В этом flash yроке будет рассматриваться функциональная реализация DrugandDrop в Actionscript 3.0. Вы можете c помощью метода drug&drop перетаскивать картинки с одного места в другое, класть товары в тележку интернет-магазина, сортировать объекты в определенном порядке и т.п. В этом текстовом flash уроке, я покажу Вам, как можно создать приложение, в котором каждую из трех различных фигур можно перетаскивать только в её соответствующее место.
Как это реализовано:
1. Создайте 3 небольших фигуры, и поместите каждую в отдельный Movie Clip. Дайте каждому Movie Clip имя (instance name в свойствах объекта Movie clip). Я назвал ихitem1,item2,item3.
2. Теперь создайте пустой Movie Clip, сочетанием клавиш Ctrl+F8 (дайте ему в свойствах instance name - bin1). Нарисуйте круг без контура (без stroke), и конвертируйте в Movie Clip. Дайте ему instance name “shape” и разместите в координатах x=0 и y=0. Создайте новый слой, и нарисуйте там круг, с той же шириной и высотой что и предыдущий, но без заливки. Разместите его в тех же самых координатах.
3. Для треугольника и прямоугольника следуя инструкциям пункта №2, создайте два Movie Clip. (дайте имя каждому Movie Clip: прямоугольник - bin2, треугольник - bin3)
4. Создайте два динамических текстовых поля TextField (задайте instance name itemName_txt и info_txt), и поместите их в Movie clip (дайте instance name ilabel).
5. Заключительный этап: скопируйте следующий actionscript код во вкладку Actions (F9).
<!--code1--><!--ecode1--><!--code2--><!--ecode2-->
item1.objName = "circle";
item1.initX = item1.x;
item1.initY = item1.y;
item1.val = 0;
item2.objName = "rectangle";
item2.initX = item2.x;
item2.initY = item2.y;
item2.val = 0;
item3.objName = "triangle";
item3.initX = item3.x;
item3.initY = item3.y;
item3.val = 0;
bin1.shape.alpha = 0;
bin2.shape.alpha = 0;
bin3.shape.alpha = 0;
item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item1.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item1.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item2.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item2.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item3.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item3.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
//Mouse Events
function mousePress(event:MouseEvent):void {
var item:MovieClip = MovieClip(event.target);
item.startDrag();
item.scaleX = item.scaleY = .95;
var topPos:uint = this.numChildren - 1;
this.setChildIndex(item, topPos);
ilabel.itemName_txt.text = item.objName;
}
function mouseRelease(event:MouseEvent):void {
var item:MovieClip = MovieClip(event.target);
item.stopDrag();
switch (item.objName) {
case "circle" :
if (bin1.hitTestObject(item)) {
updateShape(item, bin1);
} else {
ilabel.info_txt.text ="WRONG!";
item.scaleX = item.scaleY = 1;
}
break;
case "rectangle" :
if (bin2.hitTestObject(item)) {
updateShape(item, bin2);
} else {
ilabel.info_txt.text ="WRONG!";
item.scaleX = item.scaleY = 1;
}
break;
case "triangle" :
if (bin3.hitTestObject(item)) {
updateShape(item, bin3);
} else {
ilabel.info_txt.text ="WRONG!";
item.scaleX = item.scaleY = 1;
}
break;
default :
; ;
}
}
function updateShape(item:MovieClip, bin:MovieClip):void {
ilabel.itemName_txt.text = "";
item.scaleX = item.scaleY = 1;
item.visible = false;
ilabel.info_txt.text ="CORRECT!";
bin.shape.alpha = 1;
item.val = 1;
resetShapes();
}
function resetShapes() {
if ((item1.val == 1)&& (item2.val == 1) && (item3.val == 1)) {
item1.x = item1.initX;
item1.y = item1.initY;
item2.x = item2.initX;
item2.y = item2.initY;
item3.x = item3.initX;
item3.y = item3.initY;
bin1.shape.alpha = 0;
bin2.shape.alpha = 0;
bin3.shape.alpha = 0;
item1.visible = true;
item2.visible = true;
item3.visible = true;
item1.val = 0;
item2.val = 0;
item3.val = 0;
}
}














В один прекрасный момент надоело мне при создании файлов с классами каждый раз прописывать одно и то же… Поэтому решил я наконец этот процесс автоматизировать.
Итак, для начала делаем болванку. Я написал вот такую:
package{ /////////////////////////////////////////////////////////////////////////////////////////////////// // IMPORTS /////////////////////////////////////////////////////////////////////////////////////////////////// import flash.display.Sprite; /////////////////////////////////////////////////////////////////////////////////////////////////// // THE CLASS /////////////////////////////////////////////////////////////////////////////////////////////////// public class ClassName extends Sprite{ /////////////////////////////////////////////////////////////////////////////////////////////////// // PUBLIC STATIC CONSTANTS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PRIVATE STAITC CONSTANTS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PUBLIC CONSTANTS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PRIVATE CONSTANTS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PUBLIC VARS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PRIVATE VARS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // GETTERS/SETTERS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// // PUBLIC METHODS /////////////////////////////////////////////////////////////////////////////////////////////////// //constructor public function ClassName(){ super(); //nothing here yet }//constructor /////////////////////////////////////////////////////////////////////////////////////////////////// // PRIVATE METHODS /////////////////////////////////////////////////////////////////////////////////////////////////// //nothing here yet /////////////////////////////////////////////////////////////////////////////////////////////////// }//class /////////////////////////////////////////////////////////////////////////////////////////////////// }//package
Сохраняем файл, называем скажем Class.as и засовываем его в C:Documents and SettingsAll UsersШаблоны.
После этого в реестре в разделе HKEY_CLASSES_ROOT.asShellNew создаём строковый параметр FileName и присваиваем ему значение «Class.as» — имя, которое мы дали файлу.
Для ленивых: копипастим, сохраняем с расширением .reg, запускаем и соглашаемся со слиянием.
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT.as]
@="Flash.ActionScriptFile"
[HKEY_CLASSES_ROOT.asShellNew]
"FileName"="Class.as"
И всё! Теперь где угодно тыкаем правой кнопкой -> создать -> Flash ActionScript File, и у нас вместо пустого файла появляется болванка с заготовленным кодом.
Статья взята с habrahabr.ru
В этом flash уроке вы научитесь рисовать линии кривые и фигуры программно, используя actionscript 3
1.Создайте новый flash проект as3.
2. Для начала, нарисуем синюю линию, выберем первый кадр на линии времени и перейдем в панель actionsl (F9). Введем в панели actions следующий код:
<!--code1--><!--ecode1-->
var sp:Sprite = new Sprite();<!--code2--><!--ecode2-->
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(3, 0x1c2fba);
g.moveTo(80, 100);
g.lineTo(420, 100);

var sp:Sprite = new Sprite();<!--code2--><!--ecode2-->
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(3, 0xfaf100);
g.moveTo(80, 80);
g.lineTo(420, 150); g.lineTo(400, 120);
g.lineTo(200, 120);
g.lineStyle(4, 0xFF0000);
g.moveTo(150, 175);
g.lineTo(400, 175);

var sp:Sprite = new Sprite();<!--code2--><!--ecode2-->
addChild(sp);
var g:Graphics = sp.graphics;
g.lineStyle(2, 0x467608);
g.moveTo(150, 100);
g.curveTo(275, 0, 400, 100);
g.moveTo(0, 0);

var triangle:Sprite = new Sprite();<!--code2--><!--ecode2-->
with (triangle.graphics) {
lineStyle(0);
beginFill(0x9e0fa3,1);
moveTo(50, 0);
lineTo(120, 120);
lineTo(0, 100);
lineTo(50, 0);
endFill(); }
triangle.x = 50;
triangle.y = 250;
addChild(triangle);

var shapes:Sprite = new Sprite();<!--code2--><!--ecode2-->
var gr:Graphics = shapes.graphics;
gr.lineStyle(4, 0x068843, .5);
gr.beginFill(0x330066, .2);
gr.drawCircle(50,50,50);
gr.endFill();
shapes.x = 150;
shapes.y = 250;
addChild(shapes);

Введите код в панели actions:
<!--code1--><!--ecode1-->
var shapes:Sprite = new Sprite();<!--code2--><!--ecode2-->
var gr:Graphics = shapes.graphics;
gr.lineStyle(4, 0x330066, .5);
gr.beginFill(0x330066, .2);
gr.drawRect(125,0,100,100);
gr.endFill(); shapes.x = 150;
shapes.y = 250;
addChild(shapes);

Эта статья расскажет Вам о вставке flash на сайт. Поможет выбрать наилучший метод интеграции flash-контента расскажет о подводных камнях и тонкостях кроссбраузерной вставки flash в HTML-разметку страницы.
Как вставить флеш на сайт? Рассмотрим и сравним следующие методы вставки flash:
Код для вставки flash:
<object width="400" height="160" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0">
<object width="400" height="160" type="application/x-shockwave-flash" data="myContent.swf">
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<param name="salign" value="t" />
<param name="wmode" value="opaque" />
<param name="src" value="/banners/simply.swf" />
<param name="width" value="400" />
<param name="height" value="160" />
<embed width="400" height="160" id="linebanner" src="/banners/simply.swf"> </embed>
</object>
Вставка flash на сайт двусоставным методом имеет свои очень весомые достоинства:
Из данного кода видны очевидные недостатки:
classid - при вставке flash это константа, всегда имеет значение clsid:d27cdb6e-ae6d-11cf-96b8-444553540000, это значение указывает на элемент ActiveX;
codabase - этот атрибут содержит ссылку на Flash-плеер, для установки плеера, если он отсутствует на компьютере пользователя;
Стоит отметить, при публикации флеш-ролика из программы Adobe Flash вставка swf-файла в HTML разметку осуществляется именно двусоставным методом.
Также в пользу этого метода говорит то, что его используют во многих популярных визуальных редакторах (WISYWIG), и как следствие, он используется во многих системах управления сайтом(CMS), в том числе и коммерческих (например bitrix). Да и программы вёрстки тоже его используют (например Dreamweaver).
Код для вставки flash:
<object width="400" height="160" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="/banners/simply.swf" />
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<param name="salign" value="t" />
<param name="wmode" value="opaque" />
<param name="src" value="/banners/simply.swf" />
<param name="width" value="400" />
<param name="height" value="160" />
<!--[if !IE]>--><object width="400" height="160" type="application/x-shockwave-flash" data="myContent.swf"><!--<![endif]-->
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<param name="salign" value="t" />
<param name="wmode" value="opaque" />
<param name="src" value="/banners/simply.swf" />
<param name="width" value="400" />
<param name="height" value="160" />
<p>Альтернативное содержимое</p>
<!--[if !IE]>--></object><!--<![endif]-->
</object>
Вставка flash на сайт методом вложенных объектов имеет следующие плюсы:
Этот метод имеет много недостатков, такова цена валидности:
Как видно из кода цена валидности действительно высока. Соответствие стандартам, полезно ровно до тех пор, пока не нарушается кроссбраузерность, правильность отображения и удобство использования. Если бы можно было обойтись одним тегом object, без дублирования параметров и атрибутов, веб-мастера не стали бы изобретать многочисленные "велосипеды". Хотя использование условных комментариев (conditional comments) валидно, вряд ли кто-то скажет, что это действительно удобно.
Возможно, в будущем разработчики браузеров позаботятся о веб-мастерах, верстальщиках, веб-дизайнерах и сделают возможным использование одного удобного метода вставки флеш в html-разметку, но доля устаревших браузеров еще велика и спокойно его использовать можно будет не скоро.
Сатай много эксперементировал с кодом вставки флеш в HTML-разметку, изучал тонкости обработки параметров различными браузерами. Основная идея заключается в избавлении веб-мастеров от необходимости использовать тег embed, вместе с тем отбрасывая необходимость дублировать параметры и делая код валидным!
Код для вставки flash: *
<object type="application/x-shockwave-flash" data="c.swf?path=myContent.swf" width="400" height="160"/>
<param name="movie" value="="/banners/simply.swf" />
<p>Альтернативное содержимое</p>
</object>
*Опустим необязательные теги param для удобства :)
Вставка флеш на сайт методом Flash Satay, достаточно оптимизирована и удобна! Метод хорошо подойдет для легких flash-роликов (например flash баннеров), если флеш-контент весит много Мб или должен быть расчитан и на аудиторию с низкой скоростью интернета, то нужно использовать загрузчик, в который передается путь к основному файлу. Это связано с особенностью данного метода, флеш содержимое будет отображено только после полной загрузки. Стоит отметить, что для большинства флеш приложений так или иначе нужно использовать прелоадер. В данном слечае путь к загружаемому файлу передается через атрибут data и Get-переменную → data="c.swf?path=myContent.swf", можно передавать пусть и другими способами, например, через FlashVars
Плюсы использования метода Flash Satay:
Минусы вставки флеш методом Flash Satay:
Существует два вида вставки флеш с помощью SWFObject: статический и динамический.
Первое, что нужно сделать это скачать js-библиотеку SWFObject , выложить её на сервер и подключить js-файл в html-разметке, лучше это сделать внутри тега head вместе с другими файлами js и css:
<script type="text/javascript" src="/js/swfobject.js"></script>
Далее следует выбрать какой из этих способов лучше всего подходит для Вашего проекта, рассмотрим оба варианта:
Код для вставки flash:
<script type="text/javascript">//<![CDATA[
var flashvars = {};
var params = {
wmode: "transparent",
quality: "high",
scale:"noscale",
menu:"none"
};
var attributes = {};
swfobject.embedSWF("/template/simply.swf", "idContainer", "400", "160", "9.0.0", "/template/expressInstall.swf", flashvars, params, attributes);
//]]>
</script>
<div id="idContainer">
<p>Альтернативное содержимое</p>
</div>
Вставка флеш на сайт динамическим методом библиотеки SWFObject обладает следующими достоинствами:
Этот метод имеет ряд незначительных недостатков и неудобств при вставке флеш на сайт:
*2 При вставке flash на сайт динамическим методом SWFObject заменяет альтернативное содержимое на flash. Замена содержимого осуществляется, если на пользовательском компьютере в браузере включена поддержка javascript и установлен flash-плеер. Для отображения на сайте - это хороший прием, но только не для поисковых систем! Поисковые системы негативно воспринимают подмену содержимого, как и текст скрытый от пользователя, который может быть SEO-текстом.
*3 Если на клиентском компьютере не установлен flash-плеер, то пользователь увидит лишь альтернативное содержимое. В данном случае логично предложить пользователю установить надстройку, для отображения флеш и уже в полной мере наслаждаться красотой сайта, интерфейсом и юзабилити. Действительно можно указать в альтернативном содержимом ссылку для скачивания флеш-плеера, но в случае согласия пользователя он или перейдет на сайт загрузки или открыв сайт загрузки плеера в новой вкладке (окне), все равно будет вынужден закрыть браузер после установки плагина. Для этой ситуации есть изящное решение: разместить ссылку не на сайт adobe для скачивания плеера, а на страницу Вашего сайта с внедренным флеш двусоставным методом! Это позволит пользователю установить плагин не покидая Вашего сайта!
Использование динамического метода SWFObject вставки flash на сайт - хорошое решение для любого проекта, но переизбытка флеш-контента быть не должно, чтобы поисковики спокойно реагировали на замену альтернативного содержимого.
Советую всем этот замечательный flash урок, который познакомит Вас с классом caurina tweener. Имею счатье использовать в своих flash проектах класс caurina tweener, потому что класс caurina tweenerпрост, изящен и гибок. Вы можете использовать несколько свойств объекта для его анимации, создавая сложную анимацию несколькими строками кода.
Я объясню вам как работает Actionscript 3 caurina tweener на примерах.
Посетите официальный сайт проекта caurina tweener, если хотите узнать больше.
Прежде всего загрузите последнюю версию caurina tweener. Пункт загрузки (“Featured downloades”) в правом меню сайта.
Важно: папка с классом (caurina tweener) должна находится в той же директории что и ваш Flash проект.
Эта строка импортирует класс caurina tweener:
Tweener.addTween(circle, {x:390, time:1, transition:"linear"});<!--code2--><!--ecode2-->import caurina.transitions.Tweener; circle.x = 10;<!--code2--><!--ecode2-->
Tweener.addTween(circle, {x:390, time:1, transition:"linear"});
import caurina.transitions.Tweener;<!--code2--><!--ecode2-->
circle.x = 10;
circle.y = 75;
circle.alpha = 0;
Tweener.addTween(circle, {x:350, y:150, alpha:1, time:1, transition:"linear"});
3. Два перемещения:
Сначала круг переместится по оси x, затем переместится по оси y.
<!--code2--><!--ecode2-->import caurina.transitions.Tweener;
circle.x = 10; circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});
Tweener.addTween(circle, {y:150, time:1, transition:"easeOutBounce"});
import caurina.transitions.Tweener;<!--code2--><!--ecode2-->
circle.x = 10; circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});
Tweener.addTween(circle, {y:150, time:1,transition:"easeOutBounce", delay:1.5});
import caurina.transitions.Tweener;<!--code2--><!--ecode2-->
tF.alpha = 0; circle.x = 10; circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart",
onComplete:func});
function func() { tF.alpha = 1; }
import caurina.transitions.Tweener;<!--code2--><!--ecode2-->
tF.alpha = 0;
circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart",
onComplete:func, onCompleteParams:["Using onCompleteParams"]});
function func(t:String) { tF.txt.text = t; tF.alpha = 1; }
import caurina.transitions.properties.ColorShortcuts;<!--code2--><!--ecode2-->
ColorShortcuts.init();
circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:200, _color:0xFF0000, time:1,
transition:"easeOutElastic"}); }
Скачать исходник с Depositfiles.com http://depositfiles.com/files/wpzeus6kp