 |
| How to create the real estate presentation |
 |
| This tutorial applies to WildPresenter Pro 2+. |
 |
| |
 |
 |
 |
| Getting started |
 |
This tutorial will show the steps necessary to create the real estate presentation that is posted on our WildPresenter templates page here.
This tutorial is broken into four different sections: top and upper left (property description), lower left (image jukebox), lower right (realtor info) and upper right (video).
Before starting you should visualize your final project. For this presentation the overall dimensions will be 800x600. You can set the dimensions in the Project settings window (View>Project settings). |
 |
|
 |
| You can always adjust the dimensions if you change your mind later. |
| Top |
 |
 |
| Top and upper Left - Property Description |
 |
Open a new project in WildPresenter and call it "Real_Estate_Presentation". Select 800x600 as the project dimensions. You can change the dimensions later if you want the presentation to be larger or smaller.
The top and of the presentation has text that displays the property name and location. The upper left portion of the presentation has a text box with more information about the property that displays a map when the user places the mouse over the text box. |
| Top |
 |
 |
| Creating a text box |
 |
| To create the text select Text>Insert Text Box and type in your text. |
 |
 |
 |
| |
| Format the text using the text toolbar. |
 |
 |
 |
| In our real estate presentation, the upper left text box is 400x240. You can adjust the size of the text box by selecting it and dragging the corners or changing the width/height values in the Object Settings window>Appearance tab. You will want the map (created next) and the text box to be the same size. |
| Top |
 |
 |
| Recording a SWF screen image |
 |
To create the map mouse-over we will first need a map. To create a SWF map we will use the WildPresenter screen capture feature.
Locate a suitable map online using your favorite map service. Both Yahoo and Google have excellent maps.
Once you've located your map online, open the recording utility by selecting Record>Record |
 |
|
 |
| When the recording utility opens select SWF High Quality Single Image in the Setup tab. |
 |
|
 |
| Select the Screen tab and choose the dimensions of your capture by selecting Screen Area and then the Set Region button. (Using this option you can drag the red markers to the area you wish to record. You can also set the width and height for the screen area to 400x240 to match the text box.) Remember that you want your map and text box to be the same size - you can easily adjust the size of the text box, so you may want to base it on the size of the map. |
 |
|
 |
Click the Start button.
Click ‘CTRL+SHIFT+D' to add a frame to the project (Hot keys are viewable and editable when you click the "advanced button in the Setup tab).
To complete the recording click the small X in the tray. |
 |
|
 |
Tip: If you want the screen recording window to stay open, uncheck the "Go to tray on capture start" checkbox in the setup tab. Then when you start recording you can click the "Add frame" button.
The newly created screen capture will be added to your project and saved in the Captures folder of the project file. So you'll want to delete the map from your stage now and you'll add it back in the next step. |
| Top |
 |
 |
| Mouseovers |
 |
To create the mouse over, select the textbox you created earlier and open the Object Settings window.
Select the Mouse Events tab. Check the ‘Add mouse over' box and browse to the SWF screen image in the Captures folder. |
 |
|
 |
Now when the user places their mouse over the text they will view the map. |
| Top |
 |
 |
| Lower Left - the image jukebox |
 |
In the lower left of the real estate presentation is an image jukebox where a user can browse pictures. For this jukebox we are going to encode preview (thumbnail) and full size versions of the images we want to use.
Keeping in mind the final project size of 800x600 I will size my jukebox to fit comfortably into the lower left section, so approximately 520x250 should be fine. The first thing I will do is insert a rectangle with those dimensions and place it in the lower left. This will be the frame for my image jukebox. I will also need to choose the dimensions of the preview (60x45) and full size images (320x240). |
| Top |
 |
 |
| Importing images |
 |
We will begin by encoding the smaller, preview images.
Open the Video, Audio, Image Converter button. |
 |
|
 |
|
 |
| Open the batch converter by clicking View>Batch Processing. Drag in all the image files you wish to convert into the batch interface. |
 |
|
 |
Check the checkbox for "Add suffix to filename", type in "_small" in the field and click "Update filenames" so that text will be added to the output of each filename.
Select the image quality in the Preset field box dropdown list. |
 |
|
 |
In the Vid/Aud tab you can make adjustments to your image dimensions and image quality.
Click the Vid/Aud tab to make necessary adjustments. Adjust the dimensions and the quality of the image. We will set the dimensions for the small images to 60x45. |
 |
|
 |
When you have set all your settings click the Process button in the batch encoding window. (Please note that you need to have your conversion settings set before the "Process" button will become active.)
The converted images will be saved in the same location as the source image files.
Repeat the same process for the larger image.
This time type "_large" in the "Add suffix to filename" field and click "Update names" so that text will be added to the output of each filename.
Set your settings in the Vid/Aud tab. For the larger images we'll use the 320x240 as the dimensions.
The small and larger images will be linked together later. |
| Top |
 |
 |
| Creating jukebox text |
 |
We now need to create any text that will be included in the jukebox.
To create text click the Insert Textbox button. |
 |
|
 |
| For the Real Estate presentation we added the text: "Click image to view". You can of course use different text and add additional text if you wish. |
| Top |
 |
 |
| Inserting SWF's |
 |
| Now that the text has been created you can insert the preview-sized ("small") SWF images that we created earlier. There are many ways to import in WildPresenter. For this tutorial we will simply drag the image files onto the stage - this is a batch import process (so you can select all the "_small" images you created and drag them all in at once. |
 |
|
 |
| Once you drag the files onto the stage you will receive the following dialog box: ‘Do you want to put the images into separate slides?'. Since you want all the images on the same slide click No. |
 |
|
 |
| Next you need to position the small images the way you want them to appear. In the Real Estate presentation we made them into a grid. We suggest starting off by roughly placing them where you want them to appear in the rectangle you inserted. Then make fine adjustments to the position using the "Translate X/Y" options in the Appearance tab of the Object Settings Window (View>Object Settings). |
 |
|
 |
| You can also use the alignment tools to horizontally/vertically align the images and to evenly space them. These alignment tools can be a real time-saver. |
 |
|
 |
Tip: When you want to use one of the alignment options the selected objects will align to the last object you select in the group.
You need an object to load the full size image into so we will now insert a full size image that will serve that purpose. |
 |
|
 |
| Top |
 |
 |
| Adding Mouse Events |
 |
We now want to link the preview-sized images to the full size images. The full sized images will be loaded into the one large image when selected.
Select a preview-sized image, open the Object Settings window and select the Mouse Events tab. Check the Add on click box and select the Load Flash SWF Movie button. Browse to your full size image file and select the large image in the Target field. |
 |
|
 |
Repeat for the remaining images.
When you are finished click preview and test by clicking on all the images to verify that your jukebox is working correctly.
You can of course add animations to any element of your image jukebox, but to keep things simple we won't go into that now. |
| Top |
 |
 |
| Lower Right - Realtor Information |
 |
The lower right section of the demo has an animated picture with an email attached.
Import an image using the Video, Audio, Image Converter button. |
 |
|
 |
Once you have encoded your image and it is placed on the stage add an animation.
Open the Object Settings window, select the Animation tab and select the animation of your choice. |
 |
|
 |
We will now create the email address text and add the email link to it.
Create the email address text using the Insert Textbox button. |
 |
|
 |
| Once you are complete, select the text and open the Object Settings window. Open the Mouse Events tab and check the Add on click box. Select the Open HTML page and in the URL field use the code ‘mailto:email@email.com'. |
 |
|
 |
| Top |
 |
 |
| Upper Right - Video |
 |
The upper right portion of the demo has a video with click-to-play functionality.
Open the Video, Audio, Image Converter. |
 |
|
 |
Browse to your video.
Select the preset of your choice. |
 |
|
 |
We will now add a player to the video for user controls.
Select the Players tab, check the Export player while encoding and choose a player. |
 |
|
 |
We will first encode a single frame of the video to have an image that appears before the video starts to play (this is what viewers will click on to start the video).
In the Video, Audio, Image importer open the Editor by clicking the Edit/Crop/Filers button. |
 |
|
 |
Check the box, "Use Start/End Times". The Start time should be 0, which is what you want (unless the video starts out black in which case you may want to adjust it). Set the "End" value to be 10 or so (this measurement is in milliseconds).
Click the encode button to encode the video to Flash |
 |
|
 |
Now you can encode the full video by de-selecting the "use start/end times" option.
Important: you will need to set the complete video to the "Load_External_File" play mode because it has play controls. If you don't use this play mode, the play controls in the video player will affect the entire project (for instance, if a viewer clicks the stop button it will stop the entire presentation). So remember to use the "Load_External_File" play mode and to include the "Load_External_Files" folder when you distribute your project. To change the play mode, right-click on the full length video (you can leave the single frame video alone) and select "Set Play Mode" and choose "Play with Load_External_File play mode".
You can also add a preloader by checking the Preload box in the Player tab. This can improve performance when videos are played on the Internet by viewers with slow Internet connections. (For more information on preloaders, see the Online training "Adding players and preloaders".) |
| Top |
 |
 |
| Click to play |
 |
We will now add a click to play action. This will keep the video from playing until the user activates it.
Using Objects>Create Text Effect insert a textbox instructing the user to ‘Click video to start playing'. Position the text over the single frame video file where you would like it to appear. (You don't have to use a text effect - this is something we are adding to enhance the presentation. Regular text will do just fine.)
Select the ‘Click video to start playing' text and open the Object Settings window. In the play tab check the ‘Hide when done playing' box. This will cause the text to disappear after the viewer clicks the screen (otherwise the text would stay on the screen). |
 |
|
 |
Repeat this same step for the single frame video.
Insert a Stop Action on the last frame of the single frame of video you encoded first. You do this by right clicking in the timeline and selecting Insert Stop & Go To Actions>Insert STOP Action. This stops the video from playing. |
 |
|
 |
Now move the complete video file at least a couple of frames after the single frame video file. We can then add a jump to frame action for the video. For this tutorial we'll place the video on frame 71.
Select the single frame video by clicking on it, and open the Object Settings window. Select the Mouse Events tab and check the Add on click box. Click the ‘Jump to frame' button and adjust to Frame number 71. |
 |
|
 |
Repeat this same step for the "Click to play" text effect object (this way if the viewer clicks on either the single frame video or the text the jump action will work).
Now, when the presentation plays, it will stop at the stop action and start again when the viewer clicks on the screen to advance the presentation to the video. |
| Top |
 |
 |
| Additional formatting and text |
 |
Create a text box that reads ‘Requires Flash 8+ Player'. This text will be linked, in case the user doesn't have the Flash 8 player installed which is required to view the video.
To add a link to the ‘Requires Flash 8+ Player' text open the Object Settings window and open the Mouse Events tab. Check the Add on Click box and select the Open HTML page and enter in the link URL into the URL field. |
 |
|
 |
| Top |
 |
 |
| Adding fade effects |
 |
Now that your demo is complete and functional you may want to add some finishing touches. Adding a ‘fade in' effect will help smooth in the transition when opening the jukebox.
First select an object by clicking on it on the stage or on the timeline. Then open the Object Settings window, select the Play tab, then check the Image Fade In box and choose 6 frames or any number that you wish. |
 |
|
 |
Repeat for all the other objects you wish to add a fade to.
You can also add animations to enhance your presentation. |
| Top |
 |
 |
| Conclusion |
 |
So that covers how to create the real estate presentation with WildPresenter. With a little imagination you can create a wide variety of sales and marketing materials with WildPresenter.
Click here to view the real estate presentation.
Click here to download the WildPresenter files used to generate the real estate presentation. |
| Top |