PageRenderTime 46ms CodeModel.GetById 16ms RepoModel.GetById 0ms app.codeStats 0ms

/qooxdoo-2.1.1-sdk/documentation/manual/pages/widget/flash.html

https://bitbucket.org/vegansk/test_qooxdoo
HTML | 337 lines | 311 code | 21 blank | 5 comment | 0 complexity | 1ab82b2da56171691792ca943aa3574e MD5 | raw file
    

  1. 

  2. 

  3. <!doctype html>
    4. 

  4. 

  5. 

  6. 

  7. <html xmlns="http://www.w3.org/1999/xhtml">
    8. 

  8.   <head>
    9. 

  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    10. 

  10.     
    11. 

  11.     <title>Flash &mdash; qooxdoo 2.1.1 documentation</title>
    12. 

  12.     
    13. 

  13.     <link rel="stylesheet" href="../../_static/theme.css" type="text/css" />
    14. 

  14.     <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
    15. 

  15.     <link rel="stylesheet" href="../../_static/copies/reset.css" type="text/css" />
    16. 

  16.     <link rel="stylesheet" href="../../_static/copies/base.css" type="text/css" />
    17. 

  17.     <link rel="stylesheet" href="../../_static/copies/layout.css" type="text/css" />
    18. 

  18.     
    19. 

  19.     <script type="text/javascript">
    20. 

  20.       var DOCUMENTATION_OPTIONS = {
    21. 

  21.         URL_ROOT:    '../../',
    22. 

  22.         VERSION:     '2.1.1',
    23. 

  23.         COLLAPSE_INDEX: false,
    24. 

  24.         FILE_SUFFIX: '.html',
    25. 

  25.         HAS_SOURCE:  true
    26. 

  26.       };
    27. 

  27.     </script>
    28. 

  28.     <script type="text/javascript" src="../../_static/copies/html5shiv.js"></script>
    29. 

  29.     <script type="text/javascript" src="../../_static/copies/q.js"></script>
    30. 

  30.     <script type="text/javascript" src="../../_static/copies/q.placeholder.js"></script>
    31. 

  31.     <script type="text/javascript" src="../../_static/copies/q.sticky.js"></script>
    32. 

  32.     <script type="text/javascript" src="../../_static/copies/application.js"></script>
    33. 

  33.     <script type="text/javascript" src="../../_static/jquery.js"></script>
    34. 

  34.     <script type="text/javascript" src="../../_static/underscore.js"></script>
    35. 

  35.     <script type="text/javascript" src="../../_static/doctools.js"></script>
    36. 

  36.     <link rel="top" title="qooxdoo 2.1.1 documentation" href="../../index.html" />
    37. 

  37.     <link rel="up" title="Widget Reference List" href="toctree.html" />
    38. 

  38.     <link rel="next" title="Image" href="image.html" />
    39. 

  39.     <link rel="prev" title="Iframe" href="iframe.html" />
    40. 

  40. <link rel="shortcut icon" href="http://resources.qooxdoo.org/images/qx-favicon.png" />
    41. 

  41. 

  42.   </head>
    43. 

  43.   <body>
    44. 

  44. <div id="main-wrapper" class="sphinx">
    45. 

  45. <div id="header-wrapper">
    46. 

  46.   <section id="header">
    47. 

  47.     <h1><a href="http://qooxdoo.org/">qooxdoo</a></h1>
    48. 

  48.     <nav>
    49. 

  49.       <ul>
    50. 

  50.         <!--
    51. 

  51.         <li>
    52. 

  52.           <a class="" href="http://qooxdoo.org/">home</a>
    53. 

  53.         </li>
    54. 

  54.         -->
    55. 

  55.         <li>
    56. 

  56.           <a href="http://news.qooxdoo.org">blog</a>
    57. 

  57.         </li>
    58. 

  58.         <li>
    59. 

  59.           <a class="" href="http://qooxdoo.org/demos">demos</a>
    60. 

  60.         </li>
    61. 

  61.         <li>
    62. 

  62.           <a class="" href="http://qooxdoo.org/downloads">downloads</a>
    63. 

  63.         </li>
    64. 

  64.         <li>
    65. 

  65.           <a class="active" href="http://qooxdoo.org/docs">docs</a>
    66. 

  66.         </li>
    67. 

  67.         <li>
    68. 

  68.           <a class="" href="http://qooxdoo.org/community">community</a>
    69. 

  69.         </li>
    70. 

  70.       </ul>
    71. 

  71.     </nav>
    72. 

  72.     <script type="template" id="search-options-template">
    73. 

  73.       <select>
    74. 

  74.         <option value="site">Site</option>
    75. 

  75.         <option value="manual">Manual</option>
    76. 

  76.         <option value="blog">Blog</option>
    77. 

  77.         <option value="bugs">Bugs</option>
    78. 

  78.       </select>
    79. 

  79.     </script>
    80. 

  80.     <script type="template" id="search-site-template">
    81. 

  81.       <form action="http://qooxdoo.org/" id="search-form">
    82. 

  82.         <input type="hidden" name="do" value="search">
    83. 

  83.         <input type="search" name="id" placeholder="Search"></input>
    84. 

  84.       </form>
    85. 

  85.     </script>
    86. 

  86.     <script type="template" id="search-blog-template">
    87. 

  87.       <form method="get" id="searchform" action="http://news.qooxdoo.org/" id="search-form">
    88. 

  88.         <input type="search" class="field" name="s" id="s" placeholder="Search">
    89. 

  89.       </form>
    90. 

  90.     </script>
    91. 

  91.     <script type="template" id="search-manual-template">
    92. 

  92.       <form action="../../search.html" id="search-form">
    93. 

  93.         <input type="search" name="q" placeholder="Search"></input>
    94. 

  94.       </form>
    95. 

  95.     </script>
    96. 

  96.     <script type="template" id="search-bugs-template">
    97. 

  97.       <form action="http://bugs.qooxdoo.org/buglist.cgi" id="search-form">
    98. 

  98.         <input type="search" name="quicksearch" placeholder="Search"></input>
    99. 

  99.       </form>
    100. 

  100.     </script>
    101. 

  101.     <div id="search">
    102. 

  102.     </div>
    103. 

  103.   </section>
    104. 

  104. <div class="decoration"></div>
    105. 

  105. </div>
    106. 

  106.  
    107. 

  107. <section id="main">
    108. 

  108.   <section id="breadcrumb">
    109. 

  109.       
    110. 

  110.   <a href="http://qooxdoo.org">Home</a> &raquo;
    111. 

  111.     <a href="../../index.html">Manual (v2.1.1)</a>
    112. 

  112.        &raquo;
    113. 

  113.       <a href="../references.html" >References</a>
    114. 

  114.        &raquo;
    115. 

  115.       <a href="widget_ref.html" >Widget Reference</a>
    116. 

  116.        &raquo;
    117. 

  117.       <a href="toctree.html" accesskey="U">Widget Reference List</a>
    118. 

  118.      &raquo;
    119. 

  119.     <a href="">Flash</a>
    120. 

  120.     </section>
    121. 

  121.     <section id="content">
    122. 

  122.       <div class="body">
    123. 

  123.         
    124. 

  124.   <div class="section" id="flash">
    125. 

  125. <span id="pages-widget-flash-flash"></span><h1>Flash<a class="headerlink" href="#flash" title="Permalink to this headline"></a></h1>
    126. 

  126. <p>Container widget for Flash.</p>
    127. 

  127. <div class="section" id="preview-image">
    128. 

  128. <span id="pages-widget-flash-preview-image"></span><h2>Preview Image<a class="headerlink" href="#preview-image" title="Permalink to this headline"></a></h2>
    129. 

  129. <p><a class="reference external" href="../../_images/flash.png"><img alt="widget/flash.png" src="../../_images/flash.png" style="width: 419px;" /></a></p>
    130. 

  130. </div>
    131. 

  131. <div class="section" id="description">
    132. 

  132. <span id="pages-widget-flash-description"></span><h2>Description<a class="headerlink" href="#description" title="Permalink to this headline"></a></h2>
    133. 

  133. <p>A flash movie can be controlled to a certain extent directly from JavaScript with a number of commands.</p>
    134. 

  134. <p>These commands do not cover all Flash commands, so if you need more functionality you have to fuse an ActionScript with the Flash movie and start using the ExternalInterface to communicate.</p>
    135. 

  135. <p>To be able to use the JavaScript commands, three conditions must be full-filled:</p>
    136. 

  136. <ol class="arabic simple">
    137. 

  137. <li>the flash object must have been loaded to the DOM tree</li>
    138. 

  138. <li>the flash object must have received an id</li>
    139. 

  139. <li>the flash movie or document must have been enough loaded</li>
    140. 

  140. </ol>
    141. 

  141. <p>To implement this functionality in qooxdoo we have added three events: &quot;loading&quot;, &quot;loaded&quot; and &quot;timeout&quot;. When the event &quot;loading&quot; is fired the three conditions have not been full-filled, and therefore the commands can't be used. If you wanna make sure the flash object is fully loaded and ready to be used listen to the &quot;loaded&quot; event. When the &quot;loaded&quot; event is fired you can start communicating directly with the Flash object. A &quot;timeout&quot; event is fired when the flash objects fails to load. You can also use the method isLoaded() in code to make sure that the Flash object is actually loaded.</p>
    142. 

  142. <p>Here's an example that shows how you can control changing to previous frame of a flash movie.</p>
    143. 

  143. <div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">flashWidget</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">qx</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">embed</span><span class="p">.</span><span class="nx">Flash</span><span class="p">(</span><span class="s2">&quot;/flash.swf&quot;</span><span class="p">);</span>
    144. 

  144. 

  145. <span class="nx">flashWidget</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="s2">&quot;loaded&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    146. 

  146.   <span class="kd">var</span> <span class="nx">flashFE</span> <span class="o">=</span> <span class="nx">flashWidget</span><span class="p">.</span><span class="nx">getFlashElement</span><span class="p">();</span>
    147. 

  147. 

  148.   <span class="kd">var</span> <span class="nx">currentFrame</span> <span class="o">=</span> <span class="nx">flashFE</span><span class="p">.</span><span class="nx">CurrentFrame</span><span class="p">();</span>
    149. 

  149.   <span class="kd">var</span> <span class="nx">totalFrames</span> <span class="o">=</span> <span class="nx">flashFE</span><span class="p">.</span><span class="nx">TotalFrames</span><span class="p">();</span>
    150. 

  150. 

  151.   <span class="kd">var</span> <span class="nx">newFrame</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">currentFrame</span><span class="p">)</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
    152. 

  152. 

  153.   <span class="k">if</span><span class="p">(</span><span class="nx">totalFrames</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">newFrame</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span>
    154. 

  154.   <span class="p">{</span>
    155. 

  155.     <span class="nx">flashFE</span><span class="p">.</span><span class="nx">GotoFrame</span><span class="p">(</span><span class="nx">newFrame</span><span class="p">);</span>
    156. 

  156.   <span class="p">}</span>
    157. 

  157. <span class="p">});</span>
    158. 

  158. </pre></div>
    159. 

  159. </div>
    160. 

  160. </div>
    161. 

  161. <div class="section" id="demos">
    162. 

  162. <span id="pages-widget-flash-demos"></span><h2>Demos<a class="headerlink" href="#demos" title="Permalink to this headline"></a></h2>
    163. 

  163. <p>Here are some links that demonstrate the usage of the widget:</p>
    164. 

  164. <ul class="simple">
    165. 

  165. <li><a class="reference external" href="http://demo.qooxdoo.org/2.1.1/demobrowser/#widget~Flash.html">Embeded Flash in qooxdoo</a></li>
    166. 

  166. </ul>
    167. 

  167. </div>
    168. 

  168. <div class="section" id="api">
    169. 

  169. <span id="pages-widget-flash-api"></span><h2>API<a class="headerlink" href="#api" title="Permalink to this headline"></a></h2>
    170. 

  170. <div class="line-block">
    171. 

  171. <div class="line">Here is a link to the API of the Widget:</div>
    172. 

  172. <div class="line"><a class="reference external" href="http://demo.qooxdoo.org/2.1.1/apiviewer/#qx.ui.embed.Flash">qx.ui.embed.Flash</a></div>
    173. 

  173. </div>
    174. 

  174. </div>
    175. 

  175. </div>
    176. 

  176. 

  177. 

  178.       </div>
    179. 

  179.       <div class="bottom-nav">
    180. 

  180.           <a class="prev" href="iframe.html"
    181. 

  181.              title="previous chapter">« Iframe</a>
    182. 

  182.           <span class="separator">|</span>
    183. 

  183.           <a class="next" href="image.html"
    184. 

  184.              title="next chapter">Image »</a>
    185. 

  185.       </div>
    186. 

  186.     </section>
    187. 

  187.     <section id="sidebar">
    188. 

  188.       <div class="sphinxsidebar">
    189. 

  189.         <div class="sphinxsidebarwrapper">
    190. 

  190.   <ul>
    191. 

  191. <li><a class="reference internal" href="#">Flash</a><ul>
    192. 

  192. <li><a class="reference internal" href="#preview-image">Preview Image</a></li>
    193. 

  193. <li><a class="reference internal" href="#description">Description</a></li>
    194. 

  194. <li><a class="reference internal" href="#demos">Demos</a></li>
    195. 

  195. <li><a class="reference internal" href="#api">API</a></li>
    196. 

  196. </ul>
    197. 

  197. </li>
    198. 

  198. </ul>
    199. 

  199. 

  200.   <h4>» Next topic</h4>
    201. 

  201.   <p class="topless"><a href="image.html"
    202. 

  202.                         title="next chapter">Image</a></p>
    203. 

  203.   <h4>« Previous topic</h4>
    204. 

  204.   <p class="topless"><a href="iframe.html"
    205. 

  205.                         title="previous chapter">Iframe</a></p>
    206. 

  206. <div id="searchbox" style="display: none">
    207. 

  207.   <h3>Quick search</h3>
    208. 

  208.     <form class="search" action="../../search.html" method="get">
    209. 

  209.       <input type="text" name="q" />
    210. 

  210.       <input type="submit" value="Go" />
    211. 

  211.       <input type="hidden" name="check_keywords" value="yes" />
    212. 

  212.       <input type="hidden" name="area" value="default" />
    213. 

  213.     </form>
    214. 

  214.     <p class="searchtip" style="font-size: 90%">
    215. 

  215.     Enter search terms or a module, class or function name.
    216. 

  216.     </p>
    217. 

  217. </div>
    218. 

  218. <script type="text/javascript">
    219. 

  219.   // $('#searchbox').show(0);
    220. 

  220. </script>
    221. 

  221.         </div>
    222. 

  222.       </div>
    223. 

  223.   </section>
    224. 

  224. </section>
    225. 

  225. </div> 
    226. 

  226. <div id="footer-wrapper">
    227. 

  227.   <footer id="footer">
    228. 

  228.     <div id="supported-by">
    229. 

  229.       <a href="http://1and1.com">
    230. 

  230.         <img src="http://resources.qooxdoo.org/images/1and1.png">
    231. 

  231.       </a>
    232. 

  232.       <p class="claim">
    233. 

  233.         Brought to you by <a href="http://1and1.com">1&amp;1</a>, one of the world's leading web hosts
    234. 

  234.       </p>
    235. 

  235.       <p class="legal">
    236. 

  236.         © 1&amp;1 Internet AG<br>
    237. 

  237.         <a href="http://qooxdoo.org/legal">Legal notice</a>
    238. 

  238.       </a>
    239. 

  239.     </div>
    240. 

  240.     <div id="sitemap">
    241. 

  241.       <div>
    242. 

  242.         <h3><a href="http://qooxdoo.org/">Home</a></h3>
    243. 

  243.         <ul>
    244. 

  244.           <li>
    245. 

  245.             <a href="http://qooxdoo.org/demos">Demos</a>
    246. 

  246.           </li>
    247. 

  247.           <li>
    248. 

  248.             <a href="http://qooxdoo.org/download">Download</a>
    249. 

  249.           </li>
    250. 

  250.           <li>
    251. 

  251.             <a href="http://news.qooxdoo.org">Blog</a>
    252. 

  252.           </li>
    253. 

  253.           <li>
    254. 

  254.             <a href="http://bugs.qooxdoo.org">Bugs</a>
    255. 

  255.           </li>
    256. 

  256.           <li>
    257. 

  257.             <a href="http://qooxdoo.org/license">License</a>
    258. 

  258.           </li>
    259. 

  259.         </ul>
    260. 

  260.       </div>
    261. 

  261.       <div>
    262. 

  262.         <h3><a href="http://qooxdoo.org/docs">Docs</a></h3>
    263. 

  263.         <ul>
    264. 

  264.           <li>
    265. 

  265.             
    266. 

  266.             <a href="http://manual.qooxdoo.org/2.1.1/pages/introduction/about.html">About</a>
    267. 

  267.           </li>
    268. 

  268.           <li>
    269. 

  269.             <a href="http://manual.qooxdoo.org/2.1.1/pages/getting_started.html">Getting Started</a>
    270. 

  270.           </li>
    271. 

  271.           <li>
    272. 

  272.             <a href="http://manual.qooxdoo.org/2.1.1/pages/website.html">Website</a>
    273. 

  273.           </li>
    274. 

  274.           <li>
    275. 

  275.             <a href="http://manual.qooxdoo.org/2.1.1/pages/mobile.html">Mobile</a>
    276. 

  276.           </li>
    277. 

  277.           <li>
    278. 

  278.             <a href="http://manual.qooxdoo.org/2.1.1/pages/desktop.html">Desktop</a>
    279. 

  279.           </li>
    280. 

  280.           <li>
    281. 

  281.             <a href="http://manual.qooxdoo.org/2.1.1/pages/server.html">Server</a>
    282. 

  282.           </li>
    283. 

  283.         </ul>
    284. 

  284.       </div>
    285. 

  285.       <div>
    286. 

  286.         <h3><a href="http://qooxdoo.org/community">Community</a></h3>
    287. 

  287.         <ul>
    288. 

  288.           <li>
    289. 

  289.             <a href="http://qooxdoo.org/community/contribution">Get Involved</a>
    290. 

  290.           </li>
    291. 

  291.           <li>
    292. 

  292.             <a href="http://qooxdoo.org/community/mailing_lists">Mailing List</a>
    293. 

  293.           </li>
    294. 

  294.           <li>
    295. 

  295.             <a href="http://qooxdoo.org/community/real_life_examples">Real Life Examples</a>
    296. 

  296.           </li>
    297. 

  297.           <li>
    298. 

  298.             <a href="http://qooxdoo.org/community/events">Events</a>
    299. 

  299.           </li>
    300. 

  300.           <li>
    301. 

  301.             <a href="http://qooxdoo.org/community/jobs_services">Jobs &amp; Services</a>
    302. 

  302.           </li>
    303. 

  303.           <li>
    304. 

  304.             <a href="http://qooxdoo.org/contrib">Contributions</a>
    305. 

  305.           </li>
    306. 

  306.         </ul>
    307. 

  307.       </div>
    308. 

  308.     </div>
    309. 

  309.     <div id="meta">
    310. 

  310.       <div class="social">
    311. 

  311.         <a href="http://twitter.com/qooxdoo">
    312. 

  312.           <img src="http://resources.qooxdoo.org/images/twitter.png">
    313. 

  313.         </a>
    314. 

  314.         <a href="https://www.facebook.com/pages/qooxdoo/187101324711780">
    315. 

  315.           <img src="http://resources.qooxdoo.org/images/facebook.png">
    316. 

  316.         </a>
    317. 

  317.         <a href="http://feeds.feedburner.com/qooxdoo/news/content">
    318. 

  318.           <img src="http://resources.qooxdoo.org/images/feed.png">
    319. 

  319.         </a>
    320. 

  320.       </div>
    321. 

  321.       <div class="notice">
    322. 

  322.         <p class="source">
    323. 

  323.           <strong>
    324. 

  324.             <a href="../../_sources/pages/widget/flash.txt" rel="nofollow">Show Source</a>
    325. 

  325.           </strong>
    326. 

  326.         </p>
    327. 

  327.         <p class="page">
    328. 

  328.               &copy; Copyright 2011-2012, qooxdoo developers.
    329. 

  329.             Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.1.3.
    330. 

  330.         </p>
    331. 

  331.       </div>
    332. 

  332.     </div>
    333. 

  333.   </footer>
    334. 

  334. </div>
    335. 

  335. 

  336.   </body>
    337. 

  337. </html>
    338.