mycoding (блог) , 8 мая 2011 - 06:58

Flex

Буду размещать здесь уроки по flex.
Прошу пока не оценивать и не комментировать.

Вступление

Flex - это flash framework.
Для студентов распространяется даром.
Достаточно послать заявку на сайте Adobe с электронной версией студенческого.
Через две недели прийдёт программа и ключ.

Примеры в интернете

Вот здесь;
очень много примеров от Adobe.

Делаем кнопку

Flex код

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:s="library://ns.adobe.com/flex/spark">	
<s:Button label="click me"/> 
</s:Application>

Результат

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>	
    <head>
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen"> 
html, body	{ height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; 
background-color: #ffffff; } 
#flashContent { display:none; }
        </style>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="http://moc-081.ru/flex/samples/history/history.js"></script>;

        <script type="text/javascript" src="http://moc-081.ru/flex/samples/swfobject.js"></script>;
        <script type="text/javascript">
            var swfVersionStr = "10.0.0";
            var xiSwfUrlStr = "http://moc-081.ru/flex/samples/playerProductInstall.swf";;
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "Main";
            attributes.name = "Main";
            attributes.align = "middle";
            swfobject.embedSWF(
                "http://moc-081.ru/flex/samples/button.swf";, "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);	
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body> 
        <div id="flashContent">
        	<p>
To view this page ensure that Adobe Flash Player version 
10.0.0 or greater is installed. 
</p>
<script type="text/javascript"> 
var pageHost = ((document.location.protocol == "https:") ? "https://"; :	"http://";); 
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+ pageHost + 
"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'; alt='Get Adobe Flash player' /></a>" ); 
</script> 
        </div>
       	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="Main">
                <param name="movie" value="http://moc-081.ru/flex/samples/button.swf"; />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="http://moc-081.ru/flex/samples/button.swf"; width="100%" 
height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                	<p> 
                	 Either scripts and active content are not permitted to run or Adobe Flash Player version
                	 10.0.0 or greater is not installed.
                	</p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">;
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"; alt="Get Adobe 
Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
</noscript>	
   </body>
</html>

Кнопка + сообщение

Flex код

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>

<s:Button label="Нажать">
<s:click>	
mx.controls.Alert.show('Заголовок','Текст');
</s:click>
</s:Button>
</s:Application>

Результат

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>	
    <head>
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen"> 
html, body	{ height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; 
background-color: #ffffff; } 
#flashContent { display:none; }
        </style>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="http://moc-081.ru/flex/samples/history/history.js"></script>;

        <script type="text/javascript" src="http://moc-081.ru/flex/samples/swfobject.js"></script>;
        <script type="text/javascript">
            var swfVersionStr = "10.0.0";
            var xiSwfUrlStr = "http://moc-081.ru/flex/samples/playerProductInstall.swf";;
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "Main";
            attributes.name = "Main";
            attributes.align = "middle";
            swfobject.embedSWF(
                "http://moc-081.ru/flex/samples/buttonmessage.swf";, "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);	
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body> 
        <div id="flashContent">
        	<p>
To view this page ensure that Adobe Flash Player version 
10.0.0 or greater is installed. 
</p>
<script type="text/javascript"> 
var pageHost = ((document.location.protocol == "https:") ? "https://"; :	"http://";); 
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+ pageHost + 
"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'; alt='Get Adobe Flash player' /></a>" ); 
</script> 
        </div>
       	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="Main">
                <param name="movie" value="http://moc-081.ru/flex/samples/button.swf"; />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="http://moc-081.ru/flex/samples/buttonmessage.swf"; 
width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                	<p> 
                	 Either scripts and active content are not permitted to run or Adobe Flash Player version
                	 10.0.0 or greater is not installed.
                	</p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">;
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"; alt="Get Adobe 
Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
</noscript>	
   </body>
</html>

Видео плеер и как получить swf

Для того, чтобы получить swf файл, который гораздо меньше, чем если экспортировать проект в html(Получается
около 1.4 мб) надо на панели инструментов найти кнопку экспорта сборки. После того как сборка была сделана,
получится много файлов в том числе и Main.swf вот его надо взять а всё остальное удалить. (Может я не прав, но
так делаю сам)

Теперь код видео плеера

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
height="332" width="405">	
<fx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
]]>
</fx:Script>	
<s:Panel title="Пример видеоплеера" 
width="200" height="50" x="22" y="10" >
<s:VGroup left="10">
<s:VideoPlayer id="videoPlayer" 
horizontalCenter="100" y="50"
source="http://vreshenie.ru/mercator.mp4";
autoPlay="false"
autoRewind="true"/> 
</s:VGroup>
</s:Panel>

</s:Application>

Результат

<object height="332" align="middle" width="405" type="application/x-shockwave-flash" id="Main" name="Main" 
data="http://vreshenie.ru/work/flex/video.swf"><param name="quality" value="high"><param name="bgcolor" 
value="#ffffff"><param name="allowscriptaccess" value="sameDomain"><param name="allowfullscreen" value="true">
</object>

Video display control

Код

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" width="345" height="266">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
]]>
</fx:Script>

<fx:Declarations>
<fx:String id="TitleText"><![CDATA["<b>VideoDisplay Control:</b><br />Use the buttons to control the video."]]>
</fx:String>
</fx:Declarations>	

<s:Button label="Play" color="0x00000" click="myVid.play();" x="58" y="235"/>
<s:Button label="Pause" color="0x00000" click="myVid.pause();" x="136" y="235"/>
<s:Button label="Stop" color="0x00000" click="myVid.stop();" x="217" y="235"/>
<s:VideoDisplay id="myVid" height="221" width="296" source="http://vreshenie.ru/mercator.mp4"; 
autoPlay="false" x="22" y="10"/>

</s:Application>

Результат

<object height="332" align="middle" width="405" type="application/x-shockwave-flash" id="Main" name="Main" 
data="http://vreshenie.ru/work/flex/video2.swf"><param name="quality" value="high"><param name="bgcolor" 
value="#ffffff"><param name="allowscriptaccess" value="sameDomain"><param name="allowfullscreen" value="true">
</object>

Блог: mycoding

Отправить комментарий

Приветствуются комментарии:

Полезные.
Дополняющие прочитанное.
Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
Для остальных вопросов и обсуждений есть форум.

P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

Ваше имя:

Адрес электронной почты:

Содержание этого поля является приватным и не предназначено к показу.

Домашняя страница:

Комментарий: *

Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
Строки и параграфы переносятся автоматически.
Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA

Антиспам

Вопрос: * 7 + 6 =

Введите результат. Например, для 1+3, введите 4.

Поиск по сайту

Другие записи этого автора
mycoding Ext Core для NodeJS Фишки JS Реактивный JS Comet NodeJS

Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
еще

Последние комментарии

THE ONE CARGO ผู้ให้บริการ...
4 часа 36 минут назад
The newest Gacor online slot bookie is...
7 часов 39 минут назад
As a Gacor slot agent site, it is a...
8 часов 3 минуты назад
hy
8 часов 19 минут назад
As a Gacor slot agent site, it is a...
9 часов 2 минуты назад
As an online slot agent now you can get...
9 часов 24 минуты назад
hunter1688...
9 часов 55 минут назад
Gacor Maxwin Slot provides a site that...
10 часов 16 минут назад
As a slot agent site, Gacor is a type...
10 часов 30 минут назад
The newest Gacor online slot site is...
11 часов 14 минут назад

Последние темы на форуме

Forum

Форум

Справочник

Discord чат

Курсы javascript

Flex

Вступление

Примеры в интернете

Делаем кнопку

Кнопка + сообщение

Видео плеер и как получить swf

Video display control

Отправить комментарий

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное