Advanced stuff: my talk of Prezi Day 2013

In my talk of Prezi Day 2013 on October 3rd in Amsterdam I shared some cool advanced Prezi stuff with the audience. It was hard to choose what I was going to show, but I ended up with 10 cool things, from really simple to the technical nerdy stuff.

And here it is for you as well!

1. Mirroring

You might know you can duplicate objects in Prezi with Ctrl+D (win) or Command+D (mac), but you can also mirror objects with Ctrl/Command+Shift+D! I think this is really cool. It works for arrows, lines and images. It doesn’t work for text, symbols and SWF files. This way you can also make a nice reflection without Photoshop! What you extra need is a rectangle frame in the color of the background with a transparency from 0 to 1. You can change the color and transparency of the rectangle frame in Prezi’s CSS editor.

Note: these shortcut combinations might not work in all browsers, I didn’t test all browsers, but I know it doesn’t work in Microsoft IE.

         

2. Gradient  in the background

Always dreamed of a nice smooth gradient in your background? Use Prezi’s CSS editor to create this. Do the following:

  1. Choose Themes > Customize Current Theme.
  2. Choose Advanced.
  3. Choose ‘Use the Prezi CSS editor’.
  4. Find background and change the hexadecimal values.
  5. Click Apply.
No clue what hexadecimal values are? Use colorpicker.com.
Nice to know: it doesn’t matter if you zoom or pan, the colors of your gradient background will be always visible.

3. Frame thickness (and gradient)

A question I hear a lot in my workshops is: “Can I change the thickness of the circle frame?”
And yes, of course you can. Again with Prezi’s CSS editor.

  1. Follow the first three steps of the previous item.
  2. Find frame.circle and change the number behind thickness. Choose a number between 0 and 100.
  3. Click Apply.
But there’s more! You can also choose two gradient colors for the circle frame. Doesn’t this make you really happy?

4. Using Verdana or Arial in your prezi

You can’t use your own fonts in Prezi, but… you can use at least Verdana and Arial (and probably some more fonts). Again… we’ll the Prezi CSS editor for this.

  1. Follow the first three steps of item 2.
  2. Find the text style you want to change. Title is fontFamily: head, Subtitle is fontFamily: strong and Body is fontFamily: body.
  3. Change the font into verdana.keg or arial.keg
  4. Click Apply.

5. Round pictures without Photoshop

Do you also want round pictures, but you don’t know how to use Photoshop? Try this!
Last year I already wrote a blog post about round pictures in Dutch, but the explanation of how it works is also in this prezi. Just copy the prezi it to your account and use it!

And now you can create round pictures in Prezi yourself!

6. Using shapes for infographics

In my opinion graphs contain too much information. You should try to keep your graphs as simple as possible and think more in a infographic way. If details are important, put the detailed graph in a handout and remain the graph for your prezi real simple. You can use Prezi shapes for your infographic-like graph.

  1. Choose Insert > Symbols & shapes > Shapes.
  2. Drag a rectangle to the canvas.
  3. Duplicate the rectangle a few times.
  4. Click a rectangle and drag it at the top to the desired length.
  5. Change the most important rectangle into a different color.
  6. Maybe you want to add some numbers or some other information, but make sure you only add the real important info.

7. Logo: pixels vs. vectors

This is not new but I see it all the time. Ugly pixelated logos. Please, please use the SWF format for your logo. And if you don’t know how the handle Adobe Illustrator or Flash, no problem. Just ask your advertising agency to deliver your logo as a SWF format. I’ll keep it short here, but if you want to read everything about it, read my new book The Ultimate Prezi Guide.

Just three advantages of SWF I want to share with you:

  1. The logo looks nicer;
  2. the logo remains sharp when zooming in;
  3. the file size is really small.

In this image you’ll see the clear difference, especially when you click the image. The left logo is a small JPG (200×200 pixels), the right logo is in SWF format.

8. Flash animation

Imagine you want to start your prezi with ‘Once upon a time’. Maybe it’s nice to create an animation for it, like a typewriter. Let’s open Flash!

  1. Open a new Flash file.
  2. Choose the Text tool, a typewriter font and type Once upon a time…
  3. Use Ctrl/Command+B to break apart the sentence in separate characters.
  4. Let’s work backwards. In the timeline choose frame number 3 and choose Insert > Timeline > Keyframe.
  5. Remove the last character from the canvas.
  6. Choose frame number 5 for example in the timline and add another keyframe.
  7. Remove the last character from the canvas.
  8. Keep on repeating this till all characters are removed. Don’t choose the same interval all the time. A typewriter also pauses sometimes.
  9. When you are finished, select all the keyframe and choose Modify > Timeline > Reverse Frames.
  10. Save and test your movie.
  11. Maybe you want to add an extra long pause before the animation starts over again.
  12. Insert the SWF in your prezi.

9. The eye in IDENTITY

After winning the worldwide TED Prezi contest I got lots of questions about the always moving eye in my prezi IDENTITY.
Here’s how I did it:

  1. First I bought the movie of the eye at iStockPhoto.com.
  2. Convert the movie to FLV. Use Adobe Media Encoder for it (or another tool).
  3. Open a new Flash file.
  4. Choose File > Import > Import Video.
  5. Find your movie and choose ‘Embed FLV in SWF and play in timeline’.
  6. Click Next.
  7. Mark ‘Place instance on stage’ and mark ‘Expand timeline if needed’ and click Next again.
  8. Click Finish.
  9. Make the stage of your Flash file as large as the movie.
  10. Save your movie and publish your movie. A SWF will be created.
  11. Use the SWF in your prezi.

10. A menu for your prezi

With the Prezi Player API you can communicate with your prezi via JavaScript. You can create a menu with HTML and CSS and control the prezi via the menu. I think this is awesome and just the beginning of all new possibilities for Prezi.

Have a look at these two examples and try it yourself:
Example 1 – users can freely navigate and use the next and previous buttons.
Example 2 – users have no control over the prezi, only via the menu. This example also has a submenu.
Update! In my new book Prezi Hotshot you can read a whole chapter about this subject 🙂

If you want to create such a menu yourself, just look in the source code. It’s not real hard. If you need more information, you have to wait for my book Prezi Hotshot of Packt Publishing.

That’s it for now!

Thank you for reading, hope you liked it.
Hedwyg van Groenendaal
Prezi University

This entry was posted in tutorial and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted November 27, 2013 at 3:52 AM | Permalink

    What an amazing achievement.
    Well done Hedwyg and thank you.Kind regards
    Peter

    • Prezi University
      Posted November 27, 2013 at 10:46 PM | Permalink

      Thank you so much, Peter! 🙂
      Hedwyg

  2. Andrea
    Posted May 27, 2014 at 12:39 PM | Permalink

    Hi Hedwyg,

    what a wonderful tutorial. Thank you.
    I tried to change the font to Arial in the CSS editor but it didn’t work. I got a fontLoadError message: [Event type=”fontLoadError” bubbles=false cancelable=false eventPhase=2]

    Do you know what I did wrong?

    Kind regards
    Andrea

    • Andrea
      Posted May 27, 2014 at 3:44 PM | Permalink

      Hi again,

      I found out that this error only appears in the desktop version.
      When I work online on prezi.com Arial and Verdana work just fine.

      Do you know how I can change this?

      Kind regards
      Andrea

      • Prezi University
        Posted May 30, 2014 at 12:41 PM | Permalink

        Hi Andrea,

        Good to hear you managed to get the font working online. I have to say this is not official Prezi stuff, so Prezi will probably not react to this. Also in my desktop version it works fine. Maybe you have to update your desktop version? Or just try again?

        Have a nice day! Hedwyg

  3. Henrico
    Posted January 9, 2016 at 9:13 PM | Permalink

    Very good tutorial thanks. Also see Prezi Custom Fonts

3 Trackbacks

  • By Advanced stuff: my talk of Prezi Day 2013 | Per... on October 5, 2013 at 10:05 AM

    […] In my talk of Prezi Day 2013 on October 3rd in Amsterdam I shared some cool advanced Prezi stuff with the audience. It was hard to choose what I was going to show, but I ended up with 10 cool things, from really simple to the technical nerdy stuff.  […]

  • By Advanced stuff: my talk of Prezi Day 2013 | Web... on October 5, 2013 at 10:36 AM

    […] In my talk of Prezi Day 2013 on October 3rd in Amsterdam I shared some cool advanced Prezi stuff with the audience. It was hard to choose what I was going to show, but I ended up with 10 cool things, from really simple to the technical nerdy stuff.  […]

  • By Advanced stuff: my talk of Prezi Day 2013 | doc... on October 5, 2013 at 10:40 AM

    […] In my talk of Prezi Day 2013 on October 3rd in Amsterdam I shared some cool advanced Prezi stuff with the audience. It was hard to choose what I was going to show, but I ended up with 10 cool things, from really simple to the technical nerdy stuff.  […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*