Your SlideShare is downloading. ×
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CETS 2013, Kate Leifheit, handout for Building a Flash Card Interaction with Articulate Storyline

224

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
224
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Build a Flash Card Interaction: Using States Objectives:  Design a flash card.  Assign animations to graphics.  Create slide layers.  Coordinate slide layers and animations together to create a flash card effect. Step 1: Design the front side of a flash card. 1. Create the basic shape of your flash card (rectangle, square, circle, etc.) 2. Choose and design the information/graphic that will appear on the front of each flash card. 3. Group together each design component of the flash card so there is only one item. 4. Create as many front sides of flash cards as you would like to appear on the main slide. 5. Ensure all components in the Timeline start at 0 seconds and go until the end of the slide. Step 2: Change the “Selected” state of each flash card. 1. Select first flash card. 2. Click on the tab “States.” 3. Click “Edit states.” 4. Click on new layer (paper icon next to Edit States). 5. Name the layer “Selected.” 6. Change the flash card design to appear how you want the back of the flash card to look. 7. Click “Done Editing States.” 3 & 7 4 1 & 6 2
  • 2. Build a Flash Card Interaction: Using Layers Objectives:  Design a flash card.  Assign animations to graphics.  Create slide layers.  Coordinate slide layers and animations together to create a flash card effect. Step 1: Design the front side of a flash card. 1. Create the basic shape of your flash card (rectangle, square, circle, etc.) 2. Choose and design the information/graphic that will appear on the front of each flash card. 3. Group together each design component of the flash card so there is only one item. 4. Create as many front sides of flash cards as you would like to appear on the main slide. 5. Ensure all components in the “Timeline” start at 0 seconds and go until the end of the slide. Step 2: Design the back side of a flash card. 1. Create a new slide layer for each individual flash card and right click on the slide layer in the “Slide Layers” pane to rename this slide layer the appropriate title for each flash card. (e.g., ost 1, para 1, and opthalm 1.) 2. Uncheck “Dim non-selected layers” on the “Slide Layers” pane.
  • 3. 3. Copy and paste the front of the flash card to its matching new slide layer. This shape size can be larger and take up the center of the screen. 4. Include all the information and images you would like on the back side of the flash card. 5. Group all images and text together so that it is one item. Ensure on the timeline that all items start at 0 and stay present until the end of the slide. a. Select the group and apply the following (You may choose any animation that you would like to use to have the flash card appear): i. Animation: Fade in (All at once) ii. Speed: Slow iii. Enter From: Current 6. Right click on each of the flash cards slide layer 1 layer in the “Slide Layers” pane. Click on properties. Apply the following properties: a. Check “Hide other slide layers” b. Check “Hide objects on base layer” (optional: if you want the other flash cards to appear in the background, uncheck this box.) c. Uncheck “Hide slide layers when timeline finished” d. Allow seeking: Automatically decide e. Base Layer: Uncheck all items. f. Revisits: Reset to initial state.
  • 4. Step 3: Coordinate slide layers and animations together to create a flash card effect. 1. Create a second slide layer for each flash card (e.g., ost 2, para 2, and opthalm 2.) 2. Right click on the slide layer in the “Slide Layers” pane to rename this slide layer to match the name of the back side of the flash card, but add a number 2. 3. Copy and paste the image of the back of the flash card, then change the contents to make it look like the original front of the flash card. (Copy and pasting the back of the flash card ensures the size of the image is the same size and location that the “back side of the flash card” appears on the first slide layer.) a. Select the group and apply the following: optional
  • 5. i. If you copied and pasted from the back side of the flash card, ensure the animation is “None” for Entrance. ii. Add exit animation: Shrink (All at Once) iii. Speed: Slow iv. Exit From: Current v. Ensure on the timeline that all items start at 0 and stay present until the end of the slide. The end of the slide should be at the 2 second mark. 4. Select the group again. In the “Triggers” pane click a “New Trigger”. a. Trigger Wizard i. Action: Hide layer ii. Layer: This layer iii. When: User clicks iv. Object: Flash Card Cover v. Click “OK” 5. Copy and paste the “back side of the flash card” image to the new slide layer. Ensure the image is exactly on top of the cover of the flash card you just created. a. Select the group and apply the following: i. Animation: Fade Out (All at Once) ii. Speed: Slow iii. Enter From: Current iv. Ensure on the timeline that the group appears at 0, but stops after 1.25 seconds of a second) before the slide ends (2 seconds). 6. Select the group again. In the “Triggers” pane click a “New Trigger”. a. Trigger Wizard i. Action: Hide layer ii. Layer: This layer iii. When: User clicks
  • 6. iv. Object: Group v. Click “OK” 7. Right click on the slide layer in the “Slide Layers” pane. Click on properties. Apply the following properties: a. Check “Hide other slide layers” b. Uncheck “Hide objects on base layer” c. Uncheck “Hide slide layers when timeline finished d. Allow seeking: Automatically decide e. Base Layer: Uncheck all items. f. Revisits: Reset to initial state. Step 4: Link the main slide to the appropriate flash cards. 1. Return to the main slide with all the fronts of the flash cards. 2. Link the appropriate cover of the flash card with the slide layer that matches its corresponding information for the back side. a. Click on the image of the front of the flash card. b. In the “Triggers” pane click a “New Trigger”. i. Trigger Wizard 1. Action: Show layer 2. Layer: Flash card name 3. When: User clicks 4. Object: Name of flash card 1 5. Click “OK” 3. Click on each “flash card 1” layer. a. Select the group again. In the “Triggers” pane click a “New Trigger”. b. In the “Triggers” pane click a “new Trigger”. i. Trigger Wizard 1. Action: Show layer 2. Layer: Flash card name 2 3. When: User clicks 4. Object: Name of flash card 5. Click “OK”

×