I'm new to storyline but i loved the features after trying it for nearly 5 days. My teaching process have been lot easier with Storyline. Thanks alot. However, im trying to create a flipbook (similar to Engage but with interaction) in storyline for my studies, but i don't know how. I tried importing the flipbook file in Engage to Storyline, still it was not working as how i wanted (flipping). Please help me. How can i create a flipbook using Storyline from scratch, or any template available. Thanks alot. I appreciate it.
Hi Subashini - if you already have a flipbook interaction that you created in Engage, you should be able to import the .intr file into Storyline using the steps inthis tutorial. Keep in mind, though, that when you import from Engage, the Engage content is only supported in your Flash output - it's not supported if you publish for HTML5 or the Articulate Mobile Player on an iPad.
Another alternative would be to build your flipbook-style content right in Storyline. This might be the better approach, because then it will work for Flash, HTML5, and iPad output, and if you ever need to edit the content, you wouldn't need to open up Engage to do it. Here is an example, and the source file is attached in case you'd like to adapt it for your own use. For the graphics, I just imported some of the existing assets fromthis free PowerPoint templateand modified things slightly, such as giving the corner of the page a little hover effect to make it look like the page was curling up a little bit. You could easily modify and expand on this...like if you wanted to change the color of the cover, you could go to the slide master (View > Slide Master) and just change the fill color on the black rectangle shape.
Good luck with your project - we'd love to see what you come up with!
Hi Arturo, the book image was actually built originally in PowerPoint, and you can check out the original source file here. When you draw something like that in either PowerPoint or Storyline, you can select the objects and press Ctrl+G to group them, and then right-click the group and chose Save As Picture. Most people like to save their homemade graphics in PNG format because it preserves any transparency. Attached is a zip file containing PNGs of the book front, book back, and post it note.
Thank you for your response. When I download the flipbook-images.zip it download as a TGZ file format. Is that correct? I tried open it in Storyline and it says "Unable to Open this file. It was created in a newer version of Storyline."
Hi Arturo - the attachment I posted a few minutes ago is a zip file, so you'll need to extract (unzip) the contents. There are 3 .png files in the attachment.
If you are using Storyline, however, you can alternatively use the source file posted earlier, near the top of the thread. Here is the link to download the Storyline file (but keep in mind, it too is zipped, so you'll need to extract the contents before you can open the file in Storyline).
Thanks, Jeanette. Added to my resources. Question: is the page curl (for the hover) an image? Did you create it yourself? I'd like to be able to do that with some of the things I'm working on. I see it a lot, and I like it!
Hi Becky - yah, it's just an image. The one in that project is white, so it works fine with a white background but not so great with pages that have other colors/patterns/textures. Attached is a different version that Mike created, where he knocked out the white part so that it's transparent and can be used just about anywhere.
Thanks, Jeanette. So here's a question. I tried that page curl out on 4 different pieces of paper: yellow ruled, yellow sticky, white paper with a grey tinge, and white lined paper. In "real life", when the page is lifted up, the "underneath" page looks just like it: yellow lined, white lined, etc. But not with this page curl. So how would you create that real-life effect in Storyline? Or perhaps PowerPoint to import into SL?
Becky - regarding using a page curl effect on objects that represent patterned or textured page paper images, there are a few directions you could go with that. One approach would be to use a graphics program to knock out the gray "underneath" part of the page-curl image, so that when you insert it on any other shape, whatever's actually behind it will show through.
Another approach would be to use PowerPoint to create your own pagecurl shape (without the underneath part of the page) and use that. This basically involves drawing a shape and then using the Edit Points option to make it curvier. The Edit Points option isn't currently available in Storyline, so if you went that route on a Storyline project, you'd need to right-click the shape in PowerPoint, save it as a PNG, and then insert the PNG into your Storyline project. Hereare a couple way to do it:
Thanks for the Screenr and tutorial links. I created a page curl. It probably won't look so great to y'all with "eagle graphic designer eyes" . Just trying to play with it relatively quickly to see if I could push through to where I want to be and then get advice from y'all.
I'm uploading a PPT where I placed the curl on top of yellow lined paper. This is what I'd like to achieve. When the page is curled back, I'd like it to show the same color, pattern, what have you as it would if you did it in real life.
If you look at the notes inside the ppt, you'll see what I did. Any suggestions for improvement are much appreciated!
Looks really nice Becky! I like it. One thing that might make it pop out just a little more is if you use a very slightly darker color for the page underneath (you can do this by drawing a right-angle triangle and applying a custom fill color), and add a shape with soft edges to serve as a shadow. To be honest, though, these are super-miniscule details... you could go all crazy with this sort of thing and spend loads of time tweaking, without creating a hugely noticeable difference. But in case you're interested, a slightly tweaked version's attached. Fun to play with this sort of stuff.
Wow, Jeanette. That looks great. I just pulled it apart to see more clearly what you meant.
Question: Is that page curl really OK? If so, I can use it on other things. And I don't want to spend time finessing it. But I rely on your (and others with graphic design experience) critical eye, and if I need to tweak it I will spend the time.
Hey Becky! As with any visual design element, there's no end to how much changing or tweaking you could do. For what it's worth, to me it looks great. Like you, I am not a "trained" graphic designer. I rely on great ideas that I observe in print & web designs, and I try to adopt the things that seem to work really well.
Tx, Jeanette. Your opinion counts for me! I'm working hard to train my eye. This forum helps a great deal. Appreciate your replying to my question. Plan to take what you showed me with the shadows and make page curls for all 4 corners.
Hi, I'm trying to use this flipbook example, but I can't figure out how the .png has a hover effect! The Storyline sample with "click to turn" text has it as just a rectangle, but there is no object trigger. ?? I can't figure out how to adjust the size of the page curl. If I adjust the size, it only changes the text box. I don't see that it's grouped, so I'm totally lost.
Hi Laurel. Select the "click to turn" textbox and then click the States tab below your slide. You'll see that a Hover state has been created there. If you're not sure how to create or modify a hover state, here's a tutorial that should help: https://player.vimeo.com/video/149069215 In the flipbook project, rather than just modify the appearance of the textbox, I replaced it with the pagecurl graphic.
47 Replies
Hi Subashini - if you already have a flipbook interaction that you created in Engage, you should be able to import the .intr file into Storyline using the steps in this tutorial. Keep in mind, though, that when you import from Engage, the Engage content is only supported in your Flash output - it's not supported if you publish for HTML5 or the Articulate Mobile Player on an iPad.
Another alternative would be to build your flipbook-style content right in Storyline. This might be the better approach, because then it will work for Flash, HTML5, and iPad output, and if you ever need to edit the content, you wouldn't need to open up Engage to do it. Here is an example, and the source file is attached in case you'd like to adapt it for your own use. For the graphics, I just imported some of the existing assets from this free PowerPoint template and modified things slightly, such as giving the corner of the page a little hover effect to make it look like the page was curling up a little bit. You could easily modify and expand on this...like if you wanted to change the color of the cover, you could go to the slide master (View > Slide Master) and just change the fill color on the black rectangle shape.
Good luck with your project - we'd love to see what you come up with!
Hi Jeanette,
Thank you so much. Will try to create the flipbook now and inform/send you and the team of the output. I really appreciate your help. Thanks again
...
Hi Jeanette - I can't find the source files for this - would love to use them if they are still available. Thanks!
Hi Helen - the files are available here. Hope that helps.
Thanks so much Jeanette!
Hello,
I was wondering where I can get the graphic of the closed book (front and back)
Thank you.
Hi Arturo, the book image was actually built originally in PowerPoint, and you can check out the original source file here. When you draw something like that in either PowerPoint or Storyline, you can select the objects and press Ctrl+G to group them, and then right-click the group and chose Save As Picture. Most people like to save their homemade graphics in PNG format because it preserves any transparency. Attached is a zip file containing PNGs of the book front, book back, and post it note.
Hi Jeanette,
Thank you for your response. When I download the flipbook-images.zip it download as a TGZ file format. Is that correct? I tried open it in Storyline and it says "Unable to Open this file. It was created in a newer version of Storyline."
Thank you,
Arturo
Hi Arturo - the attachment I posted a few minutes ago is a zip file, so you'll need to extract (unzip) the contents. There are 3 .png files in the attachment.
If you are using Storyline, however, you can alternatively use the source file posted earlier, near the top of the thread. Here is the link to download the Storyline file (but keep in mind, it too is zipped, so you'll need to extract the contents before you can open the file in Storyline).
Yay!!
Thanks Jeanette--you rock!!
Thanks, Jeanette. Added to my resources. Question: is the page curl (for the hover) an image? Did you create it yourself? I'd like to be able to do that with some of the things I'm working on. I see it a lot, and I like it!
Hi Becky - yah, it's just an image. The one in that project is white, so it works fine with a white background but not so great with pages that have other colors/patterns/textures. Attached is a different version that Mike created, where he knocked out the white part so that it's transparent and can be used just about anywhere.
Thanks, Jeanette. So here's a question. I tried that page curl out on 4 different pieces of paper: yellow ruled, yellow sticky, white paper with a grey tinge, and white lined paper. In "real life", when the page is lifted up, the "underneath" page looks just like it: yellow lined, white lined, etc. But not with this page curl. So how would you create that real-life effect in Storyline? Or perhaps PowerPoint to import into SL?
Just wanted to say a big thanks for that flipbook, perfect fit for my next little project!
Becky - regarding using a page curl effect on objects that represent patterned or textured page paper images, there are a few directions you could go with that. One approach would be to use a graphics program to knock out the gray "underneath" part of the page-curl image, so that when you insert it on any other shape, whatever's actually behind it will show through.
Another approach would be to use PowerPoint to create your own pagecurl shape (without the underneath part of the page) and use that. This basically involves drawing a shape and then using the Edit Points option to make it curvier. The Edit Points option isn't currently available in Storyline, so if you went that route on a Storyline project, you'd need to right-click the shape in PowerPoint, save it as a PNG, and then insert the PNG into your Storyline project. Hereare a couple way to do it:
http://community.articulate.com/tutorials/courses/creating-the-chapter-label-graphics.aspx or https://player.vimeo.com/video/204871215
Jeanette,
Thanks for the Screenr and tutorial links. I created a page curl. It probably won't look so great to y'all with "eagle graphic designer eyes"
. Just trying to play with it relatively quickly to see if I could push through to where I want to be and then get advice from y'all.
I'm uploading a PPT where I placed the curl on top of yellow lined paper. This is what I'd like to achieve. When the page is curled back, I'd like it to show the same color, pattern, what have you as it would if you did it in real life.
If you look at the notes inside the ppt, you'll see what I did. Any suggestions for improvement are much appreciated!
Looks really nice Becky! I like it. One thing that might make it pop out just a little more is if you use a very slightly darker color for the page underneath (you can do this by drawing a right-angle triangle and applying a custom fill color), and add a shape with soft edges to serve as a shadow. To be honest, though, these are super-miniscule details... you could go all crazy with this sort of thing and spend loads of time tweaking, without creating a hugely noticeable difference. But in case you're interested, a slightly tweaked version's attached. Fun to play with this sort of stuff.
Wow, Jeanette. That looks great. I just pulled it apart to see more clearly what you meant.
Question: Is that page curl really OK? If so, I can use it on other things. And I don't want to spend time finessing it. But I rely on your (and others with graphic design experience) critical eye, and if I need to tweak it I will spend the time.
Hey Becky! As with any visual design element, there's no end to how much changing or tweaking you could do. For what it's worth, to me it looks great.
Like you, I am not a "trained" graphic designer. I rely on great ideas that I observe in print & web designs, and I try to adopt the things that seem to work really well.
Tx, Jeanette. Your opinion counts for me! I'm working hard to train my eye. This forum helps a great deal. Appreciate your replying to my question. Plan to take what you showed me with the shadows and make page curls for all 4 corners.
Jeanette,
Thanks for sharing
Geert
Thanks for sharing.
Thank you so much for sharing this. I am only 2 weeks into learning Storyline, and I am learning so much by looking at samples such as this one.
Hi, I'm trying to use this flipbook example, but I can't figure out how the .png has a hover effect! The Storyline sample with "click to turn" text has it as just a rectangle, but there is no object trigger. ?? I can't figure out how to adjust the size of the page curl. If I adjust the size, it only changes the text box. I don't see that it's grouped, so I'm totally lost.
Thanks!
Hi Laurel. Select the "click to turn" textbox and then click the States tab below your slide. You'll see that a Hover state has been created there. If you're not sure how to create or modify a hover state, here's a tutorial that should help: https://player.vimeo.com/video/149069215 In the flipbook project, rather than just modify the appearance of the textbox, I replaced it with the pagecurl graphic.