Inserting Flash

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(→‎Upload: Article section rewritten.)
m
 
(16 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
{{#CUSTOMTITLE:Inserting Flash}}
 
__TOC__
 
__TOC__
−
 
 
CKEditor allows you to add [http://www.adobe.com/flashplatform/ Adobe Flash] files to your documents in an easy and intuitive way.
 
CKEditor allows you to add [http://www.adobe.com/flashplatform/ Adobe Flash] files to your documents in an easy and intuitive way.
  
−
To insert a Flash object simply press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. The '''Flash Properties''' dialog window that will open lets you set configuration options that define the Flash object's source, its size, display properties, or other advanced properties.
+
In order to insert a Flash object, press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. The '''Flash Properties''' dialog window that will open lets you set configuration options that define the Flash object source, its size, display properties, or other advanced properties.
  
 
The '''Flash Properties''' dialog window includes four tabs that group Flash object options:
 
The '''Flash Properties''' dialog window includes four tabs that group Flash object options:
−
* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Flash#General|General]]
+
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#General|General]]
−
* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Flash#Upload|Upload]]
+
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Upload|Upload]]
−
* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Flash#Properties|Properties]]
+
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Properties|Properties]]
−
* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Flash#Advanced|Advanced]]
+
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Advanced|Advanced]]
−
 
 
−
All tabs contain the [[Image:CKEditor_ok_button.png‎|OK]] and [[Image:CKEditor_cancel_button.png‎|Cancel]] buttons that let you accept the changes or close the dialog window without performing any changes, respectively.
 
−
 
 
−
Once inserted into the document, the Flash object can be edited at any time by double-clicking it. The '''Flash Properties''' dialog window will open again and you will be able to introduce changes to the Flash object configuration options.
 
−
 
 
−
If you attempt to close the '''Flash Properties''' dialog window without saving the changes, you will be prompted to do so:
 
−
 
 
−
[[Image:CKEditor_image_changed.png|frame|center|alt=An alert window prompting to save the changes made to the Flash object|An alert window prompting to save the changes made to the Flash object]]
 
−
 
 
−
 
 
−
You can either proceed without saving your changes by choosing '''OK''' or close the alert window with the '''Cancel''' command and save the changes.
 
  
 +
{{CKEditor Dialog Windows}}
  
 
== General ==
 
== General ==
−
 
 
The '''General''' tab is the default tab that opens after you press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. It allows you to set the URL of the Flash object and configure the way it will appear in the document.
 
The '''General''' tab is the default tab that opens after you press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. It allows you to set the URL of the Flash object and configure the way it will appear in the document.
  
−
[[Image:CKEditor_flash_general.png|frame|center|alt=General tab of the Flash Properties window|General tab of the Flash Properties window]]
+
[[Image:CKEditor_flash_general.png|frame|center|General tab of the Flash Properties window]]
  
  
 
Below is an overview of all '''General''' tab elements:  
 
Below is an overview of all '''General''' tab elements:  
−
* '''URL''' — the web address of the Flash object. The object may be located on the same server as the web site you are now in or on an external server.
+
* '''URL''' – the web address of the Flash object. The object may be located on the same server as the web site you are currently in or on an external server.
 
** External server: If you want to use an external address, use the full absolute path.
 
** External server: If you want to use an external address, use the full absolute path.
 
**: Example:
 
**: Example:
−
**: http://example.com/flash1.swf
+
**: <code><nowiki>http://example.com/flash1.swf</nowiki></code>
−
** Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.
+
** Local server: If the image is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
 
**: Example:
 
**: Example:
−
**: [[/animations/flash2.swf]]
+
**: <code><nowiki>/animation/flash2.swf</nowiki></code>
 
**: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select a Flash object from the ones that are available on the server.
 
**: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select a Flash object from the ones that are available on the server.
  
−
* '''Width''' &mdash;  the width of the Flash object in pixels.
+
* '''Width''' &ndash;  the width of the Flash object in pixels.
−
* '''Height''' &mdash; the height of the Flash object in pixels.
+
* '''Height''' &ndash; the height of the Flash object in pixels.
  
−
* '''HSpace''' &mdash; the horizontal spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
+
* '''HSpace''' &ndash; the horizontal spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
−
* '''VSpace''' &mdash; the vertical spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
+
* '''VSpace''' &ndash; the vertical spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
  
−
* '''Preview''' &mdash; a preliminary view of the selected Flash object formatted according to the options chosen above.
+
* '''Preview''' &ndash; a preliminary view of the selected Flash object formatted according to the options chosen above.
  
 
== Upload ==
 
== Upload ==
−
 
 
The '''Upload''' tab of the '''Flash Properties''' dialog window allows you to send your own Flash objects to the server. It is only visible if the server accepts files uploaded by the users and CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]).
 
The '''Upload''' tab of the '''Flash Properties''' dialog window allows you to send your own Flash objects to the server. It is only visible if the server accepts files uploaded by the users and CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]).
  
−
[[Image:CKEditor_flash_upload.png|frame|center|alt=Upload tab of the Flash Properties window|Upload tab of the Flash Properties window]]
+
[[Image:CKEditor_flash_upload.png|frame|center|Upload tab of the Flash Properties window]]
  
  
 
To upload a Flash file, click the file input field or the '''Browse''' button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the '''Open''' button. To send the file to the server, click the '''Send it to the Server''' button of CKEditor.
 
To upload a Flash file, click the file input field or the '''Browse''' button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the '''Open''' button. To send the file to the server, click the '''Send it to the Server''' button of CKEditor.
  
−
=== Properties ===
+
== Properties ==
 +
The '''Properties''' tab lets you configure various Flash options that control the behavior of the inserted object. They also provide access to Adobe Flash Player settings that enable the object to play automatically or loop.
 +
 
 +
[[Image:CKEditor_flash_properties.png|frame|center|Properties tab of the Flash Properties window]]
 +
 
 +
 
 +
Below is an overview of all '''Properties''' tab elements:
 +
* '''Scale''' &ndash; the parameter that controls the scaling, stretching, or shrinking of the Flash object when the browser window is resized (<code>scale</code> attribute). You can choose between the following options:
 +
** '''Show all''' &ndash; the entire object is visible with original aspect ratio retained. Borders may be present.
 +
** '''No Border''' &ndash; the object is scaled to fit within the specified area without any borders, with original aspect ratio retained (the sides of the object may be cropped).
 +
** '''Exact Fit''' &ndash; the entire object is visible within the specified area, but the original aspect ratio might not be retained thus making the object distorted.
 +
* '''Script Access''' &ndash; the parameter that controls the ability of the Flash object to communicate with the page it is embedded in (<code>allowScriptAccess</code> attribute). You can choose between the following options:
 +
** '''Always''' &ndash; the Flash object can communicate with the HTML page it is embedded in even if they are from different domains.
 +
** '''Same domain''' &ndash; the Flash object can communicate with the HTML page it is embedded in only if they are from the same domain.
 +
** '''Never''' &ndash; the Flash object cannot communicate with the HTML page it is embedded in.
 +
* '''Window mode''' &ndash; the parameter that controls the layering of the Flash object in the browser window (<code>wmode</code> attribute). You can choose between the following options:
 +
** '''Window''' &ndash; the Flash object is shown in its own window on a document.
 +
** '''Opaque''' &ndash; the Flash object hides everything underneath.
 +
** '''Transparent''' &ndash; the document background shows through all transparent parts of the Flash object.
 +
* '''Quality''' &ndash; the parameter that controls the relation between the speed of the object and its appearance (<code>quality</code> attribute). You can choose between the following options:
 +
** '''Best''' &ndash; best appearance, speed is disregarded.
 +
** '''High''' &ndash; appearance is favored over speed.
 +
** '''Auto Hig'''h &ndash; speed and appearance are equally emphasized.
 +
** '''Medium''' &ndash; speed is favored over quality, but some anti-aliasing is applied.
 +
** '''Auto Low''' &ndash; speed is favored over quality, but quality is improved whenever possible.
 +
** '''Low''' &ndash; speed is favored over quality and anti-aliasing is never applied.
 +
* '''Align''' &ndash; the parameter that controls the alignment of the Flash object in the document (<code>align</code> attribute). You can choose between the following options: '''Left''', '''Abs Bottom''', '''Abs Middle''', '''Baseline''', '''Bottom''', '''Middle''', '''Right''', '''Text Top''', or '''Top'''.
 +
 
  
−
The third bookmark is the "Properties" section:
+
The '''Properties''' tab lets you configure four additional options pertaining to the Flash Player:
 +
* '''Enable Flash Menu''' &ndash; the parameter that controls whether the Flash context menu is enabled.
 +
* '''Auto Play''' &ndash; the parameter that controls whether the Flash object will start playing automatically right after you open the document.
 +
* '''Loop''' &ndash; the parameter that controls whether the Flash object will play continuously in a loop.
 +
* '''Allow Fullscreen''' &ndash; the parameter that controls whether the Flash object may be played in the full screen mode.
  
−
[[Image:CKEditor_properties_flash.png]]
+
== Advanced ==
 +
The '''Advanced''' tab lets you configure additional Flash object options such as assign it an ID, a class, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the Flash object is concerned.
  
−
This bookmark allows user to set following options:
+
[[Image:CKEditor_flash_advanced.png|frame|center|Advanced tab of the Flash Properties window]]
  
−
* '''Scale''' specifies scale of the flash object. User may choose one option from following possibilities:Show all, No Border, Exact Fit.
 
−
* '''Script Access''' specifies how to run external scripts. User may choose one of three  options: Always, Same domain, Never.
 
−
* '''Window mode''' specifies how to window looks like. User may choose one from: Window, Opaque, Transparent.
 
−
* '''Quality''': specifies the quality of the flash object. User may choose one of six option: Best, High, Auto High, Medium, Auto Low, Low.
 
−
* '''Align''': specifies the alignment of the flash object. User may choose from: Left, Abs Bottom, Abs Middle, Baseline, Bottom, Middle, Right, Text Top or Top.
 
  
−
And checkbox option:
+
Below is the overview of all '''Advanced''' tab elements:
−
* '''Enable Flash Menu''' if you check this option context flash menu will be enabled.
 
−
* '''Auto Play''' if you check this option flash will start immediately.
 
−
* '''Loop''' if you check this option flash will play in loop.
 
−
* '''Allow Fullscreen''' if you check this option flash may be shown in full screen.
 
  
 +
* '''Id''' &ndash; a unique identifier for a Flash object element in the document (<code>id</code> attribute).
 +
* '''Advisory Title''' &ndash; the text of the tooltip that is shown when the mouse cursor hovers over the Flash object (<code>title</code> attribute).
 +
* '''Background color''' &ndash; the color that is visible beneath the transparent portions of the Flash object.
 +
* '''Stylesheet Classes''' &ndash; the class of the Flash object element (<code>class</code> attribute). Note that a Flash object element might be assigned more than one class. If this is a case, separate class names with spaces.
 +
* '''Style''' &ndash; CSS style definitions (<code>style</code> attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
  
−
Press "'''OK'''" to save the changes.
+
== Flash Object Preview ==
 +
Please note that on inserting into the document, the Flash object will be displayed in the CKEditor editing area as a fake element.
  
−
=== Advanced ===
+
[[Image:CKEditor_flash_example.png|frame|center|Flash object as seen in the editor window]]
  
−
This bookmark allow user to set advanced properties:
 
  
−
[[Image:CKEditor_flash_advanced.png]]
+
If you want to see check its final appearance, press the [[Image:CKEditor_preview.png|Preview]] toolbar button to use the [[CKEditor_3.x/Users_Guide/Document/Preview|Preview]] feature of CKEditor. The figure below shows the same Flash object in the preview mode.
  
−
* '''Id''': specifies the ID of the flash object.
+
[[Image:CKEditor_flash_preview.png|frame|center|Flash object as seen in the preview window]]
−
* '''Advisory Title''': specifies the description of the target object.
 
−
* '''Background color''': sets background's color.
 
−
* '''Stylesheet Classes''': specifies the name of the CSS class.
 
−
* '''Style''': specifies the style.
 

Latest revision as of 12:45, 8 August 2012

CKEditor allows you to add Adobe Flash files to your documents in an easy and intuitive way.

In order to insert a Flash object, press the Flash button on the toolbar. The Flash Properties dialog window that will open lets you set configuration options that define the Flash object source, its size, display properties, or other advanced properties.

The Flash Properties dialog window includes four tabs that group Flash object options:

For general information on using dialog windows please refer to the Dialog Windows section of the User's Guide.

General

The General tab is the default tab that opens after you press the Flash button on the toolbar. It allows you to set the URL of the Flash object and configure the way it will appear in the document.

General tab of the Flash Properties window


Below is an overview of all General tab elements:

  • URL – the web address of the Flash object. The object may be located on the same server as the web site you are currently in or on an external server.
    • External server: If you want to use an external address, use the full absolute path.
      Example:
      http://example.com/flash1.swf
    • Local server: If the image is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
      Example:
      /animation/flash2.swf
      If CKEditor is integrated with a file browser (like CKFinder), you can also use the Browse Server button to select a Flash object from the ones that are available on the server.
  • Width – the width of the Flash object in pixels.
  • Height – the height of the Flash object in pixels.
  • HSpace – the horizontal spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
  • VSpace – the vertical spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
  • Preview – a preliminary view of the selected Flash object formatted according to the options chosen above.

Upload

The Upload tab of the Flash Properties dialog window allows you to send your own Flash objects to the server. It is only visible if the server accepts files uploaded by the users and CKEditor is integrated with a file browser (like CKFinder).

Upload tab of the Flash Properties window


To upload a Flash file, click the file input field or the Browse button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the Open button. To send the file to the server, click the Send it to the Server button of CKEditor.

Properties

The Properties tab lets you configure various Flash options that control the behavior of the inserted object. They also provide access to Adobe Flash Player settings that enable the object to play automatically or loop.

Properties tab of the Flash Properties window


Below is an overview of all Properties tab elements:

  • Scale – the parameter that controls the scaling, stretching, or shrinking of the Flash object when the browser window is resized (scale attribute). You can choose between the following options:
    • Show all – the entire object is visible with original aspect ratio retained. Borders may be present.
    • No Border – the object is scaled to fit within the specified area without any borders, with original aspect ratio retained (the sides of the object may be cropped).
    • Exact Fit – the entire object is visible within the specified area, but the original aspect ratio might not be retained thus making the object distorted.
  • Script Access – the parameter that controls the ability of the Flash object to communicate with the page it is embedded in (allowScriptAccess attribute). You can choose between the following options:
    • Always – the Flash object can communicate with the HTML page it is embedded in even if they are from different domains.
    • Same domain – the Flash object can communicate with the HTML page it is embedded in only if they are from the same domain.
    • Never – the Flash object cannot communicate with the HTML page it is embedded in.
  • Window mode – the parameter that controls the layering of the Flash object in the browser window (wmode attribute). You can choose between the following options:
    • Window – the Flash object is shown in its own window on a document.
    • Opaque – the Flash object hides everything underneath.
    • Transparent – the document background shows through all transparent parts of the Flash object.
  • Quality – the parameter that controls the relation between the speed of the object and its appearance (quality attribute). You can choose between the following options:
    • Best – best appearance, speed is disregarded.
    • High – appearance is favored over speed.
    • Auto High – speed and appearance are equally emphasized.
    • Medium – speed is favored over quality, but some anti-aliasing is applied.
    • Auto Low – speed is favored over quality, but quality is improved whenever possible.
    • Low – speed is favored over quality and anti-aliasing is never applied.
  • Align – the parameter that controls the alignment of the Flash object in the document (align attribute). You can choose between the following options: Left, Abs Bottom, Abs Middle, Baseline, Bottom, Middle, Right, Text Top, or Top.


The Properties tab lets you configure four additional options pertaining to the Flash Player:

  • Enable Flash Menu – the parameter that controls whether the Flash context menu is enabled.
  • Auto Play – the parameter that controls whether the Flash object will start playing automatically right after you open the document.
  • Loop – the parameter that controls whether the Flash object will play continuously in a loop.
  • Allow Fullscreen – the parameter that controls whether the Flash object may be played in the full screen mode.

Advanced

The Advanced tab lets you configure additional Flash object options such as assign it an ID, a class, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the Flash object is concerned.

Advanced tab of the Flash Properties window


Below is the overview of all Advanced tab elements:

  • Id – a unique identifier for a Flash object element in the document (id attribute).
  • Advisory Title – the text of the tooltip that is shown when the mouse cursor hovers over the Flash object (title attribute).
  • Background color – the color that is visible beneath the transparent portions of the Flash object.
  • Stylesheet Classes – the class of the Flash object element (class attribute). Note that a Flash object element might be assigned more than one class. If this is a case, separate class names with spaces.
  • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

Flash Object Preview

Please note that on inserting into the document, the Flash object will be displayed in the CKEditor editing area as a fake element.

Flash object as seen in the editor window


If you want to see check its final appearance, press the Preview toolbar button to use the Preview feature of CKEditor. The figure below shows the same Flash object in the preview mode.

Flash object as seen in the preview window
Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Users_Guide/Rich_Text/Flash&oldid=7198"
This page was last edited on 8 August 2012, at 12:45.