{"__v":6,"_id":"567b4a937c40060d00560438","category":{"__v":11,"_id":"555668821026001900d72a87","pages":["567b4a6f93919f0d00c97aed","567b4a7b4cde0321001e1194","567b4a88ee052b1700dbd9f3","567b4a937c40060d00560438","567b4a9fb56bac0d0019d8f4","567b4aad3241c20d00b730a2","567b4ab793919f0d00c97aef","567b4ac5ee052b1700dbd9f5","567b4b837c40060d0056043b","567b5a3b4cde0321001e119d","567b5e8aee052b1700dbda08"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T21:43:30.888Z","from_sync":false,"order":6,"slug":"extend","title":"Component Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-12-24T01:29:55.627Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"The Source section of the Component Studio lets you edit various basic component properties, like the associated SWF file, dimensions, and dependencies.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Preview\"\n}\n[/block]\nThis area of the workspace shows a visual preview of the component with its default settings. If a Part is chosen in the Parts panel, the preview will show just the selected Part with its default settings\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Inspector Panel\"\n}\n[/block]\nThe Inspector panel in the Source Section has three tabs. Each is described below.\n\n## Settings\nEdit general component settings.\n\n  * **Source: **The HTML/JS or Flash file associated with your component. \n  * **Initial Width and Initial Height:** The component’s dimensions when it is dropped onto the Stage in Design Studio. The ad designer may resize the component after that, but these will always be its initial dimensions.\n\n## Dependencies\nTurn on the API dependencies necessary for your component.\n\nWhen the Ad API object is passed to a component, it contains some basic functionality by default. However, a lot of additional functionality can be switched on using this Dependencies tab.\n\nFor example, by default a component does not have access to our feed proxy and feed parsing API. However, if you are building a component that contains feeds, you can switch on this access. This way, specialized functionality can be activated on an as-needed basis, and is not loaded when it is not needed. We do this in order to reduce the file size of the ads using your component.\n\nThe following dependencies are available. See the associated sections of the Ad API Documentation to learn about the functionality enabled by each dependency.\n\n  * **Transition:** Enable our transitions engine, which includes linear, exponential, elastic, and bounce transformations.\n  * **Cookie Manager:** Enable getting, setting and deleting cookies.\n  * **Data Store:** Enable storing and retrieving key/value pairs to/from Flite's servers, and creating custom forms and polls.\n  * **Feed Parser:** Enable RSS and Atom feed parsing functionality.\n  * **Feed Proxy:** Enable use of Flite's feed proxy.\n  * **Geolocation:** Enable basic geolocation functionality.\n  * **Theme:** Enable use of Flite's theme elements, including scrollbar, loading spinner, and sharing controls.\n  * **Twitter Proxy:** Enable use of Flite’s Twitter proxy for components using Twitter functionality.\n  * **Video:** Enable loading and playback of videos. \n\n## Help \nAdd documentation for your component.\n\nWhen your component is dropped onto the Stage in Design Studio, its Settings in the Inspector panel will have a  icon. Clicking this icon will launch a lightbox with the component documentation.\n\nClick the *Include component help button* to add component documentation. Then toggle between *Edit* and *Preview* modes to make changes to the help text and preview your changes, respectively. Use Markdown to add headings, basic styling, images, and links to your help content. [See here for Markdown syntax help](http://daringfireball.net/projects/markdown/dingus).","excerpt":"","slug":"component-studio-source-section","type":"basic","title":"Source Section"}

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio

Source Section

The Source section of the Component Studio lets you edit various basic component properties, like the associated SWF file, dimensions, and dependencies. [block:api-header] { "type": "basic", "title": "Preview" } [/block] This area of the workspace shows a visual preview of the component with its default settings. If a Part is chosen in the Parts panel, the preview will show just the selected Part with its default settings [block:api-header] { "type": "basic", "title": "Inspector Panel" } [/block] The Inspector panel in the Source Section has three tabs. Each is described below. ## Settings Edit general component settings. * **Source: **The HTML/JS or Flash file associated with your component. * **Initial Width and Initial Height:** The component’s dimensions when it is dropped onto the Stage in Design Studio. The ad designer may resize the component after that, but these will always be its initial dimensions. ## Dependencies Turn on the API dependencies necessary for your component. When the Ad API object is passed to a component, it contains some basic functionality by default. However, a lot of additional functionality can be switched on using this Dependencies tab. For example, by default a component does not have access to our feed proxy and feed parsing API. However, if you are building a component that contains feeds, you can switch on this access. This way, specialized functionality can be activated on an as-needed basis, and is not loaded when it is not needed. We do this in order to reduce the file size of the ads using your component. The following dependencies are available. See the associated sections of the Ad API Documentation to learn about the functionality enabled by each dependency. * **Transition:** Enable our transitions engine, which includes linear, exponential, elastic, and bounce transformations. * **Cookie Manager:** Enable getting, setting and deleting cookies. * **Data Store:** Enable storing and retrieving key/value pairs to/from Flite's servers, and creating custom forms and polls. * **Feed Parser:** Enable RSS and Atom feed parsing functionality. * **Feed Proxy:** Enable use of Flite's feed proxy. * **Geolocation:** Enable basic geolocation functionality. * **Theme:** Enable use of Flite's theme elements, including scrollbar, loading spinner, and sharing controls. * **Twitter Proxy:** Enable use of Flite’s Twitter proxy for components using Twitter functionality. * **Video:** Enable loading and playback of videos. ## Help Add documentation for your component. When your component is dropped onto the Stage in Design Studio, its Settings in the Inspector panel will have a icon. Clicking this icon will launch a lightbox with the component documentation. Click the *Include component help button* to add component documentation. Then toggle between *Edit* and *Preview* modes to make changes to the help text and preview your changes, respectively. Use Markdown to add headings, basic styling, images, and links to your help content. [See here for Markdown syntax help](http://daringfireball.net/projects/markdown/dingus).