790 likes | 886 Views
The Flimp Platform (DC) dashboard can be accessed by pointing your web browser to
E N D
The Flimp Platform (DC) dashboard can be accessed by pointing your web browser to http://flimp3.com/dashboard. Flash Player 9, the latest version, is required for creating flimps, viewing flimps, and administering user accounts. The flimp viewer and dashboard have logic for checking for the required version of flash. The first screen presented in the dashboard is the login screen. Use the ID and password provided to login.
Upon successful login, the dashboard home page is presented. Shows how many active flimps are on file for this account. Return to this page Go to the display of all users’ flimps. This is the area where you create your flimps. Go to distribute page for various distribution channel options. This is where flimps are distributed. Go to the flimp reports section for all analytical reporting. Provides a summary report on the most recent flimps viewed. Provides a summary report of total viewing time for all flimps in account.
The Create and EditFunction The Create and Edit function will display your list of non-deleted flimps. You can click this link at any point, even during editing, to return to your flimp list. It is a good way to “revert” should changes be made to your flimp that haven’t been saved but you want to undo. You can either choose action on an existing flimp or click create a new flimp.
The Create and EditFunction (continued) Clicking Create a New Flimp is self-explanatory. After entering a flimp title and description, a new flimp is added to the active flimp list. Click “Create a New Flimp” Enter flimp’s title and a short description. The canvas for the new flimp will appear in the first position.
The Create and EditFunction (continued) Moving the mouse cursor over a flimp expands the flimp and displays the options available for that flimp, as shown:
The Create and EditFunction (continued) • Edit/Preview brings up the drag and drop FLIMP editor (explained on page 8 of this document). • Clone allows a duplicate copy of a flimp to be created which can then be independently edited and saved. This function is helpful for multiple flimps in a campaign, etc. • Delete removes the flimp and all of its properties from the flimp list. If a flimp is deleted, all instances of the flimp are removed, including any analytical reporting.
The Create and EditFunction (continued) Button control Insert Shapes Single line text (label) control Layering controls Precise placement controls Video control Creates a snapshot and saves the flimp. Must save for Preview function to be “current” Preview button—save first, then preview flimp as user will see it. No tracking is recorded in preview mode Form Builder “Rich Media Text Box” - multiple line formatted text control Image/graphic control Change the description, background, Size, and Shape of your Flimp. Click to set the flimp size along with background color, any border, and a background image Blank canvas—drag user interface elements here to create a flimp The Flimp Platform Editor To create on a flimp canvas, click on an icon, drag it into the blank canvas, populate the field and then move it to the desired location on the canvas.
The Create and EditFunction (continued) Populating Image Library and Video Library
The Create and EditFunction (continued) Image Library: • Import a New Image • There are two ways to add an image, the first way is to import from your hardrive - a three step process. • Select an image from your hard drive or network drive using the standard file upload dialog. Allowable formats are .png, .jpg, and .gif. To use an image from another website, right click the image, select “Save this picture”, save it to your hard drive, and import it into the FLIMP Platform from there. • Wait for the upload to be completed. Images must be uploaded to the flimp servers before they can be used in your flimps. The upload process will vary in time according to your connection speed and the size of the source image. • Upon upload completion, the image is displayed and reduced in size if the source image was larger than 1024x768. A thumbnail of the image is automatically created for display in the image library. Enter a title and description for the image. The image will then be available in the image library. Helpful Hint: Once an image is imported into your library, it can be used either as a Background Image (when setting up a Canvas) or as an actual Image within your canvas.
The Create and EditFunction (continued Image Library (continued): Grab an Image • The second way to use an image is to grab the image straight from a website using the image’s URL address. • Right click on the image you would like to use. • Click on “Properties.” • Copy the URL address of the picture. • Click the box next to “My image file is located under a specific URL. Grab it from there.” and paste the image URL address in the box below it. Click Grab. • Upon upload completion, the image is displayed and reduced in size if the source image was larger than 1024x768. A thumbnail of the image is automatically created for display in the image library. Enter a title and description for the image. The image will then be available in the image library.
The Create and EditFunction (continued Image Library (continued): In addition to the “Image Library” link, images can also be added in the following areas: • In Flimp Settings>Properties – using the “Select an Image” link. • Dragging in the “Image” icon and uploading a choosing the “Upload or Select an Image” link. Flimp Settings>Flimp Properties Image icon upload
The Create and EditFunction (continued) Video Library Click link to upload a video to your library or select a video already in your library
The Create and EditFunction (continued) Video Library (continued) Videos are imported into your FLIMP Platform video library in the same way that images are uploaded into the Image Library. Video must be saved in a .flv format.
The Create and EditFunction (continued) Video Library (continued) Uploading a video to the flimp servers is largely the same as the process to upload an image with an important exception — a thumbnail must be created for the video Verify that the duration is filled in here. If it shows up as -1, it means the video was not encoded properly and the playhead thumb will not move during playback The current thumbnail on file for existing videos or the thumbnail about to be saved for new videos Use the pause button to help with creating a thumbnail so the video does not pass the point you want to capture The thumbnail is sent to the flimp servers as a jpg along with the video title and description Click this button when the frame is on the scene you want to represent your video in the video library and within the Flimp Platform layout tool The video plays at the full original size Helpful Hint: You can hit the green play arrow to replay the video to find the perfect thumbnail.
The Create and EditFunction (continued) Using the FLIMP Editor • Creating a flimp should be done in the following steps: • Click “Flimp Settings” to set your flimp’s size and background attributes. • Drag the elements needed to create your flimp one by one to the canvas and set their attributes accordingly. • Save your flimp. • Preview your flimp. You must save your flimp before previewing it. • Modify any placed user interface elements as necessary.
The Create and EditFunction (continued) Flimp Settings: The Flimp Settings feature lets you set up the basic parameters of your flimp. This includes setting the size and shape, background/border features, and choosing to use an image either as a background image or a watermark. You can even change the Flimp’s title and description. The background color partially transparent so the background can show through or an imported image can be p Helpful Hint: The Transparency setting can be used to give you more color palette options. 50% Color 100% Color Note: Once you select a background image, a link titled “Clear BG Image” will appear. Click this link if you would like to erase the background image.
The Create and EditFunction (continued) Canvas Settings (continued): • The Flimp canvas defaults to 640x460 slate width and slate height. But you can change it to any size. • Change Flimp Title and Description lets you rename the flimp. • The Background and Boarder Colors dialog is used to change the canvas color from white with no boarder to any background color or any boarder. • The Add a Shadow or Rounded Corners allows you to shadow your Flimp (making it look 3-D) or customize the shape of your Flimp. Please Note: Rounded corners do not work on a flimp videosite that has a full-sized background image. • Show “Play” arrow places a graphic “play arrow” on top of your flimp. An example appears on page 20. • The Select an Image button brings up your image library (shown on the following page). You can delete a background image by selecting Clear BG Image. Helpful Hint: The Border can be made thicker (and more visible) by increase the boarder width.
The Create and EditFunction (continued) Canvas Settings (continued): • The Select an Image button brings up your image library, as shown. All images previously imported appear in the scrollable visual list. • Click Selected an Image buttonto select an image to use as a watermark in your flimp. If you have created your flimp’s background design in Illustrator or Photoshop, this is how you will import your background. • Clear BG Image removes the image and image thumbnail from your library and from the flimp servers. • Note: It is important not to delete any images which are in use on distributed flimps as the images will not appear on these flimps after they are deleted.
The Create and EditFunction (continued) Canvas Settings (continued): • The Play Arrow visually prompts a viewer that the flimp contains a video. • When a video completes or if a video is set to not play automatically, the video snapshot will appear along with the play arrow. You can click the entire arrow to play/pause the video. This is an automatic feature. You will only need to select the show play arrow option in “Flimp Settings” if you want the play arrow to appear with your flimp distributions. Flimp Distribution Flimp Video Player
The Create and EditFunction (continued) • Adding User Interface Elements to a Flimp • Decide which element to place. The choices are Single Line Text, Rich Text Box, Image, Video, Button, Form Builder, Shape, and SWF File. See the next page for a refresher on where to find each element. • Drag the element from the toolbar to the canvas. • A dialog box appropriate for the element is displayed. • Set up the element to suit your needs. • Drag the element within the canvas boundaries to where you want it placed. • Resize the element if necessary. Images, Rich Text Box, Buttons, Shapes and SWF Files can be resized by dragging the resize handles. Rich Text areas will automatically add a vertical scrollbar if needed. • Double-click an element to edit it. • Press the Delete key on a selected element to permanently remove it. On a Macintosh system, you will need to use the Function-Delete keys together. • Move an element using the arrow keys and manually type in the x, y, width, and height in the precise placement controls to accurately place an element. • Use the layering controls to layer elements on top of one another (pages 36-37).
The Create and EditFunction (continued) Button control Insert Shapes Single line text (label) control Layering controls Precise placement controls Video control Creates a snapshot and saves the flimp. Must save for Preview function to be “current” Preview button—save first, then preview flimp as user will see it. No tracking is recorded in preview mode Form Builder “Rich Media Text Box” - multiple line formatted text control Image/graphic control Change the description, background, Size, and Shape of your Flimp. Click to set the flimp size along with background color, any border, and a background image Blank canvas—drag user interface elements here to create a flimp The Flimp Platform Editor To create on a flimp canvas, click on an icon, drag it into the blank canvas, populate the field and then move it to the desired location on the canvas.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Single Line Text (Label) Control Dragging a single line text to the slate displays the following dialog. Note the annotations in the screen shot. As text is typed here it appears real-time in the preview window Letter spacing makes the characters your type closer or further apart The fonts in this list are almost guaranteed to be on every Mac and Windows system Similar dialog to what appears for the flimp canvas setting background Text can be partially transparent so the background can show through You can make your line text a link by clicking this button. A dialog box will open. See page 22. Helpful Hint: After you enter in the text, you can easily change the text style by selecting the feature you want to change. You do not need to highlight the text.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Single Line Text (Label) Control (cont.) Helpful Hint: Text can be repositioned on the page by clicking on the text line directly on the canvas. A light blue box will appear. You can move the text by dragging the box.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Single Line Text (Label) Control (cont.) Adding User Interface Elements to a Flimp – Creating a Link Links can be created from labels (single line text), images, or buttons. Links embedded in multi-line text elements (rich media text) do not use the dialog box below. • Notes about links: • Choose either a link to a URL, an email address, or a pre-fab form on file • Type the appropriate information if a URL or email address. For URLs, type a simple tracking identifier in the indicated box. This identifier will display in the reports every time the associated URL is clicked. • The “Email to a Friend” and “Response” forms can be selected as the target of a link.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Single Line Text (Label) Control (cont.) Creating a Link (continued) Select “Email to a Friend” form to let viewers forward their flimp virally to other viewers. Select “Response” form to collect viewer contact information. Example: Email to a Friend Example: Response
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Rich Text Box Control Formats, fonts, and other styles can be mixed in the same text area Copy text in from other sources or type it here and format it in place Select the text to be made into a hyperlink and type the link here. Add an underline or other formatting while the text is still selected to differentiate your links from the rest of the text. All of these formatting options can be applied to selected text or newly typed text This is the same background dialog as used throughout the application
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Image Control • An image can be selected from the existing Image Library. This process is exactly the same as described earlier for the Canvas properties. Refer to pages 9 – 11 for instructions. • Image features include Image Transparency, Add a Shadow or Rounded Corners, as well as the ability to make an image a Trackable Link. • Trackable links can be renamed in simple words, for easier reporting and analysis. Refer to pages 24-25 for instructions on creating a link.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Video Control Importing a video functionality behaves in the same way that importing an image behaves. Refer to pages 12 – 14 for instructions. Access your video library on the FLIMP servers Options for the flimp videosite the end users see Select an appropriate video player size based on the original aspect ratio of the video and the overall size of the flimp Information about the currently selected video. Use the original video size to help determine an appropriate player size below
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Button Control • The button tool enables you to create buttons or boxes. These elements can be linked to a URL, email address, “Email to a Friend” form, or a “Contact Us” form. Refer to pages 36-37 for instructions on how to create a link. • Experiment with the different settings in the button dialog until the button looks the way you want it. The gray slashes are displayed in the preview area to show the button’s level of transparency.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Form Builder Control • The form builder tool enables you to custom forms for data collection. Custom forms, that appear as a set element on your flimp canvas, let you collect data that can be used to build your email lists, contact interested prospects, etc. • Once a viewer fills out a form, the information appears in the flimp’s report if you have the “Send to Flimp Dashboard” option selected.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Form Builder Control (continue) • To create a form: • Drag the “Form Builder icon” onto your canvas. • Name your form. Select a font/color/size for your form’s headline, form fields and a background color for your custom form. • Select where you want the form data to be sent. Form data can be sent to another web page. • Provide an email address for a notification to be sent to after someone completes a form. • Select your form fields and chose if you want the form field to be required in order for someone to complete the form.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Form Builder Control (continue) Fields to name form and select the form’s presentation style. As elements are selected, they will appear in this visual editor. Items can be edited, deleted, moved up or moved down by placing your mouse into the form field and then selecting the desired action. Fields to select where the data gets posted to and to provide an email when someone completes the form. Create form fields here. Item Label: data that you are collecting (i.e., First Name, email, etc.). Once you enter the Item Label, select if you want to validate it against an attribute and then select “Accept.” Once the form has been built select “OK.”
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Form Builder Control (continue) Example of a flimp with a form. Note: a completed form can be placed anywhere on a flimp canvas.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Adding Shapes • The Shape tool allows you to add shapes to your Flimp. You can add a line, rectangle, rounded rectangle, circle, ellipse, or triangle. • Border and Fill Colors allows you to choose border thickness, color, and fill color of your shape. • Add a Shadow allows you to add a shadow to your shape making it look 3-D. You can choose the color and length of the shadow as well. • Shape Transparency lets you choose how transparent your shape is. • You can also change the direction of lines and triangles.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Importing a SWF File Find the SWF file you want to use. Click on “Properties.” Copy the URL address of the picture. Click the box next to My SWF file is located under a specific URL. Grab it from there and paste the image URL address in the box below it. Click Grab Upon upload completion, the SWF is displayed and reduced in size if the source image was larger than 1024x768. A thumbnail of the SWF is automatically created for display in the SWF library. Enter a title and description for the image. The SWF will then be available in the SWF library.
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Precise Placement and Layering of Elements Layering Example: A flimp with three button controls:
The Create and EditFunction (continued) Adding User Interface Elements to a Flimp – Precise Placement and Layering of Elements (continued) Select the button labeled 111 and click “Send Backward”: Select the button labeled 333 and click “Bring To Front”: Helpful Hint: For a flimp with a lot of separate images, you may have to select the Precise Placement and Layering Tool to enable your images to appear. Select this tool each time you add in a new image or text element.
The Distribution Function When the Distribute feature is selected, you are brought to a window with several different channel options with which to distribute your flimp. As you scroll through the distribution features, an overview of each distribution feature will appear to the right o the box. A history of all the distributions tied to the FLIMP Platform account. Click on button to generate a click report related to the distributed flimp Helpful Hint: To easily locate a particular flimp, you can click on the headers of each of the “Your Existing Distribution” columns to sort through your flimps.
The Distribution Function (continued) Flimp Email • Flimp Email is for one-to-one distributions. This option lets you email your videosite for free to small distribution lists of up to 250 emails. • You can import and manage your email contact list and personalize your distribution message by name. • Flimp Email is recommended for one to one communications, sales prospecting communications and small, targeted direct response campaigns.
The Distribution Function (continued) Flimp Email (continued) • The FlimpMail distribution has eight-steps in its set-up process. • Name the quick email distribution. The distribution is given a name so you can easily pull performance reports.
The Distribution Function (continued) Flimp Email (continued) • Select the flimp(s) you want to distribute. If you would like to send multiple flimps, click on the “CTRL” key on your keyboard and then select the flimps you want to send.
The Distribution Function (continued) Flimp Email (continued) 3. Type in Your Name, Your Email Address and the Email Subject.
The Distribution Function (continued) Flimp Email (continued) • Provide a short description of the flimp. Please note: Either include a short message OR delete the “Enter your flimp’s write-up here” text placeholder. If the placeholder text is not customized or deleted, it will appear with the emailed flimp. • Use the following simple HTML to format copy: • Name (pulled in from an email list ) – [~FirstName~] • Bold - <b>WORD</b> • Italic - <i>WORD</i> • Single Line Carriage Return - <br> placed at the end of the line. • Double Line Carriage Return - <br><br> placed at the end of the line. • This is how the copy might look: • Dear [~FirstName~],<br><br>Here is my <b>flimp</b>. I hope you like it!<br><br>Thank you.<br><i>FLIMP</i>Media • And it would render like this: • Dear John, • Here is my flimp. I hope you like it. • Thank you. • FLIMP Media
The Distribution Function (continued) Flimp Email (continued) 5. Select the recipient(s) by selecting either the “Existing Contact List” button or Manual option.
The Distribution Function (continued) Flimp Email (continued) 6. For the “Existing Contacts,” you may either Add, Remove or Manage your contacts. Select the “Add from Contact List” to add contacts. FlimpMail displays a count of all the recipients selected for the distribution.
The Distribution Function (continued) Flimp Email (continued) 6. For the Manual option, email addresses can be separated by either comma or semi-colon. Up to 50 emails can be listed for this option.
The Distribution Function (continued) Flimp Email (continued) • Incorporate a personalized message. The email can be personalized with a recipient’s name or company by incorporating either [first] (for first name) or [company] (for Company). Please note: Either include a short message OR delete the “Enter your flimp’s write-up here” text placeholder. If the placeholder text is not customized or deleted, it will appear with the emailed flimp. Helpful Hint: Use <br> if you need to have your message appear with formatted lines or spaces between lines of text.
The Distribution Function (continued) Flimp Email (continued) • Send the email.
The Distribution Function (continued) Flimp Email (continued) Example of how the Flimp Email appears to the recipient.
The Distribution Function (continued) Flimp Email (continued) • Email Settings Option: • Flimp Email can be set up to be sent from your own email server. This means that the emails are delivered as if they were sent directly from your email client. • Add your outgoing mail server information, your email user ID and email password to set up the email settings.