Importing vector graphics

Jun 07, 2012

Storyline works with vector graphics (shapes, cartoon characters, etc.) but I can't figure out a way to import them. I can insert an eps file in PowerPoint and import into Storyline, but the vector is converted to a raster. Can it be done somehow?

74 Replies
P-Y Beaulieu

Hello there.

I have been trying to insert and use vector files using this thread, and I can't get it to work.

For instance, here is a screenshot of the Charlene image posted in this thread, inserted in SL and then blown up. It is pixellated so guessing it has rastered somehow...

Thoughts? Thx

Ashley Terwilliger-Pollard

Hi PY,

Are you viewing the HTML5 output perhaps? If so objects aren't vectored in HTML5 output. As a result, they may not appear as crisp in HTML5 as they do in Flash if you set the player to scale to fill the browser. To avoid scaling and reduction in image quality, we recommend locking your course player at optimal size.

Also, because objects aren't vectored in HTML5 output, they may look blurry or pixelated in zoom regions.

Ashley Terwilliger-Pollard

This thread is a bit older, but it doesn't seem that you're able to insert vector graphics directly based on their file types alone,  so this thread offered a few ideas and workarounds on how to set that up. Sorry I can't offer more help with that - but I'd defer to the community for their expertise here. Perhaps scaling the image prior to inserting it would allow you to keep the same quality. 

Gerry Wasiluk

One thing that sometimes work if the original graphic looks good before publishing or previewing and you scaled the graphic down to fit properly on your slide . . .

1) After you size your graphic down into place on your Storyline slide.

2) Right-click on the graphic and save out as a PNG to your computer.

3) Right-click on the original graphic and replace with the PNG version that you just saved.

P-Y Beaulieu

Hi Ashley, this is disappointing to hear as many other threads about vector graphics are pointing to here as "the way to import and use vector graphics in Storyline". And the way that the thread above was ending seemed to suggest that the suggestions here were actual solutions that worked. I was telling my client it wasn't possible to import graphics as vectors in SL, and he kept pointing me to this thread telling me to just do what was in there...

Thanks for the suggestion, but scaling before importing defies the point of having vector graphics in Storyline, which is the ability to scale content very small or very big and use Flash's vectorial output to make graphics crystal-clear, and also allowing browser size to seamlessly rescale.

Is it possible to confirm with your development team that all WMF or EMF imported in SL will be rasterized upon importing, and that there is absolutely no way to work with vectors inside SL other than what we draw in there?

And yes Gerry, resizing your PNG by saving as or using Photoshop is good to optimize graphics for a fixed browser size. However, my extensive tests have also shown that when the content scales with browser window, the best compromise for various sizes will in most cases be to import the graphics in the best resolution available and just scale down in SL. ( also happens to be the easiest way :) )

Ashley Terwilliger-Pollard

Hi PY,

Sorry for my confusion and therefore throwing you off here - my reply before seemed to be missing the word "alone" in terms of if it wasn't working for you based on file type alone, that the steps here were good ones to check through. The vector images are supported in Flash - but not HTML5 or AMP as per the documentation.

Taking a look a few of the images shared here (as I didn't have a way to create any of those file types myself) I can see that some behave better than others. I can't say with specificity why, as I didn't create them and the image files are not my specialty - but take a look at the two different camel images shared on page 1. The first one doesn't scale or work as expected once inserted - but the second one does. I'd suggest to go back and look at your images and how they were created using some of the feedback here to ensure they were set up to be vectored and able to scale. 

Hope that helps clarify and feel free to let me know if you need anything else. 

Jerson  Campos

EMF and WMF files are not really the best vector formats.  You can't use gradients and masks (WMF). If you have any in the illustrator files and you export it to WMF/EMF formats it will convert gradients and masks to raster images. 

I hope in the next update/version Articulate fixes this and lets us import EPS file formats.

Mark Gretzinger
Jerson Campos

EMF and WMF files are not really the best vector formats.  You can't use gradients and masks (WMF). If you have any in the illustrator files and you export it to WMF/EMF formats it will convert gradients and masks to raster images. 

I hope in the next update/version Articulate fixes this and lets us import EPS file formats.

 

Agreed. Or give us the tools to edit the points of a custom shape in SL.

John Black

Jason - If you are correct, eliminating masks and gradients before creating the wmf file would enable proper scaling of vector files. That would be workable, if not optimal. However, the camel graphic does not have either masks or gradients and it rasterizes anyway.

(I attached my original Adobe Illustrator file in case you want to confirm.)

Kay Chan

Hi everyone,

I know this thread is old. I signed up just to comment. I may be late but here's how I managed to work-around importing vector into AS2 without raster conversion or compromising the quality of my vector images. This will not allow me to manipulate the shapes and colors after I've brought it into AS2, however. This will only preserve the integrity of my image regardless of how much I scaled it within AS2.

Note: You will need Illustrator, Powerpoint, and Articulate Storyline 2. This was done on a Mac with AI installed native on OSX, PPT on Windows 7 of Bootcamp, and AS2 on Windows 7 of Bootcamp. You may find better or different results depending on your rig. There is a possibility this method may not work if you are running both AI and PPT native on OSX, though. Just a theory I haven't the luxury to test out. Chances are, however, if it works on mine, it should definitely work on yours.

  1. Design your shape (or even your entire scene/slide) in illustrator with as many art boards needed. Each artboard will represent different slides if you choose to do the majority of the designing in illustrator. Avoid clipping masks if possible... you'll thank me later. Save your work as AI (for backup).
  2. Save your art boards as EPS. Be sure to check the size of your slide (art board) and convert your pixel measurements to inches before saving it to EPS. This will save you some headaches later when jumping into Powerpoint.
  3. This step may take awhile for the app to process. Import your EPS file to a Powerpoint slide via drag and drop (be sure to adjust the size of your slide to match the measurement of your art board). You will notice that your images will look a bit jagged. That's just how Powerpoint is interpreting your file.
  4. Size up your image to the desired dimension. If done correctly to this point you should only just need to center your image to fit snuggly into your slide (give or take a few hundredth of an inch).
  5. Select your image, right-click, and choose "edit image". A warning appears telling you Powerpoint will convert the image to something more native than EPS. Accept it and you should now see the wonderfully clean vector-type image you had been expecting.
  6. Select your image, ungroup, clean up bounding boxes accordingly. You should be able to adjust fills, strokes, and whatever else within the constraints of Powerpoint to each and every object you ungrouped.
  7. Group any objects you will want AS2 to interpret as a single object such as logos and outlined text. Repeat steps 3-7 for each art board you want on their respective slides.
  8. Save your work as a Powerpoint presentation (.PPT).
  9. Start a new project in AS2 and adjust your dimensions accordingly.
  10. Click on the INSERT tab, click New Slide, click the Import tab, click on the Powerpoint logo, select your PPT file, click Open, click Select All, and finally click Import.
  11. Grab a beer. It may take awhile to load. Once it's in you'll see you have objects stacked up on your timeline ready to be triggered and sized to your liking without worrying about image quality.

There you go. I hope this was helpful and I hope I didn't explain anything that was already mentioned. As far as importing actual text/font is concerned... you're on your own and I'm definitely all ears. Anyone else see the irony in having to learn so much about an eLearning software?

Cheers