Screen Library Overview

Article Overview

This library stores the screenshots and screen replicas that form the immersive and interactive learning experiences (UX).  The Screen Replica Library is completely separate from the Image Library which stores graphics most commonly used for thumbnails, banners, and other interface purposes (UI).  The functionality inside the Screen Replica Library is much more extensive than that of the Image Library. 

1. How to Access the Screen Replica Library
2. Components of a Screen Card
   • Screen Name, Labels, Lock, Image Tools, Lesson Count & Link(s)
3. Library Display, Search, & Sort Options
4. Autocrop & Autoconvert Toggles
5. Adding Screenshots to the Library
6. Functions you can Complete in Bulk
   • Archive, Convert, Edit
7. XD Plugin

Video Overview

1) How to Access the Screen Replica Library

Accessing the Screen Replica Library from the Skyllful Menu

1. Use the Skyllful Menu to drill down to the Screen Replica Library.  Choose your Program, then [Studio], then [Screen Library].

Accessing the Screen Replica Library via Quick Links

1. Open your Learning Program using the Learning Program Card or the Skyllful Menu.

2. Click [Screen Replica Library] in the Quick Links. 

Accessing the Screen Replica Library from Lesson Builder Screen Fields

Option A - You can access the Screen Replica Library by clicking into ANY screen field. 

Option B - If a screen or placeholder is already loaded, you click the [Replace Icon] 

2) Components of a Screen Card

Screen Name

• The screen name (title) is along the top of the card
• Screen names can be edited by double-clicking 
• Screen names cannot have spaces

Screen Labels

• XD
  • These Screen Replicas were created using Adobe XD and are imported as HTML files
• SCREENSHOT
  • This is a static image capture, generally reflective of learner's workflow interface.
  • A screenshot has no interactive components and the image editor (Replica Maker) will not work until the Screenshot is converted into a Screen Replica
• AI
  • This indicates the screen/image has been converted into an HTML format that can be edited and made to be interactive through the editor (Replica Maker)
• DRAFT
  • The draft label indicates the screen has not been edited.  
  • Screenshots will always be labeled as drafts because you can't edit them in Replica Maker
  • AI will only be labeled as 'draft' when it was converted but never edited (this includes adding buttons, editing text, adjusting the background, etc.) 

Lock Icon

• The lock icon indicates the screen is being used in a lesson that has been published

Image Tools

• EDIT
  • The Skyllful Image Editor is called 'Replica Maker'
  • Click here to access Replica Maker resources
• REPLACE HTML/SCREENSHOT
  • This feature is most helpful when you have a change in the software/work environment and you want to update a screen that is used in your lessons.  
• DOWNLOAD HTML 
• DUPLICATE
• ARCHIVE 
  • This can only be reversed on the back-end, so archive screens with caution

Lesson Count & Link(s)

1.  If the screen is used in any lessons, the number of lessons will be annotated on the card.  Clicking on the arrow will open a list of lesson names and hyperlinks that will take you into Lesson Builder
2.  If the screen is not used in any lessons, you will see a grayed out (0) 

3) Library Display, Search & Sort Options

Library Display

A - By default, the library is organized into tiles of screen cards 

B - You can change the display to detail format.

Library Search

1. Click the magnifier to open the search field

2. Searching in Skyllful libraries doesn't require a complete title - partial matches will be filtered as you type

4) Autocrop & Autoconvert Toggles

If you enable the Autocrop toggle, all images you import while it is active will be cropped automatically. If you enable the Autoconvert toggle, all Screenshots will be converted into Screen Replicas upon import.

5) Adding Screenshots to the Library

Drag & Drop Screenshots into the Library

Importing Screenshots from a File System

Drag & Drop Screenshots into Lesson Builder

When you drag & drop screenshots directly into lesson steps, they are automatically added to the Screen Replica Library

Capture Screenshots using the Replica Video Capture Tool

6) Functions you can Complete in Bulk

Import screens in bulk

Convert Screenshots into Screen Replicas in batches

You can select multiple screens simultaneously using the shift and control keys.

Edit Screen Replicas in batches

You can select multiple screens simultaneously using the shift and control keys.

Archive screens in bulk

You can select multiple screens simultaneously using the shift and control keys.

7) XD Plugin

If you use XD to build HTML screens, you can download the XD Plugin from the Screen Library's 3-dot overflow menu