Using components through the panel

Creating a component

The following steps describe how to create a component from a symbol.

  1. Select a symbol in a Coherent Prysm document.

  2. Open the Coherent Prysm 2.0 panel.

  3. Open the "Symbol" tab.

  4. Check the "Publish library item as component".

  5. "Export and preview" the document.

The abovementioned steps will generate a component library folder in the output folder. The folder contains the symbol generated as a component and a library that manages it. In the js directory a new file components_initialization_documentName_sceneName.js is created that loads the generated components in the HTML page. Therefore, the output should look unchanged, as if the element was not made into a component.

Loading a component in a different document

The following steps describe how to load a component in a document.

  1. Open the Coherent Prysm 2.0 panel.
  2. Open the "Document" tab.
  3. Click on the + icon next to "Prysm component libraries".
  4. Click on the file icon next to the "Library description url" input.
  5. Select a library script generated from another document.
    • Check the "Creating a component" steps.
    • After that step, the component library is added to the document and all components from it can be added to the page.
  6. Select a symbol on stage.
  7. Open the "Symbol" tab of the Prysm panel.
  8. Check the "Make prysm component placeholder" checkbox.
  9. Click on the target icon next to the "Component source" input.

  10. Select a component from the newly spawned extension and press OK.

  11. "Export and preview" the document.

The abovementioned steps will cause Prysm to replace the symbol with the component from the library. The HTML generated for the document will link directly to the component library and use it to instantiate components.

Using authortime-sharing to make the workflow better

  1. Create a Coherent Prysm document.
  2. Save the document in folder/src.fla.
  3. Add an image to the stage.
  4. Draw a shape on the stage.
  5. Wrap the image and the shape with a symbol. Name it "my component".
  6. Mark the "Publish library item as component" for the symbol. from there to be published as a component.
  7. Make the output folder folder/srcOut.
  8. Export the document.
  9. Create another Coherent Prysm document.
  10. Save the document in folder/dest.fla.
  11. Open the "Document" tab.
  12. Click on the + icon next to the "Prysm component libraries".
  13. Click on the file icon next to the "Library description url" input.
  14. Select the component library script folder/srcOut/components_library_src/components_library_src.js.
  15. Add the symbol named "my component" from the library of "src" to the library of "dest".
    • The components generated from the "src" document can now be loaded in the "dest" document.
  16. Open the library of the "dest" document.
  17. Right-click the newly generated symbol "my component".
  18. Select properties.
  19. Click on the "Source file" of the "Authortime sharing" menu.
  20. Select "src.fla".
  21. Select the "my component" symbol and press Ok.
  22. Click on "Update automatically".

  23. Press Ok.

    • The "my component" symbol in "dest" is now authortime-shared from "src". The "Update automatically" checkbox updates the "dest" document when the symbol shared from "src" is updated.

  24. Select the "my component" symbol on stage. Since it is authortime-shared the Coherent Prysm panel won't be available.

  25. Wrap the symbol in another symbol by right-clicking -> Convert to Symbol..."
  26. Open the "Symbol" tab.
  27. Check the "Make prysm component placeholder" checkbox.
  28. Click on the target icon next to the "Component source" input.
  29. Select the "src-my-component" component and press Ok.
  30. The wrapped authortime-shared symbol will now be replaced with the "src-my-component".
  31. "Export and preview" the document.

This workflow makes it possible to use a component in a screen and see a working version of the component in the screen. Each time that the screen document is opened, the authortime-shared symbols will be updated on the screen, so you will see updated versions of the component on the screen. However, it is not always possible to have all documents from a project. This workflow fits that scenario as well, since the authortime-shared symbol is wrapped with a symbol that is made into a component, the result is an HTML page that loads a component. Each time that the HTML is previewed it will load the components from the library linked to the document. This means that once the project is synchronized and all components are in their final stage, all screens will also load the latest version.