Вы находитесь на странице: 1из 20

Thank you for purchasing and please rate our proFashion Banner item.

. We wish you all the best for the work with it.
aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa

Product Description
proFashion - Ken Burn Banner with YouTube Our new Fashion Banner - A powerful Flash banner with dozens of special Features Create banners with many many Animations, Transitions, Text effects, endless onStage actions. Combine your Ken Burns Animated banner elements with the possibility of playing full YouTube and FLV clips. Use the easy to read XML to setup a unique banner which fit your Professional needs but also suit your own private websites. The intuitive navigation bar introduces you to the power of time travel. Pause, rewind in realtime with the optional progress bar, play again no problem! Try it! The CPU friendly banner engine gives you full controll over your banner (Use the live-control Tool to monitor the CPU and Memory, to see the positions and timing of the layers one by one, to see the banne in slow motion etc.).

Please recommend us to your friends if you like our work!


Please do not forget to Rate our Item. We would be ver y happy to see your comments and your Stars .

The Content of this package


01 Source folder - banner.fla - This file contains the Banner Source (AS3) - fh folder - AS Class files - com folder - Greensock classes - loader.fla - This file is the loader SWF file - signo.fla - This file is the signature example FLA Source file - livecontrol.fla - Visual control with parameters. 02 Start folder executable files with 3 examples from Preview - swfobject - swfobject Java for HTML Flash embeding - images - Icons, backgrounds, watermarked items for the Banner Examples - xml - Banner Example - HTML Example with and without using SWF Object - swf - SWF Folder with loader.swf and signo.swf file - live-control - The Live Control Tool. Start the live-control.html file to start the tool. 03 Freebies Free Files Seperated 04 Documentation folder PDF file

Features
Full XML driven Unique and individual appearance Music On/Off & volumes Frame / Background with Glow and Shadow Reflection Effects On/Off & parameters Preview Sample Smart Loading with 4 different Loader type. Rotate the Banner & Content Ken Burns Animation with exact Position and Aligns Colorizing Effects like hue, tint, brightness and contrast on main Banner item Use YouTube Videos, FLV, MP4 Videos, set ID, start position and Quality Add Next, Previos, Play / Pause, Thumbnails, Progress bar Real Progress Bar on Banner and on Video, Stop, Rewind your Banner items Real Pause on Banner Items - TimeLine Live-Control Tool for Monitoring and Control of Layers, Motions, Timelines Banner Management via Keyboard, like Next, Previous, Play & Pause - with Space Bar CPU Friendly / Max. Memory usage can be calculated - Monitoring for Testing Captions / Layer Items like - charachter, word, text or HTML text based, Image, Buttons (PNG, JPG, GIF) Add Shadow, Glow, or many other Tween to the items easy via XML Use 21 main Transitions, 29 On Stage Transitions - mix them and get unlimited amount of animations

Default Values Overview


Values, Colors, Alpha, Positions (overview)
Numbers Integers (1, 2, 5,100) and floating point numbers with 2 decimals (1.15, 1.05, 0.50). Alpha Values are always floating point numbers between 0-1. Where 0 is not visible and 1 is 100% visible. Colors Are Hexadezimal values i.e.: 0xff ff ff where the three values are ff (Red) ff (Green) ff (Blue). Each value is between 00-FF Code of white = 0xffffff Code of black = 0x000000.

The XML Settings


Background, frame, border, reflection shadow
01. The Sizing and the position width - The width of the banner image without border and shadow. height - The height of the banner image without border and shadow. xoffset, yoffset - The banner is centered horizontaly and on the top verticaly. Use offsets to move it horizontal and vertical positions. 02. The Loader - Loads the thumbnails, nav icons and the first Banner item color - Tint color on the loader. type - The type of the Loader from 1-4 (4 different Looks for Loader). alpha - The alpha value of the loader. src - The source for the loader swf file. Path can be absolute and relative. If you see extrem low values, you should try to check the following list: - Turn off the Mirror effect - Increase blur effects - Increase layer items, or change char animations agains word and line animations - Increase parallel animations

04. The Background - frame backgroundbox - Draws the "frame" around the banner image. color - Tint color of the frame. alpha - The alpha value of the frame. cornerradius - The rounded corner on the frame not on the Image! 0 - no rounding on the corners. Up to 100 (integer). bordercolor - Tint color of the border of the frame. bordersize - The size of the border of the frame in pixel (0 = no border on the frame). - floating point number. 05. The frame spacing (border_space) top, bottom, left and right - The size of the frame around the banner image in pixel. You can set the size in each direction independent. Floating point number. 06. The effects on the frame glow - Turns on/off the glow effect - used as shadow effect as well. shadow - Turns on/off the spec. shadow under the image/frame. shadow height - The size in pixel of the shadow. Floating point number. color - Tint color of theshadow and glow. 07. The Mask cornerradius - The rounded corner on the banner image! Not on the frame 0 - no rounding on the corners. Up to 100 (integer). 08. The Reflection show - yes/no shows the reflection or not. yoffset - The vertical offset between the image/frame and the reflection. alpha - The starting alpha value of the reflection. Gradient Alpha Reflection! height - The height of the reflection (integer).

09. The Rotation rotation - Rotates the whole banner. -360 to 360. Nagative or positive rotation. 10. The Roll Over Cover effect color - Tint color of the cover when Mouse is over any Button. alpha - The alpha value of the cover when Mouse is over any Button. zoom - A value in pixel which shows how many pixel the border should zoom in when mouse is over any button.

Overview

BackgroundBox

Border Height

Glow

Width

Banner image Reflection

Shadow

Flash Stage Width = Glow + Border size + Border space left + Image Width + Border space right + Glow Flash Stage Height = Glow + Border size + Border space top + Image Height + Border space bottom + Glow + Shadow Height

Loops, Sequenzes
01. The Sequence sequence - normal/random the order of the banners. 02. The Loop loop - yes/no loop after 1st time playing the banner. 03. The Stop at start stop_after_loading - yes/no the Banner Does not start to play, till you press on the play button. 04. The Start with an other banner image start_with_banner - number from 0 - amount of banners With which Banner item / image the banner should start after loading. 05. The Video Quality video_quality - Small, medium, large, hd720, hd1080, highres or default - choose the YouTube Video Qualities.

Music
01. The Music volume - 0-100 the volume 0 - muted, 100 - max volume. source - The file name and path to the music. The music from the preview is not included in the purchased package. You can buy it here.

Navigation - Toolbar, Play/Pause, Socials


01. Hide the Navigation autohide - yes/no if the navigation hides after a while. delay - After how many Sec. the navigation hides. 02. The Default Button Folder button_folder - The default Path for the images. You can easily swap between different button collections this way. Dont have to edit the path at each button. 03. The Toolbar x,y - Horizontal and Vertical position of the Toolbar. Notice!! All other items position are depending on this toolbar position. x=0 and y=0 position of a button is the position of the toolbar globaly. phase_1 - Filename (Without Path!!!) of the normal Toolbar item. phase_2 - Filename (Without Path!!!) of the Toolbar when mouse is over. banner - on/off turns on or off the visibility of the toolbar in Banner Mode. video - on/off turns on or off the visibility of the toolbar in Video Mode. onfullscreen - center/left/right - The align of the toolbar horizontaly during Full Screen Mode onfullscreen_xoffset, onfullscreen_yoffset - x and y offset of the toolbar during Full Screen Mode. 04. The Buttons - Banner and Video Buttons (Some of the Buttons are used in both section) xoffset, yoffset - The offset to the Toolbar Position horizontal and vertical. command - The function of the button. Choose Between.

Button Type and Variations (phase possibilities) "playstop" - The play and stop button. Each in two phases. over / normal. phase_1 - Stop normal. phase_2 - Stop mouse over. phase_3 - Play normal. phase_4 - Play mouse over. "previous/next" - The next and the previous button. Each with two phases. phase_1 - Next/Previous normal. phase_2 - Next/Previous normal. "music" - The music mute and play music buttons, each in 2 phases. phase_1 - Mute speaker normal. phase_2 - Mute speaker mouse over. phase_3 - Speaker normal. phase_4 - Speaker mouse over. "countdown" - The small rotating count down. Fix function.. color - Tint color of the countdown animation "timer" - at YouTube video the played time digital timer. color - Tint color of timer "fullscreen" - The fullscreen button with two phases. phase_1 - Fullscreen normal. phase_2 - Fullscreen mouse over. "close" - The close button by Video Playing in 2 Phases. phase_1 - Close normal. phase_2 - Close mouse over. x - Horizontal position. y - Vertical position. "playstop" - The Big video- play / pause button in the middle of the screen. Each in two phases. over / normal. phase_1 - Stop normal. phase_2 - Stop mouse over. phase_3 - Play normal. phase_4 - Play mouse over. "progress" - The progress Dragger button by Video Playing in 3 Phases. phase_1 - Drag button normal. phase_2 - Drag button mouse over. phase_3 - Drag button by dragging it. banner - on/off show or not progress bar on Banner. video - on/off show or not progress bar on Video. 05. The Buffer and Progress - Video and Banner buffer_color - Tint color of buffered Video Amount. buffer_alpha - Alpha value of the buffered Video. progress_color - Tint color of Played Video Amount.

06. The Thumbnails 06/A. Global "global" - The thumbnail items in 2 Phases. phase_1 - Thumbnail normal. phase_2 - Thumbnail mouse over / or selected. 06/B. Settings x, y - Horizontal and Vertical position of the Thumbnail Holder. direction - Vertical or horizontal. space - Vertical or horizontal spacing in pixel. width / height - The width and hight of the Thumbnail, if it should be scaled. scaleMode - How to scale the thumbnails widthOnly - Proportional fit where the width fit 100% heightOnly - Proportional fit where the height fits 100% stretch - Width and height fits 100%, the image will be stretcht. proportionalInside, proportionalOutside - fits Proportional. 06/C. Mask cornerradius - The rounded corner on the thumbnail 0 - no rounding on the corners. Up to 100. bordercolor - Tint color of the border of the thumbnail. bordersize - The size of the border of the thumbnail in pixel (0 = no border on the frame). 07. Mouseover mouseover - If you dont have 2 phases, or 4 phases buttons, you can use alpha transitions on 1 phases as well (1 phase by 2 phases buttons, and 2 phases at 4 phases buttons). normal_alpha - Alpha value of the normal button/thumbnail. hover_alpha - Alpha value of the button/thumbnail at mouse over.

The Banner Items


01. Banner Item id - Only a internal ID for the CMS system, Has no influence to the Banner itself. duration - The duration of the banner item in sec (i.e 5.5 5 sec and 5 millisec). 02. Image file name & path - The image itself with relative or absolute source (notice, filenames are case sensitive!). 03. Global Rotation Types global_rotation - Rotates the whole layer containers before the animation starts, center registered depending of the layers in the container (old version). globalrotation - Rotates the whole layer containers before the animation starts, center registered depending of width and height of the banner! More Exact!

Ken Burns

startalign = top,left startxoffset = 0 startyoffset = 0 startzoom = 100

startalign = top,left startxoffset = -40 startyoffset = -25 startzoom = 100

startalign = middle,center startxoffset = 0 startyoffset = 0 startzoom = 100

startalign = middle,center startxoffset = 0 startyoffset = 0 startzoom = 150

yoffset

xoffset

top, left middle, left bottom, left

top, center middle, center bottom, center

top, right middle, right bottom, right

04. Ken Burns Effect startalign - The Align of the Image at Start of the Transition. Two Values! "value value2" where value 1, 1 can be top, middle, bottom and value2 can be left, center, right i.e.: startalign="top, left". endalign - The Align of the Image at the End of the Transition. Two Values! "value value2" where 1, value can be top, middle, bottom and value2 can be left, center, right i.e.: startalign="top, left". 1 startzoom - The zooming of the Image at the start of the transition (100 = 100%, 50 = 50% 150 = 150% etc.). endzoom - The zooming of the Image at the end of the transition (100 = 100%, 50 = 50% 150 = 150% etc.). start xoffset, yoffset - To make the start position of an image more exact, use offsets for vertical and horizontal positionchanges. This number can be negative and positive. i.e.: xoffset="-100" and yoffset="50" then the start position of the image (depending on the align) will be moved 100 pixel to the left, and 50 pixel to the bottom. end xoffset, yoffset - To make the end position of an image more exact, use offsets for vertical and horizontal positionchanges. this number can be negative and positive. i.e.: xoffset="-100" and yoffset="50" then the end position of the image (depending on the align) will be moved 100 pixel to the left, and 50 pixel to the bottom. duration - The duration of the Ken Burns Effect sec (i.e 5.5 5 sec and 5 millisec). ease - The ease type of the Ken Burns Effect see Transition Table Ease Types for the possible values. 05. Banner (Main) animation / transition transition - The art of the transition (see Table later below). parameter - Depending on the transition art, define different parameters (See Table below). speed - The speed of the transition in sec (can be very exact, like 2.75 - 2 and 3/4 sec). 06. Colorizing the Banner (add as many effect as you wish) colorize - A color which Tints the banner item (default=""). hue - hue filter 0 - 360 Rounded Value (default =0). contrast - contrast filter - 3-3 (default =1 , i.e. 1.3). brightness - brightness filter - 3-3 (default =1 , i.e. 1.3). startat - When the color animation should start. speed - The speed of the color transition in sec (can be very exact, like 2.75 - 2 and 3/4 sec).

Layers

Image Layer (JPG, PNG, GIF, SWF)

Image Layer in button mode (two phase image layer)

Text Layer (html, line, word or char) with shadow

The Layer Items


01. Types id - Only a internal ID for the CMS system, Has no influence to the Banner itself. type - Type of the layer item. image - Can be a button or a normal image (JPG, PNG, GIF, SWF). char - Charachter based animated embeded Text box. word - Word based animated embeded Text box. line - Textline based animated embeded Text box. html - HTML formatted and animated Text box (less animation types).

Depending on the Type, define a Text, a CDATA Text or a Source of the Image
Layer with absolute or relative Link.
01. Format size - By char/word/line the size of the Font in Pixel. color - By char/word/line the tint color of the Font. letterspacing - By char/word/line the spacing between the charachters in pixel. maximalwidth - By char/word/line the max. widht of textbox in pixel before wordwrapping. (By char the word wrapping will wrap even by chars!). scale - By image the XY scale of the image. alpha - By image the max. alpha of the item. 02. Position x, y - Horizontal and Vertical position of the item. 03. Button (only Image Layer) hover_src - The Path and File Name for the Button Image which is showen if the mouse is over the image layer. flvvideo - The source of the FLV, F4V, or MP4 video file with path. or youtubeid - The ID Of the YouTube Video. (i.e. from the URL http://www.youtube.com/watch? v=2b psYwdZn4&feature=fvhl the id is 2b1psYwdZn4). 1 startat - At which Sec the video should start after pressing the Button. 04. Font Types type - Folks-Light. You can buy it here. 05. Background at Captions / layers - only by char, word, line color - The tint color of the background. cornerradius - The rounded corners, radius, 0 - corners are not rounded. bordercolor - The tint color of the background's border color. bordersize - The thickness of the border of the background. alpha - Alpha value of the background. left, right, top, bottom - The sizing of the banner around of the text in pixel.

06. Links and Targets url - The URL of the link at click on the layeritem. target - The target of the link at click on the layeritem (i.e. _blank, _parent, _self...). 07. Layer animations / transitions - start / onstage and exit - add 1 start and 1 exit animation, and add as many onstage as you wish atsec - When the animation should start after the BannerItem loaded. transition - The art of the transition (see Table later below). parameter - Depending on the transition art, define different parameters (See Table below). delay - Set delays in the transition itself, depending on the transition. speed - The speed of the transition in sec (can be very exact, like 2.75 - 2 and 3/4 sec).

Please recommend us to your friends if you like our work!


Please do not forget to Rate our Item. We would be ver y happy to see your comments and your Stars .

The Transition Tables


01. Banner Item Transitions blades ease, size, direction, delay, type direction: l2r, r2l, t2b, b2t type: close/open example: parameter="Bounce.easeOut,5,l2r,0.02,close" no parameter ease no parameter ease, width, height example: parameter="Back.easeOut,50,50" no parameter ease, degree degree: 0-360 example: parameter= "Circ.easeOut,-150" ease ease ease ease ease, direction direction: left, right, top, bottom example: parameter="Quad.easeInOut,right" ease, direction direction: l2r, r2l, t2b, b2t example: parameter="Quad.easeOut,t2b" ease, width, height, cornerradius example: parameter="Cubic.easeOut,100,40,8" ease, width, height, cornerradius example: parameter="Expo.easeOut,60,1 20,8" ease, width, height, cornerradius example: parameter="Quart.easeOut,70,70,0" ease, size, direction, delay direction: l2r, r2l, t2b, b2t example: parameter="Strong.easeOut,30,l2r,0.3" ease ease ease, direction direction: tl, t, tr, l, c, r, bl, b, br example: parameter="Elastic.easeOut,tr" ease, direction direction: tl, t, tr, l, c, r, bl, b, br example: parameter="Strong.easeOut,c"

blur circ explode explodemask fade rotate scalexin scalexout scaleyin scaleyout slide slidemask squarescale squarescalecenter squarescalerandom stripes turnx turny zoomin zoomout

02. Layer Item Transitions ONSTAGE blink glow rotate rotatearound ease color, blur, alpha color: 0xff ff ff (3 x - red, green, blue in Hex) example: parameter="0xff0000,2,0.3" ease, degree degree: 0-360 example: parameter="Circ.easeOut,50" ease, point, from degree, to degree point: tl, t, tr, l, c, r, bl, b, br from degree: -360-360 to degree: -360-360 example: Back.easeOut,tl,50,0 color, distance, blur, alpha color: 0xff ff ff (3 x - red, green, blue in Hex) example: parameter="0x333333,3,2,0.3" color color: 0xff ff ff (3 x - red, green, blue in Hex) example: parameter="0xffff00" ease, x, y, rotate, scalex, scaley, example: parameter="Strong.easeOut,100,0,0,1,1" ease, x, y, rotate, scalex, scaley example: parameter="Strong.easeOut,100,50,360,1.3,1.3"

shadow tint tweenbasic tweenblur

Please recommend us to your friends if you like our work!


Please do not forget to Rate our Item. We would be ver y happy to see your comments and your Stars .

03. Layer Item Transitions START & EXIT blades ease, size, direction, delay, type (only on image layer) direction: l2r, r2l, t2b,b2t type: close/open example: parameter="Bounce.easeOut,5,l2r,0.02,close" no parameter no parameter no parameter ease ease ease ease ease ease, direction direction: left, right, top, bottom example: parameter="Back.easeOut,top" ease, direction (only on image layer) direction: l2r, r2l, t2b, b2t example: parameter="Circ.easeOut,l2r" ease, size, direction, delay (only on image layer) direction: l2r, r2l, t2b, b2t example: parameter="Strong.easeOut,30,l2r,0.3" ease ease ease, direction direction: tl, t, tr, l, c, r, bl, b, br example: parameter="Elastic.easeOut,tr" ease, direction direction: tl, t, tr, l, c, r, bl, b, br example: parameter="Strong.easeOut,c"

blur explode fade magiclines scalexin scalexout scaleyin scaleyout showup slidemask stripes turnx turny zoomin zoomout

04. Ease Types and Ease Methodes (i.e. Back.easeIn or Sine.easeInOut) Ease Types - Back. Strong. Bounce. Elastic. Circ. Quad. Cubic. Expo. Quart. Quint. Sine. Ease Methodes - easeIn, easeOut, easeInOut.

Please recommend us to your friends if you like our work!


Please do not forget to Rate our Item. We would be ver y happy to see your comments and your Stars .

Further Examples
01. Example To make cool effects, you can mix onstage animations together in the same time. Even in the same time with the start animation. i.e. The item fades in 1 sec, and moves from the start position to the left 1 pixel, In the same time it gets a shadow. 90
<start atsec="2.5" transition="fade" parameter="Strong.easeOut" delay="0" speed="1.0"/> <onstage atsec="2.5" transition="tweenbasic" parameter="Strong.easeOut,-1 90,0,0,1,1" delay="0" speed="1"/> <onstage atsec="2.5" transition="shadow" parameter="0x653109, 2,2,1.0" delay="0" speed="0.1"/> <onstage atsec="6.15" transition="tweenbasic" parameter="Strong.easeOut,-40,0,0,1,1" delay="0" speed="0.5"/> <exit atsec="8.3" transition="blur" parameter="Strong.easeOut" delay="0" speed="1.1"/>

02. Example Char based Animation, where the chars at the start moves with small delays, and later moves together. The Background seems like always a bit quicker than the text itself. We need two layer for it. On the background layer the text has the same color than the background itself. So it is not to see. (In the Banner Example 4 , first item you can see in live)
<layeritem id="2" typ="char"> <format size="33" color="0x000000" letterspacing="0" textdecoration="none" maximalwidth=""/> <position rotate="0" x="73" y="1 82"></position> <background color="0x000000" cornerradius="8" bordercolor="0xFFFFFF" bordersize="0" alpha="1.0" top="5" left="5" right="1 bottom="-2"></background> 6" <link url="" target=""></link> <animation> <start atsec="1.5" transition="fade" parameter="Bounce.easeOut" delay="0.1" speed="0.2" /> <onstage atsec="1.5" transition="tweenbasic" parameter="Strong.easeOut, 0,0,0,1,1" delay="0.1" speed="0.2"/> <onstage atsec="4.5" transition="tweenbasic" parameter="Back.easeIn, -54,-153,0,1,1" delay="0" speed="0.4"/> <onstage atsec="7.1" transition="tweenbasic" parameter="Back.easeIn, -350,0,0,1,1" delay="0" speed="0.45"/> </animation> - Vincente Minnelli </layeritem>

Live Control V 1.01


Stress - Shows the CPU and Memory Usage.
FPS - Frame per Sec (in Live Control Modus, it is slower 5-10 Frame pro sec because of the editor). Memory - Memory Usage.

Progress
Progress - The act. Time Position of the Banner Item. Duration - The duration - time length of the Banner Item.

Banner
Banner Item - The act. played Banner Item. images/bannerx.jp - The source of the banner item image.

Positions
StageXY - Act. mouse position on the Stage. BannerXY - The Act. X and Y Coordinates on the Banner Item (for better Planing of the Layer Item Positions).

Toolbar
OffsetXY - The Offset Position of the Mouse from the ToolBar Position. (Toolbar is a logical position. All Menu icons are depending on this Parameter).

Messure
Different X, Different Y - Shows the X-Y Pixel Different between the Marked Point and between the actual Mouse Position.

Embeding
Min. Widht & Height - The min. Width and Height of the Flash Item you have to deifne in the HTML Embeding. (depending on Toolbar position you need to increase these values). speed - The Act. playback speed from 0-5.75 x (1 is default speed).

Layers
The Different Layers with their timeline (alive) values. Good to see, when a layer starts, and finnishes its lifetime.

Try to mix different animations, with small delays, maybe more layeritems with same info, to create new, individual effects. There is no limits, and at least you Fantasy is the limit. We will build a website to share / exchange the created layer item transitions, movements between the community.

How to Change the Font types, or change the Embeded charachters


the banner.fla file. CTRL+L to open the Library. 03 Double Click on the temptxt to edit the Font. 04 Swap to the Stage and click on the txt Dynamic Text. 05 Select any Font Typ to change the Font Typ. 06 Click on Embed Character Options to open the Character Embedding dialog box, and select any other character sets or type your own charachters and click OK to change the embedded charachtes. 07 Compile the swf file again with CTRL+Enter.
01 Open
02 Press

Please recommend us to your friends if you like our work!


Please do not forget to Rate our Item. We would be ver y happy to see your comments and your Stars .

Вам также может понравиться