<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Блог одиноко стоящего игрока вспышки &#187; ActionScript</title>
	<atom:link href="http://murejib.com/tag/actionscript/feed/" rel="self" type="application/rss+xml" />
	<link>http://murejib.com</link>
	<description>flash, actionscript, animation, анимация</description>
	<lastBuildDate>Sat, 31 Mar 2012 12:15:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Разыскивается флешер. Вакансия. [закрыто]</title>
		<link>http://murejib.com/2009/12/24/razyskivaetsya-flesher-vakansiya/</link>
		<comments>http://murejib.com/2009/12/24/razyskivaetsya-flesher-vakansiya/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 22:03:00 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Новости]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=243</guid>
		<description><![CDATA[В студию Decafe, в которой я исправно тружусь года так с 2005, нужен флешер. То есть еще один, под мое крыло. Простой такой, трудолюбивый, уверенно владеющий  любой из мутаций ActionScript (Никаких особых предпочтений, 2 или 3, хоть 1, главное,  чтобы все работало). А еще умеющий открыть фотошоп и нарезать готовый дизайн на куски, которые потом [...]]]></description>
			<content:encoded><![CDATA[<p>В студию <a href="http://decafe.ru">Decafe</a>, в которой я исправно тружусь года так с 2005, нужен флешер. То есть еще один, под мое крыло. Простой такой, трудолюбивый, уверенно владеющий  любой из мутаций ActionScript (Никаких особых предпочтений, 2 или 3, хоть 1, главное,  чтобы все работало). А еще умеющий открыть фотошоп и нарезать готовый дизайн на куски, которые потом  зашевелятся и заработают в едином порыве.</p>
<p>Знание/незнание страшных слов вроде флекс/карингорм/фреймворк/пьюрЭмвиси &#8211; в топку. Я сам их не знаю, что не мешает мне честно и надежно выполнять свою работу.</p>
<p>Можно на неполную занятость, но обязательно проживание в Москве.</p>
<p>Основные обязанности — програмирование/шевеление мелкопакостных модулей типа флеш-меню, XML галлереи и прочие прелести флеш, а также фулл-флеш сайты разной степени сложности.<br />
Если при этом есть еще и понимание, что на флеше можно нарисовать квадратик, и как то красиво его пошевелить туда-сюда, совсем замечательно. Но это опционально. Самое главное &#8211; желание работать/учиться и совершенствоваться на конкретных работах.</p>
<p>Из жизненно-реальных бонусов могу гарантировать увлекательное общение с сотрудниками, мой опыт (уж какой есть) будет плавно передаваться  счастливому кандидату, зарплаты белые, хоть и не заоблачные (но об этом уж лучше с арт-директором, чем со мной)</p>
<p>Для ориентира можно взглянуть на портфолио, там хорошо видно, что нужно будет делать.</p>
<p><a href="http://murejib.com/showcase/sites.html"> http://murejib.com/showcase/sites.html</a></p>
<p>(Об анимации не беспокоиться — это моя добыча)))<br />
Ну а наличие своего портфолио будет большим плюсом. Я на собеседовании лично присутсвовать не могу, и видеть работы кандидата для меня важно.</p>
<p>Для начала связывайтесь со мной: <strong>murejib☝gmail.com </strong>(почта/джаббер), skype:  <strong>murejib</strong></p>
<img src="http://murejib.com/?ak_action=api_record_view&id=243&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2009/12/24/razyskivaetsya-flesher-vakansiya/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>TVset Under Repair &#8211; Stars</title>
		<link>http://murejib.com/2009/10/15/tvsetunderrepair_stars/</link>
		<comments>http://murejib.com/2009/10/15/tvsetunderrepair_stars/#comments</comments>
		<pubDate>Thu, 15 Oct 2009 12:12:59 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[after effects]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[music-video]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=236</guid>
		<description><![CDATA[TVSet Under Repair &#8211; Stars from murejib on Vimeo. Video-concept-art based on &#8220;TVset Under Repair&#8221; track. Flash scripted particles building the structure out of chaos. Composed and FX-d in After Effects. http://www.myspace.com/tvsetunderrepair Флеш програмированные частицы создают структуру из хаоса. Эффекты+композинг сделаны в After Effects]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="444" height="244" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=7080574&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=1&amp;color=a5e010&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="444" height="244" src="http://vimeo.com/moogaloop.swf?clip_id=7080574&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=1&amp;color=a5e010&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/7080574">TVSet Under Repair &#8211; Stars</a> from <a href="http://vimeo.com/murejib">murejib</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>Video-concept-art based on &#8220;TVset Under Repair&#8221; track.<br />
Flash scripted particles building the structure out of chaos.<br />
Composed and FX-d in After Effects.</p>
<p><a href="http://www.myspace.com/tvsetunderrepair">http://www.myspace.com/tvsetunderrepair</a></p>
<p>Флеш програмированные частицы создают структуру из хаоса.<br />
Эффекты+композинг сделаны в  After Effects</p>
<img src="http://murejib.com/?ak_action=api_record_view&id=236&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2009/10/15/tvsetunderrepair_stars/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Анимированный прелоадер</title>
		<link>http://murejib.com/2009/05/16/animated-preloader/</link>
		<comments>http://murejib.com/2009/05/16/animated-preloader/#comments</comments>
		<pubDate>Sat, 16 May 2009 18:57:10 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[animation]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=188</guid>
		<description><![CDATA[Сегодня я обращусь к очень старому материалу ) Частенько темы для статей в этом блоге я подчерпываю из общения с людьми в профильных форумах. И вот недавно возник вопрос о том, как сделан один из моих прелоадеров. Речь идет о незаконченном (к моему сожалению) проекте, который весь построен на покадровой анимации. Некоторые части этого проекта [...]]]></description>
			<content:encoded><![CDATA[<p>Сегодня я обращусь к очень старому материалу )<br />
Частенько темы для статей в этом блоге я подчерпываю из общения с людьми в профильных форумах. И вот недавно возник вопрос о том, как сделан один из моих прелоадеров.<br />
Речь идет о незаконченном (к моему сожалению) проекте, который весь построен на покадровой анимации. Некоторые части этого проекта можно видеть у меня в портфолио.<br />
<span id="more-188"></span><br />
Итак речь идет вот об этих циферках:</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_randomClocks_337292155"
			class="flashmovie"
			width="440"
			height="300">
	<param name="movie" value="http://murejib.com/flash/randomClocks.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://murejib.com/flash/randomClocks.swf"
			name="fm_randomClocks_337292155"
			width="440"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>Неважно что это по сути: прелоадер, часы, таймер, еще какой либо счетчик. Суть в том, что есть клип (movieClip) с анимацией перехода от одной цифры в другую от нуля до девятки, зацикленную в финале снова на ноль.</p>
<p><img class="alignnone" title="timeline" src="http://murejib.com/images/preloader_animated/numbertimeline.gif" alt="" width="444" height="328" /></p>
<p>В ключевых фазах (кадр в котором отрисована целая цифра) установлены кадры со скриптом:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">stop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0066CC;">this</span>.<span style="color: #006600;">value</span> = <span style="color: #cc66cc;">3</span>;</pre></div></div>

<p>Конечно, если сейчас в кадре отрисована цифра 2, value  будет равно 2, если 8 &#8211; то value=8 и так далее.<br />
Таким образом клип будет знать, какую цифру он сейчас отображает )</p>
<p>В случае с прелоадером, нам надо поместить на сцену два таких клипа: один для десятков, другой для единиц. Для часов таких клипов будет как минимум 4 (часы и минуты) или даже больше. Остановимся для простоты примера на прелоадере.<br />
Дадим каждому соответсвенно имя des_mc и ed_mc:<br />
<img class="alignnone" title="preloader" src="http://murejib.com/images/preloader_animated/preloader.gif" alt="" width="376" height="337" /></p>
<p>Остается только написать скрипт прелоадера, который будет собирать загруженный процент всего флеш-ролика, и отделять десятки от единиц, проверять каждый клип на его текущее значение (value)  и в случае, если новое найденое значение не равно текущему значению клипа (des_mc или  ed_mc), запускать анимацию нужного клипа.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>  <span style="color: #66cc66;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">var</span> tot:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">_root</span>.<span style="color: #0066CC;">getBytesTotal</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> ldd:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">_root</span>.<span style="color: #0066CC;">getBytesLoaded</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> proc:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>ldd<span style="color: #66cc66;">/</span>tot<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #808080; font-style: italic;">//вычисляем процент</span>
	<span style="color: #000000; font-weight: bold;">var</span> des:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">floor</span><span style="color: #66cc66;">&#40;</span>proc<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #808080; font-style: italic;">// выделяем десятки</span>
	<span style="color: #000000; font-weight: bold;">var</span> ed:<span style="color: #0066CC;">Number</span> = proc-des<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">10</span>;<span style="color: #808080; font-style: italic;">//выделяем единицы</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>proc<span style="color: #66cc66;">&gt;</span><span style="color: #cc66cc;">98</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #808080; font-style: italic;">// если процент будет равен 100 то счетчик слетит в нули</span>
                            <span style="color: #808080; font-style: italic;">// чтобы этого не произошло, фиксируем максимум  на девятки</span>
		des = <span style="color: #cc66cc;">9</span>;
		ed = <span style="color: #cc66cc;">9</span>;
&nbsp;
	<span style="color: #66cc66;">&#125;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>des_mc.<span style="color: #006600;">value</span> <span style="color: #66cc66;">!</span>= des<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
		des_mc.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>ed_mc.<span style="color: #006600;">value</span> <span style="color: #66cc66;">!</span>= ed<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
		ed_mc.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>ldd<span style="color: #66cc66;">&gt;</span>=tot<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
		<span style="color: #808080; font-style: italic;">//скрипт запуска флешки</span>
               <span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>;</pre></div></div>

<img src="http://murejib.com/?ak_action=api_record_view&id=188&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2009/05/16/animated-preloader/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Анимация Stroke Line.</title>
		<link>http://murejib.com/2009/04/29/stroke-line-animation/</link>
		<comments>http://murejib.com/2009/04/29/stroke-line-animation/#comments</comments>
		<pubDate>Wed, 29 Apr 2009 19:17:46 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[AS2.0]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[animator_at_work]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[туториал]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=176</guid>
		<description><![CDATA[Задача &#8211; надо анимировать линию, летящую по произвольному пути. )) Stroke эффект одним словом. Задача 2 &#8211; анимировать процесс рисования некоей произвольной фигуры. Если кому то много букв — смотрим видео версию. Если кому то жалко трафика — читаем ниже. Все может быть решено довольно просто. 1. Рисуем законченный путь нашей линии (кривая) 2. Дублируем [...]]]></description>
			<content:encoded><![CDATA[<p>Задача &#8211; надо анимировать линию, летящую по произвольному пути. )) Stroke эффект одним словом.<br />
Задача 2 &#8211; анимировать процесс рисования некоей произвольной фигуры.<br />
<span id="more-176"></span><br />
Если кому то много букв — смотрим видео версию.<br />
Если кому то жалко трафика — читаем ниже.<br />
<object width="444" height="360"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4399067&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=c9ff23&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4399067&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=c9ff23&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="444" height="360"></embed></object></p>
<p>Все может быть решено довольно просто.</p>
<p>1. Рисуем законченный путь нашей линии (кривая)<br />
<img src="http://murejib.com/flash/stroke/step1.jpg" alt="step1" /><br />
2. Дублируем кривую на новый слой.<br />
3. Создаем круглый шейп и конвертируем его в графический клип.<br />
4. Слой с дублем кривой превращаем в моушн-гайд для круглого шейпа.<br />
5. Делаем анимацию шейпа по всему пути.<br />
<img src="http://murejib.com/flash/stroke/step2.jpg" alt="step5" /><br />
6. Выделяем фреймы с моушнГайдом и шейпом, вырезаем их и создаем новый графический символ в билиотеке, куда и вставляем вырезанные фреймы. Или пользуемся необычайно полезной штукой Layers manager, который можно найти тут:  <a href="http://flash-animation.ru/category/plugins/">http://flash-animation.ru/category/plugins/</a> (Лерика, если ты это читаешь поправь линки! Прямая ссылка на пост о плагине не работает!!!)<br />
7. Временно переводим моушнГайд в обычный слой, чтобы видеть путь в клипе маски.<br />
8. Возвращаемся на сцену &#8211; совмещаем кривую и клип.<br />
<img src="http://murejib.com/flash/stroke/step3.jpg" alt="step8" /><br />
9. Возврашаемся в клип маски, и восстанавливаем моушнГайд для слоя с кривой.<br />
10. Слой с клипом, в котором находится анимация превращаем в маску для слоя с изначальной кривой. Ура.<br />
<img src="http://murejib.com/flash/stroke/step4.jpg" alt="step10" /><br />
Задача 2.<br />
1. Переводим клип с анимацией в ранг MovieClip. Дадим ему instance-имя masker.<br />
2. Обернем masker  в еще один мувиКлип с instance-name =  mask_mc<br />
3. Конвертируем кривую в мувиКлим с instance-name =  line_mc<br />
4. Пишем на таймлайне с линией и маской нехитрый код.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> mask_count:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">1</span>;
mask_mc.<span style="color: #006600;">masker</span>.<span style="color: #0066CC;">stop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">var</span> mc:<span style="color: #0066CC;">MovieClip</span> = mask_mc.<span style="color: #006600;">masker</span>.<span style="color: #0066CC;">duplicateMovieClip</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;mask&quot;</span>+mask_count,mask_count<span style="color: #66cc66;">&#41;</span>;
	mc.<span style="color: #0066CC;">gotoAndStop</span><span style="color: #66cc66;">&#40;</span>mask_count<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>mask_count == mask_mc.<span style="color: #006600;">masker</span>.<span style="color: #0066CC;">_totalframes</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">delete</span> <span style="color: #0066CC;">onEnterFrame</span>;
	<span style="color: #66cc66;">&#125;</span>
	mask_count++;
<span style="color: #66cc66;">&#125;</span>
line_mc.<span style="color: #0066CC;">setMask</span><span style="color: #66cc66;">&#40;</span>mask_mc<span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>5. Готово.</p>
<img src="http://murejib.com/?ak_action=api_record_view&id=176&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2009/04/29/stroke-line-animation/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Умные колеса.</title>
		<link>http://murejib.com/2009/04/24/smart-wheels/</link>
		<comments>http://murejib.com/2009/04/24/smart-wheels/#comments</comments>
		<pubDate>Fri, 24 Apr 2009 19:09:57 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[AS2.0]]></category>
		<category><![CDATA[Math]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[useful]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=169</guid>
		<description><![CDATA[Сейчас я работаю над одним весьма интересным проектом — это будет всего лишь интерактивная  флеш-шапка, но она будет полна анимации с алогичным волшебством: кони-рыбы, люди-фрукты и так далее )) В процессе работы, я уверен, будет накапливатся масса интересных и полезных мелочей, коими я конечно же поспешу поделиться. Сейчас таких мелочей есть две: программный растеризатор сложного [...]]]></description>
			<content:encoded><![CDATA[<p>Сейчас я работаю над одним весьма интересным проектом — это будет всего лишь интерактивная  флеш-шапка, но она будет полна анимации с алогичным волшебством: кони-рыбы, люди-фрукты и так далее ))</p>
<p>В процессе работы, я уверен, будет накапливатся масса интересных и полезных мелочей, коими я конечно же поспешу поделиться. Сейчас таких мелочей есть две: программный растеризатор сложного вектора. Вектора будет много, и он как пить дать убъет процессор; пришлось выдумывать хитрые вещи. Но об этом позже, сначала я должен убедиться в эффективности выбранного решения ))</p>
<p>Сегодня же я расскажу о колесах. Будет скрипт )) Несложный, но он даст нам чудное колесо, и оно будет вращаться в точности в соответсвии с тем, как далеко продвигается то, к чему это колесо крепится ))) Итак, под кат, там есть небольшой мультик ))<br />
<span id="more-169"></span><br />
 </p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_horse_blog_486417339"
			class="flashmovie"
			width="400"
			height="300">
	<param name="movie" value="http://murejib.com/flash/smartWheels/horse_blog.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://murejib.com/flash/smartWheels/horse_blog.swf"
			name="fm_horse_blog_486417339"
			width="400"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>Оставим пока лошадей ) (Я намерен, кстати выложить видео запись процесса работы над этой анимацией &#8211; так сказать серия Animator at work)<br />
Понаблюдайте за каретой. Колеса, как видите вращаются весьма правильно )) Они следуют всем законам земным и божеским. Вы думаете, я сидел с линейкой и мерял кадр за кадром &#8211; каково смещение? Нет. Я вспомнил, что в школе я неплохо разбирался в геометрии ))<br />
Итак, каждое колесо запаковано в мувиКлип, сама карета с ее вложенной анимацией также упакавана в мувиклип.<br />
Каждый клип колеса имеет точку регистрации ровно в его центре, чтобы колесо вращалось вокруг своей оси.<br />
Из геометрии мы знаем формулу длины окружности L = 2PI*R, где  R &#8211; радиус.<br />
В правильном колесе радиус &#8211; это половина ширины клипа.<br />
Рассуждаем логически: когда наше колесо повернется на 360 градусов, оно должно сместиться на расстояние  L. Супер! Значит, если колесо повернется на один градус, расстояние будет равно  L/360! Запомним это число,  и повесим на колесо событие onEnterFrame в котором смотрим — на сколько сместилась карета (моушвтины тоже считаются!), и считаем угол поворота &#8211; дистанцию делим на L/360. Вуаля.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;">init<span style="color: #66cc66;">&#40;</span>wheel1<span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// обучаем первое колесо</span>
init<span style="color: #66cc66;">&#40;</span>wheel2<span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// обучаем второе колесо</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> init<span style="color: #66cc66;">&#40;</span>mc:<span style="color: #0066CC;">MovieClip</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
	mc.<span style="color: #006600;">radius</span> = mc.<span style="color: #0066CC;">_width</span><span style="color: #66cc66;">/</span><span style="color: #cc66cc;">2</span>; <span style="color: #808080; font-style: italic;">// собрали радиус</span>
	mc.<span style="color: #006600;">baseX</span> = mc.<span style="color: #0066CC;">_parent</span>.<span style="color: #0066CC;">_x</span>; <span style="color: #808080; font-style: italic;">// запомнили начальную позицию кареты</span>
	<span style="color: #808080; font-style: italic;">// l = 2PI*R - ах, геометрия...</span>
&nbsp;
	mc.<span style="color: #006600;">degreeLength</span>  = <span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">2</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">3.1415926</span><span style="color: #66cc66;">*</span>mc.<span style="color: #006600;">radius</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">/</span><span style="color: #cc66cc;">360</span>; <span style="color: #808080; font-style: italic;">// смещение при повороте на один градус</span>
	mc.<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">var</span> distance:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">this</span>.<span style="color: #006600;">baseX</span> - <span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">_parent</span>.<span style="color: #0066CC;">_x</span>; <span style="color: #808080; font-style: italic;">// на сколько сместилась карета?</span>
		<span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">_rotation</span> = -distance<span style="color: #66cc66;">/</span><span style="color: #0066CC;">this</span>.<span style="color: #006600;">degreeLength</span>; <span style="color: #808080; font-style: italic;">// поворачиваем колесо</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<img src="http://murejib.com/?ak_action=api_record_view&id=169&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2009/04/24/smart-wheels/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Имитация изометрии.</title>
		<link>http://murejib.com/2008/05/15/pseudoiso/</link>
		<comments>http://murejib.com/2008/05/15/pseudoiso/#comments</comments>
		<pubDate>Thu, 15 May 2008 08:52:06 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[3D]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[draw]]></category>
		<category><![CDATA[fx]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=53</guid>
		<description><![CDATA[Старый, но приятный трюк: анимация изометрического изображения. 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_iso_slicer_778062682"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/iso_slicer.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/iso_slicer.swf"
			name="fm_iso_slicer_778062682"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object> Такая штуковина очень проста в изготовлении. Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности )) Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию [...]]]></description>
			<content:encoded><![CDATA[<p>Старый, но приятный трюк: анимация изометрического изображения.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_iso_slicer_1773755084"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/iso_slicer.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/iso_slicer.swf"
			name="fm_iso_slicer_1773755084"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p><span id="more-46"></span></p>
<p>Такая штуковина очень проста в изготовлении.<br />
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))<br />
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.<br />
А если несколько изображений положить друг на другом как блины &#8211; получится объемное изометрическое изображение которое можно крутить, как душе угодно )</p>
<p>Самое забавное в этом методе &#8211; это моделирование модели.<br />
Делается это на таймлайне. 1 кадр &#8211; это дно, последний кадр &#8211; вершина нашей блинной скульптуры.<br />
Вот, к примеру &#8211; как выглядит клип из которого нарезается приведенная выше анимация:</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_iso_clip_1832510112"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/iso_clip.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/iso_clip.swf"
			name="fm_iso_clip_1832510112"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object><br />
Алгоритм построения прост:</p>
<ol>
<li>Создать общий контейнер для всей фигуры;</li>
<li>Создать в нем N  пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;</li>
<li>В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;</li>
</ol>
<p>А вот собственно совершенно простой код:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// на сцену нужно в нужном месте положить клип под именем holder</span>
<span style="color: #000000; font-weight: bold;">var</span> distance:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">1</span>; <span style="color: #808080; font-style: italic;">// дистанция между &quot;кусками&quot;</span>
<span style="color: #000000; font-weight: bold;">var</span> speed:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">5</span>; <span style="color: #808080; font-style: italic;">// скорость вращения</span>
<span style="color: #000000; font-weight: bold;">var</span> scaleFactor:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">75</span>; <span style="color: #808080; font-style: italic;">// масштабирование по Y</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> slices:<span style="color: #0066CC;">Number</span>; <span style="color: #808080; font-style: italic;">//  количество кусков (определим позже)</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// функция, создает контейнер для куска, и вставляет в него</span>
<span style="color: #808080; font-style: italic;">// клип-фигуру с установкой нужного кадра.</span>
<span style="color: #808080; font-style: italic;">// n = порядковый номер куска</span>
<span style="color: #000000; font-weight: bold;">function</span> attachSlice<span style="color: #66cc66;">&#40;</span>n:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
     <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">slice</span>:<span style="color: #0066CC;">MovieClip</span> = holder.<span style="color: #0066CC;">createEmptyMovieClip</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;slice&quot;</span>+n,n<span style="color: #66cc66;">&#41;</span>;
     <span style="color: #808080; font-style: italic;">// в библиотеке символ, из которого делим фигуру снабдить linkage=sculpture</span>
     <span style="color: #0066CC;">slice</span>.<span style="color: #0066CC;">attachMovie</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;sculpture&quot;</span>,<span style="color: #ff0000;">&quot;gfx&quot;</span>,<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
     <span style="color: #0066CC;">slice</span>.<span style="color: #006600;">gfx</span>.<span style="color: #0066CC;">gotoAndStop</span><span style="color: #66cc66;">&#40;</span>n+<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
     <span style="color: #0066CC;">slice</span>.<span style="color: #0066CC;">_yscale</span> = scaleFactor;
     <span style="color: #0066CC;">slice</span>.<span style="color: #0066CC;">_y</span> = -n<span style="color: #66cc66;">*</span>distance;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// В начале, создадим первый кусок (дно) и заодно узнаем,</span>
<span style="color: #808080; font-style: italic;">// сколько в нем кадров, чтобы установить значение slices</span>
attachSlice<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
slices = holder.<span style="color: #006600;">slice0</span>.<span style="color: #006600;">gfx</span>.<span style="color: #0066CC;">_totalframes</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// выкладываем все остальные куски</span>
     <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i=<span style="color: #cc66cc;">1</span>; i <span style="color: #66cc66;">&lt;</span> slices; i++<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
attachSlice<span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// вращение фигуры</span>
<span style="color: #808080; font-style: italic;">// (тут можно определить и другое поведение - вращение от клавиатуры, мыши и т.д.)</span>
holder.<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
     <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i=<span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> slices; i++<span style="color: #66cc66;">&#41;</span>
     <span style="color: #66cc66;">&#123;</span>
          <span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;slice&quot;</span>+i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">gfx</span>.<span style="color: #0066CC;">_rotation</span> += speed;
     <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Можно получить вполне грациозную табуретку</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_iso_taburet_437005740"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/iso_taburet.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/iso_taburet.swf"
			name="fm_iso_taburet_437005740"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>Или вот такое подобие сканирования человека ))</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_iso_man_633297307"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/iso_man.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/iso_man.swf"
			name="fm_iso_man_633297307"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<img src="http://murejib.com/?ak_action=api_record_view&id=46&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2008/05/15/pseudoiso/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Баннер, хочешь похудеть? Спроси меня &#8211; как.</title>
		<link>http://murejib.com/2008/04/28/banner_optimised/</link>
		<comments>http://murejib.com/2008/04/28/banner_optimised/#comments</comments>
		<pubDate>Mon, 28 Apr 2008 14:15:10 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[fx]]></category>
		<category><![CDATA[анимация]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=50</guid>
		<description><![CDATA[В баннеростроении есть особая прелесть — оптимизация. Для меня эта задача сродни с хорошей логической игрушкой. Сегодня в очередной раз меня спросили об изготовлении баннеров, — редкий случай, когда заказчик интересуется заранее &#8211; а разве вообще можно в такие размеры вписать что то приемлемое. Низкий поклон и моя благодарность. Такой интерес &#8211; это редкость. Написал [...]]]></description>
			<content:encoded><![CDATA[<p>В баннеростроении есть особая  прелесть — оптимизация. Для меня эта задача сродни с хорошей логической игрушкой.<br />
Сегодня в очередной раз меня спросили об изготовлении баннеров, — редкий случай, когда заказчик интересуется заранее &#8211; а разве вообще можно в такие размеры вписать что то приемлемое. Низкий поклон и моя благодарность. Такой интерес &#8211; это редкость.</p>
<p>Написал в ответ письмо, и подумал &#8211; хорошо бы это письмо прочитало как можно большее количество заказчиков.<br />
Поэтому, публикую свои мысли о баннерах.</p>
<p><span id="more-44"></span></p>
<p><a href="http://ru.wikipedia.org/wiki/%D0%91%D0%B0%D0%BD%D0%BD%D0%B5%D1%80">Баннер</a> &#8211; особый жанр. Его основа &#8211; лаконичность и эффектность (с посылом в эффективность) И горе флеш-разработчику, если о лаконичности не позаботилась ни креативная команда, ни дизайнер. Зачастую заказчик не знает, да и не должен знать с какими трудностями и ограничениями приходится сталкиваться, ему нужен результат. Но задача исполнителя проекта (креативная кманда/дизайнер/менеджер/флешер в конце концов) &#8211; зная подводные камни предложить заказчику такое решение задачи, при котором все будут довольны &#8211; будет красиво  блестеть и прыгать, продажи клиента вырастут до небесных чертогов, а количество матерных слов сказанных флеш-разрабочиком сведется к нулю.</p>
<p>Из чего состоит флеш-баннер? Из картинок и буковок. И все это движется и меняет свои размеры и цвет.<br />
Исходя из этих нехитрых нужд выводим основных потребителей драгоценных килобайт:</p>
<ol>
<li><strong>Растры. </strong><br />
Не стоит думать, что если растр большой (я имею в виду геометрические размеры &#8211; ширину и высоту), то он заранее плох для баннера. Конечно это важно, но не стоит и забывать о том, что сложный растр, с большим количеством мелких деталей также опасен непомерным весом. А при оптимизации (компрессии) эти детали все равно теряются или искажаются до безобразия. Лично я не люблю жестко скомпрессированый грязный растр. Он портит картинку, дешевит ее. Растр должен присутствовать в разумных количествах.  Логично  использовать небольшие растры  в тех местах, где нельзя обойтись  вектором, или когда аналогичный вектор весит больше растра.<br />
<em>ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ: </em><br />
- для облаков можно использовать небольшие растры, увеличивать их в баннере (облако все равно расплывчатое, лишний блюр не повредит), и можно компрессировать такой растр достаточно жестко (вплоть до 15 &#8211; 20%) после чего не забыть на клип с таким облаком повесить эффект brightness = 100. Все погрешности компрессии скроются и мы получим милое растровое облако при минимуме веса <img src='http://murejib.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
- если какой-то большой кусок растра кадрируется (обрезается) и при любых движениях никогда целиком не входит в кадр &#8211; смело режьте те участки, которых никогда не будет видно. Нам не нужны лишние килобайты, не участвующие в процессе.</li>
<li><strong>Векторные картинки.<br />
</strong> Они тоже имеют свой вес &#8211; каждая ключевая точка &#8211;  плюс к общему весу.  Кривая весит больше прямой &#8211; обычная математика. Для описания одного отрезка используется две точки, для описания одной кривой &#8211; три, как минимум. Сложный,  неоптимизированый вектор часто бывает даже  тяжелее растра. Учитывая рендер флешовой картинки некоторые мелкие  детали стоит сразу исключать или упрощать, ибо они все равно будут  смазаны, вес увеличится, а красоты и гармонии не прибавит. Если борьба с весом идет не на жизнь, а на смерть — в ход идет все, убираем все лишние опорные точки, где можно меняем кривые на прямые, участки близкие по цвету упрощаем или вообще объединяем, градиенты сбрасываем на свалку истории. Не забывайте, зачастую картинка находится в кадре очень мало, и на мелкие детали зритель просто не успевает обратить внимание.<br />
Вот перед вами весы. Слева &#8211; красивые, детально отрисованные &#8211; их вес 4 килобайта. Справа &#8211; давайте без придирок, ни чуть не хуже. Немного не такие, но не хуже. 1,8 килобайт.<br />

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_banners_1556870960"
			class="flashmovie"
			width="400"
			height="400">
	<param name="movie" value="/flash/banners/banners.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/banners/banners.swf"
			name="fm_banners_1556870960"
			width="400"
			height="400">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object><br />
Теперь прокликайте по сцене и сравните их в увеличенном состоянии. Ужасающее зрелище. Но во время ролика, эти весы присутствуют на сцене менее секунды, при этом треть времени фейдятся из белого. И зачем мне более 2-х лишних килобайт когда лимит &#8211; 15?<br />
<em>ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ<br />
-</em> Используйте символы. Два одинаковых рисунка отнимут больше килобайт, чем два символа.</li>
<li><strong>Тексты.<br />
</strong>Тексты бывают сглаженные и не сглаженные. С последними очень просто иметь дело &#8211; с ними ничего нельзя сделать, да и не нужно. Весь вес уходит только на строку, которую вы пишете. Сглаженные шрифты требуют внедрения глифов (это, кто не в курсе &#8211; векторное изображение буквы). К счастью, внедряются не все буквы по отдельности, а только те, которые участвуют в ролике. Для слова МАМА нужно всего два глифа. Конечно, если вы создали динамическое поле и внедрили в него все буквы русского алфавита, то тут уже сами виноваты. Для слова МАМА весь алфавит и не нужен.<br />
<em>ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ:</em><br />
- Если уже совсем невмоготу и вы не знаете откуда брать эти несчастные десятые килобайта &#8211; вспомните, что некоторые латинские буквы равны русским.<br />
- В некоторых случаях помогает  злобный ход. Допустим тексты использованы в графике как элемент. Причем элемент достаточно мелкий. Такой, что в общем то детально буквы нельзя разобрать. Я в этих случаях выбираю три четыре буквы, которые наиболее обобщенно представляют весь алфавит и заменяю ими текст. Белиберда получается страшная, но в итоге этого никто не видит.<br />
Вот посмотрите. Страница слева весит 5.8 кб, справа 3.1 кб<br />

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_banners_text_959612093"
			class="flashmovie"
			width="400"
			height="400">
	<param name="movie" value="/flash/banners/banners_text.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/banners/banners_text.swf"
			name="fm_banners_text_959612093"
			width="400"
			height="400">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object></li>
<li><strong>Анимация.<br />
</strong>Основные пожиратели драгоценных килобайт &#8230;. ключевые кадры и твины. Парадоксально, но именно с удаления лишних твинов и ключевых кадров нужно  начинать оптимизацию. Почему? Потому что это результат труда флеш-разработчика, о котором никто не знает и не должен знать &#8211; мы видим анимацию а не количество кадров. И именно ляпы с лишними кадрами могут отнять драгоценные пару килобайт от качества картинки, кропотливо созданной дизайнером.<br />
За годы борьбы с баннерами я разработал тактику максимального уменьшения  веса анимации и эта тактика &#8211; программная анимация. В самом страшном случае, можно свалить все символы на сцену и завести всего два слоя &#8211; для графики &#8211; один большой кадр, и для кода, на ключевых кадрах которого мы и будет прописывать когда показать или спрятать, и куда привести клип. Конечно это затрудняет разработку, но увы &#8211; таковы правила игры &#8211; баннер должен вписаться в лимиты размеров.<br />
Более того. Сейчас я сдам вам нехитрый кусок кода, на котором я строю все свои баннеры. Он, конечно, неоптимален. В нем не реализованы анимации цвета (пока было без надобности), но это работает и спасает мне килобайты. Если вам по душе такая идея &#8211; модифицируйте скрипт, пишите свой собственный &#8211; боритесь за свои килобайты !!! </p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">//всего три функции для анимации.</span>
<span style="color: #808080; font-style: italic;">// animate - линейное движение от знаения к значению</span>
<span style="color: #808080; font-style: italic;">// easeOut - плавное прибытие в точку</span>
<span style="color: #808080; font-style: italic;">// easeIn - плавный уход со сцены</span>
<span style="color: #808080; font-style: italic;">// испольование:</span>
<span style="color: #808080; font-style: italic;">// Перед тем как применить одну из функций к клипу,</span>
<span style="color: #808080; font-style: italic;">// создается соответсвующий объект, в котором указывается</span>
<span style="color: #808080; font-style: italic;">// какие свойства клипа надо анимировать -</span>
<span style="color: #808080; font-style: italic;">// альфу, _x или _y, _xscale и т.д</span>
<span style="color: #808080; font-style: italic;">// animate. Пример использования</span>
<span style="color: #808080; font-style: italic;">//анимация _x с шагом 0.3</span>
<span style="color: #808080; font-style: italic;">// анимация _alpha с шагом 1</span>
<span style="color: #808080; font-style: italic;">// mc.animate = {_x:0.3,_alpha:1};</span>
<span style="color: #808080; font-style: italic;">// animate(mc);</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> animate<span style="color: #66cc66;">&#40;</span>mc<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	mc.<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>_paused<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> props <span style="color: #b1b100;">in</span> <span style="color: #0066CC;">this</span>.<span style="color: #006600;">animate</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> += <span style="color: #0066CC;">this</span>.<span style="color: #006600;">animate</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// обычно используется для того чтобы клип плавно</span>
<span style="color: #808080; font-style: italic;">// приехал в нужную точку. Начально положение задается</span>
<span style="color: #808080; font-style: italic;">// или скриптом, или в среде разработки - куда положим</span>
<span style="color: #808080; font-style: italic;">// оттуда и приедет.</span>
<span style="color: #808080; font-style: italic;">//mc.easeout = {_x: 20,_y:20};</span>
<span style="color: #808080; font-style: italic;">//easeOut(mc);</span>
&nbsp;
easeOut<span style="color: #66cc66;">&#40;</span>prize0<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> easeOut<span style="color: #66cc66;">&#40;</span>mc<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	mc.<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>_paused<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> props <span style="color: #b1b100;">in</span> <span style="color: #0066CC;">this</span>.<span style="color: #006600;">easeout</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				<span style="color: #000000; font-weight: bold;">var</span> delta = <span style="color: #0066CC;">this</span>.<span style="color: #006600;">easeout</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> - <span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span>;
&nbsp;
				<span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> += delta<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">3</span>;<span style="color: #808080; font-style: italic;">// 3 - скорость передвижения</span>
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//эту функцию я использую чтобы плавно выкинуть клип со сцены</span>
<span style="color: #808080; font-style: italic;">// поэтому обекту easein я передаю начальный шаг,</span>
<span style="color: #808080; font-style: italic;">// а не конечную точку.</span>
<span style="color: #808080; font-style: italic;">// с каждым кадром шаг перемножается на 2, что дает</span>
<span style="color: #808080; font-style: italic;">// прирост в скорости. Когда значения выходит за рамки</span>
<span style="color: #808080; font-style: italic;">// -3000 3000, анимация останавливается.</span>
<span style="color: #808080; font-style: italic;">// ПРИМЕР:</span>
<span style="color: #808080; font-style: italic;">// mc.easein = {_x:0.5,_alpha:-1};</span>
<span style="color: #808080; font-style: italic;">// easeIn(mc);</span>
<span style="color: #000000; font-weight: bold;">function</span> easeIn<span style="color: #66cc66;">&#40;</span>mc<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
&nbsp;
	mc.<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>_paused<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> props <span style="color: #b1b100;">in</span> <span style="color: #0066CC;">this</span>.<span style="color: #006600;">easein</span><span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
&nbsp;
				<span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> += <span style="color: #0066CC;">this</span>.<span style="color: #006600;">easein</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span>;
				<span style="color: #0066CC;">this</span>.<span style="color: #006600;">easein</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">*</span>= <span style="color: #cc66cc;">2</span>;
				<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">abs</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&amp;</span>gt;<span style="color: #cc66cc;">3000</span><span style="color: #66cc66;">&#41;</span> <span style="color: #0066CC;">this</span>.<span style="color: #006600;">easein</span><span style="color: #66cc66;">&#91;</span>props<span style="color: #66cc66;">&#93;</span> = <span style="color: #cc66cc;">0</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//// А ВОТ ТУТ ВНИМАНИЕ!</span>
<span style="color: #808080; font-style: italic;">// Существет плавило, по которому пользователь имеет право</span>
<span style="color: #808080; font-style: italic;">// остановить баннер кликнув на stop в контекстном меню.</span>
<span style="color: #808080; font-style: italic;">// Чтобы наша программная анимация соображала когда ее</span>
<span style="color: #808080; font-style: italic;">// остановили - существует постоянная проверка на равенство</span>
<span style="color: #808080; font-style: italic;">// текущего кадра предидущему.</span>
<span style="color: #000000; font-weight: bold;">var</span> _paused = <span style="color: #000000; font-weight: bold;">false</span>;
<span style="color: #000000; font-weight: bold;">var</span> cf;
<span style="color: #0066CC;">onEnterFrame</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">_currentframe</span> == cf<span style="color: #66cc66;">&#41;</span> _paused = <span style="color: #000000; font-weight: bold;">true</span>; <span style="color: #b1b100;">else</span> _paused= <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
	cf = <span style="color: #0066CC;">_currentframe</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

</li>
</ol>
<p>Вот пожалуй и все, что я пока хотел сказать о баннерах.<br />
Если вам известны какие-то хитрости и способы по борьбе с лишним весом &#8211; комментируйте, делитесь )))</p>
<img src="http://murejib.com/?ak_action=api_record_view&id=44&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2008/04/28/banner_optimised/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Blend Modes.</title>
		<link>http://murejib.com/2008/04/25/blend-modes/</link>
		<comments>http://murejib.com/2008/04/25/blend-modes/#comments</comments>
		<pubDate>Fri, 25 Apr 2008 11:06:15 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[fx]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[NB]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=49</guid>
		<description><![CDATA[Давно хотел написать небольшую статейку по режимам наложения (blend modes), но некий пробел в знании вопроса останавливал меня. Сегодня я наконец узнал, как использовать режимы alpha, layer и erase, поэтому срочно выкладываю всю пачку знаний по вопросу режимы наложения. Итак. Что это такое? Для тех кто не в курсе &#8211; в восьмой версии флеш плеера [...]]]></description>
			<content:encoded><![CDATA[<p>Давно хотел написать небольшую статейку по режимам наложения (blend modes), но некий пробел в знании вопроса останавливал меня. Сегодня я наконец узнал, как использовать режимы alpha, layer и erase, поэтому срочно выкладываю всю пачку знаний по вопросу <strong>режимы наложения.</strong></p>
<p><span id="more-43"></span> Итак. Что это такое? Для тех кто не в курсе &#8211; в восьмой версии флеш плеера к обычному наложению клипов по альфа каналу добавилось несколько режимов (как в фотошопе). Говоря проще &#8211; режим наложения &#8211; это правило:  как пиксели верхнего изображения будут накладываться на пиксели нижнего изображения. Что мы имели раньше. Если <font color="#008000">зеленый</font> квадрат перекрыть <font color="#ff0000">красным</font> квадратом &#8211; то мы видим <font color="#ff0000">красный</font> квадрат. Если последнему задать альфа=50, мы увидим  квадрат цвета, напоминающего <font color="#808000">переспелую оливку на фоне стираного солдатского кителя</font> — это сквозь <font color="#ff0000">красный</font> квадрат просвечивет <font color="#008000">зеленый.</font></p>
<p>Теперь есть несколько новых правил.<br />
У MovieClip появилось новое свойство &#8211; blendMode, достаточно просто присвоить одно из допустимых значений &#8211; и  результат на лицо (Так же эти режимы можно задавать через Property Inspector в среде разработки). Однако не все так просто. Некоторые режимы очевидны (по крайней мере для тех, кто знаком с photoshop), а некоторые (layer, alpha, erase) весьма загадочны. А разгадка проста &#8211; последние три режима имеет смысл использовать только в комплексе. Если вам неитересно знать, как устроены эти режимы &#8211; крутите вниз &#8211; там есть флешка, где можно все потрогать руками. Если небольшая теоретическая часть вас не пугает &#8211; читайте дальше. Глубоко в математику вдаваться не буду, зачастую этого знать и не нужно.</p>
<p>Итак, по порядку.  Простые режимы. Для удобства пиксель верхнего изображения  обозначим <font color="#ff0000"><strong>В</strong></font>, нижнего &#8211; <font color="#0000ff"><strong>Н</strong></font>.</p>
<ul>
<li><em><strong>normal </strong>-</em>как следует из названия &#8211; обычный режим наложения. <font color="#ff0000"><strong>В</strong></font>  перекрывает <font color="#0000ff"><strong>Н</strong></font>.</li>
</ul>
<ul>
<li><em><strong>multiply  </strong>-</em> математика такая: Каждая составляющая <font color="#ff0000">RR</font><font color="#008000">GG</font><font color="#0000ff">BB</font> <font color="#ff0000"><strong>B</strong></font> умножается на соответсвующую составляющую <font color="#0000ff"><strong>Н</strong></font>, затем нормализуется  делением  на OxFF (<font color="#ff0000">RR<strong>B</strong></font> *<font color="#ff0000"> RR</font><strong><font color="#0000ff">H</font> / </strong>OxFF, <font color="#008000">GG</font><strong><font color="#ff0000">В</font> </strong> * <font color="#008000">GG</font><strong><font color="#0000ff">Н</font> </strong><strong>/ </strong>OxFF, <font color="#0000ff">BB</font><font color="#ff0000"><strong>B</strong></font> * <font color="#0000ff">BB</font><strong><font color="#0000ff">H</font> / </strong>OxFF). При этом режиме изображение всегда получается темнее, поэтому используется в основном для затемнений.</li>
<li><em><strong>screen </strong>- </em>Для этого режима берутся инверсные цвета пикселей <font color="#ff0000"><strong>В</strong></font> и <font color="#0000ff"><strong>Н</strong></font>, и затем перемножаются.  Режим используется для высветления.</li>
<li><em><strong>lighten </strong>- </em>При этом режиме сопоставляются составляющие <font color="#ff0000">RR</font><font color="#008000">GG</font><font color="#0000ff">BB</font> и выбирается та, значение которой больше. То есть: <font color="#ff0000">newR</font> = Math.max(<font color="#ff0000">RR<strong>B</strong></font>,<font color="#ff0000">RR</font><font color="#0000ff"><strong>H</strong></font>),<font color="#008000"> newG</font> = Math.max(<font color="#008000">GG</font><font color="#ff0000"><strong>B</strong></font>,<font color="#008000">GG</font><font color="#0000ff"><strong>H</strong></font>), <font color="#0000ff">newB</font> = Math.max(<font color="#0000ff">BB</font><font color="#ff0000"><strong>B</strong></font>,<font color="#0000ff">BB<strong>H</strong></font>).</li>
<li><strong><em>darken </em></strong>- обратный предидущему &#8211; в результирующий цвет попадают составляющие с меньшим значением.</li>
<li><em><strong>difference </strong>-  </em>Из двух составляющих выбирается большая, и из нее вычитается значение меньшей.</li>
<li><em><strong>add </strong>- </em>поканальное сложение, с потолком в OxFF для каждой составляющей.</li>
<li><em><strong>subtract </strong>- </em>Поканальное вычитание <font color="#0000ff"><strong>H</strong></font> из <font color="#ff0000"><strong>В</strong></font>, с ограничением до 0, для каждой составляющей.</li>
<li><em><strong>invert </strong>- </em>независимо от цвета <font color="#ff0000"><strong>В</strong></font>  инвертирует цвет <font color="#0000ff"><strong>Н</strong></font>. Если значение альфа канала пикселя<font color="#ff0000"><strong> В</strong></font> меньше 0хFF &#8211; то результрующий пиксель будет иметь то же значение, соответсвенно накладываться на  <font color="#0000ff"><strong>Н</strong></font>  как при обычном альфа наложении.</li>
<li> <em><strong>overlay </strong>-</em> Изменяет цвет в зависимости от  яркости <font color="#0000ff"><strong>Н</strong></font>. Если яркость <font color="#0000ff"><strong>Н</strong></font> больше 50%, к пикселю применяется screen, иначе &#8211; multiply.</li>
<li><strong><em>hardlight</em> </strong><em>-</em> то же, но в основу берется яркость <font color="#ff0000"><strong>В</strong></font>.</li>
</ul>
<p>Теперь о комплексных режимах. Все описанные выше режимы, могут применяться к клипу самостоятельно. Все режимы, описанные ниже, должны применятся так &#8211; клип с комплексным режимом  должен содержаться в клипе, к которому применен режим <strong>layer. </strong>Фактически, этот режим автоматически применяется к клипу, в котором содержиться более одного клипа, и хотя бы к одному из них применен режим, отличный от normal.<strong><br />
</strong></p>
<ul>
<li><strong><em>erase</em> </strong><em>- </em>стирает пиксели <font color="#0000ff"><strong>Н</strong></font> в соответсвии со значением альфа канала <font color="#ff0000"><strong>В</strong></font>.</li>
<li><strong><em>alpha</em> </strong>- заменяет значение альфа канала <font color="#0000ff"><strong>Н</strong></font> значением альфа канала <font color="#ff0000"><strong>В</strong></font>.</li>
</ul>
<p>Если вас глубоко заинтересовала математика каждого из процессов &#8211; почитайте вот эту статью: <a href="http://www.simpelfilter.de/en/grundlagen/mixmods.html">Blend Modes of Photoshop &amp; Co.</a></p>
<p>В следующей флешке также можно понаблюдать работу всех режимов. Большая улитка и радужный градиент содержатся в клипе, к которому применен режим layer. Режимы наложения применяются к клипу с улиткой. маленькая улитка лежит сама по себе, к ней также применяются выбранные режимы.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_blendModes_698892404"
			class="flashmovie"
			width="450"
			height="400">
	<param name="movie" value="/flash/blend/blendModes.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/blend/blendModes.swf"
			name="fm_blendModes_698892404"
			width="450"
			height="400">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<img src="http://murejib.com/?ak_action=api_record_view&id=43&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2008/04/25/blend-modes/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>ScrollRect. Дубль 2.</title>
		<link>http://murejib.com/2008/04/24/scrollrect-2/</link>
		<comments>http://murejib.com/2008/04/24/scrollrect-2/#comments</comments>
		<pubDate>Thu, 24 Apr 2008 08:21:40 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Math]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[AS2.0]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[useful]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=47</guid>
		<description><![CDATA[Как показывает практика, многие избегают использования scrollRect (я писал об этой чудесной возможности в одной из статей) по той простой причине, что не понимают, как работать с координатами. Действительно, после использования маски с клипом, где каждый участник процесса имеет свои понятные иксы и игреки, переход на scrollRect бывает труден. Сегодня я еще раз попробую обратить [...]]]></description>
			<content:encoded><![CDATA[<p>Как показывает практика, многие избегают использования scrollRect (я писал об этой чудесной возможности <a title="scrollRect vs. setMask" href="http://murejib.com/?p=23">в одной из статей</a>) по той простой причине, что не понимают, как работать с координатами. Действительно, после использования маски с клипом, где каждый участник процесса имеет свои понятные иксы и игреки, переход на scrollRect бывает труден.</p>
<p>Сегодня я еще раз попробую обратить вас в свою веру  )).</p>
<p><span id="more-41"></span><br />
Основная, бесспорная причина, по которой стоит использовать scrollRect вместо прямоугольных масок &#8211; производительность.<br />
10 масок убьют CPU намного быстрее, чем 10 scrollRect-ов. Даже в хелпе сказано, что при использовании scrollRect используется попиксельное копирование участка клипа, а не полная его перерисовка.<br />
Вторая причина &#8211; (вытекает из первой) можно маскировать НЕ внедренные шрифты, которые, как мы знаем, пропадают при маскировании обычным способом.</p>
<p>Также для меня лично плюсом является то, что мне не надо плодить новые клипы, только для того чтобы замаскировать контент.</p>
<p>Теперь о том, как это работает.</p>
<p>В процессе участвует MovieClip и объект Rectangle.<br />
Когда к клипу применяется scrollRect &#8211; то на экран выводится только тот участок клипа, который КАК бы лежит под заданным прямоугольником. Координаты прямоугольника при этом задаются в системе координат маскируемого клипа &#8211; то есть от его точки регистрации. Хотим увидеть квадрат 20х20 левого верхнего угла клипа &#8211; задаем<br />
<code>mc.scrollRect = new Rectangle(0,0,20,20);</code></p>
<p>Заметьте, если вы начинаете сдвигать координату прямоугольника &#8211; координаты клипа <strong>остаются неизменными</strong>, хотя визуально кажется, будто он движется под маской. Еще раз напомню &#8211; <strong>происходит попиксельное копирование участка клипа.</strong></p>
<hr />Пример 1. Левый клип замаскирован scrollRect-ом. Перемещая рамку над правым &#8211; меняем x и y scrollRect-а.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_nav_1980978227"
			class="flashmovie"
			width="450"
			height="180">
	<param name="movie" value="/flash/nav.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/nav.swf"
			name="fm_nav_1980978227"
			width="450"
			height="180">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p> </p>
<hr />Пример 2. Прокрутка большого клипа в окне заданного размера.<br />
Координаты Rectangle изменяются в зависимости от координат мыши.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_sr_1932736064"
			class="flashmovie"
			width="300"
			height="300">
	<param name="movie" value="/flash/sr.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/sr.swf"
			name="fm_sr_1932736064"
			width="300"
			height="300">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p> </p>
<hr />Пример 3. Комбинация перемещения клипа + перемещение scrollRect дает забавный эффект.<br />
Попробуйте перевесить картину )<br />

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_frame_227585422"
			class="flashmovie"
			width="450"
			height="357">
	<param name="movie" value="/flash/frame.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/frame.swf"
			name="fm_frame_227585422"
			width="450"
			height="357">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p> </p>
<hr />Пример 4. Покрутите ручки сами.Некоторые свойства <em>Rectangle</em>:</p>
<p> </p>
<p><strong>x, y</strong> &#8211; координата левого верхнего угла прямоугольника;<br />
<strong> width, heigth</strong> &#8211; ширина, высота прямоугольника;<br />
<strong> left</strong> &#8211;  координата левой стороны. Изменяя это свойство мы меняем сразу и<strong> width</strong>, и <strong>x</strong>;<br />
<strong> right</strong> -координата правой стороны. Изменяя это свойство мы изменяем также и <strong>width</strong>;<br />
<strong> top</strong> &#8211;  координата верхней стороны. Изменяя это свойство мы меняем сразу и <strong>height</strong>, и <strong>y</strong>;<br />
<strong> bottom</strong> -координата нижней стороны. Изменяя это свойство мы изменяем также и <strong>height</strong>;Покрутив ручки <em>MovieClip</em> вы увидите разницу между перемещением клипа и перемещением прямоугольника scrollRect.<br />
Интересный факт. Изменяя <strong>width</strong> прямоугольника мы меняем <strong>_width</strong> клипа (это логично). Но если мы при scrollRect начнем изменять непосредственно <strong>_width (_height)</strong> клипа &#8211; то клип начнет искажаться, тогда как scrollRect останется при своем<strong> _width.</strong><br />
Крутите ручки &#8211; экспериментируйте.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_sliders_1109433798"
			class="flashmovie"
			width="450"
			height="620">
	<param name="movie" value="/flash/sliders.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/flash/sliders.swf"
			name="fm_sliders_1109433798"
			width="450"
			height="620">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<img src="http://murejib.com/?ak_action=api_record_view&id=41&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2008/04/24/scrollrect-2/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Разбираемся с SWFAddress</title>
		<link>http://murejib.com/2008/02/26/swfaddress/</link>
		<comments>http://murejib.com/2008/02/26/swfaddress/#comments</comments>
		<pubDate>Tue, 26 Feb 2008 11:37:03 +0000</pubDate>
		<dc:creator>murejib</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[AS2.0]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[грабли]]></category>
		<category><![CDATA[Полезное]]></category>
		<category><![CDATA[deep linking]]></category>
		<category><![CDATA[swfaddress]]></category>
		<category><![CDATA[traps]]></category>
		<category><![CDATA[utils]]></category>

		<guid isPermaLink="false">http://murejib.com/?p=41</guid>
		<description><![CDATA[В сети море полезных фреймворков, классов и решений различных задач. Однако очень многие из них имеют существенный недостаток &#8211; УЖАСНАЯ, если вообще присутствующая документация. Недавно я прикоснулся к магии SWFAddress, библиотеке AS+JS, решающей проблему deep linking для FLASH и AJAX. Для таких как я (гуманитариев и не-программистов) предлагаю свой опыт по освоению СВФАдреса. Нет. Документацию [...]]]></description>
			<content:encoded><![CDATA[<p>В сети море полезных фреймворков, классов и решений различных задач.<br />
Однако очень многие из них имеют существенный недостаток &#8211; УЖАСНАЯ, если вообще присутствующая документация.</p>
<p>Недавно я прикоснулся к магии SWFAddress, библиотеке AS+JS, решающей проблему deep linking для FLASH и AJAX.<br />
Для таких как я (гуманитариев и не-программистов) предлагаю свой опыт по освоению СВФАдреса.<br />
<span id="more-36"></span> Нет. Документацию на русский язык я переводить не буду. Не вижу в этом смысла. Документация более чем минималистическая. С тем же успехом ее можно было бы вообще не писать. В прочем + от нее все же есть &#8211; сводная таблица всех доступных в классе методов.</p>
<p>Первое что следует сделать &#8211; это скачать библиотеку. Настоятельно рекомендую качать <a href="http://asual.com/download/?swfaddress">7-мегабайтовый архив</a> с примерами и документацией.  Потому что, как выяснилось в процессе, если бы я ограничился скачиванием только классов — меня бы постигла неудача, и я бы так и не понял в чем дело. А непоняток-ошибок на пути встретилось некоторое количество )</p>
<p><strong>Первая ошибка.</strong> Исторически сложилось так, что я работал над сайтом, к которому намеревался прикрутить SWFAddress на завершающем этапе.  <em>Собираетесь использовать дип линкинг &#8211; сразу работайте с SWFAddress</em>. Дело в том, что любое изменение адресной строки браузера (А это именно то, зачем нам вообще нужен дип линкинг) вызывает событие SWFAddress.onChange. То есть фактически и переключение разделов из флеш сайта (конечно если оно должно вести к изменению в адресной строке) , и переключение разделов извне (навигация по кнопкам ВПЕРЕД НАЗАД ,навигация по якорям на хтмл-странице и т.д.) вызывает это событие. В сущности на нем как раз и будет строиться обработка события переключения между разделами.<br />
<strong>Ошибка вторая.</strong> Я доверился заявлению <em>Flash CS3 Support</em>. Фактически же, если публиковать ролик на странице с помощью AC_RunActiveContent.js, которое генерируется Flash IDE &#8211; дип линкинг не работает. Изменения в адресной строке &#8211; да, но ролик не реагирует на навигацию из браузера. Я дошел до этого знания случайно. Потеряв веру в свой мозг, я просто взял рабочий пример, и заменил в нем флешку на свою &#8211; и все заработало. Путем исключений я нашел камень преткновения. Каким то образом AC_RunActiveContent.js из примера отличается от того, что генерируется FLASH CS3 IDE. Так что пользуйтесь скриптом из примеров. Что касается работы с SWFObject и UFO &#8211; не проверял. У вас есть отличная возможность сделать это за меня, а потом отписаться здесь, если пожелаете.</p>
<p>Теперь о некоторых тонкостях и внутренностях. В архиве есть коды для всех трех версий AS. Мои опыты ставились на AS2.0</p>
<p>1. Класс написан как TopLevel-класс, или для тех кто не понимает этого словосочетания, &#8211; он не создает экземпляров. Пример такого класса -Math, все функции в нем вызываются подобным образом: Math.sin(), Math.round() и т.д. То же справедливо и для SWFAddress.</p>
<p>2. Адресная строка.<br />
Для решения задачи дип линкинга, к существующему URL добавляется якорь # за которым следует строка, которую разработчик волен генерить сам, по своим правилам, и сам же по своим правилам ее  и разбирает. Есть два режима. setStrict(true) &#8211; в конце адреса жестко добавляется слеш (/) и setStrict(false) &#8211; никаких слешей без ведома разрабочика.</p>
<p>3. Основные полезные методы.<br />
В классе присутствует набор методов для разбора строки. Весьма удобно.<br />
К примеру в адресной строке имеем</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">http://flashsite.com/#news?page=&amp;img=2</pre></div></div>

<p><strong>SWFAddress.getValue():String -</strong> вернет значение строки аккурат после # со всеми Вашими изысками (парами имя=значение)</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">news?page=1&amp;img=2</pre></div></div>

<p><strong>SWFAddress.getPath():String -</strong> вернет значение строки аккурат после # без дополнительных параметров<br />
<em>news</em></p>
<p><strong>SWFAddress.getQueryString():Array -</strong> вернет строку с дополнительными параметрами</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">page=1&amp;img=2</pre></div></div>

<p><strong>SWFAddress.getParameterNames():Array -</strong> вернет массив с именами дополнительных переменных<br />
<em>page,img</em></p>
<p><strong>SWFAddress.getParameter(value:String):String -</strong> вернет значение дополнительного параметра указанного в value<br />
<em>getParameter(&#8220;page&#8221;) // 1;<br />
</em><em>getParameter(&#8220;img&#8221;) // 2;<br />
</em></p>
<p>Для того чтобы изменить адресную строку из FLASH существует метод <strong>setValue(value:String) &#8211; </strong>помните, что вызов этого метода автоматически приведет к вызову события onChange, так что фактически переключение между разделами сводится к замене значения адресной строки и последующей обработке события.</p>
<p>Остальные методы описывать не стану, они весьма просты и даже данных документации хватит для их освоения.</p>
<p>4. События.<br />
Я уже говорил о событии onChange. Должен отметить, что событие это вызывается сразу же, при первом же упоминании класса, равно как и событие onInit. Большого смысла в событии onInit я не уловил. В самом начале оно вызывается и тут же за ним вызывается onChange. Возможно есть смысл для более четкой структуризации, и отделении инит-процедур от собственно обработки переключений между разделами.</p>
<p>Более подробно поговрим о событии onChange, хотя в случае с onInit все работает абсолютно так же, за исключением значения cвойств SWFAddressEvent: path=null; value=null; type=init;</p>
<p>События доступны в двух ипостасях:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">SWFAddress.<span style="color: #006600;">onChange</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;SWFAddress.onChange&quot;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>В данном случае мы просто определяем статичную функцию onChange.</p>
<p>Второй вариант &#8211; подписать любой свой объект на событие. Во многом это удобнее, чем описывать вложенные функции с обработчиком события.<br />
К примеру мне удобно подписать экземпляр класса, который напрямую работает с SWFAddress. Для этого я сначала создаю функцию обработчик:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> onChange<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span> \
<span style="color: #66cc66;">&#123;</span>
   <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Class's onChange&quot;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>И далее подписывась на событие с помощью метода класса  SWFAddress  &#8211; addEventListener(type:String,listener:Function);<br />
Поскольку в этом учавствует стандартный mx.utils.EventDispatcher, нужно подписаться так, чтобы наша функция onChange знала кто в доме хозяин &#8211; то есть надо жестко определить this. Делается это при помощи mx.utils.Delegate.create().<br />
Итак подписка на событие для нашего экземпляра будет выглядеть так</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">SWFAddress.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;change&quot;</span>,Delegate.<span style="color: #006600;">create</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>,onChange<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Теперь мы можем из тела функции onChange обращаться ко всем свойствам и методам нашего экземпляра. Ура.<br />
Продвинемся дальше. В том случае, если мы подписываемся на событие, в качестве параметра в наш обработчик приходит экземпляр SWFAddressEvent, который несет в себе ценную информацию <img src='http://murejib.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
Модифицируем наш обработчик.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> onChange<span style="color: #66cc66;">&#40;</span>evt:SWFAddressEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span>
<span style="color: #66cc66;">&#123;</span>
  <span style="color: #808080; font-style: italic;">//вернет путь после # из адресной строки БЕЗ параметров</span>
  <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;path:&quot;</span>+evt.<span style="color: #006600;">path</span><span style="color: #66cc66;">&#41;</span>;
  <span style="color: #808080; font-style: italic;">//вернет  путь после # из адресной строки С параметрами</span>
  <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;value:&quot;</span>+evt.<span style="color: #006600;">value</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Также событие несет информацию о своем типе (type=&#8221;change&#8221; или &#8220;init&#8221;), target (это всегда отсылка на SWFAddress) а также массив parameters (&#8220;ассоциативный&#8221;)   с параметрами из queryString. Если в адресной строке есть news?param=value, то значение param можно получить так : SWFAddressEvent.parameters.param</p>
<p>Какие замечены баги.</p>
<p>1. Самый неприятный. В опере любое переключение между страницами ИЗ браузера (навигация вперед назад, якоря) вызывает полную перезагрузку страницы. Не очень то красиво, особенно если это флеш сайт с какими то особенными переходами между страницами. К счастью внутренние флешовые переходы проходят как обычно.</p>
<p>2.Если вручную вставить адрес в браузерной строке в FireFox &#8211; адресная строка перестает изменяться, когда переключаешься между разделами. Вроде как адреса заносятся в history, навигация вперед.назад работает,  но это не отображается в адресной строке. В принципе &#8211; я лично замечал вообще странное поведение адресной строки в Фоксе, и без дип линкинга, например иногда в ней просто невозможно перенабрать адрес.</p>
<p>Работоспособность проверена на:</p>
<ul>
<li>Mozzilla FireFox 2.0.0.12</li>
<li>Opera 9.10</li>
<li>IE 6.0</li>
<li>Safari (win) 3.0.3</li>
</ul>
<p>В завершении могу только дать ссылку на первый свой опыт с SWFAddress, где вы можете потестировать работоспособность библиотеки в разных браузерах. Будет полезно, если здесь вы запостите свои баг репорты, ну или зададите вопросы о том, что осталось непонятным. Цель этого топика &#8211; сделать эту бесспорно полезную опцию более доступной всем категориям разработчиков )) Поэтому -включайтесь )</p>
<p><a href="http://kvadra.net/samples/goodpeople/_flash/#chillout/two?pgid=2t&#038;imgid=36">http://kvadra.net/samples/goodpeople/_flash/#chillout/two?pgid=2t&#038;imgid=36 </a></p>
<img src="http://murejib.com/?ak_action=api_record_view&id=36&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://murejib.com/2008/02/26/swfaddress/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
	</channel>
</rss>

